koehleestell/Social_Cooking
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added Comments in Code for better understanding. Did 2 Page solution for detail site so that detailsite has it's own url.

Browse Source 
Refactor event overview and detail pages: corrected title, enhanced event filtering, and added detail page structure.
This commit is contained in:
viiivo 2026-03-23 18:24:47 +01:00
parent 4da3c0741a
commit eb02821a93
4 changed files with 118 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
event_detail.html Normal file
View File

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event-Detail</title>
<link rel="stylesheet" href="css/event_overview_stylesheet.css">
</head>
<body>
<header class="navbar">
<div class="logo">SOCIAL COOKING</div>
<nav>
<a href="index.html">Events</a>
<div class="user-profile">M</div>
</nav>
</header>
<main class="container">
<div id="detail-view">
<p>Lädt Event-Details...</p>
</div>
</main>
<script src="js/event_overview_script.js"></script>
<script src="js/event_detail.js"></script>
</body>
</html>

2
event_overview.html
View File

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event_Overview</title>
<title>Event-Overview</title>
<link rel="stylesheet" href="css/event_overview_stylesheet.css">
</head>
<body>

47
js/event_detail.js Normal file
View File

@ -0,0 +1,47 @@
document.addEventListener('DOMContentLoaded', async () => {
const detailContainer = document.getElementById('detail-view');
// 1. ID aus der URL lesen (z.B. detail.html?id=1)
const params = new URLSearchParams(window.location.search);
const eventId = parseInt(params.get('id'));
if (!eventId) {
window.location.href = 'event_overview.html';
return;
}
// 2. Daten laden und das richtige Event suchen
try {
const response = await fetch('data/events.json');
const allEvents = await response.json();
const event = allEvents.find(e => e.id === eventId);
if (event) {
renderDetailPage(event);
} else {
detailContainer.innerHTML = "<h1>Event wurde nicht gefunden.</h1><a href='event_overview.html'>Zurück zur Übersicht</a>";
}
} catch (error) {
console.error("Fehler beim Laden der Details:", error);
}
function renderDetailPage(event) {
//Layout Deatilseite der Events mit Rücklink zur Übersicht, Eventtitel, Infos und Bild
detailContainer.innerHTML = `
<div class="detail-header">
<a href="event_overview.html" style="text-decoration:none; color:black; font-size:24px;">←</a>
<h1>${event.title}</h1>
</div>
<div class="detail-grid">
<div class="info-section">
<p>📍 ${event.location} | 📅 ${event.date} | 👤 Max. ${event.spots} Personen</p>
<hr>
<p>Hier kommen die detaillierten Infos zu ${event.title} hin...</p>
</div>
<div class="image-section">
<img src="${event.image}" alt="${event.title}" style="width:100%;">
</div>
</div>
`;
}
});

54
js/event_overview_script.js
View File

@ -3,24 +3,52 @@ document.addEventListener('DOMContentLoaded', () => {
const filterButtons = document.querySelectorAll('.category-item');
let allEvents = [];
// 1. Daten laden
// 1. Daten laden aus JSOn file
async function fetchEvents() {
try {
// Pfad an deine Ordnerstruktur angepasst
// 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
// PRÜFUNG: Wenn keine Events vorhanden sind zeigt folgende Nachricht
if (events.length === 0) {
eventGrid.innerHTML = `
<div class="empty-state">
@ -36,6 +64,14 @@ document.addEventListener('DOMContentLoaded', () => {
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">
@ -61,19 +97,11 @@ document.addEventListener('DOMContentLoaded', () => {
});
}
// 3. Filter-Logik
// 3. Filter-Logik basic anhand der Kategorien im JSON File
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);
applyFilter(selectedCat);
});
});