304 lines
12 KiB
HTML
304 lines
12 KiB
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>
|