120 lines
4.2 KiB
JavaScript
120 lines
4.2 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.
|
|
|
|
document.addEventListener("DOMContentLoaded", async () => {
|
|
const section = document.getElementById("leistungen");
|
|
if (!section) return;
|
|
|
|
// Integration: Der Datenpfad muss zum vorhandenen JSON-Ordner passen.
|
|
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;
|
|
}
|
|
|
|
// Elemente aus dem HTML holen
|
|
const titel = section.querySelector(".pakete__titel");
|
|
const text = section.querySelector(".pakete__text");
|
|
const grid = section.querySelector(".pakete__grid");
|
|
|
|
// Intro mit Daten aus JSON füllen
|
|
titel.textContent = daten.intro.titel;
|
|
text.textContent = daten.intro.text;
|
|
|
|
// Vorhandenen Inhalt entfernen
|
|
grid.innerHTML = "";
|
|
|
|
// Für jedes Paket eine Karte erstellen
|
|
daten.pakete.forEach(paket => {
|
|
|
|
// Artikel erstellen
|
|
const karte = document.createElement("article");
|
|
karte.classList.add("paket-karte");
|
|
|
|
// Empfohlenes Paket bekommt zusätzliche Klasse
|
|
if (paket.empfohlen) {
|
|
karte.classList.add("paket-karte--empfohlen");
|
|
}
|
|
|
|
// Badge nur erstellen, wenn eines vorhanden ist
|
|
if (paket.badge) {
|
|
const badge = document.createElement("p");
|
|
badge.classList.add("paket-karte__badge");
|
|
badge.textContent = paket.badge;
|
|
karte.appendChild(badge);
|
|
}
|
|
|
|
// Name
|
|
const name = document.createElement("h3");
|
|
name.classList.add("paket-karte__name");
|
|
name.textContent = paket.name;
|
|
karte.appendChild(name);
|
|
|
|
// 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);
|
|
karte.appendChild(preis);
|
|
|
|
// Beschreibung
|
|
const beschreibung = document.createElement("p");
|
|
beschreibung.classList.add("paket-karte__beschreibung");
|
|
beschreibung.textContent = paket.beschreibung;
|
|
karte.appendChild(beschreibung);
|
|
|
|
// 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);
|
|
});
|
|
|
|
karte.appendChild(liste);
|
|
|
|
// 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");
|
|
|
|
// Die Paketauswahl aus der ersten Version auch nach dem JSON-Rendering erhalten.
|
|
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 }
|
|
}));
|
|
});
|
|
|
|
karte.appendChild(button);
|
|
|
|
// Karte ins Grid einfügen
|
|
grid.appendChild(karte);
|
|
});
|
|
});
|