\n \n {label}\n \n \n {value != null ? value.toFixed(1) : \"—\"}\n {unit}\n \n

\n );\n}\n\nfunction App() {\n const sensorId = new URLSearchParams(window.location.search).get(\"sensorId\");\n\n const [sensorName, setSensorName] = useState(null);\n const [readings, setReadings] = useState([]);\n const [lastUpdated, setLastUpdated] = useState(null);\n const [error, setError] = useState(null);\n\n useEffect(() => {\n if (!sensorId) return;\n fetch(`${BASE_URL}/sensors/${sensorId}`)\n .then((r) => (r.ok ? r.json() : Promise.reject(`HTTP ${r.status}`)))\n .then((data) => setSensorName(data.name ?? data.port ?? null))\n .catch((e) => setError(String(e)));\n }, [sensorId]);\n\n const fetchData = useCallback(async () => {\n if (!sensorId) return;\n try {\n const res = await fetch(`${BASE_URL}/sensors/${sensorId}/readings`);\n if (!res.ok) throw new Error(`HTTP ${res.status}`);\n const data = await res.json();\n\n // Normalise: val town sqlite returns { columns, rows } or plain array\n let rows: any[] = [];\n if (Array.isArray(data)) {\n rows = data;\n } else if (data.rows) {\n // { columns: [...], rows: [[...], ...] }\n rows = data.rows;\n }\n\n // Sort ascending by recorded_at, keep last 50 points\n rows.sort((a, b) => a.recorded_at?.localeCompare(b.recorded_at));\n setReadings(rows.slice(-50));\n setLastUpdated(new Date());\n setError(null);\n } catch (e: any) {\n setError(e.message);\n }\n }, [sensorId]);\n\n useEffect(() => {\n fetchData();\n const id = setInterval(fetchData, POLL_INTERVAL_MS);\n return () => clearInterval(id);\n }, [fetchData]);\n\n if (!sensorId) {\n return (\n

\n Missing sensorId query parameter.\n

\n );\n }\n\n const latest = readings.at(-1);\n\n const chartData = readings.map((r) => ({\n time: formatTime(r.recorded_at),\n temperature: Number(r.temperature),\n humidity: Number(r.humidity),\n }));\n\n console.log({ chartData, readings });\n\n return (\n

\n {/* Back link */}\n \n ← Back to Sensors\n \n\n {/* Header */}\n

\n ESP32 Sensor Dashboard\n

\n {sensorName ?? latest?.port ?? \"—\"} · auto-refresh every{\" \"}\n {POLL_INTERVAL_MS / 1000}s\n

\n {lastUpdated\n ? (\n <>\n Last updated\n
\n {lastUpdated.toLocaleTimeString()}\n \n )\n : (\n \"Loading…\"\n )}\n

\n\n {/* Error banner */}\n {error && (\n

\n ❌ {error}\n

\n )}\n\n {/* Stat cards */}\n

\n \n \n

\n \n Readings\n \n \n {readings.length}\n \n

\n\n {/* Chart */}\n

\n History\n

\n {readings.length === 0\n ? (\n

\n No data yet…\n

\n )\n : (\n \n \n \n \n \n \n \n \n \n \n \n \n )}\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n return new Response(\n `\n \n \n ESP32 Sensor Dashboard\n \n \n \n \n

\n \n \n \n \n `,\n { headers: { \"Content-Type\": \"text/html\" } },\n );\n}","deleted","label",[182,163],"web","permalink","https://www.val.town/x/nmsilva/esp32-sensors/code/web/dashboard.tsx","extension","actionData","errors"]