// FieldAnalysis PWA — production build
// States: INIT → RUNNING → READY (or REJECTED terminal)
// Real API call replaces the design-preview mock progression.
const { useState, useEffect, useRef } = React;
// ─────────────────────────────────────────────────────────────────────────────
// Klearpath logo (uses bundled PNG; falls back to wordmark if missing)
// ─────────────────────────────────────────────────────────────────────────────
function Logo({ height = 28, dark = false }) {
const [err, setErr] = useState(false);
if (err) {
return (
KLEARPATH
);
}
return (
setErr(true)}
style={{
height, width: 'auto', display: 'block',
filter: dark ? 'brightness(0) invert(1)' : 'none',
}}
/>
);
}
// ─────────────────────────────────────────────────────────────────────────────
// Inline SVG icons (no external deps — PWA must work offline)
// ─────────────────────────────────────────────────────────────────────────────
const Icon = {
spinner: (size = 28) => (
),
shield: (size = 32) => (
),
alert: (size = 40) => (
),
download: (size = 22) => (
),
chart: (size = 22) => (
),
residuals: (size = 22) => (
),
back: (size = 22) => (
),
check: (size = 64) => (
),
};
// ─────────────────────────────────────────────────────────────────────────────
// Shared chrome
// ─────────────────────────────────────────────────────────────────────────────
function AppHeader({ T }) {
return (
);
}
// ─────────────────────────────────────────────────────────────────────────────
// State: INIT — "Awaiting valid request…"
// ─────────────────────────────────────────────────────────────────────────────
function StateInit({ T }) {
return (
<>
{Icon.spinner(48)}
Awaiting valid request…
Request analysis via Form Action → Analyze Data.
);
}
// ─────────────────────────────────────────────────────────────────────────────
// State: RUNNING — "Computing analysis…" (≥1.5s minimum)
// ─────────────────────────────────────────────────────────────────────────────
function StateRunning({ T }) {
return (
<>
{Icon.spinner(56)}
Computing analysis…
Fitting the compaction curve and computing residuals from your test data.
- ✓ Reference method loaded
- ✓ Test points validated
-
Fitting curve · generating charts
);
}
// ─────────────────────────────────────────────────────────────────────────────
// State: REJECTED — terminal, generic, no diagnostic info, no retry
// ─────────────────────────────────────────────────────────────────────────────
function StateRejected({ T }) {
return (
<>
{Icon.alert(56)}
This link is invalid or expired.
You can close this page and return to your form.
);
}
// ─────────────────────────────────────────────────────────────────────────────
// State: READY — thumbnails + 3 buttons + footer
// curveSrc / residSrc are data: URLs from the API response.
// ─────────────────────────────────────────────────────────────────────────────
function StateReady({ T, payload, simulateShare, curveSrc, residSrc, savedCurve, savedResid, onSaveCurve, onSaveResid }) {
const curveImg = curveSrc || 'assets/curve.png';
const residImg = residSrc || 'assets/residuals.png';
const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
const [returning, setReturning] = useState(false);
const [toast, setToast] = useState(null);
const showToast = (msg) => {
setToast(msg);
setTimeout(() => setToast(null), 2200);
};
const handleShare = async (kind, srcPath, filename, onDone) => {
// On mobile: use Web Share API so the image lands in Photos.
// On desktop: skip the share sheet and trigger a direct file download.
try {
if (simulateShare) {
await new Promise(r => setTimeout(r, 500));
onDone();
showToast(isMobile ? `${kind} saved to Photos` : `${kind} downloaded`);
return;
}
const res = await fetch(srcPath);
const blob = await res.blob();
if (isMobile) {
const file = new File([blob], filename, { type: 'image/png' });
if (navigator.canShare && navigator.canShare({ files: [file] })) {
await navigator.share({ files: [file], title: kind });
onDone();
showToast(`${kind} saved to Photos`);
return;
}
}
// Desktop (or mobile without share API): direct download
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url; a.download = filename;
document.body.appendChild(a); a.click(); a.remove();
URL.revokeObjectURL(url);
onDone();
showToast(`${kind} downloaded`);
} catch (e) {
// Share dismissed by user — silently no-op
}
};
const handleReturn = () => {
setReturning(true);
setTimeout(() => {
// On iOS/Android, use the mobile deep link to open the GoFormz app.
// On desktop/other, use the standard web URL as-is.
const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
const url = isMobile
? payload.returnUrl.replace(
'https://app.goformz.com/forms/',
'https://mobilelink.goformz.com/open/goformz/form/'
)
: payload.returnUrl;
window.location = url;
}, 250);
};
return (
<>
Analysis complete
Save Charts and Analysis Results
{isMobile
? 'Save both images to your Photos. Then upload them to your form.'
: 'Download both images. Then upload them to your form.'}
handleShare('Overlay', curveImg, 'ProctorCurveFieldPointOverlayImage.png', onSaveCurve)}
>
{savedCurve ? Icon.check(20) : Icon.download(20)}
{savedCurve
? (isMobile ? 'Overlay saved to Photos' : 'Overlay downloaded')
: (isMobile ? 'Save Proctor Curve - Field Point Overlay to Photos' : 'Download Proctor Curve - Field Point Overlay')}
handleShare('Residuals', residImg, 'ProctorResidualsImage.png', onSaveResid)}
>
{savedResid ? Icon.check(20) : Icon.download(20)}
{savedResid
? (isMobile ? 'Residuals saved to Photos' : 'Residuals downloaded')
: (isMobile ? 'Save Proctor Curve - Residuals to Photos' : 'Download Proctor Curve - Residuals')}
{returning ? 'Returning…' : 'Send Analysis to Form'}
{toast && (
{toast}
)}
);
}
// ─────────────────────────────────────────────────────────────────────────────
// Pieces
// ─────────────────────────────────────────────────────────────────────────────
function Thumbnail({ T, src, label, sub, icon, saved }) {
return (
{saved && (
{Icon.check(18)}
)}
{icon}
);
}
function BigButton({ T, tone, onClick, children, disabled, done }) {
const isPrimary = tone === 'primary';
const bg = isPrimary
? (done ? T.success : T.accent)
: (done ? (T.name === 'dark' ? T.surfaceAlt : '#E6F0E0') : T.surface);
const ink = isPrimary ? T.accentInk : (done ? T.success : T.text);
const border = isPrimary
? (done ? T.success : T.accent)
: (done ? T.success : T.borderStrong);
return (
);
}
function Footer({ T, payload }) {
return (
);
}
// ─────────────────────────────────────────────────────────────────────────────
// Style helpers
// ─────────────────────────────────────────────────────────────────────────────
const mainCol = (T) => ({
flex: 1, minHeight: 0,
display: 'flex', flexDirection: 'column',
alignItems: 'center', justifyContent: 'center',
padding: '32px 28px', textAlign: 'center', gap: 4,
color: T.text,
});
const h1 = (T) => ({
margin: 0, fontSize: 22, fontWeight: 700, letterSpacing: '-0.01em',
color: T.text, lineHeight: 1.2,
});
const p = (T) => ({
margin: '8px 0 0', fontSize: 15, lineHeight: 1.5, color: T.textMuted,
maxWidth: 360,
});
const runRow = (T, done) => ({
display: 'flex', alignItems: 'center', gap: 4,
color: done ? T.success : T.textMuted,
});
// ─────────────────────────────────────────────────────────────────────────────
// Root — production entry point
// Reads query params → POST /api/analyze → drives state machine → renders UI
// ─────────────────────────────────────────────────────────────────────────────
function Root() {
const [state, setState] = useState('INIT');
const [apiData, setApiData] = useState(null);
const [savedCurve, setSavedCurve] = useState(false);
const [savedResid, setSavedResid] = useState(false);
const T = FA_SCHEMES.light;
useEffect(() => {
const params = Object.fromEntries(new URLSearchParams(window.location.search));
const MIN_RUNNING_MS = 1500;
const startMs = Date.now();
// Switch to RUNNING immediately so the user sees deliberate activity
setState('RUNNING');
fetch('/api/analyze', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(params),
})
.then(r => {
if (!r.ok) throw new Error('rejected');
return r.json();
})
.then(data => {
if (!data.ok) throw new Error('rejected');
const elapsed = Date.now() - startMs;
const remaining = Math.max(0, MIN_RUNNING_MS - elapsed);
setApiData(data);
setTimeout(() => setState('READY'), remaining);
})
.catch(() => setState('REJECTED'));
}, []);
const payload = apiData ? {
analysisId: apiData.result.analysisId,
methodVersion: apiData.result.analysisMethodVersionReturned,
sourceForm: `Form ID: ${apiData.result.formId}`,
timestamp: apiData.result.timestamp,
returnUrl: apiData.returnUrl,
} : null;
const curveSrc = apiData ? `data:image/png;base64,${apiData.overlayPngBase64}` : null;
const residSrc = apiData ? `data:image/png;base64,${apiData.residualsPngBase64}` : null;
return (
{state === 'INIT' && }
{state === 'REJECTED' && }
{state === 'RUNNING' && }
{state === 'READY' && payload && (
setSavedCurve(true)}
onSaveResid={() => setSavedResid(true)}
/>
)}
);
}
ReactDOM.createRoot(document.getElementById('root')).render();