trihub-ernaehrung-backseatDevs/src/features/angebote/angebotsuebersicht.js

59 lines
2.0 KiB
JavaScript

import { packages } from "../../shared/packages.js";
export function renderAngebotsuebersicht() {
// Wir suchen den Container, der in der angebotsuebersicht.html definiert wurde
const container = document.getElementById("packages-container");
// Sicherheitscheck: Wenn der Container nicht da ist, brechen wir ab
if (!container) {
console.warn("Container für Angebotsübersicht nicht gefunden.");
return;
}
// Container leeren (falls die Funktion mehrfach aufgerufen wird)
container.innerHTML = "";
// Durch jedes Paket iterieren und das HTML generieren
packages.forEach((pkg) => {
// Highlight-Badge nur anzeigen, wenn es eins gibt
const highlightHtml = pkg.highlight
? `<span class="package-highlight">${pkg.highlight}</span>`
: "";
const cardHtml = `
<div class="package-card">
<div class="package-type-container">
<span class="package-type">${pkg.type}</span>
${highlightHtml}
</div>
<h3 class="package-title">${pkg.name}</h3>
<p class="package-desc">${pkg.summary}</p>
<div class="package-details-box">
<div class="detail-item">
<div class="detail-title">Fokus</div>
<div class="detail-text">${pkg.fokus}</div>
</div>
<div class="detail-item">
<div class="detail-title">Anamnese</div>
<div class="detail-text">${pkg.anamnese}</div>
</div>
<div class="detail-item">
<div class="detail-title">Begleitung</div>
<div class="detail-text">${pkg.begleitung}</div>
</div>
</div>
<!-- HIER ist der wichtige Link für deinen Kollegen: -->
<a href="/booking.html#/buchen/${encodeURIComponent(pkg.id)}" class="package-btn">${pkg.buttonText}</a>
</div>
`;
// Das generierte HTML dem Container hinzufügen
container.innerHTML += cardHtml;
});
}