Lago/mc_cars_gmbh_infraestructure
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(admin): migrate admin UI to Microsoft Fluent web components

Browse Source
This commit is contained in:
Lago
2026-04-17 23:46:57 +02:00
parent fb0f81fbe5
commit 1e5895592a
3 changed files with 130 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/admin.js
+17 -11
View File
@@ -17,6 +17,8 @@ const loginForm = document.querySelector("#loginForm");
const loginError = document.querySelector("#loginError");
const rotateForm = document.querySelector("#rotateForm");
const rotateError = document.querySelector("#rotateError");
const loginSubmit = document.querySelector("#loginSubmit");
const rotateSubmit = document.querySelector("#rotateSubmit");
const logoutBtn = document.querySelector("#logoutBtn");
const changePwBtn = document.querySelector("#changePwBtn");
const adminWho = document.querySelector("#adminWho");
@@ -41,6 +43,10 @@ const photoInput = document.querySelector("#photoInput");
const photoPreview = document.querySelector("#photoPreview");
const tableBody = document.querySelector("#adminTable tbody");
loginSubmit?.addEventListener("click", () => loginForm.requestSubmit());
rotateSubmit?.addEventListener("click", () => rotateForm.requestSubmit());
saveBtn?.addEventListener("click", () => vehicleForm.requestSubmit());
// ----- State -----
const state = {
user: null,
@@ -204,8 +210,8 @@ function renderVehicles() {
<td>€ ${v.daily_price_eur}</td>
<td>${v.is_active ? "✅" : "—"}</td>
<td style="white-space:nowrap;">
<button class="btn small ghost" data-edit="${v.id}">Edit</button>
<button class="btn small danger" data-del="${v.id}">Del</button>
<fluent-button appearance="outline" data-edit="${v.id}">Edit</fluent-button>
<fluent-button appearance="accent" data-del="${v.id}">Del</fluent-button>
</td>`;
tableBody.appendChild(tr);
}
@@ -352,12 +358,12 @@ function renderLeads() {
<td>${esc(l.date_from || "—")} → ${esc(l.date_to || "—")}</td>
<td><span class="pill pill-${esc(l.status)}">${esc(l.status)}</span></td>
<td style="white-space:nowrap;">
<button class="btn small ghost" data-open="${l.id}">Details</button>
<fluent-button appearance="outline" data-open="${l.id}">Details</fluent-button>
${wantActive ? `
<button class="btn small" data-qual="${l.id}">Qualifizieren</button>
<button class="btn small danger" data-disq="${l.id}">Ablehnen</button>
<fluent-button appearance="accent" data-qual="${l.id}">Qualifizieren</fluent-button>
<fluent-button appearance="outline" data-disq="${l.id}">Ablehnen</fluent-button>
` : `
<button class="btn small ghost" data-reopen="${l.id}">Wieder oeffnen</button>
<fluent-button appearance="outline" data-reopen="${l.id}">Wieder oeffnen</fluent-button>
`}
</td>`;
leadsTableBody.appendChild(tr);
@@ -385,9 +391,9 @@ function openLead(id) {
</dl>
<div style="display:flex;gap:0.5rem;justify-content:flex-end;margin-top:0.8rem;">
${l.is_active ? `
<button class="btn danger" id="dlgDisq">Ablehnen</button>
<button class="btn" id="dlgQual">Qualifizieren</button>
` : `<button class="btn ghost" id="dlgReopen">Wieder oeffnen</button>`}
<fluent-button appearance="outline" id="dlgDisq">Ablehnen</fluent-button>
<fluent-button appearance="accent" id="dlgQual">Qualifizieren</fluent-button>
` : `<fluent-button appearance="outline" id="dlgReopen">Wieder oeffnen</fluent-button>`}
</div>`;
leadDialog.showModal();
const note = () => document.querySelector("#leadNote").value;
@@ -447,9 +453,9 @@ function renderCustomers() {
<td><code class="muted">${esc(c.lead_id?.slice(0, 8) || "—")}</code></td>
<td><span class="pill pill-${esc(c.status)}">${esc(c.status)}</span></td>
<td style="white-space:nowrap;">
<button class="btn small ghost" data-toggle="${c.id}" data-status="${c.status}">
<fluent-button appearance="outline" data-toggle="${c.id}" data-status="${c.status}">
${c.status === "active" ? "Inaktiv setzen" : "Aktiv setzen"}
</button>
</fluent-button>
</td>`;
customersTableBody.appendChild(tr);
}