feat: display staff information and improve empty state handling in game details modal

- 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

AGENTS.md

@@ -26,11 +26,22 @@ yamllint .                      # YAML linting
 markdownlint .                  # Markdown linting
 ```
 
-### Testing
+### Running Tests
 
 ```bash
-# Run tests (no specific test framework configured)
+# No formal test framework configured
 # Project uses manual testing with example PDF files in repository
+# To test individual functions, run the CLI commands directly:
+# myice schedule --days 7
+# myice mobile-login
+# myice search --help
+```
+
+### Running the Web API
+
+```bash
+# Or with poetry
+poetry run fastapi run myice/webapi.py --host 127.0.0.1
 ```
 
 ## Code Style Guidelines
@@ -75,3 +86,20 @@ markdownlint .                  # Markdown linting
 - requests for HTTP requests
 - PyPDF2 for PDF processing
 - Use rich for enhanced console output
+- Custom rl_ai_tools package for AI functionalities
+
+### Git Commit Messages
+
+- Use conventional commits format
+- Never mention Claude in commit messages
+- Be descriptive but concise
+- Use present tense ("add feature" not "added feature")
+
+### Additional Rules
+
+- Always use ddg-mcp to perform Web Search functionality
+- Follow the existing code patterns in myice/myice.py and myice/webapi.py
+- Maintain backward compatibility when modifying existing APIs
+- Document new features in README.md
+- Always run ruff format and ruff check after editing a python file
+- use conventional commit messages

index.html

@@ -32,16 +32,28 @@
     <div class="container mt-2" id="mainContent" style="display: none;">
 
         <div id="eventFilters" style="display: none;">
-            <div class="mb-3">
+            <div class="mb-3 row">
-                <label for="account" class="form-label">Compte</label>
+                <div class="col-md-3">
-                <select id="account" class="form-select">
+                    <label for="account" class="form-label">Compte</label>
-                    <option value="default">Défaut</option>
+                    <select id="account" class="form-select">
-                </select>
+                        <option value="default">Défaut</option>
-                <label for="agegroup" class="form-label">Âge</label>
+                    </select>
-                <select id="agegroup" class="form-select">
+                </div>
-                    <option value="">Tous</option>
+                <div class="col-md-3">
-                </select>
+                    <label for="agegroup" class="form-label">Âge</label>
-                <button id="fetchEvents" class="btn btn-primary" style="margin-top: 1.2rem;">Charger</button>
+                    <select id="agegroup" class="form-select">
+                        <option value="">Tous</option>
+                    </select>
+                </div>
+                <div class="col-md-3">
+                    <label for="subgroup" class="form-label">Sous-groupe</label>
+                    <select id="subgroup" class="form-select">
+                        <option value="">Tous</option>
+                    </select>
+                </div>
+                <div class="col-md-3 d-flex align-items-end">
+                    <button id="fetchEvents" class="btn btn-primary">Charger</button>
+                </div>
             </div>
         </div>
 
@@ -77,6 +89,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");
@@ -335,6 +348,12 @@
             });
 
             agegroupSelect.addEventListener("change", () => {
+                // Update subgroup options based on selected agegroup
+                updateSubgroupOptions(agegroupSelect.value, lastFetchedEvents);
+                displayEvents(lastFetchedEvents);
+            });
+
+            subgroupSelect.addEventListener("change", () => {
                 displayEvents(lastFetchedEvents);
             });
 
@@ -413,12 +432,61 @@
                     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 === 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>";
@@ -450,9 +518,11 @@
                     headers: { "Authorization": `Bearer ${storedApiKey}` }
                 })
                     .then(response => response.json())
-                    .then(data => {
+                .then(data => {
-                        const sortedPlayers = data.convocation.available
+                    // Check if available players data exists
-                            .sort((a, b) => (a.number || 0) - (b.number || 0));
+                    const availablePlayers = data.convocation.available || [];
+                    const sortedPlayers = availablePlayers
+                        .sort((a, b) => (a.number || 0) - (b.number || 0));
 
                         // Calculate player statistics
                         const totalPlayers = sortedPlayers.length;
@@ -483,19 +553,73 @@
                             return numA - numB;
                         });
 
-                        eventDetailsContent.innerHTML = `
+                        // Process staff data
-                        <h5>${data.title}</h5>
+                        const staffList = data.convocation.staff || [];
-                        <p><strong>Type:</strong> ${data.type}</p>
+                        const totalStaff = staffList.length;
-                        <p><strong>Lieu:</strong> ${data.place}</p>
+
-                        <p><strong>Heure:</strong> ${data.time_start} - ${data.time_end}</p>
+                        // Check if there are no players
-                        <p><strong>Joueurs convoqués:</strong> ${totalPlayers} joueur${totalPlayers > 1 ? 's' : ''} (${positionBreakdown})</p>
+                        if (totalPlayers === 0 && totalStaff === 0) {
-                        <h6>Liste des joueurs:</h6>
+                            eventDetailsContent.innerHTML = `
-                        <ul>${playersByPosition.map(player => {
+                                <div class="card border-warning">
-                            let number = player.number ? player.number : "N/A";
+                                    <div class="card-body text-center">
-                            let position = player.position ? player.position : "N/A";
+                                        <h5 class="card-title">${data.title}</h5>
-                            return `<li>[${position}] ${number} - ${player.fname} ${player.lname} (${player.dob})</li>`;
+                                        <p class="card-text"><strong>Type:</strong> ${data.type}</p>
-                        }).join('')}</ul>
+                                        <p class="card-text"><strong>Lieu:</strong> ${data.place}</p>
-                    `;
+                                        <p class="card-text"><strong>Heure:</strong> ${data.time_start} - ${data.time_end}</p>
+                                        <div class="alert alert-warning" role="alert">
+                                            <h6 class="alert-heading">Aucun joueur ni personnel convoqué</h6>
+                                            <p>Il n'y a actuellement aucun joueur ni personnel convoqué pour ce match.</p>
+                                        </div>
+                                    </div>
+                                </div>
+                            `;
+                        } else {
+                            let staffHtml = '';
+                            if (totalStaff > 0) {
+                                staffHtml = `
+                                    <h6>Personnel (${totalStaff}):</h6>
+                                    <ul>${staffList.map(staff => {
+                                        return `<li><strong>${staff.role}:</strong> ${staff.fname} ${staff.lname}</li>`;
+                                    }).join('')}</ul>
+                                `;
+                            } else {
+                                staffHtml = `
+                                    <div class="alert alert-info" role="alert">
+                                        <h6>Aucun personnel convoqué</h6>
+                                        <p>Il n'y a actuellement aucun personnel convoqué pour ce match.</p>
+                                    </div>
+                                `;
+                            }
+
+                            if (totalPlayers === 0) {
+                                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>
+                                    <div class="alert alert-warning" role="alert">
+                                        <h6 class="alert-heading">Aucun joueur convoqué</h6>
+                                        <p>Il n'y a actuellement aucun joueur convoqué pour ce match.</p>
+                                    </div>
+                                    ${staffHtml}
+                                `;
+                            } else {
+                                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>
+                                    <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>[${position}] ${number} - ${player.fname} ${player.lname} (${player.dob})</li>`;
+                                    }).join('')}</ul>
+                                    ${staffHtml}
+                                `;
+                            }
+                        }
                         new bootstrap.Modal(document.getElementById('eventDetailsModal')).show();
                     })
                     .catch(error => console.error("Erreur lors du chargement des détails de l'événement:", error));

pyproject.toml

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