Verwaltung: Auswertungs-Kisten sind jetzt selbst der Klick-Auslöser (Accordion statt Extra-Knopf
Der separate "Auswertung anzeigen"-Knopf war nicht der Plan — stattdessen sind jetzt die drei Kisten (Bestseller je Kategorie / Herkunft der Bestellungen / Stammkundschaft) selbst klickbar und klappen unabhängig voneinander ihren eigenen Inhalt auf, per sanfter CSS-Grid-Animation und rotierendem Chevron. Startzustand: alle drei eingeklappt (nur Kopfzeile sichtbar). Co-Authored-By: Claude Sonnet 5 <[email protected]>
This commit is contained in:
qcigano
co-authored by
Claude Sonnet 5
Claude Sonnet 5
parent
03a9fa234c
commit
76db073cb0
@@ -137,63 +137,70 @@ const lang: Locale = "de";
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Auswertung (Bestseller/Herkunft/Stammkundschaft) ist standardmäßig eingeklappt und
|
||||
erscheint per Klick sofort hier, direkt unter den beiden Kisten oben — statt immer
|
||||
Platz auf der Seite zu belegen, bevor man überhaupt Bestellungen zum Auswerten hat. */}
|
||||
{/* Auswertung (Bestseller/Herkunft/Stammkundschaft): jede Kiste ist jetzt SELBST der
|
||||
Klick-Auslöser (Wunsch: "es sollten Kisten sein wo man drauf drückt und dann gehen die
|
||||
anderen Sachen auf") — kein separater Knopf mehr davor. Jede Box startet eingeklappt
|
||||
(nur Kopfzeile sichtbar) und klappt beim Klick auf die Kopfzeile ihren eigenen Inhalt auf,
|
||||
unabhängig von den anderen beiden Kisten. */}
|
||||
<section class="section-tight">
|
||||
<div class="container">
|
||||
<button type="button" class="btn btn-outline verwaltung-auswertung-toggle" id="verwaltung-auswertung-toggle" aria-expanded="false" aria-controls="verwaltung-auswertung-wrapper">
|
||||
<span aria-hidden="true">📊</span> Auswertung anzeigen <span class="verwaltung-toggle-chevron" aria-hidden="true">▾</span>
|
||||
</button>
|
||||
|
||||
<div id="verwaltung-auswertung-wrapper" hidden>
|
||||
<div class="verwaltung-box" style="--box-color: #e3b23c;">
|
||||
<div class="verwaltung-box-head">
|
||||
<div id="verwaltung-auswertung-wrapper">
|
||||
<div class="verwaltung-box verwaltung-box-collapsible is-collapsed" style="--box-color: #e3b23c;" data-collapsible-box>
|
||||
<button type="button" class="verwaltung-box-head verwaltung-box-head-btn" aria-expanded="false">
|
||||
<span class="verwaltung-box-icon" aria-hidden="true">🏆</span>
|
||||
<h2>Bestseller je Kategorie</h2>
|
||||
</div>
|
||||
<span class="verwaltung-box-chevron" aria-hidden="true">▾</span>
|
||||
</button>
|
||||
<div class="verwaltung-box-body">
|
||||
<div class="verwaltung-box-empty" id="verwaltung-kat-empty" style="display:none;">
|
||||
<span class="verwaltung-box-empty-icon" aria-hidden="true">🧶</span>
|
||||
<p>Noch keine ausgewerteten Verkäufe.</p>
|
||||
<p class="small">Hier siehst du bald, welche Produkte je Kategorie am besten laufen (stornierte Bestellungen zählen nicht mit).</p>
|
||||
<div class="verwaltung-box-body-inner">
|
||||
<div class="verwaltung-box-empty" id="verwaltung-kat-empty" style="display:none;">
|
||||
<span class="verwaltung-box-empty-icon" aria-hidden="true">🧶</span>
|
||||
<p>Noch keine ausgewerteten Verkäufe.</p>
|
||||
<p class="small">Hier siehst du bald, welche Produkte je Kategorie am besten laufen (stornierte Bestellungen zählen nicht mit).</p>
|
||||
</div>
|
||||
{/* Jede Kategorie ist eine eigene Kachel im selben Stil wie die Bestellstatus-
|
||||
Kacheln oben — Klick öffnet direkt darunter die volle Produktliste. */}
|
||||
<div class="verwaltung-analyse-grid" id="verwaltung-kat-grid"></div>
|
||||
<div class="verwaltung-analyse-detail" id="verwaltung-kat-detail" hidden></div>
|
||||
</div>
|
||||
{/* Jede Kategorie ist jetzt eine eigene Kachel im selben Stil wie die
|
||||
Bestellstatus-Kacheln oben — Klick öffnet direkt darunter die volle Produktliste. */}
|
||||
<div class="verwaltung-analyse-grid" id="verwaltung-kat-grid"></div>
|
||||
<div class="verwaltung-analyse-detail" id="verwaltung-kat-detail" hidden></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="verwaltung-box" style="--box-color: #6ecb8f;">
|
||||
<div class="verwaltung-box-head">
|
||||
<div class="verwaltung-box verwaltung-box-collapsible is-collapsed" style="--box-color: #6ecb8f;" data-collapsible-box>
|
||||
<button type="button" class="verwaltung-box-head verwaltung-box-head-btn" aria-expanded="false">
|
||||
<span class="verwaltung-box-icon" aria-hidden="true">🌍</span>
|
||||
<h2>Herkunft der Bestellungen</h2>
|
||||
</div>
|
||||
<span class="verwaltung-box-chevron" aria-hidden="true">▾</span>
|
||||
</button>
|
||||
<div class="verwaltung-box-body">
|
||||
<div class="verwaltung-box-empty" id="verwaltung-land-empty" style="display:none;">
|
||||
<span class="verwaltung-box-empty-icon" aria-hidden="true">🗺️</span>
|
||||
<p>Noch keine Bestellungen.</p>
|
||||
<p class="small">Sobald Bestellungen eingehen, siehst du hier den Anteil je Land (DE/AT/CH/LU).</p>
|
||||
<div class="verwaltung-box-body-inner">
|
||||
<div class="verwaltung-box-empty" id="verwaltung-land-empty" style="display:none;">
|
||||
<span class="verwaltung-box-empty-icon" aria-hidden="true">🗺️</span>
|
||||
<p>Noch keine Bestellungen.</p>
|
||||
<p class="small">Sobald Bestellungen eingehen, siehst du hier den Anteil je Land (DE/AT/CH/LU).</p>
|
||||
</div>
|
||||
<div class="verwaltung-analyse-grid" id="verwaltung-land-grid"></div>
|
||||
<div class="verwaltung-analyse-detail" id="verwaltung-land-detail" hidden></div>
|
||||
</div>
|
||||
<div class="verwaltung-analyse-grid" id="verwaltung-land-grid"></div>
|
||||
<div class="verwaltung-analyse-detail" id="verwaltung-land-detail" hidden></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="verwaltung-box" style="--box-color: var(--c-sale);">
|
||||
<div class="verwaltung-box-head">
|
||||
<div class="verwaltung-box verwaltung-box-collapsible is-collapsed" style="--box-color: var(--c-sale);" data-collapsible-box>
|
||||
<button type="button" class="verwaltung-box-head verwaltung-box-head-btn" aria-expanded="false">
|
||||
<span class="verwaltung-box-icon" aria-hidden="true">👑</span>
|
||||
<h2>Stammkundschaft</h2>
|
||||
</div>
|
||||
<span class="verwaltung-box-chevron" aria-hidden="true">▾</span>
|
||||
</button>
|
||||
<div class="verwaltung-box-body">
|
||||
<div class="verwaltung-box-empty" id="verwaltung-kunden-empty" style="display:none;">
|
||||
<span class="verwaltung-box-empty-icon" aria-hidden="true">💌</span>
|
||||
<p>Noch keine wiederkehrende Kundschaft.</p>
|
||||
<p class="small">Sobald jemand zum zweiten Mal bestellt, erscheint sie hier — sortiert nach bisherigem Umsatz.</p>
|
||||
<div class="verwaltung-box-body-inner">
|
||||
<div class="verwaltung-box-empty" id="verwaltung-kunden-empty" style="display:none;">
|
||||
<span class="verwaltung-box-empty-icon" aria-hidden="true">💌</span>
|
||||
<p>Noch keine wiederkehrende Kundschaft.</p>
|
||||
<p class="small">Sobald jemand zum zweiten Mal bestellt, erscheint sie hier — sortiert nach bisherigem Umsatz.</p>
|
||||
</div>
|
||||
<div class="verwaltung-analyse-grid" id="verwaltung-kunden-grid"></div>
|
||||
<div class="verwaltung-analyse-detail" id="verwaltung-kunden-detail" hidden></div>
|
||||
</div>
|
||||
<div class="verwaltung-analyse-grid" id="verwaltung-kunden-grid"></div>
|
||||
<div class="verwaltung-analyse-detail" id="verwaltung-kunden-detail" hidden></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -857,24 +864,19 @@ const lang: Locale = "de";
|
||||
document.getElementById("verwaltung-new-refresh-btn")?.addEventListener("click", ladeUndRendere);
|
||||
document.getElementById("verwaltung-retry-btn")?.addEventListener("click", ladeUndRendere);
|
||||
|
||||
// ── Auswertung (Bestseller/Herkunft/Stammkundschaft): standardmäßig eingeklappt, erscheint
|
||||
// per Klick sofort unter der Bestellstatus-/Kennzahlen-Kiste. ──
|
||||
const auswertungToggleBtn = document.getElementById("verwaltung-auswertung-toggle");
|
||||
const auswertungWrapper = document.getElementById("verwaltung-auswertung-wrapper");
|
||||
auswertungToggleBtn?.addEventListener("click", () => {
|
||||
const eingeklappt = auswertungWrapper.hasAttribute("hidden");
|
||||
if (eingeklappt) {
|
||||
auswertungWrapper.removeAttribute("hidden");
|
||||
auswertungToggleBtn.setAttribute("aria-expanded", "true");
|
||||
auswertungToggleBtn.classList.add("is-open");
|
||||
auswertungToggleBtn.innerHTML = '<span aria-hidden="true">📊</span> Auswertung ausblenden <span class="verwaltung-toggle-chevron" aria-hidden="true">▾</span>';
|
||||
auswertungWrapper.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||
} else {
|
||||
auswertungWrapper.setAttribute("hidden", "");
|
||||
auswertungToggleBtn.setAttribute("aria-expanded", "false");
|
||||
auswertungToggleBtn.classList.remove("is-open");
|
||||
auswertungToggleBtn.innerHTML = '<span aria-hidden="true">📊</span> Auswertung anzeigen <span class="verwaltung-toggle-chevron" aria-hidden="true">▾</span>';
|
||||
}
|
||||
// ── Auswertung (Bestseller/Herkunft/Stammkundschaft): jede Kiste ist SELBST der Klick-
|
||||
// Auslöser für ihren eigenen Inhalt — kein separater Knopf mehr davor. Alle drei starten
|
||||
// eingeklappt (nur Kopfzeile sichtbar) und lassen sich unabhängig voneinander auf-/zuklappen. ──
|
||||
document.querySelectorAll("[data-collapsible-box] > .verwaltung-box-head-btn").forEach((btn) => {
|
||||
btn.addEventListener("click", () => {
|
||||
const box = btn.closest("[data-collapsible-box]");
|
||||
const wirdJetztGeoeffnet = box.classList.contains("is-collapsed");
|
||||
box.classList.toggle("is-collapsed");
|
||||
btn.setAttribute("aria-expanded", String(wirdJetztGeoeffnet));
|
||||
if (wirdJetztGeoeffnet) {
|
||||
box.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// ── CSV-Export: exportiert genau die aktuell sichtbare (gefilterte) Liste — für die
|
||||
|
||||
Reference in New Issue
Block a user