herel/myice
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Rene Luria
2025-09-29 20:17:23 +02:00
parent 394d71f59c
commit e7615de98b
1 changed files with 72 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+72 -16
View File
@@ -518,9 +518,11 @@
headers: { "Authorization": `Bearer ${storedApiKey}` } headers: { "Authorization": `Bearer ${storedApiKey}` }
}) })
.then(response => response.json()) .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 // Calculate player statistics
const totalPlayers = sortedPlayers.length; const totalPlayers = sortedPlayers.length;
@@ -551,19 +553,73 @@
return numA - numB; 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(); new bootstrap.Modal(document.getElementById('eventDetailsModal')).show();
}) })
.catch(error => console.error("Erreur lors du chargement des détails de l'événement:", error)); .catch(error => console.error("Erreur lors du chargement des détails de l'événement:", error));