Actualizar index.html
This commit is contained in:
63
index.html
63
index.html
@@ -159,16 +159,19 @@
|
||||
const isFinalized = srv.is_final;
|
||||
const raw = srv.raw_data || {};
|
||||
const descLimpia = summarizeDescription(srv.description);
|
||||
|
||||
const stName = (srv.status_name || '').toLowerCase();
|
||||
const hasDate = !!(srv.scheduled_date && srv.scheduled_time);
|
||||
let statusHtml = '';
|
||||
|
||||
// ESTRUCTURA PRINCIPAL DE ESTADOS
|
||||
// ESTRUCTURA INTELIGENTE DE ESTADOS
|
||||
if (isFinalized) {
|
||||
statusHtml = `
|
||||
<div class="bg-slate-50 border border-slate-200 p-4 rounded-2xl flex items-center justify-between opacity-70 grayscale">
|
||||
<span class="text-[10px] font-black text-slate-500 uppercase flex items-center gap-1.5"><i data-lucide="archive" class="w-3.5 h-3.5"></i> ${srv.status_name}</span>
|
||||
</div>`;
|
||||
}
|
||||
else if (srv.status_name === 'Técnico de Camino') {
|
||||
else if (stName.includes('camino')) {
|
||||
const fullAddr = `${raw["Dirección"] || ""}, ${raw["Código Postal"] || ""} ${raw["Población"] || ""}`;
|
||||
etasToInit.push({ id: srv.id, address: fullAddr });
|
||||
|
||||
@@ -188,7 +191,7 @@
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
else if (srv.status_name === 'En Reparación') {
|
||||
else if (stName.includes('reparación') || stName.includes('trabajando')) {
|
||||
statusHtml = `
|
||||
<div class="bg-orange-50 border border-orange-200 p-6 rounded-3xl flex items-center gap-5 shadow-inner">
|
||||
<div class="w-14 h-14 bg-orange-500 text-white rounded-2xl flex items-center justify-center shadow-md shrink-0"><i data-lucide="hammer" class="w-7 h-7"></i></div>
|
||||
@@ -198,7 +201,7 @@
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
else if (srv.status_name === 'En Incidencia' || (srv.status_name || '').toLowerCase().includes('incidencia')) {
|
||||
else if (stName.includes('incidencia')) {
|
||||
statusHtml = `
|
||||
<div class="bg-rose-50 border border-rose-200 p-6 rounded-3xl flex items-center gap-5 shadow-inner">
|
||||
<div class="w-14 h-14 bg-rose-500 text-white rounded-2xl flex items-center justify-center shadow-md shrink-0 animate-pulse">
|
||||
@@ -210,28 +213,20 @@
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
else if (srv.status_name === 'Visita Agendada' || (srv.scheduled_date && srv.scheduled_time)) {
|
||||
else if (hasDate && !stName.includes('anulado') && !stName.includes('desasignado')) {
|
||||
// ESTÁ AGENDADO (COMPROBAMOS SI LLEGA TARDE)
|
||||
const endT = addOneHour(srv.scheduled_time);
|
||||
|
||||
// --- 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
|
||||
const schedParts = srv.scheduled_date.split('-');
|
||||
const endTimeParts = endT.split(':');
|
||||
|
||||
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 (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">
|
||||
@@ -251,7 +246,6 @@
|
||||
</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">
|
||||
@@ -264,29 +258,50 @@
|
||||
<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 if (stName.includes('esperando') || stName.includes('pendiente de cita') || (srv.assigned_worker && srv.assigned_worker !== 'Pendiente' && !hasDate)) {
|
||||
// ESTÁ ASIGNADO PERO FALTA LA CITA
|
||||
statusHtml = `
|
||||
<div class="bg-blue-50 border border-blue-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-blue-500 text-white rounded-2xl flex items-center justify-center shadow-md shrink-0">
|
||||
<i data-lucide="calendar-plus" class="w-7 h-7"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-[9px] font-black uppercase tracking-widest text-blue-500 mb-0.5">Acción Requerida</p>
|
||||
<h4 class="font-black text-blue-900 uppercase text-lg leading-none mb-1.5 tracking-tight">Elige tu cita</h4>
|
||||
<p class="text-[10px] font-bold text-blue-700 leading-tight">Tu técnico ya está asignado. Por favor, selecciona cuándo quieres que vayamos a tu domicilio.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 pt-4 border-t border-blue-200/60 relative z-10">
|
||||
<a href="cita.html?token=${urlToken}&service=${srv.id}" class="w-full bg-blue-600 text-white hover:bg-blue-700 font-black py-3 rounded-xl flex items-center justify-center gap-2 transition-colors text-[10px] uppercase tracking-widest shadow-md">
|
||||
<i data-lucide="calendar" class="w-4 h-4"></i> Agendar Cita Ahora
|
||||
</a>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
else {
|
||||
// ESTADO GENÉRICO CON EL NOMBRE REAL
|
||||
statusHtml = `
|
||||
<div class="bg-slate-100 border border-slate-200 p-6 rounded-3xl text-center">
|
||||
<div class="w-12 h-12 bg-slate-200 text-slate-500 rounded-full flex items-center justify-center mx-auto mb-3"><i data-lucide="clock" class="w-6 h-6"></i></div>
|
||||
<h4 class="font-black text-slate-700 uppercase text-sm mb-1 tracking-tight">En Gestión</h4>
|
||||
<div class="w-12 h-12 bg-slate-200 text-slate-500 rounded-full flex items-center justify-center mx-auto mb-3"><i data-lucide="info" class="w-6 h-6"></i></div>
|
||||
<p class="text-[9px] font-black text-slate-400 uppercase tracking-widest mb-1">Estado actual</p>
|
||||
<h4 class="font-black text-slate-700 uppercase text-sm mb-1 tracking-tight">${srv.status_name || 'En Gestión'}</h4>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
// =====================================
|
||||
// NUEVO: BLOQUE DE BOTONES DE CONTACTO
|
||||
// BLOQUE DE BOTONES DE CONTACTO
|
||||
// =====================================
|
||||
let contactHtml = '';
|
||||
const hasWorker = srv.assigned_worker && srv.assigned_worker !== 'Pendiente';
|
||||
|
||||
if (hasWorker && !isFinalized) {
|
||||
// Extraemos el teléfono del trabajador (si la BD lo manda) o usamos uno temporal para que funcione el enlace
|
||||
const workerPhone = srv.worker_phone ? srv.worker_phone.replace('+', '') : "34000000000";
|
||||
|
||||
contactHtml = `
|
||||
@@ -302,7 +317,7 @@
|
||||
}
|
||||
|
||||
// =====================================
|
||||
// NUEVO: DATOS DEL ASEGURADO (CAJA LIMPIA)
|
||||
// DATOS DEL ASEGURADO
|
||||
// =====================================
|
||||
const clientDataHtml = `
|
||||
<div class="bg-slate-50/50 rounded-2xl p-4 mt-5 border border-slate-100 text-left">
|
||||
|
||||
Reference in New Issue
Block a user