Merge branch 'dev' into feat/ftp-report-pipeline
This commit is contained in:
@@ -0,0 +1,19 @@
|
||||
{% extends "portal/base.html" %}
|
||||
{% block title %}Access{% endblock %}
|
||||
{% block content %}
|
||||
<div class="max-w-md mx-auto mt-20 text-center reveal">
|
||||
<div class="panel inline-flex items-center justify-center w-16 h-16 rounded-2xl mb-6">
|
||||
<svg class="w-7 h-7 text-[var(--text-dim)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
|
||||
d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
{% if reason == "invalid" %}
|
||||
<h1 class="text-2xl font-bold tracking-tight mb-2">This link isn't valid</h1>
|
||||
<p class="text-[var(--text-dim)] text-sm leading-relaxed">The access link is expired or has been revoked.<br>Please contact TMI for a new link.</p>
|
||||
{% else %}
|
||||
<h1 class="text-2xl font-bold tracking-tight mb-2">Access link required</h1>
|
||||
<p class="text-[var(--text-dim)] text-sm leading-relaxed">Open the monitoring link TMI sent you to view your locations.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,196 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="h-full">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{% block title %}Monitoring{% endblock %} · TMI</title>
|
||||
|
||||
<!-- apply saved theme before paint (no flash); light is the default -->
|
||||
<script>(function(){var t=localStorage.getItem('portal-theme')||'light';document.documentElement.setAttribute('data-theme',t);})();</script>
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: { extend: {
|
||||
colors: { seismo: { orange: '#f48b1c', navy: '#142a66', burgundy: '#7d234d' } },
|
||||
fontFamily: {
|
||||
sans: ['"Hanken Grotesk"', 'ui-sans-serif', 'system-ui', 'sans-serif'],
|
||||
mono: ['"IBM Plex Mono"', 'ui-monospace', 'monospace'],
|
||||
},
|
||||
} }
|
||||
}
|
||||
</script>
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/static/icons/favicon-32.png">
|
||||
<meta name="theme-color" content="#eef2f9">
|
||||
|
||||
<style>
|
||||
/* ---- dark (default) ---- */
|
||||
:root {
|
||||
--bg: #080b14;
|
||||
--grid: rgba(124, 146, 188, 0.045);
|
||||
--aurora-1: rgba(20, 42, 102, 0.55);
|
||||
--aurora-2: rgba(125, 35, 77, 0.18);
|
||||
--text: #e7ecf6;
|
||||
--text-dim: #8c98b0;
|
||||
--border: rgba(124, 146, 188, 0.14);
|
||||
--border-bright: rgba(168, 188, 224, 0.30);
|
||||
--panel-a: rgba(24, 33, 54, 0.72);
|
||||
--panel-b: rgba(12, 18, 31, 0.62);
|
||||
--panel-inset: rgba(255, 255, 255, 0.05);
|
||||
--panel-shadow: 0 22px 48px -28px rgba(0, 0, 0, 0.85);
|
||||
--header-bg: rgba(8, 11, 20, 0.72);
|
||||
--accent: #f48b1c;
|
||||
--accent-glow: rgba(244, 139, 28, 0.40);
|
||||
--lvl-ok: #34d399; --lvl-warn: #fbbf24; --lvl-bad: #f87171;
|
||||
--m-lp: #60a5fa; --m-lmax: #f87171; --m-l1: #c084fc; --m-l10: #fbbf24;
|
||||
}
|
||||
/* ---- light (cool) — solid cards on a cool ground ---- */
|
||||
html[data-theme="light"] {
|
||||
--bg: #eef2f9; /* cool light */
|
||||
--grid: rgba(20, 42, 102, 0.05); /* cool faint grid */
|
||||
--aurora-1: rgba(120, 150, 220, 0.18); /* cool wash */
|
||||
--aurora-2: rgba(244, 139, 28, 0.08); /* faint brand accent */
|
||||
--text: #16203a; /* cool navy ink */
|
||||
--text-dim: #5d6b86; /* cool muted */
|
||||
--border: rgba(20, 42, 102, 0.13);
|
||||
--border-bright: rgba(20, 42, 102, 0.18);
|
||||
--panel-a: #ffffff; /* solid — kept from the un-ghosting pass */
|
||||
--panel-b: #f7f9fc;
|
||||
--panel-inset: rgba(255, 255, 255, 0.9);
|
||||
--panel-shadow: 0 14px 30px -16px rgba(40, 55, 95, 0.22), 0 2px 6px -2px rgba(40, 55, 95, 0.07);
|
||||
--header-bg: rgba(238, 242, 249, 0.85);
|
||||
--lvl-ok: #16a34a; --lvl-warn: #d97706; --lvl-bad: #dc2626;
|
||||
--m-lp: #2563eb; --m-lmax: #dc2626; --m-l1: #9333ea; --m-l10: #d97706;
|
||||
}
|
||||
/* On light, the hover-lift shadow wants cool depth (the dark one vanishes on light). */
|
||||
html[data-theme="light"] .panel-hover:hover {
|
||||
box-shadow: 0 22px 44px -20px rgba(40, 55, 95, 0.26), 0 0 0 1px var(--accent-glow);
|
||||
}
|
||||
|
||||
html, body { height: 100%; }
|
||||
body {
|
||||
margin: 0;
|
||||
color: var(--text);
|
||||
font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
|
||||
font-feature-settings: "ss01";
|
||||
background-color: var(--bg);
|
||||
background-image:
|
||||
radial-gradient(1100px 560px at 50% -12%, var(--aurora-1), transparent 68%),
|
||||
radial-gradient(700px 400px at 88% 8%, var(--aurora-2), transparent 70%),
|
||||
linear-gradient(var(--grid) 1px, transparent 1px),
|
||||
linear-gradient(90deg, var(--grid) 1px, transparent 1px);
|
||||
background-size: auto, auto, 46px 46px, 46px 46px;
|
||||
background-attachment: fixed;
|
||||
transition: background-color .3s ease, color .3s ease;
|
||||
}
|
||||
::selection { background: rgba(244, 139, 28, 0.30); }
|
||||
|
||||
.font-mono, .reading { font-family: "IBM Plex Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
|
||||
|
||||
.panel {
|
||||
position: relative;
|
||||
background: linear-gradient(180deg, var(--panel-a), var(--panel-b));
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 16px;
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
box-shadow: 0 1px 0 var(--panel-inset) inset, var(--panel-shadow);
|
||||
}
|
||||
.panel::before {
|
||||
content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
|
||||
background: linear-gradient(90deg, transparent, var(--border-bright), transparent);
|
||||
}
|
||||
.panel-hover { transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
|
||||
.panel-hover:hover {
|
||||
transform: translateY(-3px);
|
||||
border-color: rgba(244, 139, 28, 0.55);
|
||||
box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--accent-glow);
|
||||
}
|
||||
.hairline { border-top: 1px solid var(--border); }
|
||||
|
||||
/* metric accent colors (flip per theme) */
|
||||
.c-lp { color: var(--m-lp); } .c-lmax { color: var(--m-lmax); }
|
||||
.c-l1 { color: var(--m-l1); } .c-l10 { color: var(--m-l10); }
|
||||
|
||||
.live-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 0 var(--accent-glow); animation: pulse 2.2s infinite; }
|
||||
@keyframes pulse { 0% { box-shadow: 0 0 0 0 var(--accent-glow); } 70% { box-shadow: 0 0 0 9px rgba(244, 139, 28, 0); } 100% { box-shadow: 0 0 0 0 rgba(244, 139, 28, 0); } }
|
||||
|
||||
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
|
||||
.reveal { opacity: 0; animation: rise .55s cubic-bezier(.2, .7, .2, 1) forwards; }
|
||||
|
||||
.signal-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; }
|
||||
.signal-bars i { width: 3px; background: var(--accent); border-radius: 1px; animation: bars 1.4s ease-in-out infinite; }
|
||||
.signal-bars i:nth-child(1) { height: 40%; } .signal-bars i:nth-child(2) { height: 70%; animation-delay: .2s; }
|
||||
.signal-bars i:nth-child(3) { height: 100%; animation-delay: .4s; } .signal-bars i:nth-child(4) { height: 55%; animation-delay: .6s; }
|
||||
@keyframes bars { 0%, 100% { transform: scaleY(.5); opacity: .7; } 50% { transform: scaleY(1); opacity: 1; } }
|
||||
|
||||
.theme-toggle { color: var(--text-dim); transition: color .2s ease, background .2s ease; }
|
||||
.theme-toggle:hover { color: var(--text); }
|
||||
html[data-theme="light"] .moon { display: none; }
|
||||
html[data-theme="dark"] .sun, :root:not([data-theme="light"]) .sun { display: none; }
|
||||
|
||||
/* Leaflet polish (dark default; .leaflet-light tweaks tooltip for light) */
|
||||
.leaflet-container { background: var(--bg) !important; }
|
||||
.leaflet-tooltip { background: var(--panel-a); border: 1px solid var(--border-bright); color: var(--text); box-shadow: none; font-family: inherit; font-size: 12px; }
|
||||
.leaflet-tooltip-top::before { border-top-color: var(--border-bright); }
|
||||
.leaflet-control-attribution { background: rgba(0,0,0,0.25) !important; color: var(--text-dim) !important; }
|
||||
.leaflet-control-attribution a { color: var(--text-dim) !important; }
|
||||
::-webkit-scrollbar { width: 9px; height: 9px; }
|
||||
::-webkit-scrollbar-thumb { background: rgba(124, 146, 188, 0.22); border-radius: 9px; }
|
||||
</style>
|
||||
{% block head %}{% endblock %}
|
||||
</head>
|
||||
<body class="min-h-full antialiased">
|
||||
<header class="sticky top-0 z-30 border-b border-[var(--border)] bg-[var(--header-bg)] backdrop-blur-xl">
|
||||
<div class="max-w-5xl mx-auto px-5 py-3.5 flex items-center justify-between">
|
||||
<a href="/portal" class="flex items-center gap-2.5">
|
||||
<span class="signal-bars"><i></i><i></i><i></i><i></i></span>
|
||||
<span class="font-semibold tracking-tight text-[15px]">
|
||||
TMI <span class="text-[var(--text-dim)] font-normal">Monitoring</span>
|
||||
{% if client %}<span class="text-[var(--text-dim)] font-normal mx-0.5">/</span>
|
||||
<span class="text-seismo-orange">{{ client.name }}</span>{% endif %}
|
||||
</span>
|
||||
</a>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<button onclick="togglePortalTheme()" class="theme-toggle p-2 rounded-lg" title="Toggle light / dark" aria-label="Toggle theme">
|
||||
<svg class="moon w-[18px] h-[18px]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/></svg>
|
||||
<svg class="sun w-[18px] h-[18px]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
|
||||
</button>
|
||||
{% if client %}
|
||||
<a href="/portal/logout" class="text-[13px] text-[var(--text-dim)] hover:text-[var(--text)] transition-colors px-2">Sign out</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="max-w-5xl mx-auto px-5 py-8">
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
|
||||
<footer class="max-w-5xl mx-auto px-5 py-10 text-[11px] text-[var(--text-dim)] flex items-center gap-2 opacity-70">
|
||||
<span class="w-1 h-1 rounded-full bg-[var(--text-dim)]"></span>
|
||||
Read-only monitoring view · data provided as-is for informational purposes
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// Theme toggle. Pages can listen for 'portal-theme' to re-skin canvases/maps.
|
||||
function cssVar(n) { return getComputedStyle(document.documentElement).getPropertyValue(n).trim(); }
|
||||
// HTML-escape operator-set strings (location/rule names) before innerHTML/tooltip injection.
|
||||
function esc(s) { return String(s == null ? '' : s).replace(/[&<>"']/g, c => ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c])); }
|
||||
function togglePortalTheme() {
|
||||
const cur = document.documentElement.getAttribute('data-theme') === 'light' ? 'light' : 'dark';
|
||||
const next = cur === 'light' ? 'dark' : 'light';
|
||||
document.documentElement.setAttribute('data-theme', next);
|
||||
try { localStorage.setItem('portal-theme', next); } catch (e) {}
|
||||
const mc = document.querySelector('meta[name="theme-color"]');
|
||||
if (mc) mc.setAttribute('content', next === 'light' ? '#eef2f9' : '#080b14');
|
||||
document.dispatchEvent(new CustomEvent('portal-theme', { detail: next }));
|
||||
}
|
||||
</script>
|
||||
{% block scripts %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,335 @@
|
||||
{% extends "portal/base.html" %}
|
||||
{% block title %}{{ location.name }}{% endblock %}
|
||||
{% block head %}
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
|
||||
{% endblock %}
|
||||
{% block content %}
|
||||
<a href="/portal" class="reveal inline-flex items-center gap-1.5 text-sm text-[var(--text-dim)] hover:text-[var(--text)] transition-colors">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
|
||||
All locations
|
||||
</a>
|
||||
<div class="reveal mt-3 flex flex-wrap items-end justify-between gap-3">
|
||||
<h1 class="text-3xl font-bold tracking-tight">{{ location.name }}</h1>
|
||||
<div class="flex items-center gap-2.5">
|
||||
<span id="p-badge" class="hidden"></span>
|
||||
<span id="p-fresh" class="text-[var(--text-dim)] font-mono text-xs"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if not has_device %}
|
||||
<div class="panel reveal p-12 text-center text-[var(--text-dim)] mt-6">No device is currently assigned to this location.</div>
|
||||
{% else %}
|
||||
<div id="p-alarm-banner" class="hidden reveal mt-5 px-4 py-3 rounded-xl bg-[rgba(220,38,38,0.10)] border border-[rgba(220,38,38,0.32)] text-[var(--lvl-bad)] text-sm flex items-center gap-2.5">
|
||||
<svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M12 9v2m0 4h.01M5.07 19h13.86c1.54 0 2.5-1.67 1.73-3L13.73 4a2 2 0 00-3.46 0L3.34 16c-.77 1.33.19 3 1.73 3z"/>
|
||||
</svg>
|
||||
<span id="p-alarm-text" class="font-medium">Currently above threshold.</span>
|
||||
</div>
|
||||
|
||||
<!-- Hero console: Leq primary + instrument strip -->
|
||||
<div class="panel reveal mt-5 p-6 sm:p-7" style="animation-delay:60ms">
|
||||
<div class="text-[10px] uppercase tracking-[0.22em] text-[var(--text-dim)] font-mono mb-1.5">Leq · average</div>
|
||||
<div class="flex items-baseline gap-2.5">
|
||||
<span id="p-leq" class="reading text-6xl sm:text-7xl leading-none font-semibold">--</span>
|
||||
<span class="text-sm text-[var(--text-dim)] font-mono">dB</span>
|
||||
</div>
|
||||
|
||||
<div class="hairline mt-6 pt-5 grid grid-cols-2 sm:grid-cols-4 gap-5">
|
||||
<div>
|
||||
<div class="text-[10px] uppercase tracking-[0.15em] text-[var(--text-dim)] font-mono">Lp · instant</div>
|
||||
<div class="mt-1 flex items-baseline gap-1"><span id="p-lp" class="reading text-2xl font-semibold c-lp">--</span><span class="text-[10px] text-[var(--text-dim)] font-mono">dB</span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-[10px] uppercase tracking-[0.15em] text-[var(--text-dim)] font-mono">Lmax · peak</div>
|
||||
<div class="mt-1 flex items-baseline gap-1"><span id="p-lmax" class="reading text-2xl font-semibold c-lmax">--</span><span class="text-[10px] text-[var(--text-dim)] font-mono">dB</span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-[10px] uppercase tracking-[0.15em] text-[var(--text-dim)] font-mono">L1</div>
|
||||
<div class="mt-1 flex items-baseline gap-1"><span id="p-ln1" class="reading text-2xl font-semibold c-l1">--</span><span class="text-[10px] text-[var(--text-dim)] font-mono">dB</span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-[10px] uppercase tracking-[0.15em] text-[var(--text-dim)] font-mono">L10</div>
|
||||
<div class="mt-1 flex items-baseline gap-1"><span id="p-ln2" class="reading text-2xl font-semibold c-l10">--</span><span class="text-[10px] text-[var(--text-dim)] font-mono">dB</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Live trace -->
|
||||
<div class="panel reveal mt-5 overflow-hidden" style="animation-delay:120ms">
|
||||
<div class="px-5 pt-4 text-[10px] uppercase tracking-[0.22em] text-[var(--text-dim)] font-mono">Live trace · last 2h</div>
|
||||
<div class="relative px-3 pb-3 pt-2" style="min-height: 340px;">
|
||||
<canvas id="p-chart"></canvas>
|
||||
<div id="p-paused" class="hidden absolute inset-0 flex items-center justify-center bg-[rgba(8,11,20,0.78)] rounded-xl backdrop-blur-sm">
|
||||
<button onclick="resumeStream()"
|
||||
class="px-4 py-2 rounded-lg bg-seismo-orange/15 text-seismo-orange border border-seismo-orange/40 hover:bg-seismo-orange/25 text-sm font-medium transition-colors">
|
||||
⏸ Live paused — tap to resume
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Alert limits (what this location is alerted on) -->
|
||||
<div id="p-limits-section" class="reveal mt-7 hidden" style="animation-delay:180ms">
|
||||
<div class="text-[10px] uppercase tracking-[0.22em] text-[var(--text-dim)] font-mono mb-3">Alert limits</div>
|
||||
<div id="p-thresholds" class="space-y-2"></div>
|
||||
</div>
|
||||
|
||||
<!-- Alert history -->
|
||||
<div class="reveal mt-7" style="animation-delay:220ms">
|
||||
<div class="text-[10px] uppercase tracking-[0.22em] text-[var(--text-dim)] font-mono mb-3">Alert history</div>
|
||||
<div id="p-events" class="space-y-2"></div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
{% if has_device %}
|
||||
<script>
|
||||
const LOC_ID = "{{ location.id }}";
|
||||
const cd = { t: [], lp: [], leq: [], ln1: [], ln2: [] };
|
||||
let chart;
|
||||
const numOrNull = v => { const f = parseFloat(v); return isNaN(f) ? null : f; };
|
||||
|
||||
// Level color for the Leq hero (matches the overview bands).
|
||||
const LEVEL_AMBER = 55, LEVEL_RED = 70;
|
||||
function leqColor(measuring, v) {
|
||||
// CSS var refs so the hero color auto-flips with the theme.
|
||||
if (!measuring || v == null || isNaN(v)) return 'var(--text)';
|
||||
if (v >= LEVEL_RED) return 'var(--lvl-bad)';
|
||||
if (v >= LEVEL_AMBER) return 'var(--lvl-warn)';
|
||||
return 'var(--lvl-ok)';
|
||||
}
|
||||
function paintLeq(measuring, leqVal) {
|
||||
const el = document.getElementById('p-leq');
|
||||
if (el) el.style.color = leqColor(measuring, parseFloat(leqVal));
|
||||
}
|
||||
|
||||
function ds(label) { return { label, data: [], borderWidth: 1.5, pointRadius: 0, tension: 0.35, spanGaps: true }; }
|
||||
function skinChart() {
|
||||
if (!chart) return;
|
||||
const dim = cssVar('--text-dim');
|
||||
const cols = [cssVar('--m-lp'), cssVar('--lvl-ok'), cssVar('--m-l1'), cssVar('--m-l10')];
|
||||
chart.data.datasets.forEach((d, i) => { d.borderColor = cols[i]; d.backgroundColor = cols[i]; });
|
||||
const grid = 'rgba(124,146,188,0.10)', gridX = 'rgba(124,146,188,0.05)', border = 'rgba(124,146,188,0.18)';
|
||||
const y = chart.options.scales.y, x = chart.options.scales.x;
|
||||
y.ticks.color = dim; y.title.color = dim; y.grid.color = grid; y.border.color = border;
|
||||
x.ticks.color = dim; x.grid.color = gridX; x.border.color = border;
|
||||
chart.options.plugins.legend.labels.color = cssVar('--text');
|
||||
chart.update('none');
|
||||
}
|
||||
function initChart() {
|
||||
const ctx = document.getElementById('p-chart').getContext('2d');
|
||||
const mono = { family: 'IBM Plex Mono', size: 10 };
|
||||
chart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: { labels: [], datasets: [ds('Lp'), ds('Leq'), ds('L1'), ds('L10')] },
|
||||
options: {
|
||||
responsive: true, maintainAspectRatio: false, animation: false,
|
||||
interaction: { intersect: false, mode: 'index' },
|
||||
scales: {
|
||||
y: { min: 30, max: 130, title: { display: true, text: 'dB', font: { family: 'IBM Plex Mono' } },
|
||||
ticks: { font: mono }, grid: {}, border: {} },
|
||||
x: { ticks: { font: mono, maxTicksLimit: 8 }, grid: {}, border: {} }
|
||||
},
|
||||
plugins: { legend: { labels: { font: { family: 'Hanken Grotesk' }, usePointStyle: true, pointStyleWidth: 10, boxHeight: 7 } } }
|
||||
}
|
||||
});
|
||||
skinChart();
|
||||
}
|
||||
document.addEventListener('portal-theme', skinChart);
|
||||
|
||||
function setCard(id, v) { document.getElementById(id).textContent = (v == null || v === '') ? '--' : v; }
|
||||
function setBadge(measuring, lastSeen) {
|
||||
const b = document.getElementById('p-badge'), f = document.getElementById('p-fresh');
|
||||
const base = 'inline-flex items-center gap-1.5 px-2.5 py-1 text-[11px] rounded-full border ';
|
||||
if (measuring === null) { b.className = 'hidden'; b.textContent = ''; }
|
||||
else if (measuring) { b.className = base + 'border-[rgba(244,139,28,0.45)] text-seismo-orange'; b.innerHTML = '<span class="live-dot"></span> Live'; }
|
||||
else { b.className = base + 'border-[var(--border)] text-[var(--text-dim)]'; b.textContent = 'Stopped'; }
|
||||
f.innerHTML = fmtFreshness(lastSeen);
|
||||
}
|
||||
function fmtFreshness(iso) {
|
||||
if (!iso) return '<span class="text-[var(--text-dim)]">no recent reading</span>';
|
||||
const t = new Date(iso.endsWith('Z') ? iso : iso + 'Z');
|
||||
const s = Math.max(0, Math.round((Date.now() - t.getTime()) / 1000));
|
||||
let ago, stale = false;
|
||||
if (s < 10) ago = 'just now';
|
||||
else if (s < 60) ago = s + 's ago';
|
||||
else if (s < 3600) { ago = Math.round(s / 60) + 'm ago'; stale = s >= 300; }
|
||||
else { ago = Math.round(s / 3600) + 'h ago'; stale = true; }
|
||||
const cls = stale ? 'text-amber-400' : 'text-[var(--text-dim)]';
|
||||
return `as of ${t.toLocaleTimeString()} <span class="${cls}">(${ago}${stale ? ' · cached' : ''})</span>`;
|
||||
}
|
||||
|
||||
async function prefill() {
|
||||
try {
|
||||
const j = await (await fetch(`/portal/api/location/${encodeURIComponent(LOC_ID)}/live`)).json();
|
||||
const d = j.data;
|
||||
if (!d) {
|
||||
setBadge(null, null);
|
||||
document.getElementById('p-fresh').textContent =
|
||||
j.reason === 'no_device' ? 'No device assigned' : 'Currently unreachable';
|
||||
return;
|
||||
}
|
||||
setCard('p-lp', d.lp); setCard('p-leq', d.leq); setCard('p-lmax', d.lmax);
|
||||
setCard('p-ln1', d.ln1); setCard('p-ln2', d.ln2);
|
||||
const measuring = d.measurement_state === 'Start' || d.measurement_state === 'Measure';
|
||||
setBadge(measuring, d.last_seen);
|
||||
paintLeq(measuring, d.leq);
|
||||
} catch (e) { /* keep last values */ }
|
||||
}
|
||||
async function backfill() {
|
||||
try {
|
||||
const j = await (await fetch(`/portal/api/location/${encodeURIComponent(LOC_ID)}/history?hours=2`)).json();
|
||||
for (const row of (j.readings || [])) {
|
||||
cd.t.push(row.timestamp ? new Date(row.timestamp + 'Z').toLocaleTimeString() : '');
|
||||
cd.lp.push(numOrNull(row.lp)); cd.leq.push(numOrNull(row.leq));
|
||||
cd.ln1.push(numOrNull(row.ln1)); cd.ln2.push(numOrNull(row.ln2));
|
||||
}
|
||||
chart.data.labels = cd.t;
|
||||
chart.data.datasets[0].data = cd.lp; chart.data.datasets[1].data = cd.leq;
|
||||
chart.data.datasets[2].data = cd.ln1; chart.data.datasets[3].data = cd.ln2;
|
||||
chart.update('none');
|
||||
} catch (e) { /* leave chart empty */ }
|
||||
}
|
||||
|
||||
// ---- live stream (upgrades the cache prefill to a real ~1Hz feed) --------
|
||||
let ws = null, hardCap = null, paused = false;
|
||||
const IDLE_CAP_MS = 15 * 60 * 1000; // auto-close after 15 min so an abandoned
|
||||
// tab doesn't pin the device at 1Hz polling
|
||||
|
||||
function pushPoint(d) {
|
||||
cd.t.push(new Date().toLocaleTimeString());
|
||||
cd.lp.push(numOrNull(d.lp)); cd.leq.push(numOrNull(d.leq));
|
||||
cd.ln1.push(numOrNull(d.ln1)); cd.ln2.push(numOrNull(d.ln2));
|
||||
if (cd.t.length > 600) { cd.t.shift(); cd.lp.shift(); cd.leq.shift(); cd.ln1.shift(); cd.ln2.shift(); }
|
||||
chart.data.labels = cd.t;
|
||||
chart.data.datasets[0].data = cd.lp; chart.data.datasets[1].data = cd.leq;
|
||||
chart.data.datasets[2].data = cd.ln1; chart.data.datasets[3].data = cd.ln2;
|
||||
chart.update('none');
|
||||
}
|
||||
|
||||
function openStream() {
|
||||
if (paused || ws) return;
|
||||
const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||||
ws = new WebSocket(`${proto}//${location.host}/portal/api/location/${encodeURIComponent(LOC_ID)}/stream`);
|
||||
ws.onmessage = (e) => {
|
||||
let d; try { d = JSON.parse(e.data); } catch (_) { return; }
|
||||
if (d.feed_status === 'no_device') {
|
||||
setBadge(null, null);
|
||||
document.getElementById('p-fresh').textContent = 'No device assigned';
|
||||
return;
|
||||
}
|
||||
if (d.heartbeat) return;
|
||||
if (d.feed_status === 'unreachable') {
|
||||
document.getElementById('p-fresh').innerHTML = '<span class="text-amber-400">device unreachable</span>';
|
||||
return;
|
||||
}
|
||||
setCard('p-lp', d.lp); setCard('p-leq', d.leq); setCard('p-lmax', d.lmax);
|
||||
setCard('p-ln1', d.ln1); setCard('p-ln2', d.ln2);
|
||||
const measuring = d.measurement_state === 'Start' || d.measurement_state === 'Measure';
|
||||
setBadge(measuring, d.timestamp || new Date().toISOString());
|
||||
paintLeq(measuring, d.leq);
|
||||
pushPoint(d);
|
||||
};
|
||||
ws.onclose = () => { ws = null; };
|
||||
ws.onerror = () => {};
|
||||
clearTimeout(hardCap);
|
||||
hardCap = setTimeout(() => { paused = true; closeStream(); showPaused(true); }, IDLE_CAP_MS);
|
||||
}
|
||||
|
||||
function closeStream() {
|
||||
clearTimeout(hardCap);
|
||||
if (ws) { try { ws.close(); } catch (_) {} ws = null; }
|
||||
}
|
||||
|
||||
function showPaused(on) {
|
||||
const el = document.getElementById('p-paused');
|
||||
if (el) el.classList.toggle('hidden', !on);
|
||||
}
|
||||
function resumeStream() {
|
||||
paused = false; showPaused(false);
|
||||
prefill(); // refresh cards instantly on resume
|
||||
openStream();
|
||||
}
|
||||
|
||||
// Stop streaming when the tab is hidden (client switched away / locked phone) and
|
||||
// resume when it's visible again — the main cost guard, so the device relaxes back
|
||||
// to its idle poll rate the moment nobody is actually looking.
|
||||
document.addEventListener('visibilitychange', () => {
|
||||
if (document.hidden) closeStream();
|
||||
else if (!paused) openStream();
|
||||
});
|
||||
window.addEventListener('beforeunload', closeStream);
|
||||
|
||||
// ---- alert history + current-alarm banner (read-only) --------------------
|
||||
const EV_METRIC = { leq: 'Leq', lp: 'Lp', lmax: 'Lmax', lpeak: 'Lpeak', ln1: 'L1', ln2: 'L10' };
|
||||
function fmtAlertTime(iso) { return iso ? new Date(iso.endsWith('Z') ? iso : iso + 'Z').toLocaleString() : ''; }
|
||||
|
||||
// ---- alert limits (the active thresholds, read-only) ---------------------
|
||||
function fmtThreshold(r) {
|
||||
const m = EV_METRIC[r.metric] || esc(r.metric);
|
||||
const cmp = r.comparison === 'below' ? 'below' : 'above';
|
||||
let s = `${m} ${cmp} ${r.threshold_db} dB`;
|
||||
if (r.duration_s) s += ` for ${r.duration_s}s`;
|
||||
if (r.schedule_start && r.schedule_end) s += ` · ${r.schedule_start}–${r.schedule_end}`;
|
||||
return s;
|
||||
}
|
||||
async function loadThresholds() {
|
||||
const sec = document.getElementById('p-limits-section');
|
||||
try {
|
||||
const j = await (await fetch(`/portal/api/location/${encodeURIComponent(LOC_ID)}/thresholds`)).json();
|
||||
const rules = j.rules || [];
|
||||
if (!rules.length) { sec.classList.add('hidden'); return; }
|
||||
const list = document.getElementById('p-thresholds');
|
||||
list.innerHTML = '';
|
||||
for (const r of rules) {
|
||||
const row = document.createElement('div');
|
||||
row.className = 'panel px-3.5 py-2.5 text-sm flex items-center gap-2.5';
|
||||
row.innerHTML = `<span class="w-1.5 h-1.5 rounded-full bg-seismo-orange shrink-0"></span>
|
||||
<span class="text-[var(--text)]">${esc(r.name || 'Alert')}</span>
|
||||
<span class="text-[var(--text-dim)] font-mono text-xs">${fmtThreshold(r)}</span>`;
|
||||
list.appendChild(row);
|
||||
}
|
||||
sec.classList.remove('hidden');
|
||||
} catch (e) { sec.classList.add('hidden'); }
|
||||
}
|
||||
|
||||
async function loadEvents() {
|
||||
try {
|
||||
const j = await (await fetch(`/portal/api/location/${encodeURIComponent(LOC_ID)}/events?limit=20`)).json();
|
||||
const events = j.events || [];
|
||||
const banner = document.getElementById('p-alarm-banner');
|
||||
if (j.active) {
|
||||
banner.classList.remove('hidden');
|
||||
document.getElementById('p-alarm-text').textContent =
|
||||
j.active > 1 ? `${j.active} alerts currently active` : 'Currently above threshold.';
|
||||
} else banner.classList.add('hidden');
|
||||
const list = document.getElementById('p-events');
|
||||
if (!events.length) { list.innerHTML = '<div class="text-sm text-[var(--text-dim)]">No alerts have fired.</div>'; return; }
|
||||
list.innerHTML = '';
|
||||
for (const e of events) {
|
||||
const m = EV_METRIC[e.metric] || esc(e.metric);
|
||||
const active = e.status === 'active';
|
||||
const when = active ? `since ${fmtAlertTime(e.onset_at)}`
|
||||
: `${fmtAlertTime(e.onset_at)} → ${fmtAlertTime(e.clear_at)}`;
|
||||
const peak = (e.peak_value != null) ? ` · peak ${e.peak_value} dB` : '';
|
||||
const row = document.createElement('div');
|
||||
row.className = 'panel px-3.5 py-2.5 text-sm ' + (active ? 'border-[rgba(220,38,38,0.4)]' : '');
|
||||
row.innerHTML = `<div class="${active ? 'text-[var(--lvl-bad)] font-medium' : 'text-[var(--text)]'}">${esc(e.rule_name || 'Alert')} <span class="text-xs text-[var(--text-dim)] font-mono">· ${m} ${e.threshold_db} dB</span></div>
|
||||
<div class="text-xs text-[var(--text-dim)] font-mono mt-0.5">${when}${peak}</div>`;
|
||||
list.appendChild(row);
|
||||
}
|
||||
} catch (e) { /* leave history as-is */ }
|
||||
}
|
||||
|
||||
initChart();
|
||||
prefill(); // instant first paint from cache
|
||||
backfill(); // seed the chart trail
|
||||
openStream(); // then upgrade to the live feed
|
||||
loadEvents();
|
||||
loadThresholds();
|
||||
setInterval(loadEvents, 20000);
|
||||
</script>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,192 @@
|
||||
{% 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">–</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">–</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">–</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">–</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 Leq</span>
|
||||
</div>
|
||||
<div class="loc-fresh text-[11px] text-[var(--text-dim)]/70 mt-2 font-mono"> </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 += ` · ${esc(st.leqStr)} dB Leq`;
|
||||
else if (st.status === 'stopped') label += ' · stopped';
|
||||
else if (st.status === 'nodevice') label += ' · no device';
|
||||
else label += ' · 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 = ' ';
|
||||
} 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 %}
|
||||
@@ -4,7 +4,7 @@
|
||||
|
||||
{% block content %}
|
||||
<!-- Breadcrumb Navigation -->
|
||||
<div class="mb-6">
|
||||
<div class="mb-6 flex items-center justify-between gap-3">
|
||||
<nav class="flex items-center space-x-2 text-sm">
|
||||
<a href="/projects" class="text-seismo-orange hover:text-seismo-navy flex items-center">
|
||||
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
@@ -17,6 +17,28 @@
|
||||
</svg>
|
||||
<span class="text-gray-900 dark:text-white font-medium" id="project-name-breadcrumb">Project</span>
|
||||
</nav>
|
||||
|
||||
<!-- Client portal actions for this project -->
|
||||
<div class="shrink-0 flex items-center gap-2">
|
||||
<button type="button" onclick="openShareModal()"
|
||||
class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-lg border border-slate-600 bg-slate-700/40 text-gray-200 hover:bg-slate-700 transition-colors"
|
||||
title="Get a shareable link to this project's client portal">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 010 5.656l-3 3a4 4 0 11-5.656-5.656l1.5-1.5"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.172 13.828a4 4 0 010-5.656l3-3a4 4 0 115.656 5.656l-1.5 1.5"></path>
|
||||
</svg>
|
||||
Copy client link
|
||||
</button>
|
||||
<a href="/projects/{{ project_id }}/portal-preview" target="_blank" rel="noopener"
|
||||
class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-lg border border-seismo-orange/40 bg-seismo-orange/10 text-seismo-orange hover:bg-seismo-orange/20 transition-colors"
|
||||
title="Preview this project's client portal in a new tab">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
|
||||
</svg>
|
||||
View client portal
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Header (loads dynamically) -->
|
||||
@@ -2074,5 +2096,125 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<!-- Share client portal link modal -->
|
||||
<div id="share-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
|
||||
onclick="if(event.target===this)closeShareModal()">
|
||||
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-xl w-full max-w-lg p-6">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Client portal link</h3>
|
||||
<button onclick="closeShareModal()" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 mb-4">
|
||||
Anyone with a link can view this project's client portal (read-only). Links are revocable.
|
||||
</p>
|
||||
|
||||
{% if portal_open_links %}
|
||||
<!-- Dev quick link: plain, no-token URL anyone can open (PORTAL_OPEN_LINKS on) -->
|
||||
<div class="mb-4 p-3 rounded-lg bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800/50">
|
||||
<label class="block text-xs font-medium text-amber-700 dark:text-amber-300 mb-1">Quick share link (dev — anyone can open, no login)</label>
|
||||
<div class="flex gap-2">
|
||||
<input id="open-url" readonly
|
||||
class="flex-1 px-3 py-2 text-sm rounded-lg border border-amber-300 dark:border-amber-700 bg-white dark:bg-slate-900 text-gray-800 dark:text-gray-200" />
|
||||
<button onclick="copyOpenUrl(this)" class="px-3 py-2 text-sm rounded-lg bg-seismo-orange text-white hover:bg-orange-600">Copy</button>
|
||||
</div>
|
||||
<p class="text-xs text-amber-600 dark:text-amber-400 mt-1">For feedback during development. Disable <code>PORTAL_OPEN_LINKS</code> before real clients.</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div id="share-new" class="hidden mb-4">
|
||||
<label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">New link — copy it now</label>
|
||||
<div class="flex gap-2">
|
||||
<input id="share-new-url" readonly
|
||||
class="flex-1 px-3 py-2 text-sm rounded-lg border border-slate-300 dark:border-slate-600 bg-gray-50 dark:bg-slate-900 text-gray-800 dark:text-gray-200" />
|
||||
<button onclick="copyShareUrl(this)" class="px-3 py-2 text-sm rounded-lg bg-seismo-orange text-white hover:bg-orange-600">Copy</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">Active links</span>
|
||||
<button onclick="generateShareLink()" class="text-sm text-seismo-orange hover:text-seismo-navy font-medium">+ Generate new link</button>
|
||||
</div>
|
||||
<div id="share-list" class="space-y-2 max-h-56 overflow-y-auto"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const SHARE_PROJECT_ID = "{{ project_id }}";
|
||||
function openShareModal() {
|
||||
document.getElementById('share-modal').classList.remove('hidden');
|
||||
document.getElementById('share-new').classList.add('hidden');
|
||||
const ou = document.getElementById('open-url'); // only present when PORTAL_OPEN_LINKS on
|
||||
if (ou) ou.value = `${location.origin}/portal/open/${SHARE_PROJECT_ID}`;
|
||||
loadShareLinks();
|
||||
}
|
||||
function closeShareModal() { document.getElementById('share-modal').classList.add('hidden'); }
|
||||
|
||||
function copyOpenUrl(btn) {
|
||||
const inp = document.getElementById('open-url');
|
||||
inp.select();
|
||||
const done = () => { btn.textContent = 'Copied!'; setTimeout(() => btn.textContent = 'Copy', 1500); };
|
||||
if (navigator.clipboard) navigator.clipboard.writeText(inp.value).then(done).catch(() => { document.execCommand('copy'); done(); });
|
||||
else { document.execCommand('copy'); done(); }
|
||||
}
|
||||
|
||||
async function loadShareLinks() {
|
||||
const list = document.getElementById('share-list');
|
||||
list.innerHTML = '<div class="text-sm text-gray-400">Loading…</div>';
|
||||
try {
|
||||
const j = await (await fetch(`/projects/${SHARE_PROJECT_ID}/portal-links`)).json();
|
||||
if (!j.links || !j.links.length) {
|
||||
list.innerHTML = '<div class="text-sm text-gray-400">No links yet — generate one above.</div>';
|
||||
return;
|
||||
}
|
||||
list.innerHTML = '';
|
||||
for (const l of j.links) {
|
||||
const last = l.last_used_at ? ('last used ' + new Date(l.last_used_at + 'Z').toLocaleString()) : 'never used';
|
||||
const row = document.createElement('div');
|
||||
row.className = 'flex items-center justify-between gap-2 px-3 py-2 rounded-lg border border-slate-200 dark:border-slate-700';
|
||||
row.innerHTML = `<div class="text-sm min-w-0">
|
||||
<div class="text-gray-800 dark:text-gray-200 truncate">${l.label || 'Link'}</div>
|
||||
<div class="text-xs text-gray-400">${last}</div></div>`;
|
||||
const btn = document.createElement('button');
|
||||
btn.className = 'shrink-0 text-xs text-red-600 hover:text-red-700';
|
||||
btn.textContent = 'Revoke';
|
||||
btn.onclick = () => revokeShareLink(l.id);
|
||||
row.appendChild(btn);
|
||||
list.appendChild(row);
|
||||
}
|
||||
} catch (e) {
|
||||
list.innerHTML = '<div class="text-sm text-red-500">Failed to load links.</div>';
|
||||
}
|
||||
}
|
||||
|
||||
async function generateShareLink() {
|
||||
try {
|
||||
const j = await (await fetch(`/projects/${SHARE_PROJECT_ID}/portal-link`, { method: 'POST' })).json();
|
||||
if (j.url) {
|
||||
document.getElementById('share-new').classList.remove('hidden');
|
||||
document.getElementById('share-new-url').value = j.url;
|
||||
loadShareLinks();
|
||||
}
|
||||
} catch (e) {
|
||||
if (window.showToast) showToast('Failed to generate link', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
function copyShareUrl(btn) {
|
||||
const inp = document.getElementById('share-new-url');
|
||||
inp.select();
|
||||
const done = () => { btn.textContent = 'Copied!'; setTimeout(() => btn.textContent = 'Copy', 1500); };
|
||||
if (navigator.clipboard) navigator.clipboard.writeText(inp.value).then(done).catch(() => { document.execCommand('copy'); done(); });
|
||||
else { document.execCommand('copy'); done(); }
|
||||
}
|
||||
|
||||
async function revokeShareLink(id) {
|
||||
if (!confirm('Revoke this link? Anyone using it will be signed out on their next action.')) return;
|
||||
try { await fetch(`/projects/${SHARE_PROJECT_ID}/portal-link/${id}/revoke`, { method: 'POST' }); loadShareLinks(); }
|
||||
catch (e) { if (window.showToast) showToast('Failed to revoke', 'error'); }
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
@@ -112,4 +112,267 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Alerts -->
|
||||
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6 mt-6">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div>
|
||||
<h2 class="text-xl font-semibold text-gray-900 dark:text-white flex items-center gap-2">Alerts
|
||||
<span id="alert-state-badge" class="hidden text-xs px-2 py-0.5 rounded-full"></span>
|
||||
</h2>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400">Threshold rules evaluated on this device's live feed. An enabled alert keeps the device monitored 24/7.</p>
|
||||
</div>
|
||||
<button onclick="openAlertForm()" type="button"
|
||||
class="px-3 py-1.5 text-sm rounded-lg bg-seismo-orange text-white hover:bg-orange-600">+ Add alert</button>
|
||||
</div>
|
||||
|
||||
<div id="alert-rules-list" class="space-y-2"></div>
|
||||
|
||||
<!-- create / edit form -->
|
||||
<div id="alert-form" class="hidden mt-4 p-4 rounded-lg border border-slate-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-900/40">
|
||||
<input type="hidden" id="ar-id">
|
||||
<div class="grid sm:grid-cols-2 gap-3 mb-3">
|
||||
<div>
|
||||
<label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">Name</label>
|
||||
<input id="ar-name" type="text" placeholder="e.g. Night noise limit"
|
||||
class="w-full px-2 py-1.5 rounded border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-sm text-gray-800 dark:text-gray-200">
|
||||
</div>
|
||||
<label class="flex items-end gap-2 text-sm text-gray-700 dark:text-gray-300 pb-1">
|
||||
<input type="checkbox" id="ar-enabled" checked class="rounded"> Enabled
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
|
||||
<span>Alert when</span>
|
||||
<select id="ar-metric" class="px-2 py-1.5 rounded border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800">
|
||||
<option value="leq">Leq</option><option value="lp">Lp</option>
|
||||
<option value="lmax">Lmax</option><option value="lpeak">Lpeak</option>
|
||||
<option value="ln1">L1</option><option value="ln2">L10</option>
|
||||
</select>
|
||||
<span>is</span>
|
||||
<select id="ar-comparison" class="px-2 py-1.5 rounded border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800">
|
||||
<option value="above">above</option><option value="below">below</option>
|
||||
</select>
|
||||
<input id="ar-threshold" type="number" step="0.1" placeholder="65"
|
||||
class="w-20 px-2 py-1.5 rounded border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800"> <span>dB</span>
|
||||
<span>for</span>
|
||||
<input id="ar-duration" type="number" min="0" value="0"
|
||||
class="w-20 px-2 py-1.5 rounded border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800"> <span>seconds</span>
|
||||
</div>
|
||||
|
||||
<div class="mt-3">
|
||||
<label class="inline-flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
|
||||
<input type="checkbox" id="ar-sched-on" onchange="toggleSchedule()" class="rounded"> Only during certain hours
|
||||
</label>
|
||||
<div id="ar-sched" class="hidden mt-2 flex flex-wrap items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
|
||||
<span>from</span><input id="ar-start" type="time" class="px-2 py-1.5 rounded border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800">
|
||||
<span>to</span><input id="ar-end" type="time" class="px-2 py-1.5 rounded border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800">
|
||||
<span class="ml-2">on</span>
|
||||
<span id="ar-days" class="flex gap-1"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<details class="mt-3 text-sm text-gray-600 dark:text-gray-400">
|
||||
<summary class="cursor-pointer select-none">Advanced</summary>
|
||||
<div class="mt-2 flex flex-wrap items-center gap-3">
|
||||
<span>Clear margin</span><input id="ar-margin" type="number" step="0.1" value="2"
|
||||
class="w-16 px-2 py-1 rounded border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800"><span>dB (hysteresis)</span>
|
||||
<span>Cooldown</span><input id="ar-cooldown" type="number" min="0" value="300"
|
||||
class="w-20 px-2 py-1 rounded border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800"><span>s</span>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div class="mt-4 flex gap-2">
|
||||
<button onclick="saveAlertRule()" type="button" class="px-3 py-1.5 text-sm rounded-lg bg-seismo-orange text-white hover:bg-orange-600">Save</button>
|
||||
<button onclick="closeAlertForm()" type="button" class="px-3 py-1.5 text-sm rounded-lg border border-slate-300 dark:border-slate-600 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-slate-700">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Alert history -->
|
||||
<div class="mt-6 pt-4 border-t border-slate-200 dark:border-slate-700">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<h3 class="text-sm font-medium text-gray-700 dark:text-gray-300">History</h3>
|
||||
<button onclick="loadAlertEvents()" type="button" class="text-xs text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">Refresh</button>
|
||||
</div>
|
||||
<div id="alert-events" class="space-y-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const ALERT_UNIT = "{{ unit_id }}";
|
||||
const METRIC_LABELS = { leq: 'Leq', lp: 'Lp', lmax: 'Lmax', lpeak: 'Lpeak', ln1: 'L1', ln2: 'L10' };
|
||||
const DAY_LABELS = ['M', 'T', 'W', 'T', 'F', 'S', 'S']; // Mon=0 .. Sun=6
|
||||
|
||||
// Render the day checkboxes once.
|
||||
(function () {
|
||||
const wrap = document.getElementById('ar-days');
|
||||
DAY_LABELS.forEach((lbl, i) => {
|
||||
const l = document.createElement('label');
|
||||
l.className = 'inline-flex items-center gap-0.5';
|
||||
l.innerHTML = `<input type="checkbox" id="ar-day-${i}" class="rounded"><span class="ml-0.5">${lbl}</span>`;
|
||||
wrap.appendChild(l);
|
||||
});
|
||||
})();
|
||||
|
||||
function condText(r) {
|
||||
const m = METRIC_LABELS[r.metric] || r.metric;
|
||||
let s = `${m} ${r.comparison} ${r.threshold_db} dB`;
|
||||
if (r.duration_s) s += ` for ${r.duration_s}s`;
|
||||
if (r.schedule_start && r.schedule_end) s += ` · ${r.schedule_start}–${r.schedule_end}`;
|
||||
return s;
|
||||
}
|
||||
|
||||
function renderRule(r) {
|
||||
const row = document.createElement('div');
|
||||
row.className = 'flex items-center justify-between gap-2 px-3 py-2 rounded-lg border border-slate-200 dark:border-slate-700';
|
||||
row.innerHTML = `<div class="min-w-0">
|
||||
<div class="text-sm font-medium text-gray-800 dark:text-gray-200 truncate">${r.name}${r.enabled ? '' : ' <span class="text-xs text-gray-400">(disabled)</span>'}</div>
|
||||
<div class="text-xs text-gray-500">${condText(r)}</div></div>
|
||||
<div class="shrink-0 flex items-center gap-3 text-xs">
|
||||
<button data-act="edit" class="text-seismo-orange hover:underline">Edit</button>
|
||||
<button data-act="del" class="text-red-600 hover:underline">Delete</button>
|
||||
</div>`;
|
||||
row.querySelector('[data-act="edit"]').onclick = () => openAlertForm(r);
|
||||
row.querySelector('[data-act="del"]').onclick = () => deleteAlertRule(r.id);
|
||||
return row;
|
||||
}
|
||||
|
||||
async function loadAlertRules() {
|
||||
const list = document.getElementById('alert-rules-list');
|
||||
try {
|
||||
const j = await (await fetch(`/api/slmm/${ALERT_UNIT}/alerts/rules`)).json();
|
||||
const rules = j.rules || [];
|
||||
if (!rules.length) { list.innerHTML = '<div class="text-sm text-gray-400">No alerts configured.</div>'; return; }
|
||||
list.innerHTML = '';
|
||||
rules.forEach(r => list.appendChild(renderRule(r)));
|
||||
} catch (e) { list.innerHTML = '<div class="text-sm text-red-500">Failed to load alerts.</div>'; }
|
||||
}
|
||||
|
||||
function toggleSchedule() {
|
||||
document.getElementById('ar-sched').classList.toggle('hidden', !document.getElementById('ar-sched-on').checked);
|
||||
}
|
||||
|
||||
function openAlertForm(r) {
|
||||
document.getElementById('alert-form').classList.remove('hidden');
|
||||
document.getElementById('ar-id').value = r ? r.id : '';
|
||||
document.getElementById('ar-name').value = r ? r.name : '';
|
||||
document.getElementById('ar-metric').value = r ? r.metric : 'leq';
|
||||
document.getElementById('ar-comparison').value = r ? r.comparison : 'above';
|
||||
document.getElementById('ar-threshold').value = (r && r.threshold_db != null) ? r.threshold_db : '';
|
||||
document.getElementById('ar-duration').value = r ? r.duration_s : 0;
|
||||
document.getElementById('ar-enabled').checked = r ? r.enabled : true;
|
||||
document.getElementById('ar-margin').value = r ? r.clear_margin_db : 2;
|
||||
document.getElementById('ar-cooldown').value = r ? r.cooldown_s : 300;
|
||||
const hasSched = !!(r && r.schedule_start && r.schedule_end);
|
||||
document.getElementById('ar-sched-on').checked = hasSched;
|
||||
document.getElementById('ar-start').value = hasSched ? r.schedule_start : '';
|
||||
document.getElementById('ar-end').value = hasSched ? r.schedule_end : '';
|
||||
const days = (r && r.schedule_days) ? r.schedule_days.split(',') : [];
|
||||
DAY_LABELS.forEach((_, i) => { document.getElementById('ar-day-' + i).checked = days.includes(String(i)); });
|
||||
toggleSchedule();
|
||||
}
|
||||
function closeAlertForm() { document.getElementById('alert-form').classList.add('hidden'); }
|
||||
|
||||
async function saveAlertRule() {
|
||||
const id = document.getElementById('ar-id').value;
|
||||
const threshold = parseFloat(document.getElementById('ar-threshold').value);
|
||||
if (isNaN(threshold)) { if (window.showToast) showToast('Enter a threshold', 'error'); return; }
|
||||
const schedOn = document.getElementById('ar-sched-on').checked;
|
||||
const days = DAY_LABELS.map((_, i) => document.getElementById('ar-day-' + i).checked ? i : null).filter(v => v !== null);
|
||||
const payload = {
|
||||
name: document.getElementById('ar-name').value || 'Alert',
|
||||
metric: document.getElementById('ar-metric').value,
|
||||
comparison: document.getElementById('ar-comparison').value,
|
||||
threshold_db: threshold,
|
||||
duration_s: parseInt(document.getElementById('ar-duration').value) || 0,
|
||||
clear_margin_db: parseFloat(document.getElementById('ar-margin').value) || 2,
|
||||
cooldown_s: parseInt(document.getElementById('ar-cooldown').value) || 300,
|
||||
schedule_start: schedOn ? (document.getElementById('ar-start').value || null) : null,
|
||||
schedule_end: schedOn ? (document.getElementById('ar-end').value || null) : null,
|
||||
schedule_days: (schedOn && days.length) ? days.join(',') : null,
|
||||
enabled: document.getElementById('ar-enabled').checked,
|
||||
};
|
||||
const url = id ? `/api/slmm/${ALERT_UNIT}/alerts/rules/${id}` : `/api/slmm/${ALERT_UNIT}/alerts/rules`;
|
||||
try {
|
||||
const r = await fetch(url, { method: id ? 'PUT' : 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) });
|
||||
if (!r.ok) throw new Error('save failed');
|
||||
closeAlertForm(); loadAlertRules();
|
||||
if (window.showToast) showToast('Alert saved', 'success');
|
||||
} catch (e) { if (window.showToast) showToast('Failed to save alert', 'error'); }
|
||||
}
|
||||
|
||||
async function deleteAlertRule(id) {
|
||||
if (!confirm('Delete this alert rule?')) return;
|
||||
try { await fetch(`/api/slmm/${ALERT_UNIT}/alerts/rules/${id}`, { method: 'DELETE' }); loadAlertRules(); }
|
||||
catch (e) { if (window.showToast) showToast('Failed to delete', 'error'); }
|
||||
}
|
||||
|
||||
// ---- alert history (events) ----------------------------------------------
|
||||
|
||||
function fmtAlertTime(iso) {
|
||||
if (!iso) return '';
|
||||
return new Date(iso.endsWith('Z') ? iso : iso + 'Z').toLocaleString();
|
||||
}
|
||||
|
||||
function updateAlertState(events) {
|
||||
const badge = document.getElementById('alert-state-badge');
|
||||
badge.classList.remove('hidden');
|
||||
const active = events.filter(e => e.status === 'active').length;
|
||||
if (active) {
|
||||
badge.textContent = `● ${active} active`;
|
||||
badge.className = 'text-xs px-2 py-0.5 rounded-full bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300';
|
||||
} else {
|
||||
badge.textContent = '✓ All clear';
|
||||
badge.className = 'text-xs px-2 py-0.5 rounded-full bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300';
|
||||
}
|
||||
}
|
||||
|
||||
function renderEvent(e) {
|
||||
const m = METRIC_LABELS[e.metric] || e.metric;
|
||||
const active = e.status === 'active';
|
||||
const row = document.createElement('div');
|
||||
row.className = 'flex items-center justify-between gap-2 px-3 py-2 rounded-lg border ' +
|
||||
(active ? 'border-red-300 dark:border-red-800 bg-red-50 dark:bg-red-900/20'
|
||||
: 'border-slate-200 dark:border-slate-700');
|
||||
const when = active ? `since ${fmtAlertTime(e.onset_at)}`
|
||||
: `${fmtAlertTime(e.onset_at)} → ${fmtAlertTime(e.clear_at)}`;
|
||||
const peak = (e.peak_value != null) ? ` · peak ${e.peak_value} dB` : '';
|
||||
const ack = e.acknowledged_at ? ` · ack'd${e.acknowledged_by ? ' by ' + e.acknowledged_by : ''}` : '';
|
||||
row.innerHTML = `<div class="min-w-0">
|
||||
<div class="text-sm truncate">
|
||||
<span class="${active ? 'text-red-600 dark:text-red-400 font-medium' : 'text-gray-800 dark:text-gray-200'}">${e.rule_name || 'Alert'}</span>
|
||||
<span class="text-xs text-gray-500"> · ${m} ${e.threshold_db} dB</span>
|
||||
</div>
|
||||
<div class="text-xs text-gray-500">${when}${peak}${ack}</div></div>`;
|
||||
if (!e.acknowledged_at) {
|
||||
const btn = document.createElement('button');
|
||||
btn.className = 'shrink-0 text-xs text-seismo-orange hover:underline';
|
||||
btn.textContent = 'Ack';
|
||||
btn.onclick = () => ackEvent(e.id);
|
||||
row.appendChild(btn);
|
||||
}
|
||||
return row;
|
||||
}
|
||||
|
||||
async function loadAlertEvents() {
|
||||
const list = document.getElementById('alert-events');
|
||||
try {
|
||||
const j = await (await fetch(`/api/slmm/${ALERT_UNIT}/alerts/events?limit=50`)).json();
|
||||
const events = j.events || [];
|
||||
updateAlertState(events);
|
||||
if (!events.length) { list.innerHTML = '<div class="text-sm text-gray-400">No alerts have fired.</div>'; return; }
|
||||
list.innerHTML = '';
|
||||
events.forEach(e => list.appendChild(renderEvent(e)));
|
||||
} catch (e) { list.innerHTML = '<div class="text-sm text-red-500">Failed to load history.</div>'; }
|
||||
}
|
||||
|
||||
async function ackEvent(id) {
|
||||
try { await fetch(`/api/slmm/${ALERT_UNIT}/alerts/events/${id}/ack`, { method: 'POST' }); loadAlertEvents(); }
|
||||
catch (e) { if (window.showToast) showToast('Failed to acknowledge', 'error'); }
|
||||
}
|
||||
|
||||
loadAlertRules();
|
||||
loadAlertEvents();
|
||||
setInterval(loadAlertEvents, 20000); // surface new breaches / clears
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user