From b908f394ed8f937d735689f4132e692806baf76b Mon Sep 17 00:00:00 2001
From: serversdown <brian@serversdown.net>
Date: Thu, 11 Jun 2026 06:05:09 +0000
Subject: [PATCH] =?UTF-8?q?feat(portal):=20M2a=20=E2=80=94=20live=20status?=
 =?UTF-8?q?=20map=20+=20status=20rollup=20on=20the=20overview?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 templates/portal/overview.html | 124 +++++++++++++++++++++++++++------
 1 file changed, 103 insertions(+), 21 deletions(-)

diff --git a/templates/portal/overview.html b/templates/portal/overview.html
index acd82f6..4f01d3d 100644
--- a/templates/portal/overview.html
+++ b/templates/portal/overview.html
@@ -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) {
-            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;
+            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';
+            }
+            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');
+            }
+            if (fresh) fresh.textContent = fmtAgo(d.last_seen);
         }
-        leq.textContent = (d.leq == null || d.leq === '') ? '--' : d.leq;
-        const measuring = d.measurement_state === 'Start' || d.measurement_state === 'Measure';
-        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);
     } 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 %}