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 14:58:33 +00:00
parent 7c7e9a1ad6
commit 5e5a6bef67
1 changed files with 39 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
index.html
View File

@@ -159,16 +159,19 @@
const isFinalized = srv.is_final; const isFinalized = srv.is_final;
const raw = srv.raw_data || {}; const raw = srv.raw_data || {};
const descLimpia = summarizeDescription(srv.description); const descLimpia = summarizeDescription(srv.description);
const stName = (srv.status_name || '').toLowerCase();
const hasDate = !!(srv.scheduled_date && srv.scheduled_time);
let statusHtml = ''; let statusHtml = '';
// ESTRUCTURA PRINCIPAL DE ESTADOS // ESTRUCTURA INTELIGENTE DE ESTADOS
if (isFinalized) { if (isFinalized) {
statusHtml = ` statusHtml = `
<div class="bg-slate-50 border border-slate-200 p-4 rounded-2xl flex items-center justify-between opacity-70 grayscale"> <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> <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>`; </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"] || ""}`; const fullAddr = `${raw["Dirección"] || ""}, ${raw["Código Postal"] || ""} ${raw["Población"] || ""}`;
etasToInit.push({ id: srv.id, address: fullAddr }); etasToInit.push({ id: srv.id, address: fullAddr });
@@ -188,7 +191,7 @@
</div> </div>
`; `;
} }
else if (srv.status_name === 'En Reparación') { else if (stName.includes('reparación') || stName.includes('trabajando')) {
statusHtml = ` statusHtml = `
<div class="bg-orange-50 border border-orange-200 p-6 rounded-3xl flex items-center gap-5 shadow-inner"> <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> <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>
</div>`; </div>`;
} }
else if (srv.status_name === 'En Incidencia' || (srv.status_name || '').toLowerCase().includes('incidencia')) { else if (stName.includes('incidencia')) {
statusHtml = ` statusHtml = `
<div class="bg-rose-50 border border-rose-200 p-6 rounded-3xl flex items-center gap-5 shadow-inner"> <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"> <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>
</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); const endT = addOneHour(srv.scheduled_time);
// --- DETECCIÓN DE RETRASO ---
const now = new Date(); const now = new Date();
const schedParts = srv.scheduled_date.split('-'); // Formato esperado YYYY-MM-DD const schedParts = srv.scheduled_date.split('-');
const endTimeParts = endT.split(':'); // Formato esperado HH:MM const endTimeParts = endT.split(':');
let isLate = false; let isLate = false;
if (schedParts.length === 3 && endTimeParts.length === 2) { 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); const limitDate = new Date(schedParts[0], schedParts[1] - 1, schedParts[2], endTimeParts[0], endTimeParts[1], 0);
if (now > limitDate) isLate = true;
// Si la fecha y hora actuales son mayores a la fecha límite, ¡Llega tarde!
if (now > limitDate) {
isLate = true;
}
} }
if (isLate) { if (isLate) {
// ESTADO: RETRASADO (Tono naranja/ámbar para pedir disculpas suavemente)
statusHtml = ` statusHtml = `
<div class="bg-amber-50 border border-amber-200 p-6 rounded-3xl relative overflow-hidden shadow-inner"> <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="flex items-center gap-4 relative z-10">
@@ -251,7 +246,6 @@
</div> </div>
</div>`; </div>`;
} else { } else {
// ESTADO NORMAL: VISITA CONFIRMADA EN TIEMPO (Verde)
statusHtml = ` 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="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="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> <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>
</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"> <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 <i data-lucide="calendar-clock" class="w-4 h-4"></i> Modificar Cita
</a> </a>
</div>`; </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 { else {
// ESTADO GENÉRICO CON EL NOMBRE REAL
statusHtml = ` statusHtml = `
<div class="bg-slate-100 border border-slate-200 p-6 rounded-3xl text-center"> <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> <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>
<h4 class="font-black text-slate-700 uppercase text-sm mb-1 tracking-tight">En Gestión</h4> <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>`; </div>`;
} }
// ===================================== // =====================================
// NUEVO: BLOQUE DE BOTONES DE CONTACTO // BLOQUE DE BOTONES DE CONTACTO
// ===================================== // =====================================
let contactHtml = ''; let contactHtml = '';
const hasWorker = srv.assigned_worker && srv.assigned_worker !== 'Pendiente'; const hasWorker = srv.assigned_worker && srv.assigned_worker !== 'Pendiente';
if (hasWorker && !isFinalized) { 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"; const workerPhone = srv.worker_phone ? srv.worker_phone.replace('+', '') : "34000000000";
contactHtml = ` contactHtml = `
@@ -302,7 +317,7 @@
} }
// ===================================== // =====================================
// NUEVO: DATOS DEL ASEGURADO (CAJA LIMPIA) // DATOS DEL ASEGURADO
// ===================================== // =====================================
const clientDataHtml = ` const clientDataHtml = `
<div class="bg-slate-50/50 rounded-2xl p-4 mt-5 border border-slate-100 text-left"> <div class="bg-slate-50/50 rounded-2xl p-4 mt-5 border border-slate-100 text-left">