138 lines
4.9 KiB
JavaScript
138 lines
4.9 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 = "";
|
|
|
|
// Mappe Bild-Platzhalter zu den Paketen
|
|
const bilderMap = {
|
|
"Starter": "images/paket-starter.jpg",
|
|
"STANDART": "images/paket-standard.jpg",
|
|
"Rundum Sorglos Paket": "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. Bildbereich (Platzhalter) ---
|
|
const imgContainer = document.createElement("div");
|
|
imgContainer.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");
|
|
imgContainer.appendChild(img);
|
|
|
|
karte.appendChild(imgContainer);
|
|
|
|
// --- Content-Container für sauberes Layout ---
|
|
const content = document.createElement("div");
|
|
content.classList.add("paket-karte__content");
|
|
|
|
// --- 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);
|
|
}
|
|
|
|
content.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);
|
|
content.appendChild(preis);
|
|
|
|
// --- 4. Beschreibung ---
|
|
const beschreibung = document.createElement("p");
|
|
beschreibung.classList.add("paket-karte__beschreibung");
|
|
beschreibung.textContent = paket.beschreibung;
|
|
content.appendChild(beschreibung);
|
|
|
|
// --- 5. Leistungsliste ---
|
|
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);
|
|
});
|
|
|
|
content.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 }
|
|
}));
|
|
});
|
|
|
|
content.appendChild(button);
|
|
karte.appendChild(content);
|
|
|
|
grid.appendChild(karte);
|
|
});
|
|
}); |