133 lines
4.5 KiB
JavaScript
133 lines
4.5 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",
|
||
"STANDARD": "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 – Link zur Paketseite
|
||
const paketLinkMap = {
|
||
"starter": "html/paket-starter.html",
|
||
"standard": "html/paket-standard.html",
|
||
"premium": "html/paket-premium.html"
|
||
};
|
||
|
||
const paketLink = paketLinkMap[paket.dataPaket] || "#";
|
||
const button = document.createElement("a");
|
||
button.classList.add("paket-karte__cta");
|
||
button.href = paketLink;
|
||
button.textContent = "Paket ansehen";
|
||
button.setAttribute("role", "button");
|
||
|
||
body.appendChild(button);
|
||
karte.appendChild(body);
|
||
|
||
grid.appendChild(karte);
|
||
});
|
||
});
|