terra-view/templates/portal/overview.html

{% extends "portal/base.html" %}
{% block title %}Your locations{% endblock %}
{% block head %}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
{% endblock %}
{% block content %}
<div class="reveal">
    <div class="text-[11px] uppercase tracking-[0.2em] text-seismo-orange/80 font-mono mb-2">Live monitoring</div>
    <h1 class="text-3xl font-bold tracking-tight">Your locations</h1>
    <p class="text-[var(--text-dim)] text-sm mt-1">Real-time sound levels across your active monitoring sites.</p>
</div>

{% if locations %}
<!-- Status rollup (filled live from the per-location /live fetches) -->
<div id="rollup" class="hidden mt-6 mb-6 flex flex-wrap items-center gap-2.5">
    <div class="panel px-4 py-2.5 flex items-center gap-2.5">
        <span class="text-[var(--text-dim)] text-[10px] uppercase tracking-[0.15em]">Locations</span>
        <b id="r-total" class="reading text-lg font-semibold">&ndash;</b>
    </div>
    <div class="panel px-4 py-2.5 flex items-center gap-2">
        <span class="live-dot"></span><b id="r-live" class="reading text-lg font-semibold text-seismo-orange">&ndash;</b><span class="text-[var(--text-dim)] text-xs">live</span>
    </div>
    <div class="panel px-4 py-2.5 flex items-center gap-2">
        <span class="w-2 h-2 rounded-full bg-[var(--text-dim)]/50"></span><b id="r-off" class="reading text-lg font-semibold">&ndash;</b><span class="text-[var(--text-dim)] text-xs">offline</span>
    </div>
    <div id="r-peak-wrap" class="hidden panel px-4 py-2.5 flex items-center gap-2">
        <span class="text-[var(--text-dim)] text-[10px] uppercase tracking-[0.15em]">Loudest now</span>
        <b id="r-peak" class="reading text-lg font-semibold text-seismo-orange">&ndash;</b><span class="text-[var(--text-dim)] text-xs">dB</span>
        <span id="r-peak-loc" class="text-[var(--text-dim)] text-sm"></span>
    </div>
</div>

<div id="loc-map" class="panel reveal hidden h-72 overflow-hidden mb-6" style="animation-delay:80ms"></div>

<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
    {% for loc in locations %}
    <a href="/portal/location/{{ loc.id }}" data-loc="{{ loc.id }}"
       class="loc-tile panel panel-hover reveal block p-5" style="animation-delay: {{ (loop.index0 * 55) + 140 }}ms">
        <div class="flex items-start justify-between gap-2">
            <div class="min-w-0">
                <div class="font-semibold tracking-tight truncate">{{ loc.name }}</div>
                <div class="text-xs text-[var(--text-dim)] mt-0.5 truncate">{{ loc.address or loc.project_name or '' }}</div>
            </div>
            <span class="loc-badge hidden shrink-0"></span>
        </div>
        <div class="mt-5 flex items-baseline gap-1.5">
            <span class="loc-leq reading text-[2.6rem] leading-none font-semibold">--</span>
            <span class="text-xs text-[var(--text-dim)] font-mono tracking-wide">dB&nbsp;Leq</span>
        </div>
        <div class="loc-fresh text-[11px] text-[var(--text-dim)]/70 mt-2 font-mono">&nbsp;</div>
    </a>
    {% endfor %}
</div>
{% else %}
<div class="panel reveal p-12 text-center text-[var(--text-dim)] mt-6">No active monitoring locations yet.</div>
{% endif %}
{% endblock %}

{% block scripts %}
<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)
let tiles = null;              // map tile layer (re-skinned on theme toggle)

// Dot/level color (computed hex; reads the theme CSS vars so it flips with theme).
const LEVEL_AMBER = 55, LEVEL_RED = 70;
function levelColor(st) {
    if (!st || st.status !== 'measuring' || st.leq == null) return cssVar('--text-dim');
    if (st.leq >= LEVEL_RED) return cssVar('--lvl-bad');
    if (st.leq >= LEVEL_AMBER) return cssVar('--lvl-warn');
    return cssVar('--lvl-ok');
}
function tileUrl() {
    return document.documentElement.getAttribute('data-theme') === 'light'
        ? 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png'
        : 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png';
}
// Re-skin map tiles + recolor everything when the theme flips.
document.addEventListener('portal-theme', () => { if (tiles) tiles.setUrl(tileUrl()); refreshAll(); });
function num(v) { const f = parseFloat(v); return isNaN(f) ? null : f; }

function fmtAgo(iso) {
    if (!iso) return '';
    const t = new Date(iso.endsWith('Z') ? iso : iso + 'Z');
    const s = Math.max(0, Math.round((Date.now() - t.getTime()) / 1000));
    if (s < 60) return 'updated just now';
    if (s < 3600) return 'updated ' + Math.round(s / 60) + 'm ago';
    return 'updated ' + Math.round(s / 3600) + 'h ago';
}

const BADGE_BASE = 'loc-badge inline-flex items-center gap-1.5 shrink-0 px-2.5 py-1 text-[11px] rounded-full border ';

function updateMarker(loc) {
    const m = markersById[loc.id]; if (!m) return;
    const st = liveState[loc.id];
    m.setStyle({ fillColor: levelColor(st) });
    let label = `<b>${esc(loc.name)}</b>`;
    if (st) {
        if (st.status === 'measuring') label += ` &middot; ${esc(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}"]`);
    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;
        if (!d) {
            liveState[loc.id] = { status: j.reason === 'no_device' ? 'nodevice' : 'offline', leq: null };
            if (badge) { badge.classList.remove('hidden'); badge.className = BADGE_BASE + 'border-[var(--border)] text-[var(--text-dim)]'; badge.textContent = j.reason === 'no_device' ? 'No device' : 'Offline'; }
            if (leqEl) { leqEl.textContent = '--'; leqEl.style.color = 'var(--text-dim)'; }
            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; leqEl.style.color = measuring ? levelColor(liveState[loc.id]) : 'var(--text)'; }
            if (badge) {
                badge.classList.remove('hidden');
                if (measuring) { badge.className = BADGE_BASE + 'border-[rgba(244,139,28,0.45)] text-seismo-orange'; badge.innerHTML = '<span class="live-dot"></span> Live'; }
                else { badge.className = BADGE_BASE + 'border-[var(--border)] text-[var(--text-dim)]'; badge.textContent = 'Stopped'; }
            }
            if (fresh) fresh.textContent = fmtAgo(d.last_seen);
        }
    } catch (e) { /* leave placeholders */ }
    updateMarker(loc);
}

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');
}

async function refreshAll() {
    await Promise.all(LOCATIONS.map(loadTile));
    updateRollup();
}
refreshAll();
setInterval(refreshAll, 15000);

// Map of locations with coordinates — dark tiles, dots recolor live.
const withCoords = LOCATIONS.filter(l => l.coordinates);
if (withCoords.length) {
    const mapEl = document.getElementById('loc-map');
    mapEl.classList.remove('hidden');
    const map = L.map('loc-map', { scrollWheelZoom: false, attributionControl: true });
    tiles = L.tileLayer(tileUrl(), {
        maxZoom: 19, subdomains: 'abcd', attribution: '© OpenStreetMap © CARTO'
    }).addTo(map);
    const pts = [];
    withCoords.forEach(l => {
        const [la, lo] = (l.coordinates || '').split(',').map(Number);
        if (!isNaN(la) && !isNaN(lo)) {
            markersById[l.id] = L.circleMarker([la, lo], {
                radius: 7, fillColor: levelColor(liveState[l.id]), color: '#fff',
                weight: 2, opacity: 0.9, fillOpacity: 0.95,
            }).addTo(map).bindTooltip(esc(l.name), { direction: 'top', offset: [0, -6] });
            pts.push([la, lo]);
        }
    });
    if (pts.length) map.fitBounds(pts, { padding: [36, 36], maxZoom: 15 });
    else mapEl.classList.add('hidden');
    LOCATIONS.forEach(updateMarker);
}
</script>
{% endblock %}