81 lines
3.1 KiB
JavaScript
81 lines
3.1 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
const eventGrid = document.getElementById('event-grid');
|
|
const filterButtons = document.querySelectorAll('.category-item');
|
|
let allEvents = [];
|
|
|
|
// 1. Daten laden
|
|
async function fetchEvents() {
|
|
try {
|
|
// Pfad an deine Ordnerstruktur angepasst
|
|
const response = await fetch('data/events.json');
|
|
allEvents = await response.json();
|
|
renderEvents(allEvents);
|
|
} catch (error) {
|
|
console.error("Fehler:", error);
|
|
eventGrid.innerHTML = "<p>Events konnten nicht geladen werden.</p>";
|
|
}
|
|
}
|
|
|
|
// 2. Events rendern + "Empty State" Logik
|
|
function renderEvents(events) {
|
|
eventGrid.innerHTML = '';
|
|
|
|
// PRÜFUNG: Wenn keine Events vorhanden sind
|
|
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';
|
|
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
|
|
filterButtons.forEach(button => {
|
|
button.addEventListener('click', () => {
|
|
filterButtons.forEach(btn => btn.classList.remove('active'));
|
|
button.classList.add('active');
|
|
|
|
const selectedCat = button.getAttribute('data-cat');
|
|
|
|
const filtered = selectedCat === 'ALLE'
|
|
? allEvents
|
|
: allEvents.filter(e => e.category === selectedCat);
|
|
|
|
renderEvents(filtered);
|
|
});
|
|
});
|
|
|
|
fetchEvents();
|
|
}); |