eb02821a93
Refactor event overview and detail pages: corrected title, enhanced event filtering, and added detail page structure.
109 lines
4.1 KiB
JavaScript
109 lines
4.1 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
const eventGrid = document.getElementById('event-grid');
|
|
const filterButtons = document.querySelectorAll('.category-item');
|
|
let allEvents = [];
|
|
|
|
// 1. Daten laden aus JSOn file
|
|
async function fetchEvents() {
|
|
try {
|
|
// Pfad zu JSON File angepasst an lokale Ordnerstruktur
|
|
const response = await fetch('data/events.json');
|
|
allEvents = await response.json();
|
|
renderEvents(allEvents);
|
|
|
|
// Beim Laden prüfen, ob ein Filter gespeichert war
|
|
const savedFilter = sessionStorage.getItem('activeFilter') || 'ALLE';
|
|
applyFilter(savedFilter);
|
|
|
|
//checked ob Fehler beim Laden oder Parsen der Daten auftreten
|
|
} catch (error) {
|
|
console.error("Fehler:", error);
|
|
eventGrid.innerHTML = "<p>Events konnten nicht geladen werden.</p>";
|
|
}
|
|
}
|
|
// Funktion um Filter anzuwenden und gleichzeitig UI zu aktualisieren
|
|
function applyFilter(category) {
|
|
|
|
// UI: Aktiven Button stylen
|
|
filterButtons.forEach(btn => {
|
|
if (btn.getAttribute('data-cat') === category) {
|
|
btn.classList.add('active');
|
|
} else {
|
|
btn.classList.remove('active');
|
|
}
|
|
});
|
|
|
|
// Daten filtern
|
|
const filtered = category === 'ALLE'
|
|
? allEvents
|
|
: allEvents.filter(e => e.category === category);
|
|
|
|
renderEvents(filtered);
|
|
|
|
//Filter im Browser merken
|
|
sessionStorage.setItem('activeFilter', category);
|
|
|
|
}
|
|
// 2. Events rendern + "Empty State" Logik
|
|
function renderEvents(events) {
|
|
eventGrid.innerHTML = '';
|
|
|
|
// PRÜFUNG: Wenn keine Events vorhanden sind zeigt folgende Nachricht
|
|
if (events.length === 0) {
|
|
eventGrid.innerHTML = `
|
|
<div class="empty-state">
|
|
<h3>Schade! Aktuell gibt es hier keine Events.</h3>
|
|
<p>Möchtest du vielleicht selbst Gastgeber sein?</p>
|
|
<button class="btn-outline" onclick="alert('Hier gehts zum Formular!')">Eigenes Event erstellen</button>
|
|
</div>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
// Wenn Events da sind, Karten bauen
|
|
events.forEach(event => {
|
|
const card = document.createElement('article');
|
|
card.className = 'event-card';
|
|
|
|
//Klick auf die gesamte Karte leitet zur Detailseite weiter
|
|
card.style.cursor = "pointer";
|
|
card.onclick = () => {
|
|
window.location.href = `event_detail.html?id=${event.id}`;
|
|
};
|
|
|
|
//internes HTML im Js zur Styling der Event-Karte (HIER CHECKEN OB SO OK NACH CLEAN CODE)
|
|
card.innerHTML = `
|
|
<div class="event-image" style="background-image: url('${event.image}')"></div>
|
|
<div class="event-content">
|
|
<small>📍 ${event.location}</small>
|
|
<h2 style="margin: 5px 0;">${event.title}</h2>
|
|
<div>
|
|
<span class="tag">${event.cuisine}</span>
|
|
<span class="tag">${event.category}</span>
|
|
</div>
|
|
</div>
|
|
<div class="event-info">
|
|
<strong>${event.date}</strong><br>
|
|
<span>🕒 ${event.time}</span>
|
|
</div>
|
|
<div class="event-cta">
|
|
<div style="font-size: 12px; margin-bottom: 8px;">🥗 ${event.diet}</div>
|
|
<button class="btn-primary">Anmelden</button>
|
|
<p style="font-size: 10px; margin-top: 8px;">${event.spots} PLÄTZE FREI</p>
|
|
</div>
|
|
<div style="text-align: center;">❤️</div>
|
|
`;
|
|
eventGrid.appendChild(card);
|
|
});
|
|
}
|
|
|
|
// 3. Filter-Logik basic anhand der Kategorien im JSON File
|
|
filterButtons.forEach(button => {
|
|
button.addEventListener('click', () => {
|
|
const selectedCat = button.getAttribute('data-cat');
|
|
applyFilter(selectedCat);
|
|
});
|
|
});
|
|
|
|
fetchEvents();
|
|
}); |