feat: display staff information and improve empty state handling in game details modal
This commit is contained in:
88
index.html
88
index.html
@@ -518,9 +518,11 @@
|
||||
headers: { "Authorization": `Bearer ${storedApiKey}` }
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const sortedPlayers = data.convocation.available
|
||||
.sort((a, b) => (a.number || 0) - (b.number || 0));
|
||||
.then(data => {
|
||||
// Check if available players data exists
|
||||
const availablePlayers = data.convocation.available || [];
|
||||
const sortedPlayers = availablePlayers
|
||||
.sort((a, b) => (a.number || 0) - (b.number || 0));
|
||||
|
||||
// Calculate player statistics
|
||||
const totalPlayers = sortedPlayers.length;
|
||||
@@ -551,19 +553,73 @@
|
||||
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>
|
||||
<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>
|
||||
`;
|
||||
// Process staff data
|
||||
const staffList = data.convocation.staff || [];
|
||||
const totalStaff = staffList.length;
|
||||
|
||||
// Check if there are no players
|
||||
if (totalPlayers === 0 && totalStaff === 0) {
|
||||
eventDetailsContent.innerHTML = `
|
||||
<div class="card border-warning">
|
||||
<div class="card-body text-center">
|
||||
<h5 class="card-title">${data.title}</h5>
|
||||
<p class="card-text"><strong>Type:</strong> ${data.type}</p>
|
||||
<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));
|
||||
|
||||
Reference in New Issue
Block a user