Actualizar index.html
This commit is contained in:
32
index.html
32
index.html
@@ -266,32 +266,6 @@
|
||||
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}`);
|
||||
@@ -299,7 +273,7 @@
|
||||
|
||||
if (data.ok && data.location) {
|
||||
const loader = document.getElementById(`map-loader-${serviceId}`);
|
||||
if(loader) loader.classList.add('hidden'); // Ocultar pantalla de carga
|
||||
if(loader) loader.classList.add('hidden'); // Ocultar pantalla de "Buscando satélites"
|
||||
|
||||
const lat = parseFloat(data.location.lat);
|
||||
const lng = parseFloat(data.location.lng);
|
||||
@@ -313,10 +287,6 @@
|
||||
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) {}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user