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 21:46:39 +00:00
parent 92fa5ac4de
commit 9be2e3f138
1 changed files with 18 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
index.html
View File

@@ -7,9 +7,6 @@
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/lucide@latest"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<style>
body { background-color: #f4f7f9; background-image: radial-gradient(#e2e8f0 1px, transparent 1px); background-size: 24px 24px; }
.fade-in { animation: fadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@@ -18,8 +15,12 @@
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
/* Ocultar marca de agua de leaflet para que quede más limpio */
.leaflet-control-attribution { display: none !important; }
/* Animación fluida para la barra de ruta del camión */
@keyframes movingLine {
0% { transform: translateX(-100%); }
100% { transform: translateX(200%); }
}
.animate-moving-line { animation: movingLine 2s linear infinite; }
</style>
</head>
<body class="text-slate-800 font-sans antialiased min-h-screen flex flex-col items-center relative overflow-x-hidden">
@@ -81,16 +82,12 @@
: 'https://integrarepara-api.integrarepara.es';
let urlToken = "";
let mapsToInit = [];
let liveMaps = {};
let liveMarkers = {};
document.addEventListener("DOMContentLoaded", async () => {
lucide.createIcons();
const urlParams = new URLSearchParams(window.location.search);
urlToken = urlParams.get('token');
// CORRECCIÓN: Si no hay token, llamamos a showError()
if (!urlToken) {
showError();
return;
@@ -103,11 +100,10 @@
renderPortal(data.client, data.company, data.services);
} catch (e) {
console.error(e);
showError(); // CORRECCIÓN: Si falla la conexión o el token es falso, también mostramos error
showError();
}
});
// FUNCIÓN DE ERROR RESTAURADA
function showError() {
const loader = document.getElementById('loader');
const errorScreen = document.getElementById('errorScreen');
@@ -177,29 +173,25 @@
</div>`;
}
else if (srv.status_name === 'Técnico de Camino') {
// NUEVO DISEÑO ANIMADO Y LIMPIO PARA "DE CAMINO" SIN MAPA
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">
<div class="w-12 h-12 bg-indigo-500 text-white rounded-full flex items-center justify-center shadow-md animate-bounce shrink-0">
<i data-lucide="truck" class="w-6 h-6"></i>
</div>
<div>
<h4 class="font-black text-indigo-800 uppercase text-base tracking-tight">¡Técnico en camino!</h4>
<p class="text-[10px] text-indigo-600 font-bold mt-1">Sigue su ubicación en tiempo real.</p>
</div>
<div class="absolute top-0 left-0 w-full h-1.5 bg-indigo-100 overflow-hidden">
<div class="w-1/2 h-full bg-indigo-500 rounded-full animate-moving-line"></div>
</div>
<div id="liveMap-${srv.id}" class="w-full h-48 bg-slate-200 rounded-2xl border border-indigo-200 relative overflow-hidden z-10 shadow-inner">
<div class="absolute inset-0 flex items-center justify-center bg-slate-100 z-[400]" id="map-loader-${srv.id}">
<div class="text-center">
<i data-lucide="satellite" class="w-6 h-6 mx-auto mb-2 text-indigo-400 animate-pulse"></i>
<p class="text-[9px] font-black uppercase tracking-widest text-slate-500">Buscando satélites...</p>
</div>
<div class="flex items-center gap-5 relative z-10">
<div class="w-14 h-14 bg-indigo-500 text-white rounded-2xl flex items-center justify-center shadow-lg shadow-indigo-500/30 animate-pulse shrink-0">
<i data-lucide="truck" class="w-7 h-7"></i>
</div>
<div>
<p class="text-[9px] font-black uppercase tracking-widest text-indigo-400 mb-0.5">En ruta hacia tu domicilio</p>
<h4 class="font-black text-indigo-900 uppercase text-lg leading-none mb-1.5 tracking-tight">¡Técnico en camino!</h4>
<p class="text-xs font-bold text-indigo-600 leading-tight">Prepárate, el técnico está a punto de llegar a tu ubicación.</p>
</div>
</div>
</div>
`;
mapsToInit.push(srv.id);
}
else if (srv.status_name === 'En Reparación') {
statusHtml = `
@@ -262,56 +254,8 @@
setTimeout(() => {
document.getElementById('loader').classList.add('hidden');
document.getElementById('mainContent').classList.remove('hidden');
mapsToInit.forEach(id => initLiveMap(id));
}, 300);
}
function initLiveMap(serviceId) {
if(!document.getElementById(`liveMap-${serviceId}`)) return;
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]);
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});
fetchWorkerLocation(serviceId);
setInterval(() => fetchWorkerLocation(serviceId), 10000);
}
async function fetchWorkerLocation(serviceId) {
try {
const res = await fetch(`${API_URL}/public/portal/${urlToken}/location/${serviceId}`);
const data = await res.json();
if (data.ok && data.location) {
const loader = document.getElementById(`map-loader-${serviceId}`);
if(loader) loader.classList.add('hidden');
const lat = parseFloat(data.location.lat);
const lng = parseFloat(data.location.lng);
if (!liveMaps[serviceId].hasLayer(liveMarkers[serviceId])) {
liveMarkers[serviceId].addTo(liveMaps[serviceId]);
liveMaps[serviceId].setView([lat, lng], 15);
} else {
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) {}
}
</script>
</body>
</html>