From 2d783778a774c805345104ea0ab598634614441f Mon Sep 17 00:00:00 2001
From: Rene Luria <rene@luria.ch>
Date: Tue, 19 Aug 2025 19:06:24 +0200
Subject: [PATCH] feat: update agegroup filter to show only agegroup and filter
 accordingly

---
 index.html | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 44b8ed2..7c965a9 100644
--- a/index.html
+++ b/index.html
@@ -404,9 +404,9 @@
             }
 
             function updateAgeGroupOptions(events) {
-                let agegroups = new Set(events.map(event => `${event.agegroup} ${event.name}`.trim()));
+                let agegroups = new Set(events.map(event => event.agegroup));
                 agegroupSelect.innerHTML = '<option value="">Tous</option>';
-                agegroups.forEach(group => {
+                Array.from(agegroups).sort().forEach(group => {
                     const option = document.createElement("option");
                     option.value = group;
                     option.textContent = group;
@@ -417,7 +417,7 @@
             function displayEvents(events) {
                 eventList.innerHTML = "";
                 let selectedAgegroup = agegroupSelect.value;
-                let filteredEvents = events.filter(event => event.event === "Jeu" && (selectedAgegroup === "" || `${event.agegroup} ${event.name}` === selectedAgegroup));
+                let filteredEvents = events.filter(event => event.event === "Jeu" && (selectedAgegroup === "" || event.agegroup === selectedAgegroup));
 
                 if (filteredEvents.length === 0) {
                     eventList.innerHTML = "<p class='text-muted'>Aucun événement 'Jeu' trouvé.</p>";
@@ -430,7 +430,8 @@
                     eventCard.innerHTML = `
                         <div class="card" style="border-left: 5px solid ${event.color}" data-id="${event.id_event}">
                             <div class="card-body">
-                                <h5 class="card-title">${event.title}</h5>
+                                <h5 class="card-title">${event.agegroup} - ${event.name}</h5>
+                                <p class="card-text"><strong>Adversaire:</strong> ${event.opponent}</p>
                                 <p class="card-text"><strong>Lieu:</strong> ${event.place}</p>
                                 <p class="card-text"><strong>Heure:</strong> ${event.start} - ${event.end}</p>
                             </div>