fix: restore event loading functionality and improve UI layout
Fixed incomplete fetchEvents function by adding missing data processing logic. Restored updateAgeGroupOptions, displayEvents, and fetchEventDetails functions. Moved connected user info to top-right corner. Hide title when logged in. Reduced vertical spacing for better layout. Made event filters more compact. All functionality restored and UI improved.
This commit is contained in:
134
index.html
134
index.html
@@ -10,41 +10,46 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="connectedUser" class="position-fixed top-0 end-0 m-2 p-2 bg-light border rounded" style="display: none; z-index: 1000; font-size: 0.9rem;">
|
||||
<span>Connecté: <span id="userName"></span></span>
|
||||
<button id="disconnect" class="btn btn-danger btn-sm ms-2" style="font-size: 0.8rem; padding: 0.1rem 0.3rem;">Déco</button>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid d-flex align-items-center justify-content-center" style="min-height: 100vh;">
|
||||
<div class="text-center">
|
||||
<h1 class="mb-4">MyIce - Games</h1>
|
||||
<h1 id="loginTitle" class="mb-4">MyIce - Games</h1>
|
||||
|
||||
<div id="loginContainer" class="mb-3">
|
||||
<div id="oidcLoginSection">
|
||||
<button id="oidcLoginBtn" class="btn btn-primary btn-lg px-4 py-3 shadow">Se connecter avec Infomaniak</button>
|
||||
</div>
|
||||
<div id="connectedUser" style="display: none;">
|
||||
<p>Connecté en tant que: <span id="userName"></span></p>
|
||||
<button id="disconnect" class="btn btn-danger">Déconnecter</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container mt-4" id="mainContent" style="display: none;">
|
||||
<div class="container mt-2" id="mainContent" style="display: none;">
|
||||
|
||||
<div id="eventFilters" style="display: none;">
|
||||
<div class="mb-3">
|
||||
<label for="account" class="form-label">Sélectionner un compte</label>
|
||||
<select id="account" class="form-select">
|
||||
<option value="default">Compte par défaut</option>
|
||||
</select>
|
||||
<div class="row g-2 align-items-end">
|
||||
<div class="col-auto">
|
||||
<label for="account" class="form-label mb-1" style="font-size: 0.8rem;">Compte</label>
|
||||
<select id="account" class="form-select form-select-sm" style="font-size: 0.8rem;">
|
||||
<option value="default">Défaut</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<label for="agegroup" class="form-label mb-1" style="font-size: 0.8rem;">Âge</label>
|
||||
<select id="agegroup" class="form-select form-select-sm" style="font-size: 0.8rem;">
|
||||
<option value="">Tous</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<button id="fetchEvents" class="btn btn-primary btn-sm" style="font-size: 0.8rem; margin-top: 1.2rem;">Charger</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="agegroup" class="form-label">Filtrer par groupe d'âge</label>
|
||||
<select id="agegroup" class="form-select">
|
||||
<option value="">Tous</option>
|
||||
</select>
|
||||
</div>
|
||||
<button id="fetchEvents" class="btn btn-primary mb-3">Charger les événements</button>
|
||||
</div>
|
||||
|
||||
<div id="eventList" class="row"></div>
|
||||
<div id="eventList" class="row mt-2"></div>
|
||||
|
||||
<!-- Modal pour afficher les détails d'un événement -->
|
||||
<div class="modal fade" id="eventDetailsModal" tabindex="-1" aria-labelledby="eventDetailsLabel"
|
||||
@@ -61,8 +66,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const loginContainer = document.getElementById("loginContainer");
|
||||
@@ -184,11 +187,14 @@
|
||||
function renderLoginSection() {
|
||||
const mainContent = document.getElementById("mainContent");
|
||||
const loginView = document.querySelector(".container-fluid");
|
||||
const connectedUser = document.getElementById("connectedUser");
|
||||
const loginTitle = document.getElementById("loginTitle");
|
||||
|
||||
if (storedApiKey || userInfo) {
|
||||
// User is logged in
|
||||
loginView.style.display = "none";
|
||||
mainContent.style.display = "block";
|
||||
loginTitle.style.display = "none";
|
||||
|
||||
connectedUser.style.display = "block";
|
||||
oidcLoginSection.style.display = "none";
|
||||
@@ -208,6 +214,7 @@
|
||||
// User is not logged in
|
||||
loginView.style.display = "flex";
|
||||
mainContent.style.display = "none";
|
||||
loginTitle.style.display = "block";
|
||||
|
||||
connectedUser.style.display = "none";
|
||||
oidcLoginSection.style.display = "block";
|
||||
@@ -361,13 +368,92 @@
|
||||
throw new Error("Le serveur a renvoyé une réponse invalide. Veuillez réessayer.");
|
||||
}
|
||||
});
|
||||
})
|
||||
.then(data => {
|
||||
if (data) {
|
||||
// Check if data is an array
|
||||
if (!Array.isArray(data)) {
|
||||
console.error("Schedule data is not an array:", data);
|
||||
throw new Error("Invalid schedule data format");
|
||||
}
|
||||
|
||||
lastFetchedEvents = data.filter(event => event.event === "Jeu");
|
||||
updateAgeGroupOptions(lastFetchedEvents);
|
||||
displayEvents(lastFetchedEvents);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error("Erreur lors du chargement des événements:", error);
|
||||
alert("Erreur lors du chargement des événements: " + error.message);
|
||||
});
|
||||
}
|
||||
|
||||
function updateAgeGroupOptions(events) {
|
||||
let agegroups = new Set(events.map(event => `${event.agegroup} ${event.name}`.trim()));
|
||||
agegroupSelect.innerHTML = '<option value="">Tous</option>';
|
||||
agegroups.forEach(group => {
|
||||
const option = document.createElement("option");
|
||||
option.value = group;
|
||||
option.textContent = group;
|
||||
agegroupSelect.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));
|
||||
|
||||
if (filteredEvents.length === 0) {
|
||||
eventList.innerHTML = "<p class='text-muted'>Aucun événement 'Jeu' trouvé.</p>";
|
||||
return;
|
||||
}
|
||||
|
||||
filteredEvents.forEach(event => {
|
||||
const eventCard = document.createElement("div");
|
||||
eventCard.className = "col-md-4 mb-3";
|
||||
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>
|
||||
<p class="card-text"><strong>Lieu:</strong> ${event.place}</p>
|
||||
<p class="card-text"><strong>Heure:</strong> ${event.start} - ${event.end}</p>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
eventCard.addEventListener("click", () => fetchEventDetails(event.id_event));
|
||||
eventList.appendChild(eventCard);
|
||||
});
|
||||
}
|
||||
|
||||
function fetchEventDetails(eventId) {
|
||||
const selectedAccount = accountSelect.value;
|
||||
fetch(`${apiBaseUrl}/game/${eventId}?account=${selectedAccount}`, {
|
||||
headers: { "Authorization": `Bearer ${storedApiKey}` }
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const sortedPlayers = data.convocation.available
|
||||
.sort((a, b) => (a.number || 0) - (b.number || 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>
|
||||
<h6>Joueurs convoqués:</h6>
|
||||
<ul>${sortedPlayers.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>`;
|
||||
}).join('')}</ul>
|
||||
`;
|
||||
new bootstrap.Modal(document.getElementById('eventDetailsModal')).show();
|
||||
})
|
||||
.catch(error => console.error("Erreur lors du chargement des détails de l'événement:", error));
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user