yggdrasil/server/templates/sensors.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sensor Readouts — Yggdrasil</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="{{ url_for('static', filename='retro.css') }}">
</head>
<body>
    <nav>
        <a href="{{ url_for('home') }}">Home</a>
        <a href="{{ url_for('notes_page') }}">Notes</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>

    <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="range-section" class="hidden">
        <label for="range-select">Range:</label>
        <select id="range-select">
            <option value="today">Today</option>
            <option value="24h">Last 24h</option>
            <option value="week">Week</option>
            <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>

    <div id="chart-section" class="hidden chart-box">
        <canvas id="chart"></canvas>
        <p id="chart-info" class="desc"></p>
        <p id="chart-error" class="error hidden"></p>
    </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>

    <footer class="statusbar">
        <span>{{ user.username }}@yggdrasil:~/sensors$</span>
    </footer>

    <script>
        const sensorSelect = document.getElementById('sensor-select');
        const typeSelect = document.getElementById('type-select');
        const typeSection = document.getElementById('type-section');
        const rangeSelect = document.getElementById('range-select');
        const rangeSection = document.getElementById('range-section');
        const chartSection = document.getElementById('chart-section');
        const chartError = document.getElementById('chart-error');
        const refreshButton = document.getElementById('refresh-button');
        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
        // w tej strefie (np. Europe/Warsaw = GMT+2 latem).
        const userTz = Intl.DateTimeFormat().resolvedOptions().timeZone || 'Europe/Warsaw';

        // The page must keep working (dropdown + table) even if the
        // Chart.js CDN is unreachable — the chart is then simply skipped.
        if (window.Chart) {
            Chart.defaults.color = '#d7d7d7';
            Chart.defaults.borderColor = 'rgba(215,215,215,0.18)';
            Chart.defaults.font.family = "'VT323', 'Courier New', monospace";
            Chart.defaults.font.size = 20;
        }

        function formatTimestamp(iso) {
            const d = new Date(iso);
            return d.toLocaleString('pl-PL', { timeZone: userTz });
        }

        function formatChartLabel(iso, timeOnly) {
            const d = new Date(iso + 'Z');
            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, 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) {
            if (type === 'pressure') return Math.round(value / 10) / 10;
            return value;
        }

        function formatTableValue(type, value) {
            if (type === 'pressure') return (value / 100).toFixed(1) + ' hPa';
            return value;
        }

        function yAxisTitle(type) {
            if (type === 'pressure') return 'pressure (hPa)';
            return type;
        }

        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');
            rangeSection.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');
            rangeSection.classList.remove('hidden');
        });

        async function loadChart() {
            const sensorId = sensorSelect.value;
            const type = typeSelect.value;
            const range = rangeSelect.value;
            chartSection.classList.add('hidden');
            chartError.classList.add('hidden');

            if (!sensorId || !type || !window.Chart) return;

            try {
                // fetch hourly data for chart
                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');

                // 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));

                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: '#55ffff',
                            backgroundColor: 'rgba(85,255,255,0.12)',
                            pointBackgroundColor: '#ffff55',
                            pointBorderColor: '#55ffff',
                            fill: true,
                            tension: 0.3,
                            pointRadius: dense ? 1.5 : 3,
                        }]
                    },
                    options: {
                        responsive: true,
                        plugins: { legend: { display: false } },
                        scales: {
                            x: { title: { display: true, text: dense ? 'Time' : 'Time (hourly avg)' } },
                            y: { title: { display: true, text: yAxisTitle(type) } }
                        }
                    }
                });
                chartSection.classList.remove('hidden');
                // 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, averaged);
            } catch (err) {
                chartError.textContent = '! Chart error: ' + err.message;
                chartError.classList.remove('hidden');
                chartInfo.textContent = '';
                chartSection.classList.remove('hidden');
            }
        }

        async function loadTable() {
            const sensorId = sensorSelect.value;
            const type = typeSelect.value;
            readoutsSection.classList.add('hidden');
            readoutsBody.innerHTML = '';

            if (!sensorId || !type) return;

            // 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>${formatTableValue(type, r.value)}</td>`;
                readoutsBody.appendChild(tr);
            });
            readoutsSection.classList.remove('hidden');
        }

        typeSelect.addEventListener('change', async () => {
            if (!typeSelect.value) {
                chartSection.classList.add('hidden');
                readoutsSection.classList.add('hidden');
                readoutsBody.innerHTML = '';
                return;
            }
            await loadChart();
            await loadTable();
        });

        refreshButton.addEventListener('click', async () => {
            if (!sensorSelect.value || !typeSelect.value || refreshButton.disabled) return;
            refreshButton.disabled = true;
            try {
                await loadChart();
                await loadTable();
            } finally {
                refreshButton.disabled = false;
            }
        });

        rangeSelect.addEventListener('change', () => {
            updateAvgVisibility();
            loadChart();
        });

        avgCheckbox.addEventListener('change', loadChart);

        updateAvgVisibility();
        loadSensors();
    </script>
</body>
</html>