Add Go server with POST LDR to Sqlite3 and GET graphs of historic data

2025-06-16 20:58:46 +02:00
parent a780ffc918
commit 7599b3f652
7 changed files with 445 additions and 0 deletions
--- a/server/web/templates/index.html
+++ b/server/web/templates/index.html
@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Chicken Coop LDR Monitor</title>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns"></script>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+            background-color: #f5f5f5;
+        }
+        .container {
+            background-color: white;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        .controls {
+            margin-bottom: 20px;
+        }
+        select {
+            padding: 8px;
+            font-size: 16px;
+            border-radius: 4px;
+            border: 1px solid #ddd;
+        }
+        canvas {
+            width: 100% !important;
+            height: 400px !important;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Chicken Coop LDR Monitor</h1>
+        <div class="controls">
+            <select id="timeRange" onchange="updateChart()">
+                <option value="day">Last 24 Hours</option>
+                <option value="week">Last Week</option>
+                <option value="month">Last Month</option>
+                <option value="all">All Time</option>
+            </select>
+        </div>
+        <canvas id="ldrChart"></canvas>
+    </div>
+
+    <script>
+        let chart = null;
+
+        function formatDate(dateStr) {
+            const date = new Date(dateStr);
+            return date.toLocaleString();
+        }
+
+        async function fetchData(period) {
+            const response = await fetch(`/api/readings?period=${period}`);
+            const data = await response.json();
+            return data.map(item => ({
+                x: new Date(item.timestamp),
+                y: item.value
+            }));
+        }
+
+        async function updateChart() {
+            const period = document.getElementById('timeRange').value;
+            const data = await fetchData(period);
+
+            if (chart) {
+                chart.destroy();
+            }
+
+            const ctx = document.getElementById('ldrChart').getContext('2d');
+            chart = new Chart(ctx, {
+                type: 'line',
+                data: {
+                    datasets: [{
+                        label: 'LDR Value',
+                        data: data,
+                        borderColor: 'rgb(75, 192, 192)',
+                        tension: 0.1,
+                        fill: false
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    scales: {
+                        x: {
+                            type: 'time',
+                            time: {
+                                unit: period === 'day' ? 'hour' : 'day',
+                                displayFormats: {
+                                    hour: 'MMM d, HH:mm',
+                                    day: 'MMM d'
+                                }
+                            },
+                            title: {
+                                display: true,
+                                text: 'Time'
+                            }
+                        },
+                        y: {
+                            title: {
+                                display: true,
+                                text: 'LDR Value'
+                            }
+                        }
+                    }
+                }
+            });
+        }
+
+        // Initial load
+        updateChart();
+
+        // Update every 5 minutes
+        setInterval(updateChart, 5 * 60 * 1000);
+    </script>
+</body>
+</html>