443 lines
12 KiB
JavaScript
443 lines
12 KiB
JavaScript
// =============================
|
||
// SETUP: Wichtige HTML-Elemente holen
|
||
// Diese Konstanten verbinden unser JavaScript mit dem HTML.
|
||
// So können wir später Buttons, Formularfelder und Bereiche steuern.
|
||
// =============================
|
||
const form = document.getElementById("eventForm");
|
||
const steps = Array.from(document.querySelectorAll(".step"));
|
||
const backButton = document.getElementById("backButton");
|
||
const nextButton = document.getElementById("nextButton");
|
||
const progressBar = document.getElementById("progressBar");
|
||
const errorMessage = document.getElementById("errorMessage");
|
||
const usernameElement = document.getElementById("username");
|
||
const flowFooter = document.getElementById("flowFooter");
|
||
|
||
// =============================
|
||
// STATE: aktueller Schritt im Flow
|
||
// currentStep merkt sich, auf welchem Schritt der User gerade ist.
|
||
// lastStep ist der letzte Schritt im Formular.
|
||
// =============================
|
||
let currentStep = 0;
|
||
const lastStep = steps.length - 1;
|
||
|
||
// Text für den Weiter-Button je nach Schritt
|
||
const nextLabels = {
|
||
0: "Weiter",
|
||
1: "Weiter",
|
||
2: "Weiter",
|
||
3: "Weiter",
|
||
4: "Weiter",
|
||
5: "Event veröffentlichen"
|
||
};
|
||
|
||
// Demo-Wert: Später könnte der Name z. B. aus einem User-Profil kommen
|
||
usernameElement.textContent = "Mia";
|
||
|
||
|
||
// =============================
|
||
// STEP 1: Kleine Hilfsfunktionen
|
||
// Diese Funktionen helfen uns später an mehreren Stellen im Code.
|
||
// =============================
|
||
|
||
/**
|
||
* Gibt alle Eingabefelder eines bestimmten Schritts zurück.
|
||
* Rückgabe: Array mit input-, textarea- und select-Feldern.
|
||
*/
|
||
function getStepFields(stepIndex) {
|
||
return Array.from(
|
||
steps[stepIndex].querySelectorAll("input, textarea, select")
|
||
);
|
||
}
|
||
|
||
/**
|
||
* Zeigt eine Fehlermeldung im Formular an.
|
||
* Wenn keine Nachricht übergeben wird, wird die Meldung geleert.
|
||
*/
|
||
function setErrorMessage(message = "") {
|
||
errorMessage.textContent = message;
|
||
}
|
||
|
||
|
||
// =============================
|
||
// STEP 2: Schritt anzeigen & Oberfläche aktualisieren
|
||
// showStep() ist eine der wichtigsten Funktionen:
|
||
// Sie bestimmt, welcher Schritt sichtbar ist,
|
||
// und aktualisiert gleichzeitig die restliche Oberfläche.
|
||
// =============================
|
||
|
||
/**
|
||
* Zeigt den gewünschten Schritt an.
|
||
* Dabei werden auch Buttons, Progress Bar und Review aktualisiert.
|
||
*/
|
||
function showStep(index) {
|
||
currentStep = index;
|
||
|
||
// Nur der aktuelle Schritt soll sichtbar sein
|
||
steps.forEach((step, stepIndex) => {
|
||
step.classList.toggle("step--active", stepIndex === index);
|
||
});
|
||
|
||
updateFlowVisibility(index);
|
||
updateReviewIfNeeded(index);
|
||
updateProgressBar(index, lastStep);
|
||
setErrorMessage("");
|
||
|
||
// Für bessere UX: bei jedem Schritt wieder nach oben scrollen
|
||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||
}
|
||
|
||
/**
|
||
* Steuert Sichtbarkeit von Footer und Buttons.
|
||
* Im Intro-Schritt werden Footer und Zurück-Button versteckt.
|
||
* Zusätzlich bekommt der Weiter-Button je nach Schritt ein anderes Label.
|
||
*/
|
||
function updateFlowVisibility(stepIndex) {
|
||
const isIntroStep = stepIndex === 0;
|
||
|
||
flowFooter.hidden = isIntroStep;
|
||
backButton.hidden = isIntroStep;
|
||
nextButton.textContent = nextLabels[stepIndex];
|
||
}
|
||
|
||
|
||
// =============================
|
||
// STEP 3: Fortschrittsanzeige
|
||
// Die Progress Bar zeigt, wie weit der User im Flow ist.
|
||
// Das Intro zählt noch nicht als eigentlicher Formularschritt.
|
||
// =============================
|
||
|
||
/**
|
||
* Berechnet den Fortschritt in Prozent und setzt die Breite der Progress Bar.
|
||
* Beispiel:
|
||
* - Intro = 0%
|
||
* - erster echter Formularschritt = 0%
|
||
* - letzter Schritt = 100%
|
||
*/
|
||
function updateProgressBar(stepIndex, totalStepIndex) {
|
||
let progress = 0;
|
||
|
||
if (stepIndex > 0) {
|
||
progress = ((stepIndex - 1) / (totalStepIndex - 1)) * 100;
|
||
}
|
||
|
||
progressBar.style.width = `${progress}%`;
|
||
}
|
||
|
||
|
||
// =============================
|
||
// STEP 4: Review-Daten vorbereiten
|
||
// Im letzten Schritt werden alle eingegebenen Daten nochmals angezeigt.
|
||
// Dafür brauchen wir Funktionen, die Feldwerte sauber auslesen und formatieren.
|
||
// =============================
|
||
|
||
/**
|
||
* Führt das Update der Review nur aus,
|
||
* wenn wirklich der letzte Schritt geöffnet ist.
|
||
*/
|
||
function updateReviewIfNeeded(stepIndex) {
|
||
if (stepIndex === lastStep) {
|
||
updateReview();
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Gibt den Wert eines Formularfeldes zurück.
|
||
* Rückgabe:
|
||
* - eingegebener Text / ausgewählte Option
|
||
* - oder "–", falls nichts vorhanden ist
|
||
*/
|
||
function getFieldValue(name) {
|
||
const field = form.elements[name];
|
||
|
||
if (!field) return "–";
|
||
|
||
// Spezialfall: Radio-Gruppen verhalten sich anders als normale Inputs
|
||
if (field instanceof RadioNodeList) {
|
||
return field.value || "–";
|
||
}
|
||
|
||
return field.value.trim() || "–";
|
||
}
|
||
|
||
/**
|
||
* Gibt alle ausgewählten Checkbox-Werte als Text zurück.
|
||
* Beispiel: "Vegetarisch, Vegan"
|
||
* Falls nichts ausgewählt wurde: "Keine Angabe"
|
||
*/
|
||
function getCheckboxValues(name) {
|
||
const checked = Array.from(
|
||
form.querySelectorAll(`input[name="${name}"]:checked`)
|
||
);
|
||
|
||
return checked.length
|
||
? checked.map(item => item.value).join(", ")
|
||
: "Keine Angabe";
|
||
}
|
||
|
||
/**
|
||
* Formatiert ein Datum für die Review-Anzeige.
|
||
* Beispiel: aus "2026-03-26" wird "26.03.2026"
|
||
*/
|
||
function formatDate(value) {
|
||
if (!value || value === "–") return "–";
|
||
|
||
const date = new Date(value);
|
||
if (Number.isNaN(date.getTime())) return value;
|
||
|
||
return new Intl.DateTimeFormat("de-CH", {
|
||
day: "2-digit",
|
||
month: "2-digit",
|
||
year: "numeric"
|
||
}).format(date);
|
||
}
|
||
|
||
/**
|
||
* Schreibt einen Wert in das passende Feld der Review-Ansicht.
|
||
* Gesucht wird ein HTML-Element mit data-review="..."
|
||
*/
|
||
function updateReviewField(fieldName, value) {
|
||
const target = document.querySelector(`[data-review="${fieldName}"]`);
|
||
|
||
if (target) {
|
||
target.textContent = value;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Baut den Text für Allergien / Hinweise zusammen.
|
||
* Dabei werden Checkboxen und zusätzliches Freitextfeld kombiniert.
|
||
*/
|
||
function buildAllergiesReviewValue() {
|
||
const selected = getCheckboxValues("allergies");
|
||
const notes = getFieldValue("allergiesOther");
|
||
|
||
if (selected === "Keine Angabe" && notes === "–") return "Keine Angabe";
|
||
|
||
if (selected !== "Keine Angabe" && notes !== "–") {
|
||
return `${selected}, ${notes}`;
|
||
}
|
||
|
||
return selected !== "Keine Angabe" ? selected : notes;
|
||
}
|
||
|
||
/**
|
||
* Liest alle wichtigen Formularwerte aus
|
||
* und schreibt sie gesammelt in die Review-Ansicht.
|
||
*/
|
||
function updateReview() {
|
||
const reviewValues = {
|
||
eventTitle: getFieldValue("eventTitle"),
|
||
eventType: getFieldValue("eventType"),
|
||
menuDescription: getFieldValue("menuDescription"),
|
||
eventDescription: getFieldValue("eventDescription"),
|
||
maxGuests: getFieldValue("maxGuests"),
|
||
dietType: getFieldValue("dietType"),
|
||
allergies: buildAllergiesReviewValue(),
|
||
eventDate: formatDate(getFieldValue("eventDate")),
|
||
eventTime: getFieldValue("eventTime"),
|
||
eventAddress: getFieldValue("eventAddress"),
|
||
eventCity: getFieldValue("eventCity")
|
||
};
|
||
|
||
Object.entries(reviewValues).forEach(([key, value]) => {
|
||
updateReviewField(key, value);
|
||
});
|
||
}
|
||
|
||
|
||
// =============================
|
||
// STEP 5: Validierung
|
||
// Bevor der User weitergehen darf, prüfen wir:
|
||
// 1. Sind Pflichtfelder ausgefüllt?
|
||
// 2. Wurde bei Pflicht-Radios etwas ausgewählt?
|
||
// =============================
|
||
|
||
/**
|
||
* Prüft, ob der aktuelle Schritt gültig ist.
|
||
* Rückgabe:
|
||
* - true = alles okay
|
||
* - false = es gibt einen Fehler
|
||
*/
|
||
function validateCurrentStep() {
|
||
// Intro und Review müssen nicht validiert werden
|
||
if (currentStep === 0 || currentStep === lastStep) return true;
|
||
|
||
const fields = getStepFields(currentStep);
|
||
|
||
// Zuerst Radio-Gruppen prüfen
|
||
const radioCheck = validateRadioGroups(fields);
|
||
if (!radioCheck.isValid) {
|
||
setErrorMessage(radioCheck.message);
|
||
return false;
|
||
}
|
||
|
||
// Danach normale Pflichtfelder prüfen
|
||
const requiredCheck = validateRequiredFields(fields);
|
||
if (!requiredCheck.isValid) {
|
||
setErrorMessage(requiredCheck.message);
|
||
return false;
|
||
}
|
||
|
||
setErrorMessage("");
|
||
return true;
|
||
}
|
||
|
||
/**
|
||
* Prüft alle Radio-Gruppen eines Schritts.
|
||
* Rückgabe:
|
||
* - Objekt mit isValid: true/false
|
||
* - bei Fehler zusätzlich eine passende Meldung
|
||
*/
|
||
function validateRadioGroups(fields) {
|
||
const names = [...new Set(fields.filter(f => f.type === "radio").map(f => f.name))];
|
||
|
||
for (const name of names) {
|
||
const group = Array.from(form.querySelectorAll(`input[name="${name}"]`));
|
||
const required = group.some(f => f.required);
|
||
const selected = group.some(f => f.checked);
|
||
|
||
if (required && !selected) {
|
||
return {
|
||
isValid: false,
|
||
message: "Bitte wähle eine Option aus."
|
||
};
|
||
}
|
||
}
|
||
|
||
return { isValid: true };
|
||
}
|
||
|
||
/**
|
||
* Prüft alle Pflichtfelder ausser Radios und Checkboxen.
|
||
* Rückgabe:
|
||
* - Objekt mit isValid: true/false
|
||
* - bei Fehler zusätzlich eine passende Meldung
|
||
*/
|
||
function validateRequiredFields(fields) {
|
||
for (const field of fields) {
|
||
if (field.type === "radio" || field.type === "checkbox") continue;
|
||
|
||
if (!field.checkValidity()) {
|
||
return {
|
||
isValid: false,
|
||
message: "Bitte fülle alle Pflichtfelder aus."
|
||
};
|
||
}
|
||
}
|
||
|
||
return { isValid: true };
|
||
}
|
||
|
||
|
||
// =============================
|
||
// STEP 6: Navigation mit Zurück / Weiter
|
||
// Diese Funktionen bestimmen, was beim Klicken auf die Buttons passiert.
|
||
// =============================
|
||
|
||
/**
|
||
* Einen Schritt zurückgehen.
|
||
* Wenn der User im ersten Formularschritt ist, geht es zurück zum Intro.
|
||
*/
|
||
function handleBackClick() {
|
||
if (currentStep > 1) {
|
||
showStep(currentStep - 1);
|
||
} else {
|
||
showStep(0);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Einen Schritt weitergehen.
|
||
* Vorher wird geprüft, ob der aktuelle Schritt gültig ist.
|
||
* Im letzten Schritt wird stattdessen das Formular abgeschickt.
|
||
*/
|
||
function handleNextClick() {
|
||
if (!validateCurrentStep()) return;
|
||
|
||
if (currentStep < lastStep) {
|
||
showStep(currentStep + 1);
|
||
} else {
|
||
form.requestSubmit();
|
||
}
|
||
}
|
||
|
||
|
||
// =============================
|
||
// STEP 7: Submit
|
||
// Aktuell ist das nur eine Demo.
|
||
// Später könnte hier ein API-Call oder Speichern in einer Datenbank passieren.
|
||
// =============================
|
||
|
||
/**
|
||
* Reagiert auf das Absenden des Formulars.
|
||
* preventDefault verhindert, dass die Seite neu lädt.
|
||
*/
|
||
function handleFormSubmit(event) {
|
||
event.preventDefault();
|
||
alert("Event würde jetzt veröffentlicht werden.");
|
||
}
|
||
|
||
|
||
// =============================
|
||
// STEP 8: Counter-Felder (+ / -)
|
||
// Für Zahlenfelder wie z. B. Anzahl Gäste.
|
||
// =============================
|
||
|
||
/**
|
||
* Sucht alle Counter-Komponenten
|
||
* und verbindet die Plus-/Minus-Buttons mit den passenden Funktionen.
|
||
*/
|
||
function registerCounterHandlers() {
|
||
document.querySelectorAll("[data-counter]").forEach(counter => {
|
||
const input = counter.querySelector("input[type='number']");
|
||
const dec = counter.querySelector("[data-counter-action='decrease']");
|
||
const inc = counter.querySelector("[data-counter-action='increase']");
|
||
|
||
dec.addEventListener("click", () => updateCounterValue(input, -1));
|
||
inc.addEventListener("click", () => updateCounterValue(input, 1));
|
||
});
|
||
}
|
||
|
||
/**
|
||
* Erhöht oder verringert den Wert eines Zahlenfelds.
|
||
* Der Wert darf dabei nie kleiner als das definierte Minimum werden.
|
||
*/
|
||
function updateCounterValue(input, change) {
|
||
const min = Number(input.min || 1);
|
||
const currentValue = Number(input.value || min);
|
||
input.value = Math.max(min, currentValue + change);
|
||
}
|
||
|
||
|
||
// =============================
|
||
// STEP 9: Alles starten
|
||
// Hier werden alle Event Listener registriert
|
||
// und der Flow startet mit dem Intro-Schritt.
|
||
// =============================
|
||
|
||
/**
|
||
* Initialisiert den kompletten Event-Erstellungs-Flow.
|
||
* Diese Funktion wird einmal beim Laden der Seite aufgerufen.
|
||
*/
|
||
function initEventCreationFlow() {
|
||
// Buttons, die den Flow starten
|
||
document.querySelectorAll("[data-start-flow]").forEach(btn => {
|
||
btn.addEventListener("click", () => showStep(1));
|
||
});
|
||
|
||
// Navigation
|
||
backButton.addEventListener("click", handleBackClick);
|
||
nextButton.addEventListener("click", handleNextClick);
|
||
|
||
// Formular absenden
|
||
form.addEventListener("submit", handleFormSubmit);
|
||
|
||
// Counter aktivieren
|
||
registerCounterHandlers();
|
||
|
||
// Startzustand: Intro anzeigen
|
||
showStep(0);
|
||
}
|
||
|
||
// Startpunkt des Skripts
|
||
initEventCreationFlow(); |