Actualizar index.html
This commit is contained in:
32
index.html
32
index.html
@@ -266,32 +266,6 @@
|
|||||||
setInterval(() => fetchWorkerLocation(serviceId), 10000);
|
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) {
|
async function fetchWorkerLocation(serviceId) {
|
||||||
try {
|
try {
|
||||||
const res = await fetch(`${API_URL}/public/portal/${urlToken}/location/${serviceId}`);
|
const res = await fetch(`${API_URL}/public/portal/${urlToken}/location/${serviceId}`);
|
||||||
@@ -299,7 +273,7 @@
|
|||||||
|
|
||||||
if (data.ok && data.location) {
|
if (data.ok && data.location) {
|
||||||
const loader = document.getElementById(`map-loader-${serviceId}`);
|
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 lat = parseFloat(data.location.lat);
|
||||||
const lng = parseFloat(data.location.lng);
|
const lng = parseFloat(data.location.lng);
|
||||||
@@ -313,10 +287,6 @@
|
|||||||
liveMarkers[serviceId].setLatLng([lat, lng]);
|
liveMarkers[serviceId].setLatLng([lat, lng]);
|
||||||
liveMaps[serviceId].flyTo([lat, lng], 16, { animate: true, duration: 1.5 });
|
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) {}
|
} catch(e) {}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user