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

fix: improve UI layout and add loading indicator for events

Browse Source
This commit is contained in:
Rene Luria
2025-08-19 18:48:56 +02:00
parent 3efa7101e1
commit cec54a45d7
1 changed files with 132 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
index.html
View File

@@ -10,9 +10,11 @@
</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;"> <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> <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> <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>
<div class="container-fluid d-flex align-items-center justify-content-center"> <div class="container-fluid d-flex align-items-center justify-content-center">
@@ -21,7 +23,7 @@
<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-md px-4 py-3 shadow">Se connecter</button>
</div> </div>
</div> </div>
</div> </div>
@@ -30,23 +32,24 @@
<div class="container mt-2" 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="row g-2 align-items-end"> <div class="mb-3">
<div class="col-auto"> <label for="account" class="form-label">Compte</label>
<label for="account" class="form-label mb-1">Compte</label> <select id="account" class="form-select">
<select id="account" class="form-select form-select-sm">
<option value="default">Défaut</option> <option value="default">Défaut</option>
</select> </select>
</div> <label for="agegroup" class="form-label">Âge</label>
<div class="col-auto"> <select id="agegroup" class="form-select">
<label for="agegroup" class="form-label mb-1">Âge</label>
<select id="agegroup" class="form-select form-select-sm">
<option value="">Tous</option> <option value="">Tous</option>
</select> </select>
</div> <button id="fetchEvents" class="btn btn-primary" style="margin-top: 1.2rem;">Charger</button>
<div class="col-auto">
<button id="fetchEvents" class="btn btn-primary btn-sm" style="margin-top: 1.2rem;">Charger</button>
</div> </div>
</div> </div>
<div id="loadingIndicator" class="text-center my-3" style="display: none;">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Chargement...</span>
</div>
<p class="mt-2">Chargement des événements...</p>
</div> </div>
<div id="eventList" class="row mt-2"></div> <div id="eventList" class="row mt-2"></div>
@@ -91,7 +94,7 @@
}) })
.then(response => response.json()) .then(response => response.json())
.then(userData => { .then(userData => {
userInfo = {email: userData.email || "Utilisateur connecté"}; userInfo = { email: userData.email || "Utilisateur connecté" };
localStorage.setItem("userInfo", JSON.stringify(userInfo)); localStorage.setItem("userInfo", JSON.stringify(userInfo));
renderLoginSection(); renderLoginSection();
}) })
@@ -138,7 +141,7 @@
}) })
.then(response => response.json()) .then(response => response.json())
.then(userData => { .then(userData => {
userInfo = {email: userData.email || "Utilisateur connecté"}; userInfo = { email: userData.email || "Utilisateur connecté" };
localStorage.setItem("userInfo", JSON.stringify(userInfo)); localStorage.setItem("userInfo", JSON.stringify(userInfo));
// Update UI // Update UI
@@ -164,15 +167,15 @@
} else { } else {
// Non-JWT token, treat as opaque token // Non-JWT token, treat as opaque token
console.log("Non-JWT token received, using default user info"); console.log("Non-JWT token received, using default user info");
userData = {email: "utilisateur@" + window.location.hostname}; userData = { email: "utilisateur@" + window.location.hostname };
} }
userInfo = {email: userData.email || "Utilisateur connecté"}; userInfo = { email: userData.email || "Utilisateur connecté" };
localStorage.setItem("userInfo", JSON.stringify(userInfo)); localStorage.setItem("userInfo", JSON.stringify(userInfo));
} catch (parseError) { } catch (parseError) {
console.error("Error decoding token:", parseError); console.error("Error decoding token:", parseError);
// Fallback to a generic user object // Fallback to a generic user object
userInfo = {email: "Utilisateur connecté"}; userInfo = { email: "Utilisateur connecté" };
localStorage.setItem("userInfo", JSON.stringify(userInfo)); localStorage.setItem("userInfo", JSON.stringify(userInfo));
} }
@@ -335,6 +338,12 @@
}); });
function fetchEvents(apiKey, account) { function fetchEvents(apiKey, account) {
// Show loading indicator
const loadingIndicator = document.getElementById("loadingIndicator");
const eventList = document.getElementById("eventList");
loadingIndicator.style.display = "block";
eventList.innerHTML = ""; // Clear previous events
fetch(`${apiBaseUrl}/schedule?account=${account}`, { fetch(`${apiBaseUrl}/schedule?account=${account}`, {
headers: { "Authorization": `Bearer ${apiKey}` } headers: { "Authorization": `Bearer ${apiKey}` }
}) })
@@ -370,6 +379,9 @@
}); });
}) })
.then(data => { .then(data => {
// Hide loading indicator
loadingIndicator.style.display = "none";
if (data) { if (data) {
// Check if data is an array // Check if data is an array
if (!Array.isArray(data)) { if (!Array.isArray(data)) {
@@ -383,6 +395,9 @@
} }
}) })
.catch(error => { .catch(error => {
// Hide loading indicator on error
loadingIndicator.style.display = "none";
console.error("Erreur lors du chargement des événements:", error); console.error("Erreur lors du chargement des événements:", error);
alert("Erreur lors du chargement des événements: " + error.message); alert("Erreur lors du chargement des événements: " + error.message);
}); });