marsalva/Portal
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 20:22:10 +00:00
parent e84fca59af
commit 92fa5ac4de
1 changed files with 38 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
index.html
View File

@@ -35,6 +35,14 @@
<p class="text-sm font-black tracking-widest uppercase text-slate-500 animate-pulse">Conectando...</p>
</div>
<div id="errorScreen" class="hidden w-full max-w-md mx-auto p-6 flex-col items-center justify-center min-h-screen text-center fade-in z-10 relative">
<div class="w-24 h-24 bg-red-50 text-red-500 rounded-full flex items-center justify-center mb-6 shadow-xl shadow-red-500/20 border border-red-100">
<i data-lucide="shield-alert" class="w-12 h-12"></i>
</div>
<h2 class="text-3xl font-black text-slate-800 mb-3 tracking-tight">Enlace no válido</h2>
<p class="text-slate-500 font-medium leading-relaxed">Parece que este enlace ha caducado o no es correcto. Por favor, solicita un nuevo acceso a tu empresa reparadora.</p>
</div>
<main id="mainContent" class="hidden w-full max-w-md mx-auto min-h-screen flex flex-col relative pb-10 z-10">
<div class="pt-10 pb-6 px-6 flex flex-col items-center text-center fade-in" style="animation-delay: 0.1s;">
@@ -82,16 +90,36 @@
const urlParams = new URLSearchParams(window.location.search);
urlToken = urlParams.get('token');
if (!urlToken) return;
// CORRECCIÓN: Si no hay token, llamamos a showError()
if (!urlToken) {
showError();
return;
}
try {
const res = await fetch(`${API_URL}/public/portal/${urlToken}`);
const data = await res.json();
if (!data.ok) throw new Error("Token inválido");
renderPortal(data.client, data.company, data.services);
} catch (e) { console.error(e); }
} catch (e) {
console.error(e);
showError(); // CORRECCIÓN: Si falla la conexión o el token es falso, también mostramos error
}
});
// FUNCIÓN DE ERROR RESTAURADA
function showError() {
const loader = document.getElementById('loader');
const errorScreen = document.getElementById('errorScreen');
loader.classList.add('opacity-0', 'pointer-events-none');
setTimeout(() => {
loader.classList.add('hidden');
errorScreen.classList.remove('hidden');
errorScreen.classList.add('flex');
}, 300);
}
function summarizeDescription(rawText) {
if (!rawText) return "Avería reportada.";
let text = rawText.replace(/\n/g, ' ');
@@ -149,7 +177,6 @@
</div>`;
}
else if (srv.status_name === 'Técnico de Camino') {
// MODO MAPA EN VIVO
statusHtml = `
<div class="bg-indigo-50 border border-indigo-200 p-6 rounded-3xl relative overflow-hidden shadow-inner">
<div class="flex items-center gap-4 mb-5 relative z-10">
@@ -172,7 +199,7 @@
</div>
</div>
`;
mapsToInit.push(srv.id); // Guardamos para inicializar el mapa
mapsToInit.push(srv.id);
}
else if (srv.status_name === 'En Reparación') {
statusHtml = `
@@ -236,22 +263,16 @@
document.getElementById('loader').classList.add('hidden');
document.getElementById('mainContent').classList.remove('hidden');
// INICIALIZAMOS LOS MAPAS
mapsToInit.forEach(id => initLiveMap(id));
}, 300);
}
// ==========================================
// LÓGICA DE MAPA EN TIEMPO REAL
// ==========================================
function initLiveMap(serviceId) {
if(!document.getElementById(`map-${serviceId}`)) return;
if(!document.getElementById(`liveMap-${serviceId}`)) return;
// 1. Configuramos el mapa de Leaflet
liveMaps[serviceId] = L.map(`map-${serviceId}`, { zoomControl: false, attributionControl: false }).setView([40.416775, -3.703790], 6);
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>`,
@@ -261,7 +282,6 @@
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);
}
@@ -273,20 +293,22 @@
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');
const lat = parseFloat(data.location.lat);
const lng = parseFloat(data.location.lng);
// Si el marcador no está en el mapa, lo añadimos
if (!liveMaps[serviceId].hasLayer(liveMarkers[serviceId])) {
liveMarkers[serviceId].addTo(liveMaps[serviceId]);
liveMaps[serviceId].setView([lat, lng], 15);
} else {
// Si ya está, lo movemos suavemente
liveMarkers[serviceId].setLatLng([lat, lng]);
liveMaps[serviceId].flyTo([lat, lng], 16, { animate: true, duration: 1.5 });
}
} else {
// MEJORA: Mensaje claro si el técnico no ha encendido su GPS todavía
const p = document.querySelector(`#map-loader-${serviceId} p`);
if(p) p.innerText = "ESPERANDO SEÑAL GPS DEL TÉCNICO...";
}
} catch(e) {}
}