Actualizar index.html
This commit is contained in:
70
index.html
70
index.html
@@ -9,7 +9,6 @@
|
||||
<style>
|
||||
body {
|
||||
background-color: #f4f7f9;
|
||||
/* Patrón de fondo muy sutil */
|
||||
background-image: radial-gradient(#e2e8f0 1px, transparent 1px);
|
||||
background-size: 24px 24px;
|
||||
}
|
||||
@@ -109,7 +108,6 @@
|
||||
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
urlToken = urlParams.get('token');
|
||||
const targetServiceId = urlParams.get('service'); // Puede venir o no
|
||||
|
||||
if (!urlToken) {
|
||||
showError();
|
||||
@@ -122,7 +120,7 @@
|
||||
|
||||
if (!data.ok) throw new Error("Token inválido");
|
||||
|
||||
renderPortal(data.client, data.company, data.services, targetServiceId);
|
||||
renderPortal(data.client, data.company, data.services);
|
||||
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
@@ -139,6 +137,40 @@
|
||||
}, 300);
|
||||
}
|
||||
|
||||
// LIMPIADOR INTELIGENTE DE TEXTOS DE ASEGURADORAS
|
||||
function summarizeDescription(rawText) {
|
||||
if (!rawText) return "Avería reportada.";
|
||||
|
||||
// 1. Quitamos los saltos de línea
|
||||
let text = rawText.replace(/\n/g, ' ');
|
||||
|
||||
// 2. Cortamos el texto justo antes de donde empieza la basura habitual de los seguros
|
||||
// (fechas entre paréntesis, "M.O.", "MATERIAL", "ASEGURADO INFORMADO", "URGENTE", etc)
|
||||
const regexCorte = /(\(|\bM\.O\b|\bMATERIAL\b|\bASEGURADO\b|\bTELEFONO\b|\bURGENTE\b)/i;
|
||||
let cutPos = text.search(regexCorte);
|
||||
|
||||
if (cutPos > 5) { // Si encuentra la palabra clave y no es al inicio
|
||||
text = text.substring(0, cutPos);
|
||||
}
|
||||
|
||||
// 3. Limpiamos espacios extra
|
||||
text = text.trim();
|
||||
|
||||
// 4. Lo pasamos a formato "Capitalizado" (Primera en mayúscula, resto minúsculas)
|
||||
text = text.charAt(0).toUpperCase() + text.slice(1).toLowerCase();
|
||||
|
||||
// 5. Cogemos solo las primeras 8-10 palabras para que quede bonito
|
||||
let words = text.split(/\s+/);
|
||||
if (words.length > 10) {
|
||||
return words.slice(0, 10).join(" ") + "...";
|
||||
}
|
||||
|
||||
// Si quedó muy vacío, devolvemos genérico
|
||||
if (text.length < 5) return "Reparación general solicitada.";
|
||||
|
||||
return text.endsWith('.') ? text : text + ".";
|
||||
}
|
||||
|
||||
// Helper para sumar 1 hora y crear la franja
|
||||
function addOneHour(timeStr) {
|
||||
if(!timeStr) return "";
|
||||
@@ -160,7 +192,7 @@
|
||||
} catch(e) { return dateStr; }
|
||||
}
|
||||
|
||||
function renderPortal(client, company, allServices, targetServiceId) {
|
||||
function renderPortal(client, company, allServices) {
|
||||
document.getElementById('companyName').innerText = company.name || "Empresa Reparadora";
|
||||
if (company.logo) {
|
||||
document.getElementById('companyLogo').src = company.logo;
|
||||
@@ -180,11 +212,12 @@
|
||||
let hasHistory = false;
|
||||
|
||||
allServices.forEach(srv => {
|
||||
const isFinalized = srv.status_name.toLowerCase().includes('terminado') ||
|
||||
srv.status_name.toLowerCase().includes('anulado') ||
|
||||
srv.status_name.toLowerCase().includes('desasignado');
|
||||
const isFinalized = srv.status_name === 'Terminado';
|
||||
const isPendingWorker = (!srv.assigned_worker || srv.assigned_worker === 'Pendiente');
|
||||
|
||||
// --- CONSTRUCCIÓN DEL BLOQUE DE ESTADO DEPENDIENDO DE LA SITUACIÓN ---
|
||||
// Procesamos la descripción con la "mini-IA"
|
||||
const descLimpia = summarizeDescription(srv.description);
|
||||
|
||||
let statusHtml = '';
|
||||
|
||||
if (isFinalized) {
|
||||
@@ -195,16 +228,15 @@
|
||||
<span class="text-xs font-black text-slate-400">${formatDate(srv.scheduled_date) || 'Cerrado'}</span>
|
||||
</div>
|
||||
`;
|
||||
} else if (srv.status_name === 'Pendiente de Asignar') {
|
||||
// MODO 1: AÚN NO HAY TÉCNICO
|
||||
// BLOQUEAMOS LA CITA E INFORMAMOS DE QUE ESTAMOS BUSCANDO
|
||||
} else if (isPendingWorker) {
|
||||
// MODO 1: AÚN NO HAY TÉCNICO (Botón de agendar bloqueado)
|
||||
statusHtml = `
|
||||
<div class="bg-slate-100 border border-slate-200 p-6 rounded-2xl 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="search" class="w-6 h-6 animate-pulse"></i>
|
||||
</div>
|
||||
<h4 class="font-black text-slate-700 uppercase text-sm mb-1 tracking-tight">Buscando Técnico</h4>
|
||||
<p class="text-[10px] text-slate-500 font-bold leading-tight px-4">Estamos asignando al técnico más cercano a tu domicilio para esta reparación. <br><br>En cuanto esté asignado, se habilitará la opción de agendar la visita aquí mismo.</p>
|
||||
<p class="text-[10px] text-slate-500 font-bold leading-tight px-4">Estamos asignando al técnico más cercano a tu domicilio. <br><br>En cuanto esté asignado, se habilitará la opción de agendar la visita aquí mismo.</p>
|
||||
</div>
|
||||
`;
|
||||
} else if (srv.appointment_status === 'pending') {
|
||||
@@ -218,7 +250,7 @@
|
||||
<p class="text-[10px] text-amber-700 font-bold leading-tight">Tu solicitud de fecha ha sido enviada. El técnico debe confirmarla en breve.</p>
|
||||
</div>
|
||||
`;
|
||||
} else if (srv.status_name === 'Visita Agendada' || srv.status_name === 'Asignado a Técnico') {
|
||||
} else if (srv.status_name === 'Visita Agendada' || (srv.scheduled_date && srv.scheduled_time)) {
|
||||
// MODO 3: CITA CONFIRMADA (FRANJA DE 1 HORA)
|
||||
const endT = addOneHour(srv.scheduled_time);
|
||||
statusHtml = `
|
||||
@@ -281,9 +313,7 @@
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
// MODO 4: PENDIENTE DE CITA NORMAL (TU DISEÑO QUE TE GUSTABA)
|
||||
// (Solo se llega aquí si no está en otro estado, y al no ser "Pendiente de asignar",
|
||||
// significa que YA tiene un operario asignado y puede coger cita).
|
||||
// MODO 4: PENDIENTE DE CITA NORMAL (Tiene técnico, no tiene cita)
|
||||
statusHtml = `
|
||||
<div class="bg-blue-50/50 border border-blue-100 p-6 rounded-2xl text-center">
|
||||
<div class="w-12 h-12 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center mx-auto mb-3 relative">
|
||||
@@ -305,12 +335,12 @@
|
||||
<div class="bg-white border ${isFinalized ? 'border-slate-100' : 'border-slate-200 shadow-md'} rounded-3xl p-5 mb-4 relative overflow-hidden">
|
||||
|
||||
<div class="flex justify-between items-start mb-3">
|
||||
<div>
|
||||
<span class="text-[9px] font-black text-slate-400 uppercase tracking-widest">Expediente ${srv.title}</span>
|
||||
<h3 class="font-black text-slate-800 text-sm mt-0.5 leading-tight">${srv.description}</h3>
|
||||
<div class="pr-2">
|
||||
<span class="text-[9px] font-black text-slate-400 uppercase tracking-widest">${srv.title}</span>
|
||||
<h3 class="font-black text-slate-800 text-sm mt-0.5 leading-tight">${descLimpia}</h3>
|
||||
</div>
|
||||
${srv.assigned_worker && srv.assigned_worker !== 'Pendiente' ?
|
||||
`<div class="bg-slate-50 border border-slate-100 px-2 py-1 rounded-md text-center shrink-0 ml-2">
|
||||
`<div class="bg-slate-50 border border-slate-100 px-2 py-1 rounded-md text-center shrink-0">
|
||||
<p class="text-[8px] uppercase font-black text-slate-400 mb-0.5">Técnico</p>
|
||||
<p class="text-[10px] font-bold text-blue-600">${srv.assigned_worker.split(' ')[0]}</p>
|
||||
</div>` : ''
|
||||
|
||||
Reference in New Issue
Block a user