From cec54a45d78413b215a861a8e316cb174862ca3c Mon Sep 17 00:00:00 2001
From: Rene Luria <rene@luria.ch>
Date: Tue, 19 Aug 2025 18:48:56 +0200
Subject: [PATCH] fix: improve UI layout and add loading indicator for events

---
 index.html | 249 ++++++++++++++++++++++++++++-------------------------
 1 file changed, 132 insertions(+), 117 deletions(-)
diff --git a/index.html b/index.html
index b283672..44b8ed2 100644
--- a/index.html
+++ b/index.html
@@ -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,25 +32,26 @@
     <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">
-                        <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">
-                        <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>
-                </div>
+            <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>
+                <label for="agegroup" class="form-label">Âge</label>
+                <select id="agegroup" class="form-select">
+                    <option value="">Tous</option>
+                </select>
+                <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>
 
         <!-- Modal pour afficher les détails d'un événement -->
@@ -66,7 +69,7 @@
         </div>
     </div>
 
-        <script>
+    <script>
         document.addEventListener("DOMContentLoaded", function () {
             const loginContainer = document.getElementById("loginContainer");
             const oidcLoginSection = document.getElementById("oidcLoginSection");
@@ -89,17 +92,17 @@
                 fetch(`${apiBaseUrl}/userinfo`, {
                     headers: { "Authorization": `Bearer ${storedApiKey}` }
                 })
-                .then(response => response.json())
-                .then(userData => {
-                    userInfo = {email: userData.email || "Utilisateur connecté"};
-                    localStorage.setItem("userInfo", JSON.stringify(userInfo));
-                    renderLoginSection();
-                })
-                .catch(e => {
-                    console.error("Error fetching user info:", e);
-                    // If we can't fetch user info, proceed with rendering
-                    renderLoginSection();
-                });
+                    .then(response => response.json())
+                    .then(userData => {
+                        userInfo = { email: userData.email || "Utilisateur connecté" };
+                        localStorage.setItem("userInfo", JSON.stringify(userInfo));
+                        renderLoginSection();
+                    })
+                    .catch(e => {
+                        console.error("Error fetching user info:", e);
+                        // If we can't fetch user info, proceed with rendering
+                        renderLoginSection();
+                    });
             } else {
                 // Render the login section normally
                 renderLoginSection();
@@ -136,49 +139,49 @@
                 fetch(`${apiBaseUrl}/userinfo`, {
                     headers: { "Authorization": `Bearer ${accessToken}` }
                 })
-                .then(response => response.json())
-                .then(userData => {
-                    userInfo = {email: userData.email || "Utilisateur connecté"};
-                    localStorage.setItem("userInfo", JSON.stringify(userInfo));
+                    .then(response => response.json())
+                    .then(userData => {
+                        userInfo = { email: userData.email || "Utilisateur connecté" };
+                        localStorage.setItem("userInfo", JSON.stringify(userInfo));
 
-                    // Update UI
-                    renderLoginSection();
-                })
-                .catch(e => {
-                    console.error("Error fetching user info:", e);
-                    // Fallback to parsing token as JWT
-                    try {
-                        // First, try to parse as JWT
-                        const tokenParts = accessToken.split('.');
-                        let userData = {};
+                        // Update UI
+                        renderLoginSection();
+                    })
+                    .catch(e => {
+                        console.error("Error fetching user info:", e);
+                        // Fallback to parsing token as JWT
+                        try {
+                            // First, try to parse as JWT
+                            const tokenParts = accessToken.split('.');
+                            let userData = {};
 
-                        if (tokenParts.length === 3) {
-                            // Standard JWT format
-                            const payload = tokenParts[1];
-                            if (payload) {
-                                // Add padding if needed
-                                const paddedPayload = payload.padEnd(payload.length + (4 - payload.length % 4) % 4, '=');
-                                const decodedPayload = atob(paddedPayload);
-                                userData = JSON.parse(decodedPayload);
+                            if (tokenParts.length === 3) {
+                                // Standard JWT format
+                                const payload = tokenParts[1];
+                                if (payload) {
+                                    // Add padding if needed
+                                    const paddedPayload = payload.padEnd(payload.length + (4 - payload.length % 4) % 4, '=');
+                                    const decodedPayload = atob(paddedPayload);
+                                    userData = JSON.parse(decodedPayload);
+                                }
+                            } else {
+                                // Non-JWT token, treat as opaque token
+                                console.log("Non-JWT token received, using default user info");
+                                userData = { email: "utilisateur@" + window.location.hostname };
                             }
-                        } else {
-                            // Non-JWT token, treat as opaque token
-                            console.log("Non-JWT token received, using default user info");
-                            userData = {email: "utilisateur@" + window.location.hostname};
+
+                            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é" };
+                            localStorage.setItem("userInfo", JSON.stringify(userInfo));
                         }
 
-                        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é"};
-                        localStorage.setItem("userInfo", JSON.stringify(userInfo));
-                    }
-
-                    // Update UI
-                    renderLoginSection();
-                });
+                        // Update UI
+                        renderLoginSection();
+                    });
 
                 // Remove token from URL
                 window.history.replaceState({}, document.title, "/");
@@ -257,58 +260,58 @@
                 fetch(`${apiBaseUrl}/accounts`, {
                     headers: { "Authorization": `Bearer ${storedApiKey}` }
                 })
-                .then(response => {
-                    if (!response.ok) {
-                        return response.json().then(errorData => {
-                            console.error("Accounts error response:", errorData);
-                            throw new Error(`HTTP error! status: ${response.status}, message: ${errorData.detail || 'Unknown error'}`);
+                    .then(response => {
+                        if (!response.ok) {
+                            return response.json().then(errorData => {
+                                console.error("Accounts error response:", errorData);
+                                throw new Error(`HTTP error! status: ${response.status}, message: ${errorData.detail || 'Unknown error'}`);
+                            });
+                        }
+                        return response.json();
+                    })
+                    .then(accounts => {
+                        // Check if accounts is actually an array
+                        if (!Array.isArray(accounts)) {
+                            console.error("Accounts data is not an array:", accounts);
+                            throw new Error("Invalid accounts data format");
+                        }
+
+                        accountSelect.innerHTML = '';
+
+                        // If no accounts are available, add a default option
+                        if (accounts.length === 0) {
+                            const option = document.createElement("option");
+                            option.value = "default";
+                            option.textContent = "Default";
+                            accountSelect.appendChild(option);
+                            return;
+                        }
+
+                        // Add all available accounts
+                        accounts.forEach(account => {
+                            const option = document.createElement("option");
+                            option.value = account.name;
+                            option.textContent = account.label;
+                            accountSelect.appendChild(option);
                         });
-                    }
-                    return response.json();
-                })
-                .then(accounts => {
-                    // Check if accounts is actually an array
-                    if (!Array.isArray(accounts)) {
-                        console.error("Accounts data is not an array:", accounts);
-                        throw new Error("Invalid accounts data format");
-                    }
 
-                    accountSelect.innerHTML = '';
+                        // Select the stored account if it exists, otherwise select the first account
+                        let accountToSelect = storedAccount;
+                        if (!accounts.some(account => account.name === storedAccount)) {
+                            accountToSelect = accounts[0].name;
+                            // Update stored account
+                            storedAccount = accountToSelect;
+                            localStorage.setItem("account", accountToSelect);
+                        }
 
-                    // If no accounts are available, add a default option
-                    if (accounts.length === 0) {
-                        const option = document.createElement("option");
-                        option.value = "default";
-                        option.textContent = "Default";
-                        accountSelect.appendChild(option);
-                        return;
-                    }
-
-                    // Add all available accounts
-                    accounts.forEach(account => {
-                        const option = document.createElement("option");
-                        option.value = account.name;
-                        option.textContent = account.label;
-                        accountSelect.appendChild(option);
+                        // Set the selected account in the dropdown
+                        accountSelect.value = accountToSelect;
+                    })
+                    .catch(error => {
+                        console.error("Erreur lors du chargement des comptes:", error);
+                        alert("Accès refusé. Vous n'êtes pas autorisé à accéder à cette application. Veuillez contacter l'administrateur.");
+                        logout();
                     });
-
-                    // Select the stored account if it exists, otherwise select the first account
-                    let accountToSelect = storedAccount;
-                    if (!accounts.some(account => account.name === storedAccount)) {
-                        accountToSelect = accounts[0].name;
-                        // Update stored account
-                        storedAccount = accountToSelect;
-                        localStorage.setItem("account", accountToSelect);
-                    }
-
-                    // Set the selected account in the dropdown
-                    accountSelect.value = accountToSelect;
-                })
-                .catch(error => {
-                    console.error("Erreur lors du chargement des comptes:", error);
-                    alert("Accès refusé. Vous n'êtes pas autorisé à accéder à cette application. Veuillez contacter l'administrateur.");
-                    logout();
-                });
             }
 
             renderLoginSection();
@@ -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);
                     });
