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-26 08:27:59 +00:00
parent 64fe4717ac
commit 8170a450db
1 changed files with 57 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
index.html
View File

@@ -212,23 +212,64 @@
}
else if (srv.status_name === 'Visita Agendada' || (srv.scheduled_date && srv.scheduled_time)) {
const endT = addOneHour(srv.scheduled_time);
statusHtml = `
<div class="bg-gradient-to-br from-emerald-400 to-emerald-600 p-6 rounded-3xl text-white shadow-lg shadow-emerald-500/30 relative overflow-hidden">
<div class="flex items-center gap-5 mb-4">
<div class="w-14 h-14 bg-white/20 rounded-2xl flex items-center justify-center backdrop-blur-md border border-white/30 shrink-0 relative z-10">
<i data-lucide="calendar-check" class="w-7 h-7 text-white"></i>
</div>
<div class="relative z-10 flex-1">
<p class="text-[9px] font-black uppercase tracking-widest text-emerald-100 mb-0.5">Visita Confirmada</p>
<p class="font-black uppercase text-lg leading-none mb-1.5">${formatDate(srv.scheduled_date)}</p>
<p class="text-sm font-bold text-emerald-50 flex items-center gap-1.5"><i data-lucide="clock" class="w-4 h-4"></i> ${srv.scheduled_time} - ${endT}</p>
</div>
</div>
<a href="cita.html?token=${urlToken}&service=${srv.id}" class="w-full bg-white/20 hover:bg-white/30 text-white border border-white/30 backdrop-blur-md font-black py-3 rounded-xl flex items-center justify-center gap-2 transition-colors text-[10px] uppercase tracking-widest relative z-10">
<i data-lucide="calendar-clock" class="w-4 h-4"></i> Modificar Cita
</a>
</div>`;
// --- NUEVA LÓGICA: DETECCIÓN DE RETRASO ---
const now = new Date();
const schedParts = srv.scheduled_date.split('-'); // Formato esperado YYYY-MM-DD
const endTimeParts = endT.split(':'); // Formato esperado HH:MM
let isLate = false;
if (schedParts.length === 3 && endTimeParts.length === 2) {
// Construimos la fecha límite (la hora final del tramo de la cita)
const limitDate = new Date(schedParts[0], schedParts[1] - 1, schedParts[2], endTimeParts[0], endTimeParts[1], 0);
// Si la fecha y hora actuales son mayores a la fecha límite, ¡Llega tarde!
if (now > limitDate) {
isLate = true;
}
}
if (isLate) {
// ESTADO: RETRASADO (Tono naranja/ámbar para pedir disculpas suavemente)
statusHtml = `
<div class="bg-amber-50 border border-amber-200 p-6 rounded-3xl relative overflow-hidden shadow-inner">
<div class="flex items-center gap-4 relative z-10">
<div class="w-14 h-14 bg-amber-500 text-white rounded-2xl flex items-center justify-center shadow-md shrink-0">
<i data-lucide="clock-4" class="w-7 h-7"></i>
</div>
<div class="flex-1 min-w-0">
<p class="text-[9px] font-black uppercase tracking-widest text-amber-500 mb-0.5">Disculpe el retraso</p>
<h4 class="font-black text-amber-900 uppercase text-lg leading-none mb-1.5 tracking-tight">Técnico Demorado</h4>
<p class="text-[10px] font-bold text-amber-700 leading-tight">La cita estaba prevista hasta las ${endT}. El técnico ha tenido un contratiempo en la ruta anterior. Llegará lo antes posible.</p>
</div>
</div>
<div class="mt-4 pt-4 border-t border-amber-200/60 relative z-10">
<a href="cita.html?token=${urlToken}&service=${srv.id}" class="w-full bg-white border border-amber-200 text-amber-700 hover:bg-amber-100 font-black py-3 rounded-xl flex items-center justify-center gap-2 transition-colors text-[10px] uppercase tracking-widest shadow-sm">
<i data-lucide="calendar-clock" class="w-4 h-4"></i> Prefiero Modificar la Cita
</a>
</div>
</div>`;
} else {
// ESTADO NORMAL: VISITA CONFIRMADA EN TIEMPO (Verde)
statusHtml = `
<div class="bg-gradient-to-br from-emerald-400 to-emerald-600 p-6 rounded-3xl text-white shadow-lg shadow-emerald-500/30 relative overflow-hidden">
<div class="flex items-center gap-5 mb-4">
<div class="w-14 h-14 bg-white/20 rounded-2xl flex items-center justify-center backdrop-blur-md border border-white/30 shrink-0 relative z-10">
<i data-lucide="calendar-check" class="w-7 h-7 text-white"></i>
</div>
<div class="relative z-10 flex-1">
<p class="text-[9px] font-black uppercase tracking-widest text-emerald-100 mb-0.5">Visita Confirmada</p>
<p class="font-black uppercase text-lg leading-none mb-1.5">${formatDate(srv.scheduled_date)}</p>
<p class="text-sm font-bold text-emerald-50 flex items-center gap-1.5"><i data-lucide="clock" class="w-4 h-4"></i> ${srv.scheduled_time} - ${endT}</p>
</div>
</div>
<a href="cita.html?token=${urlToken}&service=${srv.id}" class="w-full bg-white/20 hover:bg-white/30 text-white border border-white/30 backdrop-blur-md font-black py-3 rounded-xl flex items-center justify-center gap-2 transition-colors text-[10px] uppercase tracking-widest relative z-10">
<i data-lucide="calendar-clock" class="w-4 h-4"></i> Modificar Cita
</a>
</div>`;
}
}
else {
statusHtml = `