DogFatherGit/vans-diy-bastelbedarf
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Konto-Dashboard: kein Tab beim Laden aktiv, "Meine Daten" jetzt auch ein Tab

Browse Source 
Bisher war "Bestellungen" beim Öffnen der Seite automatisch aktiv. Jetzt
ist standardmäßig KEIN Knopf gedrückt — man muss selbst auswählen, was man
sehen möchte. Solange nichts angeklickt ist, steht direkt "Zuletzt
angesehen" da. "Meine Daten" ist jetzt ein vierter, gleichwertiger Tab-
Knopf (👤, goldener Akzent) statt permanent sichtbar — genau wie
Bestellungen/Wunschliste/Offene Sendungen erscheint das Profilformular
erst nach Klick.

Co-Authored-By: Claude Sonnet 5 <[email protected]>
This commit is contained in:
qcigano
2026-08-03 13:40:10 +02:00
co-authored by Claude Sonnet 5
parent b5be6e0e61
commit f8864b39da
6 changed files with 113 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/ch/konto/angemeldet.astro
+27 -7
View File
@@ -95,6 +95,10 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
<span class="account-nav-value">{offeneSendungen}</span>
<span class="account-nav-label">{t.accountDash.statOpen}</span>
</button>
<button type="button" class="account-nav-item account-nav-data" data-tab="daten">
<span class="account-nav-icon" aria-hidden="true">👤</span>
<span class="account-nav-label">{t.accountDash.statData}</span>
</button>
</nav>
</div>
</section>
@@ -157,7 +161,7 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
</section>
{zuletztAngesehen.length > 0 && (
<section class="section-tight">
<section class="section-tight" id="zuletzt-angesehen">
<div class="container">
<h2>{t.accountDash.recentTitle}</h2>
<div class="grid grid-3">{zuletztAngesehen.map((p) => <ProductCard product={p} lang={lang} />)}</div>
@@ -165,7 +169,7 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
</section>
)}
<section class="section-tight">
<section class="section-tight" id="meine-daten">
<div class="container">
<h2>{t.accountDash.profileTitle}</h2>
<div class="card profile-card">
@@ -224,21 +228,37 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
const navItems = Array.from(document.querySelectorAll(".account-nav-item")) as HTMLButtonElement[];
const bestellungenSection = document.getElementById("bestellungen");
const wunschlisteSection = document.getElementById("wunschliste");
const recentSection = document.getElementById("zuletzt-angesehen");
const datenSection = document.getElementById("meine-daten");
const orderCards = Array.from(document.querySelectorAll(".order-card"));
const emptyNote = document.getElementById("orders-empty-note");
function setActiveTab(tab: string) {
// Beim Laden ist noch KEIN Knopf gedrückt — solange nichts angeklickt wurde, steht direkt
// "Zuletzt angesehen" da, alle anderen (per Tab umschaltbaren) Bereiche bleiben versteckt.
function setActiveTab(tab: string | null) {
navItems.forEach((item) => item.classList.toggle("is-active", item.dataset.tab === tab));
if (bestellungenSection) bestellungenSection.style.display = "none";
if (wunschlisteSection) wunschlisteSection.style.display = "none";
if (datenSection) datenSection.style.display = "none";
if (recentSection) recentSection.style.display = "none";
if (tab === null) {
if (recentSection) recentSection.style.display = "";
return;
}
if (tab === "wunschliste") {
if (bestellungenSection) bestellungenSection.style.display = "none";
if (wunschlisteSection) wunschlisteSection.style.display = "";
return;
}
if (bestellungenSection) bestellungenSection.style.display = "";
if (wunschlisteSection) wunschlisteSection.style.display = "none";
if (tab === "daten") {
if (datenSection) datenSection.style.display = "";
return;
}
if (bestellungenSection) bestellungenSection.style.display = "";
let visibleCount = 0;
orderCards.forEach((card) => {
const status = OFFENE_STATUS.find((s) => card.classList.contains("order-card-" + s));
@@ -253,7 +273,7 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
item.addEventListener("click", () => { if (item.dataset.tab) setActiveTab(item.dataset.tab); });
});
setActiveTab("bestellungen");
setActiveTab(null);
</script>
<script>
import { getAccount, isLoggedIn, logout, setName, setUsername, setPhoto, hatBestellungBewertet, anzeigeName } from "../../../scripts/account";