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