init commit

2025-10-26 17:24:37 +02:00
commit 9e94e93f12
9 changed files with 605 additions and 0 deletions
--- a/templates/graphs.html
+++ b/templates/graphs.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="uk">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Графіки температур - Raspberry Pi</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <style>
+        .chart-container {
+            height: 400px;
+            margin-bottom: 30px;
+        }
+    </style>
+</head>
+<body class="bg-light">
+    <div class="container py-4">
+        <div class="d-flex justify-content-between align-items-center mb-4">
+            <h2 class="mb-0">Графіки температур за останні 30 хвилин</h2>
+            <a href="/" class="btn btn-outline-primary">← Повернутися до моніторингу</a>
+        </div>
+
+        <div class="row">
+            {% for device in devices %}
+            <div class="col-12 mb-4">
+                <div class="card">
+                    <div class="card-body">
+                        <h5 class="card-title">{{ device.hostname }} ({{ device.host }})</h5>
+                        <div class="chart-container">
+                            <canvas id="chart-{{ loop.index }}"></canvas>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            {% endfor %}
+        </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <script>
+        function createChart(elementId, data, hostname) {
+            const ctx = document.getElementById(elementId).getContext('2d');
+            new Chart(ctx, {
+                type: 'line',
+                data: {
+                    labels: data.timestamps,
+                    datasets: [{
+                        label: 'GPU Temperature',
+                        data: data.gpu,
+                        borderColor: '#FF6B6B',
+                        tension: 0.1
+                    }, {
+                        label: 'CPU Temperature',
+                        data: data.cpu,
+                        borderColor: '#4ECDC4',
+                        tension: 0.1
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    scales: {
+                        y: {
+                            beginAtZero: true,
+                            title: {
+                                display: true,
+                                text: 'Temperature (°C)'
+                            }
+                        }
+                    },
+                    plugins: {
+                        title: {
+                            display: true,
+                            text: hostname
+                        }
+                    }
+                }
+            });
+        }
+
+        {% for device in devices %}
+            createChart(
+                'chart-{{ loop.index }}',
+                {{ device.history | tojson }},
+                '{{ device.hostname }}'
+            );
+        {% endfor %}
+    </script>
+</body>
+</html>