63 lines
2.4 KiB
Svelte
63 lines
2.4 KiB
Svelte
<script>
|
|
import Panel from '../lib/Panel.svelte'
|
|
import Stat from '../lib/Stat.svelte'
|
|
import Bar from '../lib/Bar.svelte'
|
|
import Tag from '../lib/Tag.svelte'
|
|
import { channels, messages } from '../lib/data.js'
|
|
|
|
const fromTone = {
|
|
ok: 'text-ok', warn: 'text-warn', alert: 'text-alert',
|
|
flare: 'text-flare', term: 'text-term',
|
|
}
|
|
</script>
|
|
|
|
<div class="space-y-4">
|
|
<div class="grid grid-cols-2 gap-4 lg:grid-cols-4">
|
|
<Panel title="Uplink"><Stat label="fleet command" value="ENCRYPTED" tone="text-ok" sub="Q-band · 0% loss" /></Panel>
|
|
<Panel title="Active Channels"><Stat label="monitored" value={channels.length} sub="1 degraded" /></Panel>
|
|
<Panel title="Signal Latency"><Stat label="to relay" value={418} unit="ms" tone="text-warn" sub="lightspeed lag" /></Panel>
|
|
<Panel title="EMCON"><Stat label="emissions" value="DELTA" tone="text-flare" sub="restricted transmit" /></Panel>
|
|
</div>
|
|
|
|
<div class="grid gap-4 lg:grid-cols-2">
|
|
<Panel title="Channels" accent="text-term">
|
|
<table class="w-full text-xs">
|
|
<thead>
|
|
<tr class="text-left text-haze/70 uppercase tracking-wider">
|
|
<th class="pb-2 font-normal">Channel</th>
|
|
<th class="pb-2 font-normal">Band</th>
|
|
<th class="pb-2 text-right font-normal">Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-haze/15">
|
|
{#each channels as c}
|
|
<tr>
|
|
<td class="py-2 text-term">{c.name}</td>
|
|
<td class="py-2 tabular-nums text-haze">{c.band}</td>
|
|
<td class="py-2 text-right"><Tag tone={c.tone}>{c.status}</Tag></td>
|
|
</tr>
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
<div class="mt-4 space-y-3">
|
|
<Bar label="Antenna alignment" pct={97} tone="bg-ok" />
|
|
<Bar label="Relay-19 link" pct={43} tone="bg-warn" />
|
|
</div>
|
|
</Panel>
|
|
|
|
<Panel title="Message Traffic" accent="text-flare">
|
|
<ul class="space-y-2">
|
|
{#each messages as m}
|
|
<li class="border border-haze/20 bg-void/40 px-3 py-2">
|
|
<div class="flex items-center justify-between text-[0.6rem] uppercase tracking-wider">
|
|
<span class="{fromTone[m.tone] ?? 'text-term'} glow-sm">{m.from}</span>
|
|
<span class="tabular-nums text-haze">{m.t}</span>
|
|
</div>
|
|
<p class="mt-1 text-xs leading-snug text-haze/90">{m.text}</p>
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
</Panel>
|
|
</div>
|
|
</div>
|