Rebuild the admin dashboard as a Svelte 5 + TypeScript app
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.
This commit is contained in:
@@ -0,0 +1,28 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user