server + getting sensor id + json in esp32

2026-09-13 18:14:19 +02:00
parent 98fb81702b
commit e481468a0a
20 changed files with 1133 additions and 4 deletions
@@ -0,0 +1,160 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sensor Readouts</title>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
+    <style>
+        body { font-family: sans-serif; max-width: 800px; margin: 2rem auto; }
+        select, table { width: 100%; margin-top: 0.5rem; }
+        select { padding: 0.4rem; }
+        table { border-collapse: collapse; margin-top: 1rem; }
+        th, td { border: 1px solid #ccc; padding: 0.4rem 0.6rem; text-align: left; }
+        th { background: #f5f5f5; }
+        label { font-weight: bold; }
+        .hidden { display: none; }
+        .chart-box { margin-top: 1rem; }
+    </style>
+</head>
+<body>
+    <h1>Sensor Readouts</h1>
+
+    <div>
+        <label for="sensor-select">Sensor:</label>
+        <select id="sensor-select">
+            <option value="">-- select sensor --</option>
+        </select>
+    </div>
+
+    <div id="type-section" class="hidden">
+        <label for="type-select">Type:</label>
+        <select id="type-select">
+            <option value="">-- select type --</option>
+        </select>
+    </div>
+
+    <div id="chart-section" class="hidden chart-box">
+        <canvas id="chart"></canvas>
+    </div>
+
+    <div id="readouts-section" class="hidden">
+        <table>
+            <thead>
+                <tr>
+                    <th>Timestamp</th>
+                    <th>Value</th>
+                </tr>
+            </thead>
+            <tbody id="readouts-body"></tbody>
+        </table>
+    </div>
+
+    <script>
+        const sensorSelect = document.getElementById('sensor-select');
+        const typeSelect = document.getElementById('type-select');
+        const typeSection = document.getElementById('type-section');
+        const chartSection = document.getElementById('chart-section');
+        const readoutsSection = document.getElementById('readouts-section');
+        const readoutsBody = document.getElementById('readouts-body');
+        let chart = null;
+
+        function formatTimestamp(iso) {
+            const d = new Date(iso);
+            const pad = (n) => String(n).padStart(2, '0');
+            const months = ['Jan','Feb','Mar','Apr','May','Jun',
+                            'Jul','Aug','Sep','Oct','Nov','Dec'];
+            return `${d.getDate()} ${months[d.getMonth()]} ${d.getFullYear()}, ` +
+                   `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
+        }
+
+        async function fetchJSON(url) {
+            const res = await fetch(url);
+            return res.json();
+        }
+
+        async function loadSensors() {
+            const sensors = await fetchJSON('/api/sensors');
+            sensors.forEach(s => {
+                const opt = document.createElement('option');
+                opt.value = s.id;
+                opt.textContent = s.name;
+                sensorSelect.appendChild(opt);
+            });
+        }
+
+        sensorSelect.addEventListener('change', async () => {
+            const sensorId = sensorSelect.value;
+            typeSection.classList.add('hidden');
+            chartSection.classList.add('hidden');
+            readoutsSection.classList.add('hidden');
+            typeSelect.innerHTML = '<option value="">-- select type --</option>';
+            readoutsBody.innerHTML = '';
+
+            if (!sensorId) return;
+
+            const types = await fetchJSON(`/api/sensors/${sensorId}/types`);
+            types.forEach(t => {
+                const opt = document.createElement('option');
+                opt.value = t;
+                opt.textContent = t;
+                typeSelect.appendChild(opt);
+            });
+            typeSection.classList.remove('hidden');
+        });
+
+        typeSelect.addEventListener('change', async () => {
+            const sensorId = sensorSelect.value;
+            const type = typeSelect.value;
+            chartSection.classList.add('hidden');
+            readoutsSection.classList.add('hidden');
+            readoutsBody.innerHTML = '';
+
+            if (!type) return;
+
+            // fetch hourly data for chart
+            const hourly = await fetchJSON(`/api/sensors/${sensorId}/readouts/hourly?type=${type}`);
+            const labels = hourly.map(r => r.timestamp.replace('T', ' '));
+            const values = hourly.map(r => r.value);
+
+            if (chart) chart.destroy();
+            const ctx = document.getElementById('chart').getContext('2d');
+            chart = new Chart(ctx, {
+                type: 'line',
+                data: {
+                    labels: labels,
+                    datasets: [{
+                        label: type,
+                        data: values,
+                        borderColor: '#2563eb',
+                        backgroundColor: 'rgba(37,99,235,0.1)',
+                        fill: true,
+                        tension: 0.3,
+                        pointRadius: 2,
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    plugins: { legend: { display: false } },
+                    scales: {
+                        x: { title: { display: true, text: 'Time (hourly avg)' } },
+                        y: { title: { display: true, text: type } }
+                    }
+                }
+            });
+            chartSection.classList.remove('hidden');
+
+            // fetch raw readouts for table
+            const readouts = await fetchJSON(`/api/sensors/${sensorId}/readouts?type=${type}`);
+            readouts.forEach(r => {
+                const tr = document.createElement('tr');
+                tr.innerHTML = `<td>${formatTimestamp(r.timestamp)}</td><td>${r.value}</td>`;
+                readoutsBody.appendChild(tr);
+            });
+            readoutsSection.classList.remove('hidden');
+        });
+
+        loadSensors();
+    </script>
+</body>
+</html>