retro css

server/templates/sensors.html

@@ -14,6 +14,7 @@
         <a href="{{ url_for('home') }}">Home</a>
         <a href="{{ url_for('api_docs') }}">API</a>
         <a href="{{ url_for('logout') }}">Log out</a>
+        <img class="nav-logo" src="{{ url_for('static', filename='yggdrasil-logo.png') }}" alt="Yggdrasil logo">
     </nav>
     <h1>Sensor Readouts</h1>
 
@@ -40,6 +41,9 @@
             <option value="month">Month</option>
             <option value="all" selected>All</option>
         </select>
+        <label id="avg-label" class="hidden">
+            <input type="checkbox" id="avg-checkbox"> hourly average
+        </label>
         <button id="refresh-button" type="button">[ Refresh ]</button>
     </div>
 
@@ -77,6 +81,8 @@
         const readoutsSection = document.getElementById('readouts-section');
         const readoutsBody = document.getElementById('readouts-body');
         const chartInfo = document.getElementById('chart-info');
+        const avgCheckbox = document.getElementById('avg-checkbox');
+        const avgLabel = document.getElementById('avg-label');
         let chart = null;
 
         // Strefa czasowa przeglądarki — backend liczy "today" od północy
@@ -97,20 +103,35 @@
             return d.toLocaleString('pl-PL', { timeZone: userTz });
         }
 
-        function formatChartLabel(iso) {
+        function formatChartLabel(iso, timeOnly) {
             const d = new Date(iso + 'Z');
-            return d.toLocaleString('pl-PL', { timeZone: userTz, hour: '2-digit', minute: '2-digit', day: '2-digit', month: '2-digit', year: 'numeric' });
+            if (timeOnly) {
+                return d.toLocaleString('pl-PL', { timeZone: userTz, hour: '2-digit', minute: '2-digit' });
+            }
+            return d.toLocaleString('pl-PL', { timeZone: userTz, day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit' });
         }
 
-        function chartInfoText(range) {
-            if (range === 'today') return `Raw measurements since local midnight (${userTz}) — no averaging.`;
-            if (range === '24h') return 'Raw measurements from the last 24 hours — no averaging.';
-            const period = range === 'week' ? 'the last 7 days'
+        function chartInfoText(range, averaged) {
+            if (!averaged) {
+                if (range === 'today') return `Raw measurements since local midnight (${userTz}) — no averaging.`;
+                return 'Raw measurements from the last 24 hours — no averaging.';
+            }
+            const period = range === 'today' ? 'today (since local midnight)'
+                : range === '24h' ? 'the last 24 hours'
+                : range === 'week' ? 'the last 7 days'
                 : range === 'month' ? 'the last 30 days'
                 : 'all stored data';
             return `Hourly averages over ${period} — each point is the mean of all measurements in that local hour (${userTz}).`;
         }
 
+        function isRawRange(range) {
+            return range === 'today' || range === '24h';
+        }
+
+        function updateAvgVisibility() {
+            avgLabel.classList.toggle('hidden', !isRawRange(rangeSelect.value));
+        }
+
         // Ciśnienie jest składowane w bazie w paskalach (tak wysyła firmware),
         // a wyświetlane w hektopaskalach z jednym miejscem po przecinku.
         function displayValue(type, value) {
@@ -176,14 +197,16 @@
 
             try {
                 // fetch hourly data for chart
-                const hourly = await fetchJSON(`/api/sensors/${sensorId}/readouts/hourly?type=${encodeURIComponent(type)}&range=${encodeURIComponent(range)}&tz=${encodeURIComponent(userTz)}`);
+                const averaged = !isRawRange(range) || avgCheckbox.checked;
+                const hourly = await fetchJSON(`/api/sensors/${sensorId}/readouts/hourly?type=${encodeURIComponent(type)}&range=${encodeURIComponent(range)}&tz=${encodeURIComponent(userTz)}&avg=${averaged ? '1' : '0'}`);
                 if (!hourly.length) throw new Error('no data for this range');
 
-                const labels = hourly.map(r => formatChartLabel(r.timestamp));
+                // Surowe punkty today/24h (~1/min) — mniejsze markery,
+                // żeby wykres był czytelny. W obrębie doby na osi X
+                // wystarczy sama godzina (też po uśrednieniu).
+                const dense = !averaged;
+                const labels = hourly.map(r => formatChartLabel(r.timestamp, isRawRange(range)));
                 const values = hourly.map(r => displayValue(type, r.value));
-                // Przy zakresach today/24h punktów jest dużo (~1/min),
-                // więc mniejsze markery żeby wykres był czytelny.
-                const dense = range === 'today' || range === '24h';
 
                 if (chart) chart.destroy();
                 const ctx = document.getElementById('chart').getContext('2d');
@@ -216,7 +239,7 @@
                 // The chart was created while the container was hidden,
                 // so force a re-measure now that it is visible.
                 chart.resize();
-                chartInfo.textContent = '> ' + chartInfoText(range);
+                chartInfo.textContent = '> ' + chartInfoText(range, averaged);
             } catch (err) {
                 chartError.textContent = '! Chart error: ' + err.message;
                 chartError.classList.remove('hidden');
@@ -265,8 +288,14 @@
             }
         });
 
-        rangeSelect.addEventListener('change', loadChart);
+        rangeSelect.addEventListener('change', () => {
+            updateAvgVisibility();
+            loadChart();
+        });
 
+        avgCheckbox.addEventListener('change', loadChart);
+
+        updateAvgVisibility();
         loadSensors();
     </script>
 </body>