Sauvegarde initiale de l'application

static/js/supervise.js

@@ -0,0 +1,161 @@
+
+function calculateDeltaInSeconds(lastUpdate) {
+    // Convertir la date de mise à jour en UTC
+    const lastUpdateTime = new Date(lastUpdate).getTime(); // En millisecondes
+    const currentTime = Date.now(); // Temps actuel en UTC (automatique)
+
+    const deltaInMilliseconds = currentTime - lastUpdateTime;
+
+    // Retourner la différence en secondes
+    return Math.floor(deltaInMilliseconds / 1000);
+}
+
+// Fonction pour récupérer les données et mettre à jour l'interface
+async function fetchUserData() {
+    try {
+        // Appel à l'API pour récupérer les données
+        const response = await fetch('/data/baptiste.yaml');
+        const userData = await response.json();
+
+ // Calculer le temps d'inactivité
+ const lastUpdate = userData.position_actuelle.last_update; // Récupération du champ "last_update"
+ const inactivitySeconds = calculateDeltaInSeconds(lastUpdate); // Calcul du delta en secondes
+
+        // Vérification des données reçues
+        console.log("Données utilisateur :", userData);
+
+        // Mise à jour des éléments HTML
+        document.getElementById('user-name').textContent = `Nom : ${userData.nom}`;
+        document.getElementById('user-progression').textContent = `Progression : ${userData.progression}`;
+        document.getElementById('user-avatar').src = userData.avatar;
+        document.getElementById('user-longitude').textContent = userData.position_actuelle.longitude;
+        document.getElementById('user-latitude').textContent = userData.position_actuelle.latitude;
+        document.getElementById('user-inactive').textContent = `Inactif depuis : ${inactivitySeconds} s`;
+
+
+    } catch (error) {
+        console.error("Erreur lors de la récupération des données :", error);
+    }
+}
+
+// Actualiser les données toutes les 3 secondes
+document.addEventListener("DOMContentLoaded", () => {
+    fetchUserData(); // Appel initial pour charger les données au démarrage
+    setInterval(fetchUserData, 3000); // Appels périodiques toutes les 3 secondes
+});
+
+document.addEventListener("DOMContentLoaded", async () => {
+    // Coordonnées par défaut pour centrer la carte
+    const centerCoordinates = [45.141998, 4.0750724];
+    let userMarker; // Variable pour stocker le pin de l'avatar
+
+    // Initialiser la carte
+    const map = L.map('map').setView(centerCoordinates, 20);
+
+    // Définir les couches de carte
+    const osmStandard = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+    });
+
+    const cycleOSM = L.tileLayer('https://{s}.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png', {
+        attribution: '&copy; <a href="https://www.cyclosm.org/">CycleOSM</a>'
+    });
+
+    const satellite = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
+        attribution: '&copy; <a href="https://www.esri.com/">ESRI</a> World Imagery'
+    });
+
+    // Ajouter la carte OpenStreetMap par défaut
+    osmStandard.addTo(map);
+
+    // Contrôle pour basculer entre les couches
+    const baseLayers = {
+        "OpenStreetMap Standard": osmStandard,
+        "CycleOSM": cycleOSM,
+        "Satellite": satellite
+    };
+    L.control.layers(baseLayers).addTo(map);
+
+    // Fonction pour ajouter un pin personnalisé
+    function addCustomPin(coordinates, iconUrl, popupText, offsetX = 20, offsetY = 40) {
+        const customIcon = L.icon({
+            iconUrl: iconUrl,
+            iconSize: [40, 40],         // Taille de l'icône
+            iconAnchor: [offsetX, offsetY], // Décalage en X et Y
+            popupAnchor: [0, -40]       // Position du popup
+        });
+
+        return L.marker(coordinates, { icon: customIcon }).bindPopup(popupText);
+    }
+
+
+
+    // Fonction pour mettre à jour la position de l'avatar
+    async function updateAvatarPosition() {
+        try {
+            const response = await fetch('/data/baptiste.yaml');
+            const userData = await response.json();
+
+            const newCoordinates = [
+                userData.position_actuelle.latitude,
+                userData.position_actuelle.longitude
+                
+
+            ];
+
+            const lastUpdate = userData.position_actuelle.last_update;
+            const inactivitySeconds = calculateDeltaInSeconds(lastUpdate);
+
+            // Si le pin existe déjà, on met à jour sa position
+            if (userMarker) {
+                userMarker.setLatLng(newCoordinates);
+            } else {
+                // Ajouter le pin de l'avatar pour la première fois
+                userMarker = addCustomPin(newCoordinates, userData.avatar, `Baptiste : ${userData.progression}`);
+                userMarker.addTo(map);
+            }
+
+            console.log("Position de l'avatar mise à jour :", newCoordinates);
+        } catch (error) {
+            console.error("Erreur lors de la mise à jour de la position :", error);
+        }
+    }
+
+    // Ajouter les pins pour les défis (chargement initial uniquement)
+    async function loadChallengePins() {
+        try {
+            const response = await fetch('/data/baptiste.yaml');
+            const userData = await response.json();
+
+            const offsetX = userData.pin_offset?.x || 20;
+            const offsetY = userData.pin_offset?.y || 40;
+
+            for (let i = 1; i <= 6; i++) {
+                const defiKey = `defi_${i}`;
+                const defi = userData.defis[defiKey];
+
+                const defiCoordinates = [
+                    defi.geolocalisation.latitude,
+                    defi.geolocalisation.longitude
+                ];
+
+                const pinIcon = defi.pin;
+                const popupText = `Défi ${i} - ${defi.contenu_reception}`;
+
+                const defiMarker = addCustomPin(defiCoordinates, pinIcon, popupText, offsetX, offsetY);
+                defiMarker.addTo(map);
+            }
+
+            console.log("Pins des défis chargés avec succès !");
+        } catch (error) {
+            console.error("Erreur lors du chargement des défis :", error);
+        }
+    }
+
+    // Charger les pins des défis (une seule fois)
+    await loadChallengePins();
+
+    // Mettre à jour la position de l'avatar toutes les 3 secondes
+    updateAvatarPosition(); // Premier appel pour l'initialisation
+    setInterval(updateAvatarPosition, 3000);
+});