feat(admin): migrate admin UI to Microsoft Fluent web components
This commit is contained in:
Lago
+35
-23
@@ -4,11 +4,23 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Admin · MC Cars</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap" rel="stylesheet" />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Segoe+UI:wght@400;600;700&display=swap" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<script type="module">
|
||||
import {
|
||||
provideFluentDesignSystem,
|
||||
fluentButton,
|
||||
fluentCard
|
||||
} from "https://esm.sh/@fluentui/web-components@2.6.1";
|
||||
|
||||
provideFluentDesignSystem().register(
|
||||
fluentButton(),
|
||||
fluentCard()
|
||||
);
|
||||
</script>
|
||||
<script>document.write('<scr'+'ipt src="config.js?v='+Date.now()+'"><\/scr'+'ipt>')</script>
|
||||
</head>
|
||||
<body>
|
||||
<body class="admin-fluent">
|
||||
<!-- Login -->
|
||||
<section id="loginView" class="admin-login" style="display:none;">
|
||||
<div class="logo" style="justify-content:center;margin-bottom:1.5rem;">
|
||||
@@ -24,7 +36,7 @@
|
||||
<span>Passwort</span>
|
||||
<input type="password" name="password" required autocomplete="current-password" />
|
||||
</label>
|
||||
<button class="btn" type="submit">Anmelden</button>
|
||||
<fluent-button id="loginSubmit" appearance="accent" type="button">Anmelden</fluent-button>
|
||||
<p class="form-feedback error" id="loginError"></p>
|
||||
<p style="color:var(--muted);font-size:0.82rem;text-align:center;">
|
||||
Only admins. Self-registration is disabled.
|
||||
@@ -51,7 +63,7 @@
|
||||
<span>Wiederholen</span>
|
||||
<input type="password" name="pw2" minlength="10" required autocomplete="new-password" />
|
||||
</label>
|
||||
<button class="btn" type="submit">Speichern</button>
|
||||
<fluent-button id="rotateSubmit" appearance="accent" type="button">Speichern</fluent-button>
|
||||
<p class="form-feedback error" id="rotateError"></p>
|
||||
</form>
|
||||
</section>
|
||||
@@ -61,29 +73,29 @@
|
||||
<div class="admin-bar">
|
||||
<h1>MC Cars · Admin</h1>
|
||||
<div style="display:flex;gap:0.6rem;align-items:center;flex-wrap:wrap;">
|
||||
<a href="index.html" class="btn ghost small">Website</a>
|
||||
<a href="index.html"><fluent-button appearance="stealth">Website</fluent-button></a>
|
||||
|
||||
<span id="adminWho" style="color:var(--muted);font-size:0.85rem;"></span>
|
||||
<button id="changePwBtn" class="btn ghost small">Passwort aendern</button>
|
||||
<button id="logoutBtn" class="btn small">Logout</button>
|
||||
<fluent-button id="changePwBtn" appearance="outline">Passwort aendern</fluent-button>
|
||||
<fluent-button id="logoutBtn" appearance="accent">Logout</fluent-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tabs -->
|
||||
<div class="admin-tabs" role="tablist">
|
||||
<button class="tab active" data-tab="leads" role="tab">Leads <span id="leadsBadge" class="tab-badge">0</span></button>
|
||||
<button class="tab" data-tab="customers" role="tab">Kunden <span id="customersBadge" class="tab-badge">0</span></button>
|
||||
<button class="tab" data-tab="vehicles" role="tab">Fahrzeuge</button>
|
||||
<fluent-button class="tab active" data-tab="leads" role="tab" appearance="stealth">Leads <span id="leadsBadge" class="tab-badge">0</span></fluent-button>
|
||||
<fluent-button class="tab" data-tab="customers" role="tab" appearance="stealth">Kunden <span id="customersBadge" class="tab-badge">0</span></fluent-button>
|
||||
<fluent-button class="tab" data-tab="vehicles" role="tab" appearance="stealth">Fahrzeuge</fluent-button>
|
||||
</div>
|
||||
|
||||
<!-- LEADS -->
|
||||
<div class="tab-panel" id="tab-leads">
|
||||
<div class="panel">
|
||||
<fluent-card class="panel">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;">
|
||||
<h2 style="margin:0;">Leads</h2>
|
||||
<div class="sub-tabs" role="tablist">
|
||||
<button class="sub-tab active" data-lview="active">Aktive Leads</button>
|
||||
<button class="sub-tab" data-lview="inactive">Abgeschlossen</button>
|
||||
<fluent-button class="sub-tab active" data-lview="active" appearance="stealth">Aktive Leads</fluent-button>
|
||||
<fluent-button class="sub-tab" data-lview="inactive" appearance="stealth">Abgeschlossen</fluent-button>
|
||||
</div>
|
||||
</div>
|
||||
<table class="admin-table" id="leadsTable">
|
||||
@@ -100,12 +112,12 @@
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
<p id="leadsEmpty" class="muted" style="display:none;text-align:center;padding:2rem 0;">Keine Leads in dieser Ansicht.</p>
|
||||
</div>
|
||||
</fluent-card>
|
||||
</div>
|
||||
|
||||
<!-- CUSTOMERS -->
|
||||
<div class="tab-panel" id="tab-customers" style="display:none;">
|
||||
<div class="panel">
|
||||
<fluent-card class="panel">
|
||||
<h2>Kunden</h2>
|
||||
<p class="muted" style="margin-top:-0.4rem;">Entstehen automatisch, sobald ein Lead qualifiziert wird. Die Quelle bleibt als <code>lead_id</code> verknuepft.</p>
|
||||
<table class="admin-table" id="customersTable">
|
||||
@@ -122,13 +134,13 @@
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
<p id="customersEmpty" class="muted" style="display:none;text-align:center;padding:2rem 0;">Noch keine Kunden.</p>
|
||||
</div>
|
||||
</fluent-card>
|
||||
</div>
|
||||
|
||||
<!-- VEHICLES -->
|
||||
<div class="tab-panel" id="tab-vehicles" style="display:none;">
|
||||
<div class="admin-grid">
|
||||
<div class="panel">
|
||||
<fluent-card class="panel">
|
||||
<h2 id="formTitle">Neues Fahrzeug</h2>
|
||||
<form class="admin-form" id="vehicleForm">
|
||||
<input type="hidden" name="vid" />
|
||||
@@ -180,14 +192,14 @@
|
||||
</label>
|
||||
|
||||
<div style="display:flex;gap:0.5rem;">
|
||||
<button class="btn" type="submit" id="saveBtn">Speichern</button>
|
||||
<button class="btn ghost" type="button" id="resetBtn">Neu</button>
|
||||
<fluent-button appearance="accent" type="button" id="saveBtn">Speichern</fluent-button>
|
||||
<fluent-button appearance="outline" type="button" id="resetBtn">Neu</fluent-button>
|
||||
</div>
|
||||
<p class="form-feedback" id="formFeedback"></p>
|
||||
</form>
|
||||
</div>
|
||||
</fluent-card>
|
||||
|
||||
<div class="panel">
|
||||
<fluent-card class="panel">
|
||||
<h2>Alle Fahrzeuge</h2>
|
||||
<table class="admin-table" id="adminTable">
|
||||
<thead>
|
||||
@@ -201,7 +213,7 @@
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</fluent-card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -210,7 +222,7 @@
|
||||
<dialog id="leadDialog">
|
||||
<div class="dialog-head">
|
||||
<h3 id="leadDialogTitle" style="margin:0;">Lead</h3>
|
||||
<button class="dialog-close" id="leadDialogClose" aria-label="Close">×</button>
|
||||
<fluent-button class="dialog-close" id="leadDialogClose" aria-label="Close" appearance="stealth">×</fluent-button>
|
||||
</div>
|
||||
<div class="dialog-body" id="leadDialogBody"></div>
|
||||
</dialog>
|
||||
|
||||
Reference in New Issue
Block a user