From 257095c1d2ede0833ab2d843c4fa4e61ecc3a585 Mon Sep 17 00:00:00 2001
From: marsalva <info@marsalva.es>
Date: Wed, 25 Feb 2026 08:26:50 +0000
Subject: [PATCH] Actualizar index.html

---
 index.html | 32 +++++++++++++++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 932fc48..9b59a52 100644
--- a/index.html
+++ b/index.html
@@ -266,6 +266,32 @@
             setInterval(() => fetchWorkerLocation(serviceId), 10000); 
         }
 
+        // ==========================================
+        // LÓGICA DE MAPA EN TIEMPO REAL (CORREGIDA)
+        // ==========================================
+        function initLiveMap(serviceId) {
+            // CORRECCIÓN: El ID correcto es liveMap- (no map-)
+            if(!document.getElementById(`liveMap-${serviceId}`)) return;
+            
+            // 1. Configuramos el mapa de Leaflet
+            liveMaps[serviceId] = L.map(`liveMap-${serviceId}`, { zoomControl: false, attributionControl: false }).setView([40.416775, -3.703790], 6);
+            L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png').addTo(liveMaps[serviceId]);
+
+            // 2. Creamos un icono HTML personalizado (un puntito azul que brilla)
+            const carIcon = L.divIcon({
+                className: 'custom-div-icon',
+                html: `<div style="position:relative;"><div style="background-color:#6366f1; width:20px; height:20px; border-radius:50%; border:3px solid white; box-shadow: 0 4px 6px rgba(0,0,0,0.3); position:relative; z-index:2;"></div><div style="position:absolute; top:-5px; left:-5px; width:30px; height:30px; background-color:#6366f1; border-radius:50%; opacity:0.4; animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite; z-index:1;"></div></div>`,
+                iconSize: [20, 20],
+                iconAnchor: [10, 10]
+            });
+
+            liveMarkers[serviceId] = L.marker([40.416775, -3.703790], {icon: carIcon});
+            
+            // 3. Ejecutamos la búsqueda de coordenadas cada 10 segundos
+            fetchWorkerLocation(serviceId);
+            setInterval(() => fetchWorkerLocation(serviceId), 10000); 
+        }
+
         async function fetchWorkerLocation(serviceId) {
             try {
                 const res = await fetch(`${API_URL}/public/portal/${urlToken}/location/${serviceId}`);
@@ -273,7 +299,7 @@
                 
                 if (data.ok && data.location) {
                     const loader = document.getElementById(`map-loader-${serviceId}`);
-                    if(loader) loader.classList.add('hidden'); // Ocultar pantalla de "Buscando satélites"
+                    if(loader) loader.classList.add('hidden'); // Ocultar pantalla de carga
                     
                     const lat = parseFloat(data.location.lat);
                     const lng = parseFloat(data.location.lng);
@@ -287,6 +313,10 @@
                         liveMarkers[serviceId].setLatLng([lat, lng]);
                         liveMaps[serviceId].flyTo([lat, lng], 16, { animate: true, duration: 1.5 });
                     }
+                } else {
+                    // Si el técnico aún no ha mandado su ubicación, avisamos al cliente
+                    const p = document.querySelector(`#map-loader-${serviceId} p`);
+                    if(p) p.innerText = "ESPERANDO SEÑAL GPS DEL TÉCNICO...";
                 }
             } catch(e) {}
         }