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 %}
<h1 class="text-2xl font-semibold mb-1">Your monitoring locations</h1>
<p class="text-gray-400 text-sm mb-6">Live sound levels for your active locations. Read-only.</p>

{% if locations %}
<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">
    {% for loc in locations %}
    <a href="/portal/location/{{ loc.id }}" data-loc="{{ loc.id }}"
       class="loc-tile block rounded-xl border border-slate-700 bg-slate-800/50 p-4 hover:border-seismo-orange transition-colors">
        <div class="flex items-start justify-between gap-2">
            <div class="font-semibold">{{ loc.name }}</div>
            <span class="loc-badge hidden shrink-0 px-2 py-0.5 text-xs rounded-full"></span>
        </div>
        <div class="text-xs text-gray-400 mt-0.5 truncate">{{ loc.address or loc.project_name or '' }}</div>
        <div class="mt-3 flex items-baseline gap-1">
            <span class="loc-leq text-3xl font-bold text-seismo-orange">--</span>
            <span class="text-sm text-gray-400">dB Leq</span>
        </div>
        <div class="loc-fresh text-xs text-gray-500 mt-1">&nbsp;</div>
    </a>
    {% endfor %}
</div>
{% else %}
<div class="rounded-xl border border-slate-700 bg-slate-800/50 p-8 text-center text-gray-400">
    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 }};

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

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

function refreshTiles() { LOCATIONS.forEach(loadTile); }
refreshTiles();
setInterval(refreshTiles, 15000);

// Map of locations that have coordinates
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 });
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        { maxZoom: 19, attribution: '© OpenStreetMap' }).addTo(map);
    const pts = [];
    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',
                weight: 2, opacity: 1, fillOpacity: 0.9,
            }).addTo(map).bindTooltip(l.name, { direction: 'top', offset: [0, -6] });
            pts.push([la, lo]);
        }
    });
    if (pts.length) map.fitBounds(pts, { padding: [30, 30], maxZoom: 15 });
    else mapEl.classList.add('hidden');
}
</script>
{% endblock %}