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

43
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>
@@ -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);
});