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

Filterrestriktionen Ernährungsform, Button um Filter zu löschen

Browse Source
This commit is contained in:
Simona Oswald 2026-04-25 23:25:16 +02:00
parent 895c173847
commit a540f0348d
4 changed files with 135 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
css/stylesheet_global.css
View File

@ -609,6 +609,20 @@ label {
gap: var(--space-16);
}
.filter-delete {
border: 1.5px solid var(--olive);
color: var(--olive);
background: transparent;
}
.filter-delete:hover {
border: 1.5px solid var(--olive-dark);
color: var(--olive-dark);
background: var(--olive-light);
}
.button-small {
background: var(--olive);
color: var(--butter-light);

5
event_detail.html
View File

@ -42,7 +42,8 @@
<div class="modal-content">
<div class="modal-header">
<h2>Ein Platz für dich am Tisch!</h2>
<button type="button" class="modal-close" id="register-modal-close" aria-label="Popup schließen">&times;</button>
<button type="button" class="modal-close" aria-label="Popup schließen">&times;</button>
</div>
<div class="modal-body">
<p>Schön, dass du dich dazu gesellen möchtest! Da dein:e Gastgeber:in extra für dich einkauft und mit viel Liebe kocht, ist deine Anmeldung ein festes Versprechen. Bitte sag nur zu, wenn du an dem Tag wirklich Zeit hast. So zeigst du echte Wertschätzung für die Mühe und wir lassen niemanden auf vollen Töpfen sitzen.</p>
@ -58,7 +59,7 @@
<div class="modal-content">
<div class="modal-header">
<h2>Pläne haben sich geändert?</h2>
<button type="button" class="modal-close" id="unregister-modal-close" aria-label="Popup schließen">&times;</button>
<button type="button" class="modal-close" aria-label="Popup schließen">&times;</button>
</div>
<div class="modal-body">
<p>Schade, dass du nicht dabei sein kannst! Aber manchmal kommt einfach etwas dazwischen. Wenn du dich jetzt abmeldest, gibst du deinen Stuhl am Tisch für jemand anderen aus der Community frei. So hilfst du bei der Planung und ein anderer Feinschmecker freut sich über den freien Platz.</p>

6
event_overview.html
View File

@ -73,11 +73,12 @@
<button class="category-item" type="button" data-diet="Fisch">Fisch</button>
<button class="category-item" type="button" data-diet="Vegetarisch">Vegetarisch</button>
<button class="category-item" type="button" data-diet="Vegan">Vegan</button>
<button class="category-item filter-delete" type="button" id="clear-all-filters">Alle Filter löschen</button>
</div>
</div>
</details>
<details class="filter-box">
<details class="filter-box margin-bottom-24">
<summary>Nach Allergenen filtern</summary>
<div class="filter-row margin-bottom-16">
<div class="category-group">
@ -89,9 +90,6 @@
</details>
</section>
<!-- Render target: event cards or empty state -->
<section id="event-grid" class="event-list"></section>
</main>

121
js/event_overview.js
View File

@ -167,6 +167,7 @@
dateFilter.value = savedDate;
}
updateDietAvailability();
applyFilters();
} catch (error) {
console.error('Fehler:', error);
@ -631,6 +632,59 @@
});
}
// Verhindert widersprüchliche Ernährungsformen:
// Fleisch/Fisch schliessen Vegetarisch/Vegan aus.
// Vegan schliesst alles andere (Fleisch, Fisch, Vegetarisch) aus.
// Vegetarisch schliesst Fleisch/Fisch aus, aber nicht Vegan.
function updateDietAvailability() {
const dietButtons = Array.from(filterButtons).filter(btn => btn.getAttribute('data-diet') !== null);
const meatFishButtons = dietButtons.filter(btn => ['Fleisch', 'Fisch'].includes(btn.getAttribute('data-diet')));
const plantButtons = dietButtons.filter(btn => ['Vegetarisch', 'Vegan'].includes(btn.getAttribute('data-diet')));
const vegetarischBtn = dietButtons.find(btn => btn.getAttribute('data-diet') === 'Vegetarisch');
const veganBtn = dietButtons.find(btn => btn.getAttribute('data-diet') === 'Vegan');
const hasVegan = activeDiets.has('Vegan');
const hasVegetarisch = activeDiets.has('Vegetarisch');
const hasMeatOrFish = meatFishButtons.some(btn => activeDiets.has(btn.getAttribute('data-diet')));
// If Vegan is selected, disable everything else
if (hasVegan) {
meatFishButtons.forEach(btn => {
btn.classList.add('disabled');
});
if (vegetarischBtn) {
vegetarischBtn.classList.add('disabled');
}
}
// If Vegetarisch is selected, disable only Fleisch/Fisch
else if (hasVegetarisch) {
meatFishButtons.forEach(btn => {
btn.classList.add('disabled');
});
if (veganBtn) {
veganBtn.classList.remove('disabled');
}
}
// If Fleisch/Fisch is selected, disable both Vegetarisch and Vegan
else if (hasMeatOrFish) {
if (vegetarischBtn) {
vegetarischBtn.classList.add('disabled');
}
if (veganBtn) {
veganBtn.classList.add('disabled');
}
}
// No conflicts, enable everything
else {
plantButtons.forEach(btn => {
btn.classList.remove('disabled');
});
meatFishButtons.forEach(btn => {
btn.classList.remove('disabled');
});
}
}
// Category filter interactions: mutually exclusive (radio button behavior).
filterButtons.forEach(button => {
button.addEventListener('click', () => {
@ -642,12 +696,34 @@
// Category filter: exclusive selection
activeCategory = categoryValue;
} else if (dietValue !== null) {
// Diet filter: toggle selection
if (activeDiets.has(dietValue)) {
activeDiets.delete(dietValue);
} else {
// Diet filter: toggle selection with conflict handling
const isCurrentlySelected = activeDiets.has(dietValue);
if (!isCurrentlySelected) {
// Adding a diet - handle conflicts
if (dietValue === 'Vegetarisch') {
// Vegetarisch removes Fleisch/Fisch but not Vegan
activeDiets.delete('Fleisch');
activeDiets.delete('Fisch');
activeDiets.add('Vegetarisch');
} else if (dietValue === 'Vegan') {
// Vegan removes all other options
activeDiets.delete('Vegetarisch');
activeDiets.delete('Fleisch');
activeDiets.delete('Fisch');
activeDiets.add('Vegan');
} else if (dietValue === 'Fleisch' || dietValue === 'Fisch') {
// Fleisch/Fisch remove Vegetarisch/Vegan
activeDiets.delete('Vegetarisch');
activeDiets.delete('Vegan');
activeDiets.add(dietValue);
}
} else {
// Removing a diet
activeDiets.delete(dietValue);
}
updateDietAvailability();
} else if (allergieValue !== null) {
// Allergie filter: toggle selection
if (activeAllergies.has(allergieValue)) {
@ -679,10 +755,30 @@
}
}
// Clear all filters button
const clearAllFiltersBtn = document.getElementById('clear-all-filters');
if (clearAllFiltersBtn) {
clearAllFiltersBtn.addEventListener('click', () => {
activeCategory = 'ALLE';
activeDiets.clear();
activeAllergies.clear();
if (locationFilter) {
locationFilter.value = 'ALLE_ORTE';
}
if (dateFilter) {
dateFilter.value = '';
}
updateDietAvailability();
applyFilters();
});
}
// Info button modal behavior
const infoButton = document.getElementById('info-button');
const infoModal = document.getElementById('info-modal');
const modalClose = infoModal?.querySelector('.modal-close');
const modalClose = infoModal?.querySelector('modal-close');
if (infoButton && infoModal) {
infoButton.addEventListener('click', () => {
@ -717,3 +813,18 @@
// Kick off initial load/render cycle.
fetchEvents();
});
// Modal closing helper functions
function closeRegisterModal() {
const modal = document.getElementById('register-confirm-modal');
if (modal) {
modal.classList.remove('show');
}
}
function closeUnregisterModal() {
const modal = document.getElementById('unregister-confirm-modal');
if (modal) {
modal.classList.remove('show');
}
}