6ff401ad74
All checks were successful
Build & Push Docker Image to Gitea Registry / build-and-push (push) Successful in 13s
188 lines
9.4 KiB
HTML
188 lines
9.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>MischLabs Admin</title>
|
|
<meta name="description" content="MischLabs dashboard administration.">
|
|
<meta name="theme-color" content="#0f172a">
|
|
<link rel="stylesheet" href="/style.css?v=24">
|
|
</head>
|
|
<body>
|
|
<header class="shell hero admin-hero">
|
|
<div class="brand">
|
|
<img class="brand-mark" src="/icons/app-icon-source.png" alt="" width="72" height="72">
|
|
<div>
|
|
<p class="eyebrow">Admin</p>
|
|
<h1>MischLabs</h1>
|
|
<p class="subtitle">Dienste pruefen, Kategorien vorbereiten und Dashboard-Konfiguration verwalten.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="admin-actions">
|
|
<a class="ghost-button" id="headerDashboardBtn" href="/">Dashboard</a>
|
|
<button class="ghost-button" id="loginButton" type="button">Mit Keycloak anmelden</button>
|
|
<button class="ghost-button" id="logoutButton" type="button" hidden>Abmelden</button>
|
|
<button class="hamburger-menu-btn" id="hamburgerMenuBtn" aria-label="Menü öffnen" type="button" style="display: none;">
|
|
<span class="hamburger-bar"></span>
|
|
<span class="hamburger-bar"></span>
|
|
<span class="hamburger-bar"></span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="shell admin-shell">
|
|
<section class="admin-panel" id="loginPanel">
|
|
<p class="section-kicker">SSO</p>
|
|
<h2>Anmeldung erforderlich</h2>
|
|
<p class="admin-copy">Diese Seite nutzt Keycloak per Authorization Code + PKCE. Der Client muss in Keycloak als Public Client mit Redirect URI `https://mischlabs.de/admin.html` angelegt sein.</p>
|
|
<div class="notice" id="loginMessage">Noch nicht angemeldet.</div>
|
|
</section>
|
|
|
|
<section class="admin-panel" id="adminPanel" hidden>
|
|
<div class="admin-panel-head">
|
|
<div>
|
|
<p class="section-kicker">Konfiguration</p>
|
|
<h2>System-Administration</h2>
|
|
</div>
|
|
</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">
|
|
<div style="display: flex; align-items: center; gap: 8px;">
|
|
<span>Dienste-Status (Live-Proxy)</span>
|
|
<span id="servicesStatusSummary" class="section-count" style="display: inline; margin-left: 8px; font-weight: 500;"></span>
|
|
</div>
|
|
<button class="ghost-button mini" id="refreshServicesButton" type="button">Aktualisieren</button>
|
|
</div>
|
|
<div id="servicesStatusBoard" class="services-status-board">Lade Status...</div>
|
|
</section>
|
|
|
|
<section class="ops-card admin-tab-content" id="card-disks">
|
|
<div class="ops-card-head">
|
|
<span>NAS Speicher</span>
|
|
<button class="ghost-button mini" id="refreshOpsButton" type="button">Aktualisieren</button>
|
|
</div>
|
|
<div id="diskStatus" class="ops-list">Noch nicht geladen.</div>
|
|
</section>
|
|
|
|
<section class="ops-card admin-tab-content" id="card-watchtower">
|
|
<div class="ops-card-head">
|
|
<span>Watchtower</span>
|
|
<button class="ghost-button mini" id="runWatchtowerButton" type="button">Jetzt pruefen</button>
|
|
</div>
|
|
<div id="watchtowerStatus" class="ops-list">Noch nicht geladen.</div>
|
|
</section>
|
|
|
|
<section class="ops-card ops-card-wide admin-tab-content" id="card-containers">
|
|
<div class="ops-card-head">
|
|
<span>Container</span>
|
|
<button class="ghost-button mini danger-button" id="dangerModeButton" type="button">Danger entsperren</button>
|
|
</div>
|
|
<div class="danger-state" id="dangerState" hidden></div>
|
|
<div id="containerStatus" class="ops-list">Noch nicht geladen.</div>
|
|
</section>
|
|
</div>
|
|
|
|
<section class="ops-card ops-card-wide admin-tab-content" id="editorCard" style="margin-top: 14px;">
|
|
<div class="ops-card-head">
|
|
<span>Dienste & Kategorien (Konfiguration)</span>
|
|
</div>
|
|
<div class="admin-actions-bar">
|
|
<button class="ghost-button mini" id="checkAllButton" type="button">Alle Status pruefen</button>
|
|
<button class="ghost-button mini" id="saveLocalButton" type="button">Lokal speichern</button>
|
|
<button class="ghost-button mini" id="resetLocalButton" type="button">Aenderungen verwerfen</button>
|
|
<button class="ghost-button mini" id="downloadConfigButton" type="button">JSON exportieren</button>
|
|
</div>
|
|
<div class="admin-table" id="serviceEditor"></div>
|
|
</section>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- Hamburger Navigation Drawer -->
|
|
<div class="admin-nav-backdrop" id="adminNavBackdrop"></div>
|
|
<aside class="admin-nav-drawer" id="adminNavDrawer">
|
|
<div class="drawer-header">
|
|
<h3>MischLabs Admin</h3>
|
|
<button class="drawer-close-btn" id="drawerCloseBtn" aria-label="Menü schließen" type="button">×</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>
|
|
</button>
|
|
<button class="drawer-nav-item" data-tab="disks" type="button">
|
|
<span class="drawer-nav-icon">💾</span>
|
|
<span class="drawer-nav-text">NAS Speicher</span>
|
|
</button>
|
|
<button class="drawer-nav-item" data-tab="watchtower" type="button">
|
|
<span class="drawer-nav-icon">🐳</span>
|
|
<span class="drawer-nav-text">Watchtower</span>
|
|
</button>
|
|
<button class="drawer-nav-item" data-tab="containers" type="button">
|
|
<span class="drawer-nav-icon">📦</span>
|
|
<span class="drawer-nav-text">Container</span>
|
|
</button>
|
|
<button class="drawer-nav-item" data-tab="config" type="button">
|
|
<span class="drawer-nav-icon">⚙️</span>
|
|
<span class="drawer-nav-text">Dienste & Kategorien</span>
|
|
</button>
|
|
|
|
<div class="drawer-divider"></div>
|
|
|
|
<a class="drawer-nav-item" href="/">
|
|
<span class="drawer-nav-icon">🏠</span>
|
|
<span class="drawer-nav-text">Dashboard</span>
|
|
</a>
|
|
<button class="drawer-nav-item drawer-logout-btn" id="drawerLogoutBtn" type="button">
|
|
<span class="drawer-nav-icon">🚪</span>
|
|
<span class="drawer-nav-text">Abmelden</span>
|
|
</button>
|
|
</nav>
|
|
</aside>
|
|
|
|
<script src="/admin.js?v=20" defer></script>
|
|
</body>
|
|
</html>
|