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-28 20:11:43 +00:00
parent 3f55d9754a
commit 1c9b9efe14
1 changed files with 41 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
index.html
View File

@@ -430,7 +430,7 @@
}, 300); }, 300);
} }
// ========================================== // ==========================================
// CÁLCULO DE ETA (TIEMPO ESTIMADO) INTELIGENTE // CÁLCULO DE ETA (TIEMPO ESTIMADO) INTELIGENTE
// ========================================== // ==========================================
async function calculateClientETA(serviceId, destAddress) { async function calculateClientETA(serviceId, destAddress) {
@@ -470,38 +470,52 @@
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
const km = R * c; const km = R * c;
// Tiempo basado directamente en la distancia (sin restar) // Tiempo total estimado basado en la distancia
const totalMins = Math.round((km/35)*60) + 5; const totalMins = Math.round((km/35)*60) + 5;
let remainingMins = totalMins;
// Porcentaje visual para la barra animada // Extraemos la hora exacta en la que el técnico pulsó el botón
let progressPercent = 5; let startedAt = new Date().getTime();
if (data.location.updated_at) { if (data.location.updated_at) {
const startedAt = new Date(data.location.updated_at).getTime(); const parsed = new Date(data.location.updated_at).getTime();
if (!isNaN(startedAt)) { if (!isNaN(parsed)) startedAt = parsed;
const diffMins = Math.floor((new Date().getTime() - startedAt) / 60000);
progressPercent = (diffMins / totalMins) * 100;
}
} }
if (progressPercent > 95) progressPercent = 95;
if (progressPercent < 5) progressPercent = 5;
container.innerHTML = ` // CREAMOS UNA FUNCIÓN INTERNA PARA ACTUALIZAR EN TIEMPO REAL
<p class="text-[10px] font-black text-indigo-500 uppercase tracking-widest mb-1.5 flex items-center gap-1.5"> function renderETA() {
<i data-lucide="clock" class="w-3.5 h-3.5"></i> Llegada en aprox. <span class="text-indigo-700 text-sm ml-0.5">${remainingMins} min</span> const now = new Date().getTime();
</p> const diffMins = Math.floor((now - startedAt) / 60000);
<div class="w-full bg-indigo-100 rounded-full h-2.5 overflow-hidden shadow-inner">
<div class="bg-indigo-500 h-full rounded-full transition-all duration-1000 relative" style="width: ${progressPercent}%"> // Restamos el tiempo que ya ha pasado conduciendo
<div class="absolute right-0 top-0 bottom-0 w-4 bg-white/40 animate-pulse"></div> let remainingMins = totalMins - diffMins;
if (remainingMins < 1) remainingMins = 1; // Nunca bajará de 1 minuto
let progressPercent = (diffMins / totalMins) * 100;
if (progressPercent > 95) progressPercent = 95;
if (progressPercent < 5) progressPercent = 5;
container.innerHTML = `
<p class="text-[10px] font-black text-indigo-500 uppercase tracking-widest mb-1.5 flex items-center gap-1.5">
<i data-lucide="clock" class="w-3.5 h-3.5"></i> Llegada en aprox. <span class="text-indigo-700 text-sm ml-0.5">${remainingMins} min</span>
</p>
<div class="w-full bg-indigo-100 rounded-full h-2.5 overflow-hidden shadow-inner">
<div class="bg-indigo-500 h-full rounded-full transition-all duration-1000 relative" style="width: ${progressPercent}%">
<div class="absolute right-0 top-0 bottom-0 w-4 bg-white/40 animate-pulse"></div>
</div>
</div> </div>
</div> <div class="flex justify-between items-center mt-1 px-1">
<div class="flex justify-between items-center mt-1 px-1"> <p class="text-[8px] font-black uppercase text-indigo-300">Saliendo</p>
<p class="text-[8px] font-black uppercase text-indigo-300">Saliendo</p> <p class="text-[8px] font-black uppercase text-indigo-400">A ${km.toFixed(1)} km</p>
<p class="text-[8px] font-black uppercase text-indigo-400">A ${km.toFixed(1)} km</p> </div>
</div> `;
`; lucide.createIcons();
lucide.createIcons(); }
// 1. Lo pintamos inmediatamente al cargar
renderETA();
// 2. Lo actualizamos automáticamente cada 60 segundos (Magia en tiempo real)
setInterval(renderETA, 60000);
} else { } else {
container.innerHTML = `<p class="text-xs font-bold text-indigo-600 leading-tight">El técnico está en camino hacia tu domicilio.</p>`; container.innerHTML = `<p class="text-xs font-bold text-indigo-600 leading-tight">El técnico está en camino hacia tu domicilio.</p>`;
} }