TZGyn
bc52af33cf
Frontend in web/ (Vite via bun, pure CSS, no component libraries), built to internal/dashboard/dist and embedded into the binary; the Dockerfile builds it in a bun stage. Old static dashboard.html removed.
29 lines
1.1 KiB
Svelte
29 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import type { CaInfo, ServerInfo, Totals } from "./api";
|
|
import { fmtDate, fmtUptime } from "./format";
|
|
|
|
let { server, ca, totals }: { server: ServerInfo; ca: CaInfo; totals: Totals } = $props();
|
|
</script>
|
|
|
|
<div class="cards">
|
|
<div class="card"><div class="label">Tunnels</div><div class="value">{totals.tunnels}</div></div>
|
|
<div class="card"><div class="label">Online</div><div class="value">{totals.online}</div></div>
|
|
<div class="card"><div class="label">Bridges</div><div class="value">{totals.bridges}</div></div>
|
|
<div class="card"><div class="label">Visitors</div><div class="value">{totals.visitors}</div></div>
|
|
<div class="card"><div class="label">CA expires</div><div class="value small">{fmtDate(ca.expires)}</div></div>
|
|
<div class="card"><div class="label">Uptime</div><div class="value small">{fmtUptime(server.uptime_seconds)}</div></div>
|
|
</div>
|
|
|
|
<style>
|
|
.cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
|
gap: 12px;
|
|
margin-bottom: 24px;
|
|
}
|
|
.value.small {
|
|
font-size: 14px;
|
|
margin-top: 8px;
|
|
}
|
|
</style>
|