feat: add consolidated Übersicht (Overview) dashboard tab with real-time mini-cards
All checks were successful
Build & Push Docker Image to Gitea Registry / build-and-push (push) Successful in 13s

This commit is contained in:
Kroonk
2026-05-21 18:41:11 +02:00
parent 32bed2d65e
commit 6ff401ad74
3 changed files with 292 additions and 3 deletions

View File

@@ -6,7 +6,7 @@
<title>MischLabs Admin</title>
<meta name="description" content="MischLabs dashboard administration.">
<meta name="theme-color" content="#0f172a">
<link rel="stylesheet" href="/style.css?v=23">
<link rel="stylesheet" href="/style.css?v=24">
</head>
<body>
<header class="shell hero admin-hero">
@@ -48,6 +48,41 @@
</div>
<div id="adminUser" style="display: none;"></div>
<!-- Dashboard Overview Tab -->
<div class="admin-tab-content" id="card-overview">
<div class="overview-grid">
<div class="overview-mini-card" data-target-tab="services">
<div class="mini-card-head">
<span class="mini-card-icon">🌐</span>
<h4>Dienste-Status</h4>
</div>
<div class="mini-card-body" id="mini-services-status">Lade...</div>
</div>
<div class="overview-mini-card" data-target-tab="disks">
<div class="mini-card-head">
<span class="mini-card-icon">💾</span>
<h4>NAS Speicher</h4>
</div>
<div class="mini-card-body" id="mini-disks-status">Lade...</div>
</div>
<div class="overview-mini-card" data-target-tab="watchtower">
<div class="mini-card-head">
<span class="mini-card-icon">🐳</span>
<h4>Watchtower</h4>
</div>
<div class="mini-card-body" id="mini-watchtower-status">Lade...</div>
</div>
<div class="overview-mini-card" data-target-tab="containers">
<div class="mini-card-head">
<span class="mini-card-icon">📦</span>
<h4>Container</h4>
</div>
<div class="mini-card-body" id="mini-containers-status">Lade...</div>
</div>
</div>
</div>
<div class="ops-grid" id="opsGrid">
<section class="ops-card ops-card-wide admin-tab-content" id="card-services">
<div class="ops-card-head">
@@ -109,6 +144,10 @@
<button class="drawer-close-btn" id="drawerCloseBtn" aria-label="Menü schließen" type="button">&times;</button>
</div>
<nav class="drawer-nav">
<button class="drawer-nav-item" data-tab="overview" type="button">
<span class="drawer-nav-icon">📊</span>
<span class="drawer-nav-text">Übersicht</span>
</button>
<button class="drawer-nav-item" data-tab="services" type="button">
<span class="drawer-nav-icon">🌐</span>
<span class="drawer-nav-text">Dienste-Status</span>
@@ -143,6 +182,6 @@
</nav>
</aside>
<script src="/admin.js?v=19" defer></script>
<script src="/admin.js?v=20" defer></script>
</body>
</html>