patrick
5ecd143535
- Kein Node.js, kein npm, kein Build-Schritt mehr - HTMX 2.0.4 + PicoCSS 2 vendored in backend/static/ - Jinja2 Templates für alle 9 Seiten (Dashboard, ZFS, Snapshots, Shares, Identities, Logs, Services, Navigator, Login) - HTMX Fragments für Live-Updates (30s Polling Dashboard) - JWT als httpOnly Cookie statt localStorage - Disk Usage zeigt TB/PB korrekt (Jinja2 serverseitig formatiert) - Update-safe: nur Python-Deps, keine npm-Abhängigkeiten Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
54 lines
1.3 KiB
HTML
54 lines
1.3 KiB
HTML
{% extends "base.html" %}
|
||
{% block title %}Dashboard – ZMB Webui{% endblock %}
|
||
{% block content %}
|
||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem">
|
||
<div>
|
||
<h2 style="margin:0">Dashboard</h2>
|
||
<small style="color:var(--pico-muted-color)">{{ hostname }}</small>
|
||
</div>
|
||
<span class="htmx-indicator" id="spinner">◠ aktualisiert...</span>
|
||
</div>
|
||
|
||
<!-- Schnellstatistiken (alle 30s) -->
|
||
<div class="grid-stats" id="quick-stats"
|
||
hx-get="/fragments/quick-stats"
|
||
hx-trigger="load, every 30s"
|
||
hx-indicator="#spinner">
|
||
<div class="stat-card"><h3>Lädt...</h3><p class="value">–</p></div>
|
||
</div>
|
||
|
||
<hr>
|
||
|
||
<!-- Pools -->
|
||
<h3>Storage Pools</h3>
|
||
<div id="pools"
|
||
hx-get="/fragments/pools"
|
||
hx-trigger="load, every 30s"
|
||
hx-indicator="#spinner">
|
||
<p aria-busy="true">Lade Pools...</p>
|
||
</div>
|
||
|
||
<hr>
|
||
|
||
<!-- Disk Usage -->
|
||
<h3>Disk Usage</h3>
|
||
<div id="disk-usage"
|
||
hx-get="/fragments/disk-usage"
|
||
hx-trigger="load"
|
||
hx-indicator="#spinner">
|
||
<p aria-busy="true">Lade...</p>
|
||
</div>
|
||
|
||
<hr>
|
||
|
||
<!-- Netzwerk -->
|
||
<h3>Network Traffic</h3>
|
||
<div id="net-traffic"
|
||
hx-get="/fragments/net-traffic"
|
||
hx-trigger="load, every 10s"
|
||
hx-indicator="#spinner">
|
||
<p aria-busy="true">Lade...</p>
|
||
</div>
|
||
|
||
{% endblock %}
|