Actualizar index.html
This commit is contained in:
92
index.html
92
index.html
@@ -6,9 +6,6 @@
|
|||||||
<title>Portal del Cliente - IntegraRepara</title>
|
<title>Portal del Cliente - IntegraRepara</title>
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
<script src="https://unpkg.com/lucide@latest"></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>
|
<style>
|
||||||
body { background-color: #f4f7f9; background-image: radial-gradient(#e2e8f0 1px, transparent 1px); background-size: 24px 24px; }
|
body { background-color: #f4f7f9; background-image: radial-gradient(#e2e8f0 1px, transparent 1px); background-size: 24px 24px; }
|
||||||
@@ -18,8 +15,12 @@
|
|||||||
.no-scrollbar::-webkit-scrollbar { display: none; }
|
.no-scrollbar::-webkit-scrollbar { display: none; }
|
||||||
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
||||||
|
|
||||||
/* Ocultar marca de agua de leaflet para que quede más limpio */
|
/* Animación fluida para la barra de ruta del camión */
|
||||||
.leaflet-control-attribution { display: none !important; }
|
@keyframes movingLine {
|
||||||
|
0% { transform: translateX(-100%); }
|
||||||
|
100% { transform: translateX(200%); }
|
||||||
|
}
|
||||||
|
.animate-moving-line { animation: movingLine 2s linear infinite; }
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body class="text-slate-800 font-sans antialiased min-h-screen flex flex-col items-center relative overflow-x-hidden">
|
<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';
|
: 'https://integrarepara-api.integrarepara.es';
|
||||||
|
|
||||||
let urlToken = "";
|
let urlToken = "";
|
||||||
let mapsToInit = [];
|
|
||||||
let liveMaps = {};
|
|
||||||
let liveMarkers = {};
|
|
||||||
|
|
||||||
document.addEventListener("DOMContentLoaded", async () => {
|
document.addEventListener("DOMContentLoaded", async () => {
|
||||||
lucide.createIcons();
|
lucide.createIcons();
|
||||||
const urlParams = new URLSearchParams(window.location.search);
|
const urlParams = new URLSearchParams(window.location.search);
|
||||||
urlToken = urlParams.get('token');
|
urlToken = urlParams.get('token');
|
||||||
|
|
||||||
// CORRECCIÓN: Si no hay token, llamamos a showError()
|
|
||||||
if (!urlToken) {
|
if (!urlToken) {
|
||||||
showError();
|
showError();
|
||||||
return;
|
return;
|
||||||
@@ -103,11 +100,10 @@
|
|||||||
renderPortal(data.client, data.company, data.services);
|
renderPortal(data.client, data.company, data.services);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error(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() {
|
function showError() {
|
||||||
const loader = document.getElementById('loader');
|
const loader = document.getElementById('loader');
|
||||||
const errorScreen = document.getElementById('errorScreen');
|
const errorScreen = document.getElementById('errorScreen');
|
||||||
@@ -177,29 +173,25 @@
|
|||||||
</div>`;
|
</div>`;
|
||||||
}
|
}
|
||||||
else if (srv.status_name === 'Técnico de Camino') {
|
else if (srv.status_name === 'Técnico de Camino') {
|
||||||
|
// NUEVO DISEÑO ANIMADO Y LIMPIO PARA "DE CAMINO" SIN MAPA
|
||||||
statusHtml = `
|
statusHtml = `
|
||||||
<div class="bg-indigo-50 border border-indigo-200 p-6 rounded-3xl relative overflow-hidden shadow-inner">
|
<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="absolute top-0 left-0 w-full h-1.5 bg-indigo-100 overflow-hidden">
|
||||||
<div class="w-12 h-12 bg-indigo-500 text-white rounded-full flex items-center justify-center shadow-md animate-bounce shrink-0">
|
<div class="w-1/2 h-full bg-indigo-500 rounded-full animate-moving-line"></div>
|
||||||
<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>
|
</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="flex items-center gap-5 relative z-10">
|
||||||
<div class="absolute inset-0 flex items-center justify-center bg-slate-100 z-[400]" id="map-loader-${srv.id}">
|
<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">
|
||||||
<div class="text-center">
|
<i data-lucide="truck" class="w-7 h-7"></i>
|
||||||
<i data-lucide="satellite" class="w-6 h-6 mx-auto mb-2 text-indigo-400 animate-pulse"></i>
|
</div>
|
||||||
<p class="text-[9px] font-black uppercase tracking-widest text-slate-500">Buscando satélites...</p>
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
mapsToInit.push(srv.id);
|
|
||||||
}
|
}
|
||||||
else if (srv.status_name === 'En Reparación') {
|
else if (srv.status_name === 'En Reparación') {
|
||||||
statusHtml = `
|
statusHtml = `
|
||||||
@@ -262,56 +254,8 @@
|
|||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
document.getElementById('loader').classList.add('hidden');
|
document.getElementById('loader').classList.add('hidden');
|
||||||
document.getElementById('mainContent').classList.remove('hidden');
|
document.getElementById('mainContent').classList.remove('hidden');
|
||||||
|
|
||||||
mapsToInit.forEach(id => initLiveMap(id));
|
|
||||||
}, 300);
|
}, 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>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Reference in New Issue
Block a user