\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}",[],[237],{"_109":245,"_100":246,"_168":247,"_170":-5,"_171":153,"_172":248,"_174":175,"_111":249,"_105":221,"_178":222,"_180":250,"_181":22,"_182":-5,"_183":251,"_103":252},"88bccde8-1263-11f1-88af-42dde27851f2","main.ts","60c307fa-0d84-11f1-9715-42dde27851f2",31,["D",1772035413014],"// @ts-ignore — npm: specifier resolved by Val Town's Deno runtime\nimport { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\n\nconst ACCESS_KEY = \"b31c58a5-75b8-4b93-9e4a-51cf5204cf24\";\n\nexport default async function (req) {\n // Only accept POST\n if (req.method !== \"POST\") {\n return Response.json({ error: \"Method not allowed\" }, { status: 405 });\n }\n\n let body;\n try {\n body = await req.json();\n } catch {\n return Response.json({ error: \"Invalid JSON body\" }, { status: 400 });\n }\n\n console.log(body);\n\n const { access_key, port, temperature, humidity } = body;\n\n // Validate access key\n if (access_key !== ACCESS_KEY) {\n return Response.json({ error: \"Unauthorized\" }, { status: 401 });\n }\n\n // Validate required fields\n if (!port || temperature == null || humidity == null) {\n return Response.json(\n { error: \"Missing required fields: port, temperature, humidity\" },\n { status: 400 },\n );\n }\n\n // ── Table creation (runs on every cold start) ──────────────────────────────\n\n // Sensors lookup table\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS sensors (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL,\n port TEXT NOT NULL UNIQUE,\n created_at TEXT NOT NULL DEFAULT (datetime('now'))\n )\n `);\n\n // Sensor readings table (original schema, kept for cold-start idempotency)\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS sensor_readings (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n port TEXT NOT NULL,\n temperature REAL NOT NULL,\n humidity REAL NOT NULL,\n recorded_at TEXT NOT NULL DEFAULT (datetime('now'))\n )\n `);\n\n // ── One-time migration: add sensor_id column if not present ────────────────\n const tableInfo = await sqlite.execute(`PRAGMA table_info(sensor_readings)`);\n const columns = tableInfo.rows.map((r: unknown[]) => r[1]); // column index 1 = name\n\n if (!columns.includes(\"sensor_id\")) {\n // Back-fill sensors from distinct ports already in the table\n await sqlite.execute(`\n INSERT OR IGNORE INTO sensors (name, port)\n SELECT DISTINCT port, port FROM sensor_readings\n `);\n // Add sensor_id column\n await sqlite.execute(\n `ALTER TABLE sensor_readings ADD COLUMN sensor_id INTEGER`,\n );\n // Back-fill sensor_id on existing rows\n await sqlite.execute(`\n UPDATE sensor_readings\n SET sensor_id = (SELECT id FROM sensors WHERE port = sensor_readings.port)\n `);\n }\n\n // ── Upsert sensor and resolve its id ──────────────────────────────────────\n await sqlite.execute(\n `INSERT OR IGNORE INTO sensors (name, port) VALUES (?, ?)`,\n [port, port],\n );\n const sensorRow = await sqlite.execute(\n `SELECT id FROM sensors WHERE port = ?`,\n [port],\n );\n const sensor_id = sensorRow.rows[0][0];\n\n // ── Insert reading ─────────────────────────────────────────────────────────\n await sqlite.execute(\n `INSERT INTO sensor_readings (sensor_id, port, temperature, humidity)\n VALUES (?, ?, ?, ?)`,\n [sensor_id, port, temperature, humidity],\n );\n\n return Response.json({ ok: true }, { status: 201 });\n}",[],[246],{"_109":254,"_100":104,"_168":255,"_170":-5,"_171":153,"_172":256,"_174":22,"_111":257,"_105":191,"_178":222,"_180":258,"_181":22,"_182":-5,"_183":259,"_103":260},"6bd0a1f4-1273-11f1-becf-42dde27851f2","63355eea-1273-11f1-9e24-42dde27851f2",56,["D",1772042236236],"/** @jsxImportSource https://esm.sh/react */\nimport React, { useEffect, useState } from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\n\nconst BASE_URL =\n \"https://nmsilva--70f64edc0e8a11f1840f42dde27851f2.web.val.run\";\nconst SENSORS_URL = \"https://nmsilva--.web.val.run\";\n\ntype Sensor = {\n id: number;\n name: string;\n port: string;\n created_at: string;\n};\n\nfunction formatDate(created_at: string) {\n const d = new Date(created_at + \"Z\");\n return d.toLocaleDateString([], {\n day: \"numeric\",\n month: \"short\",\n year: \"numeric\",\n });\n}\n\nfunction App() {\n const sensorId = new URLSearchParams(window.location.search).get(\"sensorId\");\n\n const [sensor, setSensor] = useState(null);\n const [loadError, setLoadError] = useState(null);\n\n // Edit form state\n const [editName, setEditName] = useState(\"\");\n const [editKey, setEditKey] = useState(\"\");\n const [saving, setSaving] = useState(false);\n const [saveError, setSaveError] = useState(null);\n const [saveSuccess, setSaveSuccess] = useState(false);\n\n // Delete section state\n const [deleteKey, setDeleteKey] = useState(\"\");\n const [deleting, setDeleting] = useState(false);\n const [deleteError, setDeleteError] = 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) => {\n setSensor(data);\n setEditName(data.name);\n setLoadError(null);\n })\n .catch((e) => setLoadError(String(e)));\n }, [sensorId]);\n\n async function handleSave() {\n setSaving(true);\n setSaveError(null);\n try {\n const res = await fetch(`${BASE_URL}/sensors/${sensorId}`, {\n method: \"PATCH\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ access_key: editKey, name: editName }),\n });\n const data = await res.json();\n if (!res.ok) throw new Error(data.error ?? `HTTP ${res.status}`);\n setSensor(data);\n setSaveSuccess(true);\n setTimeout(() => setSaveSuccess(false), 3000);\n } catch (e: any) {\n setSaveError(e.message);\n } finally {\n setSaving(false);\n }\n }\n\n async function handleDelete() {\n setDeleting(true);\n setDeleteError(null);\n try {\n const res = await fetch(`${BASE_URL}/sensors/${sensorId}`, {\n method: \"DELETE\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ access_key: deleteKey }),\n });\n const data = await res.json();\n if (!res.ok) throw new Error(data.error ?? `HTTP ${res.status}`);\n window.location.href = SENSORS_URL;\n } catch (e: any) {\n setDeleteError(e.message);\n setDeleting(false);\n }\n }\n\n if (!sensorId) {\n return (\n

\n Missing sensorId query parameter.\n

\n \n ← Back to Sensors\n \n

\n );\n }\n\n return (\n

\n {/* Back link */}\n \n ← Back to Sensors\n \n\n {/* Loading state */}\n {!sensor && !loadError && (\n

Loading…

\n )}\n\n {/* Load error */}\n {loadError && (\n

\n ❌ {loadError}\n

\n )}\n\n {sensor && (\n <>\n {/* Header */}\n

\n {sensor.name}\n

\n \n {sensor.port}\n \n \n registered {formatDate(sensor.created_at)}\n \n

\n\n {/* Edit section */}\n

\n \n Edit sensor\n \n\n

\n Name\n setEditName(e.target.value)}\n className=\"w-full rounded-lg bg-gray-900 border border-gray-600 text-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500\"\n />\n

\n\n

\n Access key\n setEditKey(e.target.value)}\n placeholder=\"••••••••\"\n className=\"w-full rounded-lg bg-gray-900 border border-gray-600 text-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500\"\n />\n

\n\n {saveSuccess && (\n

\n ✓ Saved!\n

\n )}\n {saveError && (\n

\n ❌ {saveError}\n

\n )}\n\n \n {saving ? \"Saving…\" : \"Save changes\"}\n \n

\n\n {/* Delete section */}\n

\n \n Danger zone\n \n

\n Deletes the sensor and all its readings. This cannot be undone.\n

\n\n

\n Access key\n setDeleteKey(e.target.value)}\n placeholder=\"••••••••\"\n className=\"w-full rounded-lg bg-gray-900 border border-gray-600 text-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-red-500\"\n />\n

\n\n {deleteError && (\n

\n ❌ {deleteError}\n

\n )}\n\n \n {deleting ? \"Deleting…\" : \"Delete sensor\"}\n \n

\n \n )}\n

\n \n \n \n \n `,\n { headers: { \"Content-Type\": \"text/html\" } },\n );\n}",[],[104],{"_109":262,"_100":263,"_168":264,"_170":-5,"_171":153,"_172":265,"_174":22,"_111":266,"_105":221,"_178":222,"_180":267,"_181":22,"_182":-5,"_183":268,"_103":269},"74eaf186-1273-11f1-a590-42dde27851f2","sensors.tsx","7cb0ad98-1269-11f1-9769-42dde27851f2",57,["D",1772042251602],"/** @jsxImportSource https://esm.sh/react */\nimport React, { useCallback, useEffect, useState } from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\n\nconst BASE_URL =\n \"https://nmsilva--70f64edc0e8a11f1840f42dde27851f2.web.val.run\";\nconst DASHBOARD_URL =\n \"https://nmsilva--915ee1020e8a11f1964f42dde27851f2.web.val.run\";\nconst SENSOR_EDIT_URL = \"https://nmsilva--.web.val.run\";\nconst POLL_INTERVAL_MS = 60_000;\n\ntype Sensor = {\n id: number;\n name: string;\n port: string;\n created_at: string;\n};\n\nfunction formatDate(created_at: string) {\n const d = new Date(created_at + \"Z\");\n return d.toLocaleDateString([], {\n day: \"numeric\",\n month: \"short\",\n year: \"numeric\",\n });\n}\n\nfunction SensorCard({ sensor }: { sensor: Sensor }) {\n return (\n

\n {sensor.name}\n

\n \n {sensor.port}\n \n \n registered {formatDate(sensor.created_at)}\n \n

\n \n Edit\n \n \n View Dashboard →\n \n

\n );\n}\n\nfunction App() {\n const [sensors, setSensors] = useState(null);\n const [lastUpdated, setLastUpdated] = useState(null);\n const [error, setError] = useState(null);\n\n const fetchSensors = useCallback(async () => {\n try {\n const res = await fetch(`${BASE_URL}/sensors`);\n if (!res.ok) throw new Error(`HTTP ${res.status}`);\n const data: Sensor[] = await res.json();\n setSensors(data);\n setLastUpdated(new Date());\n setError(null);\n } catch (e: any) {\n setError(e.message);\n }\n }, []);\n\n useEffect(() => {\n fetchSensors();\n const id = setInterval(fetchSensors, POLL_INTERVAL_MS);\n return () => clearInterval(id);\n }, [fetchSensors]);\n\n return (\n

\n {/* Header */}\n

ESP32 Sensors

\n {sensors === null\n ? \"Loading…\"\n : `${sensors.length} sensor${\n sensors.length !== 1 ? \"s\" : \"\"\n } registered`}\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 {/* Sensor list */}\n {sensors === null\n ?

Loading…

\n : sensors.length === 0\n ? (\n

\n No sensors registered yet.\n

\n )\n : (\n

\n {sensors.map((s) => )}\n

\n )}\n

\n \n \n \n \n `,\n { headers: { \"Content-Type\": \"text/html\" } },\n );\n}",[],[263],"files",[165,185,197,204,215,226,235,244,253,261],"counts",{"_274":33,"_275":177,"_276":33,"_277":278,"_281":282},"pulls","branches","forks","envVars",{"_279":33,"_280":33},"count","emptyCount","connections",{"_279":33,"_283":33},"unfilledCount","contents",[],"file",{"_109":254,"_100":104,"_168":255,"_170":-5,"_171":153,"_172":256,"_174":22,"_111":288,"_105":191,"_178":222,"_180":258,"_181":22,"_182":-5,"_103":289},["D",1772042236236],[104],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_98":99,"_100":101,"_102":46,"_105":106,"_103":104,"_107":298,"_163":304,"_270":345,"_286":346,"_284":349,"_350":-5,"_351":-5,"_352":-5,"_353":-5,"_354":355,"_277":-5},{"_109":110,"_100":101,"_111":299,"_113":-5,"_114":22,"_115":116,"_117":-5,"_118":-5,"_14":119,"_120":-5,"_121":22,"_122":-5,"_123":-5,"_124":33,"_16":125,"_126":127,"_128":129,"_130":300,"_132":-5,"_133":134,"_135":134,"_136":137,"_138":137,"_139":137,"_140":134,"_141":134,"_23":301,"_145":302,"_150":303,"_162":22},["D",1771499763519],["D",1775518291998],{"_98":99,"_143":144},{"_98":99,"_147":144,"_14":119,"_148":149},{"_105":152,"_100":46,"_109":153,"_154":110,"_155":-5,"_156":-5,"_157":-5,"_158":-5,"_159":-5,"_160":101,"_161":99},[305,313,321,325,329,333,337,341],{"_109":166,"_100":167,"_168":169,"_170":-5,"_171":153,"_172":173,"_174":175,"_111":306,"_105":177,"_178":179,"_180":-5,"_181":22,"_182":-5,"_183":307,"_103":312},["D",1772036503963],[308],{"_109":186,"_100":187,"_168":188,"_170":169,"_171":153,"_172":189,"_174":175,"_111":309,"_105":191,"_178":192,"_180":193,"_181":22,"_182":-5,"_183":310,"_103":311},["D",1772036640243],[],[167,187],[167],{"_109":198,"_100":199,"_168":200,"_170":-5,"_171":153,"_172":201,"_174":175,"_111":314,"_105":177,"_178":179,"_180":-5,"_181":22,"_182":-5,"_183":315,"_103":320},["D",1772038600206],[316],{"_109":205,"_100":206,"_168":207,"_170":200,"_171":153,"_172":208,"_174":175,"_111":317,"_105":210,"_178":192,"_180":211,"_181":22,"_182":-5,"_183":318,"_103":319},["D",1772038636368],[],[199,206],[199],{"_109":216,"_100":217,"_168":218,"_170":-5,"_171":153,"_172":219,"_174":175,"_111":322,"_105":221,"_178":222,"_180":223,"_181":22,"_182":-5,"_183":323,"_103":324},["D",1772035393325],[],[217],{"_109":227,"_100":228,"_168":229,"_170":-5,"_171":153,"_172":230,"_174":175,"_111":326,"_105":221,"_178":222,"_180":232,"_181":22,"_182":-5,"_183":327,"_103":328},["D",1772031274607],[],[228],{"_109":236,"_100":237,"_168":238,"_170":-5,"_171":153,"_172":106,"_174":22,"_111":330,"_105":240,"_178":222,"_180":241,"_181":22,"_182":-5,"_183":331,"_103":332},["D",1772042262536],[],[237],{"_109":245,"_100":246,"_168":247,"_170":-5,"_171":153,"_172":248,"_174":175,"_111":334,"_105":221,"_178":222,"_180":250,"_181":22,"_182":-5,"_183":335,"_103":336},["D",1772035413014],[],[246],{"_109":254,"_100":104,"_168":255,"_170":-5,"_171":153,"_172":256,"_174":22,"_111":338,"_105":191,"_178":222,"_180":258,"_181":22,"_182":-5,"_183":339,"_103":340},["D",1772042236236],[],[104],{"_109":262,"_100":263,"_168":264,"_170":-5,"_171":153,"_172":265,"_174":22,"_111":342,"_105":221,"_178":222,"_180":267,"_181":22,"_182":-5,"_183":343,"_103":344},["D",1772042251602],[],[263],[305,308,313,316,321,325,329,333,337,341],{"_109":254,"_100":104,"_168":255,"_170":-5,"_171":153,"_172":256,"_174":22,"_111":347,"_105":191,"_178":222,"_180":258,"_181":22,"_182":-5,"_103":348},["D",1772042236236],[104],[],"upstream","pull","ahead","behind","templates",[],"actionData","errors"]

nmsilva

esp32-sensors