chore: bump version to v0.5.6

- Added subgroup dropdown selector to filter events by team within agegroup
- Implemented logic to populate subgroup options based on selected agegroup
- Updated event filtering to support both agegroup and subgroup criteria
- Added event listeners for real-time filtering when selectors change

index.html

@@ -41,6 +41,10 @@
                 <select id="agegroup" class="form-select">
                     <option value="">Tous</option>
                 </select>
+                <label for="subgroup" class="form-label">Sous-groupe</label>
+                <select id="subgroup" class="form-select">
+                    <option value="">Tous</option>
+                </select>
                 <button id="fetchEvents" class="btn btn-primary" style="margin-top: 1.2rem;">Charger</button>
             </div>
         </div>
@@ -77,6 +81,7 @@
             const eventFilters = document.getElementById("eventFilters");
             const accountSelect = document.getElementById("account");
             const agegroupSelect = document.getElementById("agegroup");
+            const subgroupSelect = document.getElementById("subgroup");
             const eventList = document.getElementById("eventList");
             const fetchButton = document.getElementById("fetchEvents");
             const eventDetailsContent = document.getElementById("eventDetailsContent");
@@ -210,9 +215,7 @@
                     }
 
                     eventFilters.style.display = "block";
-                    updateAccountOptions();
-                    // Don't automatically fetch events on page load
-                    // Wait for user to explicitly select an account or click fetch
+                    updateAccountOptionsAndLoadEvents();
                 } else {
                     // User is not logged in
                     loginView.style.display = "flex";
@@ -255,7 +258,7 @@
                 location.reload();
             }
 
-            function updateAccountOptions() {
+            function updateAccountOptionsAndLoadEvents() {
                 // Fetch available accounts from the server
                 fetch(`${apiBaseUrl}/accounts`, {
                     headers: { "Authorization": `Bearer ${storedApiKey}` }
@@ -306,6 +309,9 @@
 
                         // Set the selected account in the dropdown
                         accountSelect.value = accountToSelect;
+
+                        // Automatically fetch events for the selected account
+                        fetchEvents(storedApiKey, accountToSelect);
                     })
                     .catch(error => {
                         console.error("Erreur lors du chargement des comptes:", error);
@@ -334,6 +340,12 @@
             });
 
             agegroupSelect.addEventListener("change", () => {
+                // Update subgroup options based on selected agegroup
+                updateSubgroupOptions(agegroupSelect.value, lastFetchedEvents);
+                displayEvents(lastFetchedEvents);
+            });
+
+            subgroupSelect.addEventListener("change", () => {
                 displayEvents(lastFetchedEvents);
             });
 
@@ -404,20 +416,69 @@
             }
 
             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;
                     agegroupSelect.appendChild(option);
                 });
+
+                // Reset subgroup selector
+                subgroupSelect.innerHTML = '<option value="">Tous</option>';
+            }
+
+            function updateSubgroupOptions(selectedAgegroup, events) {
+                // Reset subgroup options
+                subgroupSelect.innerHTML = '<option value="">Tous</option>';
+
+                if (selectedAgegroup === "") {
+                    // If no agegroup is selected, disable subgroup selector
+                    subgroupSelect.disabled = true;
+                    return;
+                }
+
+                // Enable subgroup selector
+                subgroupSelect.disabled = false;
+
+                // Extract subgroups from events matching the selected agegroup
+                let subgroups = new Set();
+                events
+                    .filter(event => event.agegroup === selectedAgegroup)
+                    .forEach(event => {
+                        // Extract subgroup from event.name or event.title
+                        // This assumes the subgroup is part of the name field
+                        if (event.name && event.name !== selectedAgegroup) {
+                            subgroups.add(event.name);
+                        }
+                    });
+
+                // Add subgroups to the selector
+                Array.from(subgroups).sort().forEach(subgroup => {
+                    const option = document.createElement("option");
+                    option.value = subgroup;
+                    option.textContent = subgroup;
+                    subgroupSelect.appendChild(option);
+                });
             }
 
             function displayEvents(events) {
                 eventList.innerHTML = "";
                 let selectedAgegroup = agegroupSelect.value;
-                let filteredEvents = events.filter(event => event.event === "Jeu" && (selectedAgegroup === "" || `${event.agegroup} ${event.name}` === selectedAgegroup));
+                let selectedSubgroup = subgroupSelect.value;
+                let filteredEvents = events.filter(event => {
+                    // Filter by event type
+                    if (event.event !== "Jeu") return false;
+
+                    // Filter by agegroup
+                    if (selectedAgegroup !== "" && event.agegroup !== selectedAgegroup) return false;
+
+                    // Filter by subgroup
+                    if (selectedSubgroup !== "" && event.name !== selectedSubgroup) return false;
+
+                    return true;
+                });
 
                 if (filteredEvents.length === 0) {
                     eventList.innerHTML = "<p class='text-muted'>Aucun événement 'Jeu' trouvé.</p>";
@@ -430,7 +491,9 @@
                     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">${event.title}</p>
+                                <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>
@@ -451,16 +514,46 @@
                         const sortedPlayers = data.convocation.available
                             .sort((a, b) => (a.number || 0) - (b.number || 0));
 
+                        // Calculate player statistics
+                        const totalPlayers = sortedPlayers.length;
+                        const positionCount = {};
+                        sortedPlayers.forEach(player => {
+                            const position = player.position || "N/A";
+                            positionCount[position] = (positionCount[position] || 0) + 1;
+                        });
+
+                        // Generate position breakdown
+                        const positionBreakdown = Object.entries(positionCount)
+                            .map(([position, count]) => `${position}: ${count}`)
+                            .join(', ');
+
+                        // Sort players by position first, then by number
+                        const playersByPosition = [...sortedPlayers].sort((a, b) => {
+                            // Sort by position first
+                            const positionA = a.position || "ZZZ"; // Put undefined positions at the end
+                            const positionB = b.position || "ZZZ";
+
+                            if (positionA !== positionB) {
+                                return positionA.localeCompare(positionB);
+                            }
+
+                            // If positions are the same, sort by number
+                            const numA = parseInt(a.number) || 0;
+                            const numB = parseInt(b.number) || 0;
+                            return numA - numB;
+                        });
+
                         eventDetailsContent.innerHTML = `
                         <h5>${data.title}</h5>
                         <p><strong>Type:</strong> ${data.type}</p>
                         <p><strong>Lieu:</strong> ${data.place}</p>
                         <p><strong>Heure:</strong> ${data.time_start} - ${data.time_end}</p>
-                        <h6>Joueurs convoqués:</h6>
-                        <ul>${sortedPlayers.map(player => {
+                        <p><strong>Joueurs convoqués:</strong> ${totalPlayers} joueur${totalPlayers > 1 ? 's' : ''} (${positionBreakdown})</p>
+                        <h6>Liste des joueurs:</h6>
+                        <ul>${playersByPosition.map(player => {
                             let number = player.number ? player.number : "N/A";
                             let position = player.position ? player.position : "N/A";
-                            return `<li>${number} - ${player.fname} ${player.lname} (${position}, ${player.dob})</li>`;
+                            return `<li>[${position}] ${number} - ${player.fname} ${player.lname} (${player.dob})</li>`;
                         }).join('')}</ul>
                     `;
                         new bootstrap.Modal(document.getElementById('eventDetailsModal')).show();

pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "myice"
-version = "v0.5.3"
+version = "v0.5.6"
 description = "myice parsing"
 authors = [
     { name = "Rene Luria", "email" = "<rene@luria.ch>"},