138 lines
4.8 KiB
JavaScript
138 lines
4.8 KiB
JavaScript
// US-01-02 Leistungsübersicht
|
|
// Markiert das gewählte Paket visuell und stellt die Auswahl bereit,
|
|
// damit US-01-03 (Pakete online buchen) später darauf aufbauen kann.
|
|
|
|
// US-01-02 Leistungsübersicht
|
|
document.addEventListener("DOMContentLoaded", async () => {
|
|
const section = document.getElementById("leistungen");
|
|
if (!section) return;
|
|
|
|
let daten;
|
|
try {
|
|
const response = await fetch("json/pakete.json");
|
|
if (!response.ok) throw new Error(`HTTP ${response.status}`);
|
|
daten = await response.json();
|
|
} catch (error) {
|
|
section.querySelector(".pakete__text").textContent = "Die Pakete konnten nicht geladen werden. Bitte lade die Seite erneut.";
|
|
console.error("Pakete konnten nicht geladen werden:", error);
|
|
return;
|
|
}
|
|
|
|
const titel = section.querySelector(".pakete__titel");
|
|
const text = section.querySelector(".pakete__text");
|
|
const grid = section.querySelector(".pakete__grid");
|
|
|
|
titel.textContent = daten.intro.titel;
|
|
text.textContent = daten.intro.text;
|
|
|
|
grid.innerHTML = "";
|
|
|
|
// Platzhalter-Pfade für die drei generierten Bilder
|
|
const bilderMap = {
|
|
"STARTER": "images/paket-starter.jpg",
|
|
"STANDART": "images/paket-standard.jpg",
|
|
"PREMIUM": "images/paket-premium.jpg"
|
|
};
|
|
|
|
daten.pakete.forEach(paket => {
|
|
const karte = document.createElement("article");
|
|
karte.classList.add("paket-karte");
|
|
|
|
if (paket.empfohlen) {
|
|
karte.classList.add("paket-karte--empfohlen");
|
|
}
|
|
|
|
// 1. Bild oben (Platzhalter)
|
|
const imgWrapper = document.createElement("div");
|
|
imgWrapper.classList.add("paket-karte__image-wrapper");
|
|
|
|
const img = document.createElement("img");
|
|
img.src = bilderMap[paket.name] || "images/paket-placeholder.jpg";
|
|
img.alt = `Vorschau ${paket.name}`;
|
|
img.classList.add("paket-karte__image");
|
|
imgWrapper.appendChild(img);
|
|
|
|
karte.appendChild(imgWrapper);
|
|
|
|
// Content-Container für die Texte & Abstände
|
|
const body = document.createElement("div");
|
|
body.classList.add("paket-karte__body");
|
|
|
|
// 2. Header: Paketname + Badge nebeneinander
|
|
const header = document.createElement("div");
|
|
header.classList.add("paket-karte__header");
|
|
|
|
const name = document.createElement("h3");
|
|
name.classList.add("paket-karte__name");
|
|
name.textContent = paket.name;
|
|
header.appendChild(name);
|
|
|
|
if (paket.badge) {
|
|
const badge = document.createElement("span");
|
|
badge.classList.add("paket-karte__badge");
|
|
badge.textContent = paket.badge;
|
|
header.appendChild(badge);
|
|
}
|
|
|
|
body.appendChild(header);
|
|
|
|
// 3. Preis
|
|
const preis = document.createElement("p");
|
|
preis.classList.add("paket-karte__preis");
|
|
|
|
const betrag = document.createElement("span");
|
|
betrag.classList.add("paket-karte__betrag");
|
|
betrag.textContent = `${paket.preis} €`;
|
|
|
|
const zeitraum = document.createElement("span");
|
|
zeitraum.classList.add("paket-karte__zeitraum");
|
|
zeitraum.textContent = `/ ${paket.zeitraum}`;
|
|
|
|
preis.appendChild(betrag);
|
|
preis.appendChild(zeitraum);
|
|
body.appendChild(preis);
|
|
|
|
// 4. Beschreibung
|
|
const beschreibung = document.createElement("p");
|
|
beschreibung.classList.add("paket-karte__beschreibung");
|
|
beschreibung.textContent = paket.beschreibung;
|
|
body.appendChild(beschreibung);
|
|
|
|
// 5. Leistungen
|
|
const liste = document.createElement("ul");
|
|
liste.classList.add("paket-karte__leistungen");
|
|
|
|
paket.leistungen.forEach(leistung => {
|
|
const punkt = document.createElement("li");
|
|
punkt.textContent = leistung;
|
|
liste.appendChild(punkt);
|
|
});
|
|
|
|
body.appendChild(liste);
|
|
|
|
// 6. Button
|
|
const button = document.createElement("button");
|
|
button.classList.add("paket-karte__cta");
|
|
button.type = "button";
|
|
button.textContent = "Paket wählen";
|
|
button.dataset.paket = paket.dataPaket;
|
|
button.setAttribute("aria-pressed", "false");
|
|
|
|
button.addEventListener("click", () => {
|
|
grid.querySelectorAll(".paket-karte").forEach(andereKarte => {
|
|
andereKarte.classList.remove("paket-karte--ausgewaehlt");
|
|
andereKarte.querySelector("button").setAttribute("aria-pressed", "false");
|
|
});
|
|
karte.classList.add("paket-karte--ausgewaehlt");
|
|
button.setAttribute("aria-pressed", "true");
|
|
document.dispatchEvent(new CustomEvent("paket:ausgewaehlt", {
|
|
detail: { paket: button.dataset.paket }
|
|
}));
|
|
});
|
|
|
|
body.appendChild(button);
|
|
karte.appendChild(body);
|
|
|
|
grid.appendChild(karte);
|
|
});
|
|
}); |