serversdown/terra-view
1
0
Fork 0
Code Issues 17 Pull Requests Actions Packages Projects Releases 5 Wiki Activity

feat(portal): M2a — live status map + status rollup on the overview

Browse Source 
Reuses the existing per-location /live fetch (no backend change):
- Map dots recolor live by current level (green/amber/red bands, grey when
  not measuring/offline) and the tooltip shows the live Leq. Bands are
  placeholders until M2 alert thresholds drive the color.
- Status rollup header: total locations, # live vs offline, and a "Loudest now"
  Leq callout. Aggregated each 15s refresh.

Refactored the refresh into refreshAll() (Promise.all over loadTile -> updateRollup);
loadTile now also feeds liveState + recolors the matching map dot.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
serversdown
2026-06-11 06:05:09 +00:00
parent 5455d3a931
commit b908f394ed
1 changed files with 103 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/portal/overview.html
+97 -15
View File
@@ -8,6 +8,22 @@
<p class="text-gray-400 text-sm mb-6">Live sound levels for your active locations. Read-only.</p>
{% if locations %}
<!-- Status rollup (filled live from the per-location /live fetches) -->
<div id="rollup" class="hidden mb-5 flex flex-wrap items-center gap-2 text-sm">
<span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-slate-800/60 border border-slate-700">
<span class="text-gray-400">Locations</span><b id="r-total" class="text-gray-100">&ndash;</b>
</span>
<span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-slate-800/60 border border-slate-700">
<span class="w-2 h-2 rounded-full bg-green-500"></span><b id="r-live">&ndash;</b><span class="text-gray-400">live</span>
</span>
<span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-slate-800/60 border border-slate-700">
<span class="w-2 h-2 rounded-full bg-slate-500"></span><b id="r-off">&ndash;</b><span class="text-gray-400">offline</span>
</span>
<span id="r-peak-wrap" class="hidden inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-slate-800/60 border border-slate-700">
<span class="text-gray-400">Loudest now</span><b id="r-peak" class="text-seismo-orange">&ndash;</b><span class="text-gray-400">dB Leq &middot;</span><span id="r-peak-loc" class="text-gray-300"></span>
</span>
</div>
<div id="loc-map" class="h-64 rounded-xl overflow-hidden mb-6 hidden border border-slate-700"></div>
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
@@ -38,6 +54,20 @@
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
const LOCATIONS = {{ locations|tojson }};
const liveState = {}; // loc.id -> {status, leq(num|null), leqStr}
const markersById = {}; // loc.id -> circleMarker (for live recolor)
// Dot/level color. Bands are placeholders until per-location alert thresholds
// exist (M2 alerts will color by threshold breach instead).
const LEVEL_AMBER = 55, LEVEL_RED = 70;
const COLOR_IDLE = '#64748b'; // slate-500 — not producing a live level
function levelColor(st) {
if (!st || st.status !== 'measuring' || st.leq == null) return COLOR_IDLE;
if (st.leq >= LEVEL_RED) return '#ef4444'; // red-500
if (st.leq >= LEVEL_AMBER) return '#f59e0b'; // amber-500
return '#22c55e'; // green-500
}
function num(v) { const f = parseFloat(v); return isNaN(f) ? null : f; }
function fmtAgo(iso) {
if (!iso) return '';
@@ -48,35 +78,84 @@ function fmtAgo(iso) {
return 'updated ' + Math.round(s / 3600) + 'h ago';
}
function updateMarker(loc) {
const m = markersById[loc.id]; if (!m) return;
const st = liveState[loc.id];
m.setStyle({ fillColor: levelColor(st) });
let label = loc.name;
if (st) {
if (st.status === 'measuring') label += ` &middot; ${st.leqStr} dB Leq`;
else if (st.status === 'stopped') label += ' &middot; stopped';
else if (st.status === 'nodevice') label += ' &middot; no device';
else label += ' &middot; offline';
}
m.setTooltipContent(label);
}
async function loadTile(loc) {
const el = document.querySelector(`.loc-tile[data-loc="${loc.id}"]`);
if (!el) return;
const leq = el.querySelector('.loc-leq'), badge = el.querySelector('.loc-badge'),
fresh = el.querySelector('.loc-fresh');
const leqEl = el && el.querySelector('.loc-leq'),
badge = el && el.querySelector('.loc-badge'),
fresh = el && el.querySelector('.loc-fresh');
try {
const j = await (await fetch(`/portal/api/location/${encodeURIComponent(loc.id)}/live`)).json();
const d = j.data;
badge.classList.remove('hidden');
if (!d) {
liveState[loc.id] = { status: j.reason === 'no_device' ? 'nodevice' : 'offline', leq: null };
if (badge) {
badge.classList.remove('hidden');
badge.textContent = j.reason === 'no_device' ? 'No device' : 'Offline';
badge.className = 'loc-badge shrink-0 px-2 py-0.5 text-xs rounded-full bg-slate-700 text-gray-300';
leq.textContent = '--'; fresh.innerHTML = '&nbsp;';
return;
}
leq.textContent = (d.leq == null || d.leq === '') ? '--' : d.leq;
if (leqEl) leqEl.textContent = '--';
if (fresh) fresh.innerHTML = '&nbsp;';
} else {
const measuring = d.measurement_state === 'Start' || d.measurement_state === 'Measure';
const leqStr = (d.leq == null || d.leq === '') ? '--' : d.leq;
liveState[loc.id] = { status: measuring ? 'measuring' : 'stopped', leq: num(d.leq), leqStr };
if (leqEl) leqEl.textContent = leqStr;
if (badge) {
badge.classList.remove('hidden');
badge.textContent = measuring ? '● Live' : 'Stopped';
badge.className = 'loc-badge shrink-0 px-2 py-0.5 text-xs rounded-full ' +
(measuring ? 'bg-green-900/40 text-green-300' : 'bg-slate-700 text-gray-300');
fresh.textContent = fmtAgo(d.last_seen);
}
if (fresh) fresh.textContent = fmtAgo(d.last_seen);
}
} catch (e) { /* leave placeholders */ }
updateMarker(loc);
}
function refreshTiles() { LOCATIONS.forEach(loadTile); }
refreshTiles();
setInterval(refreshTiles, 15000);
function updateRollup() {
const total = LOCATIONS.length;
let live = 0, off = 0, peak = null, peakStr = null, peakLoc = null;
for (const l of LOCATIONS) {
const s = liveState[l.id]; if (!s) continue;
if (s.status === 'measuring') {
live++;
if (s.leq != null && (peak == null || s.leq > peak)) { peak = s.leq; peakStr = s.leqStr; peakLoc = l.name; }
} else if (s.status === 'offline' || s.status === 'nodevice') off++;
}
document.getElementById('r-total').textContent = total;
document.getElementById('r-live').textContent = live;
document.getElementById('r-off').textContent = off;
const pw = document.getElementById('r-peak-wrap');
if (peak != null) {
pw.classList.remove('hidden');
document.getElementById('r-peak').textContent = peakStr;
document.getElementById('r-peak-loc').textContent = peakLoc;
} else pw.classList.add('hidden');
document.getElementById('rollup').classList.remove('hidden');
}
// Map of locations that have coordinates
async function refreshAll() {
await Promise.all(LOCATIONS.map(loadTile));
updateRollup();
}
refreshAll();
setInterval(refreshAll, 15000);
// Map of locations that have coordinates — dots recolor live via updateMarker().
const withCoords = LOCATIONS.filter(l => l.coordinates);
if (withCoords.length) {
const mapEl = document.getElementById('loc-map');
@@ -88,9 +167,10 @@ if (withCoords.length) {
withCoords.forEach(l => {
const [la, lo] = (l.coordinates || '').split(',').map(Number);
if (!isNaN(la) && !isNaN(lo)) {
// Same dot style as the internal project map (circleMarker, not a pin).
L.circleMarker([la, lo], {
radius: 8, fillColor: '#f48b1c', color: '#fff',
// Same dot style as the internal project map (circleMarker, not a pin),
// but recolored live by current level.
markersById[l.id] = L.circleMarker([la, lo], {
radius: 8, fillColor: levelColor(liveState[l.id]), color: '#fff',
weight: 2, opacity: 1, fillOpacity: 0.9,
}).addTo(map).bindTooltip(l.name, { direction: 'top', offset: [0, -6] });
pts.push([la, lo]);
@@ -98,6 +178,8 @@ if (withCoords.length) {
});
if (pts.length) map.fitBounds(pts, { padding: [30, 30], maxZoom: 15 });
else mapEl.classList.add('hidden');
// Paint dots with whatever live data has already arrived.
LOCATIONS.forEach(updateMarker);
}
</script>
{% endblock %}