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>
|
</head>
|
||||||
|
|
||||||
<body>
|
<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="container-fluid d-flex align-items-center justify-content-center" style="min-height: 100vh;">
|
||||||
<div class="text-center">
|
<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="loginContainer" class="mb-3">
|
||||||
<div id="oidcLoginSection">
|
<div id="oidcLoginSection">
|
||||||
<button id="oidcLoginBtn" class="btn btn-primary btn-lg px-4 py-3 shadow">Se connecter avec Infomaniak</button>
|
<button id="oidcLoginBtn" class="btn btn-primary btn-lg px-4 py-3 shadow">Se connecter avec Infomaniak</button>
|
||||||
</div>
|
</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>
|
||||||
</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 id="eventFilters" style="display: none;">
|
||||||
<div class="mb-3">
|
<div class="row g-2 align-items-end">
|
||||||
<label for="account" class="form-label">Sélectionner un compte</label>
|
<div class="col-auto">
|
||||||
<select id="account" class="form-select">
|
<label for="account" class="form-label mb-1" style="font-size: 0.8rem;">Compte</label>
|
||||||
<option value="default">Compte par défaut</option>
|
<select id="account" class="form-select form-select-sm" style="font-size: 0.8rem;">
|
||||||
</select>
|
<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>
|
||||||
<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>
|
||||||
|
|
||||||
<div id="eventList" class="row"></div>
|
<div id="eventList" class="row mt-2"></div>
|
||||||
|
|
||||||
<!-- Modal pour afficher les détails d'un événement -->
|
<!-- Modal pour afficher les détails d'un événement -->
|
||||||
<div class="modal fade" id="eventDetailsModal" tabindex="-1" aria-labelledby="eventDetailsLabel"
|
<div class="modal fade" id="eventDetailsModal" tabindex="-1" aria-labelledby="eventDetailsLabel"
|
||||||
@@ -61,8 +66,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
document.addEventListener("DOMContentLoaded", function () {
|
document.addEventListener("DOMContentLoaded", function () {
|
||||||
const loginContainer = document.getElementById("loginContainer");
|
const loginContainer = document.getElementById("loginContainer");
|
||||||
@@ -184,11 +187,14 @@
|
|||||||
function renderLoginSection() {
|
function renderLoginSection() {
|
||||||
const mainContent = document.getElementById("mainContent");
|
const mainContent = document.getElementById("mainContent");
|
||||||
const loginView = document.querySelector(".container-fluid");
|
const loginView = document.querySelector(".container-fluid");
|
||||||
|
const connectedUser = document.getElementById("connectedUser");
|
||||||
|
const loginTitle = document.getElementById("loginTitle");
|
||||||
|
|
||||||
if (storedApiKey || userInfo) {
|
if (storedApiKey || userInfo) {
|
||||||
// User is logged in
|
// User is logged in
|
||||||
loginView.style.display = "none";
|
loginView.style.display = "none";
|
||||||
mainContent.style.display = "block";
|
mainContent.style.display = "block";
|
||||||
|
loginTitle.style.display = "none";
|
||||||
|
|
||||||
connectedUser.style.display = "block";
|
connectedUser.style.display = "block";
|
||||||
oidcLoginSection.style.display = "none";
|
oidcLoginSection.style.display = "none";
|
||||||
@@ -208,6 +214,7 @@
|
|||||||
// User is not logged in
|
// User is not logged in
|
||||||
loginView.style.display = "flex";
|
loginView.style.display = "flex";
|
||||||
mainContent.style.display = "none";
|
mainContent.style.display = "none";
|
||||||
|
loginTitle.style.display = "block";
|
||||||
|
|
||||||
connectedUser.style.display = "none";
|
connectedUser.style.display = "none";
|
||||||
oidcLoginSection.style.display = "block";
|
oidcLoginSection.style.display = "block";
|
||||||
@@ -361,13 +368,92 @@
|
|||||||
throw new Error("Le serveur a renvoyé une réponse invalide. Veuillez réessayer.");
|
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>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user