marsalva/App
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Actualizar index.html

Browse Source
This commit is contained in:
marsalva
2026-02-25 08:26:50 +00:00
parent a7db9b2c37
commit 257095c1d2
1 changed files with 31 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
index.html
View File

@@ -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) {}
}