Actualizar buscar.html
This commit is contained in:
396
buscar.html
396
buscar.html
@@ -28,6 +28,15 @@
|
||||
|
||||
.tab-active { background-color: var(--primary) !important; color: white !important; font-weight: 900; box-shadow: 0 4px 10px rgba(0,0,0,0.1); border-color: var(--primary) !important; }
|
||||
.tab-inactive { background-color: white; color: #64748b; border-color: #e2e8f0; font-weight: 700; }
|
||||
|
||||
/* Smart Scheduler Custom CSS */
|
||||
.day-chip { transition: all 0.2s; border: 2px solid transparent; }
|
||||
.day-chip.active { background-color: var(--primary) !important; color: white !important; border-color: var(--primary) !important; transform: scale(1.05); }
|
||||
.day-chip.inactive { background-color: #f8fafc; color: #64748b; border-color: #e2e8f0; }
|
||||
|
||||
.time-chip { transition: all 0.2s; }
|
||||
.time-chip.active { background-color: var(--primary) !important; color: white !important; font-weight: 900; box-shadow: 0 4px 10px rgba(0,0,0,0.15); border-color: var(--primary) !important; }
|
||||
.time-chip.inactive { background-color: white; color: #475569; border-color: #cbd5e1; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="text-slate-800 font-sans antialiased h-screen flex flex-col overflow-hidden relative">
|
||||
@@ -45,7 +54,7 @@
|
||||
|
||||
<div class="relative w-full">
|
||||
<i data-lucide="search" class="w-5 h-5 absolute left-4 top-1/2 -translate-y-1/2 text-primary-dynamic"></i>
|
||||
<input type="text" id="searchInput" onkeyup="renderServices()" placeholder="Buscar por nombre, ref, teléfono, población..." class="w-full pl-12 pr-4 py-3.5 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-bold text-slate-700 outline-none focus:ring-2 focus:ring-primary-dynamic/30 focus:border-primary-dynamic transition-all shadow-inner">
|
||||
<input type="text" id="searchInput" onkeyup="renderServices()" placeholder="Buscar por nombre, ref, teléfono..." class="w-full pl-12 pr-4 py-3.5 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-bold text-slate-700 outline-none focus:ring-2 focus:ring-primary-dynamic/30 focus:border-primary-dynamic transition-all shadow-inner">
|
||||
<button onclick="document.getElementById('searchInput').value=''; renderServices();" class="absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 hover:text-rose-500 hidden" id="clearBtn"><i data-lucide="x-circle" class="w-5 h-5"></i></button>
|
||||
</div>
|
||||
|
||||
@@ -88,7 +97,6 @@
|
||||
|
||||
<div id="detailModal" class="fixed inset-0 bg-slate-900/60 z-[100] hidden flex-col justify-end transition-opacity duration-300 opacity-0">
|
||||
<div id="modalContent" class="bg-white rounded-t-[2rem] p-6 pb-12 transform translate-y-full transition-transform duration-300 shadow-2xl max-h-[85vh] flex flex-col">
|
||||
|
||||
<div class="flex justify-between items-start mb-4 border-b border-slate-100 pb-4 shrink-0">
|
||||
<div>
|
||||
<span id="detRef" class="text-[10px] font-black text-slate-400 uppercase tracking-widest"></span>
|
||||
@@ -97,18 +105,15 @@
|
||||
</div>
|
||||
<button onclick="closeModal()" class="w-8 h-8 bg-slate-50 rounded-full flex items-center justify-center text-slate-500 hover:text-red-500"><i data-lucide="x" class="w-4 h-4"></i></button>
|
||||
</div>
|
||||
|
||||
<div class="overflow-y-auto no-scrollbar flex-1 space-y-4">
|
||||
<div class="flex items-center gap-3 p-3 bg-slate-50 rounded-xl border border-slate-100">
|
||||
<div class="w-8 h-8 bg-white rounded-full flex items-center justify-center text-slate-400 shadow-sm shrink-0"><i data-lucide="map-pin" class="w-4 h-4"></i></div>
|
||||
<p id="detAddress" class="font-bold text-slate-700 text-xs uppercase leading-snug"></p>
|
||||
</div>
|
||||
|
||||
<div class="bg-amber-50/50 p-4 rounded-xl border border-amber-100">
|
||||
<p class="text-[10px] font-black text-amber-500 uppercase tracking-widest flex items-center gap-1 mb-2"><i data-lucide="file-text" class="w-3 h-3"></i> Descripción de la Avería</p>
|
||||
<div class="text-sm text-slate-600 font-medium" id="detDesc"></div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white border border-slate-200 rounded-xl overflow-hidden shadow-sm">
|
||||
<button onclick="document.getElementById('extraDataBox').classList.toggle('hidden')" class="w-full p-3 flex justify-between items-center text-[10px] font-black text-slate-500 uppercase tracking-widest bg-slate-50">
|
||||
<span>Ficha técnica completa</span>
|
||||
@@ -117,13 +122,66 @@
|
||||
<div id="extraDataBox" class="hidden p-4 space-y-2 bg-white border-t border-slate-100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="actionModal" class="fixed inset-0 bg-slate-900/60 z-[100] hidden flex-col justify-end transition-opacity duration-300 opacity-0">
|
||||
<div id="actionModalContent" class="bg-white rounded-t-[2rem] p-6 pb-12 transform translate-y-full transition-transform duration-300 shadow-2xl max-h-[90vh] flex flex-col">
|
||||
<div class="flex justify-between items-start mb-6 shrink-0">
|
||||
<div>
|
||||
<span id="detRefAppt" class="text-[10px] font-black text-slate-400 uppercase tracking-widest"></span>
|
||||
<h3 class="font-black text-xl text-slate-800 uppercase leading-none mt-1">Cambiar Cita</h3>
|
||||
</div>
|
||||
<button onclick="closeActionModal()" class="w-8 h-8 bg-slate-100 rounded-full flex items-center justify-center text-slate-500 hover:text-red-500"><i data-lucide="x" class="w-4 h-4"></i></button>
|
||||
</div>
|
||||
|
||||
<input type="hidden" id="detIdAppt">
|
||||
|
||||
<div class="overflow-y-auto no-scrollbar flex-1 pb-4">
|
||||
<div class="bg-white border border-slate-200 rounded-[1.5rem] p-5 shadow-sm space-y-5">
|
||||
<div>
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<p class="text-[10px] font-black text-primary-dynamic uppercase tracking-widest flex items-center gap-1.5"><i data-lucide="clock" class="w-4 h-4"></i> Duración Estimada</p>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<select id="durationInput" onchange="renderTimeSlots()" class="w-full bg-slate-50 border border-slate-200 p-4 rounded-xl text-sm font-black text-slate-700 shadow-inner outline-none focus:ring-2 focus:ring-primary-dynamic appearance-none pr-10 cursor-pointer">
|
||||
<option value="15">15 Minutos (Muy rápido)</option>
|
||||
<option value="30">30 Minutos</option>
|
||||
<option value="45">45 Minutos</option>
|
||||
<option value="60" selected>1 Hora (Estándar)</option>
|
||||
<option value="90">1 Hora y Media</option>
|
||||
<option value="120">2 Horas</option>
|
||||
<option value="180">3 Horas</option>
|
||||
<option value="240">4 Horas (Media jornada)</option>
|
||||
</select>
|
||||
<i data-lucide="chevron-down" class="w-5 h-5 absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="text-[10px] font-black text-primary-dynamic uppercase tracking-widest mb-2 flex items-center gap-1.5"><i data-lucide="calendar" class="w-4 h-4"></i> Seleccionar Día</p>
|
||||
<div id="dayCarousel" class="flex overflow-x-auto gap-2 pb-2 no-scrollbar"></div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="text-[10px] font-black text-primary-dynamic uppercase tracking-widest mb-2 flex items-center gap-1.5"><i data-lucide="watch" class="w-4 h-4"></i> Huecos Disponibles</p>
|
||||
<div id="timeGrid" class="grid grid-cols-4 gap-2"></div>
|
||||
<p id="noSlotsMsg" class="hidden text-xs text-rose-500 font-bold bg-rose-50 p-3 rounded-xl border border-rose-100 text-center mt-2">No hay huecos libres para esta duración.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pt-4 shrink-0 bg-white border-t border-slate-100">
|
||||
<button onclick="saveAppointment()" id="btnSaveAppt" disabled class="w-full bg-slate-300 text-white font-black py-4 rounded-2xl shadow-sm transition-all flex items-center justify-center gap-2 uppercase tracking-widest text-xs cursor-not-allowed">
|
||||
<i data-lucide="calendar-check" class="w-5 h-5"></i> Confirmar Cambio
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="toast" class="fixed top-5 left-1/2 -translate-x-1/2 bg-slate-800 text-white px-5 py-3 rounded-full shadow-2xl z-[200] font-bold text-xs uppercase tracking-widest flex items-center gap-2 transition-all duration-300 opacity-0 pointer-events-none transform -translate-y-10">
|
||||
<i data-lucide="check-circle" class="w-4 h-4 text-emerald-400"></i>
|
||||
<span id="toastMsg">Enlace copiado</span>
|
||||
<span id="toastMsg">Acción completada</span>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
@@ -135,7 +193,16 @@
|
||||
let systemStatuses = [];
|
||||
let systemGuilds = [];
|
||||
let currentTab = 'mine';
|
||||
let isRestricted = false; // Bandera de seguridad
|
||||
let isRestricted = false;
|
||||
|
||||
// Variables de Usuario para Asignación
|
||||
let myUserId = null;
|
||||
let myUserName = "";
|
||||
|
||||
// Variables del Smart Scheduler
|
||||
let bizHours = { m_start: '09:00', m_end: '14:00', a_start: '16:00', a_end: '19:00' };
|
||||
let pickerSelectedDate = "";
|
||||
let pickerSelectedTime = "";
|
||||
|
||||
const colorDict = {
|
||||
'gray': { bg: 'bg-slate-100', text: 'text-slate-600', dot: 'bg-slate-500', border: 'border-slate-200' },
|
||||
@@ -154,12 +221,17 @@
|
||||
let theme = JSON.parse(localStorage.getItem('app_theme'));
|
||||
const res = await fetch(`${API_URL}/config/company`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
|
||||
const data = await res.json();
|
||||
if(data.ok && data.config && data.config.portal_settings && data.config.portal_settings.app_settings) {
|
||||
theme = data.config.portal_settings.app_settings;
|
||||
if(data.ok && data.config && data.config.portal_settings) {
|
||||
const ps = data.config.portal_settings;
|
||||
// Cargamos horario comercial
|
||||
if(ps.m_start) bizHours = { m_start: ps.m_start, m_end: ps.m_end, a_start: ps.a_start, a_end: ps.a_end };
|
||||
if(ps.app_settings) {
|
||||
theme = ps.app_settings;
|
||||
localStorage.setItem('app_theme', JSON.stringify(theme));
|
||||
}
|
||||
}
|
||||
if(theme) {
|
||||
document.documentElement.style.setProperty('--primary', '#8b5cf6');
|
||||
document.documentElement.style.setProperty('--primary', '#8b5cf6'); // Purpura para buscar
|
||||
document.documentElement.style.setProperty('--secondary', theme.secondary);
|
||||
document.documentElement.style.setProperty('--app-bg', theme.bg);
|
||||
}
|
||||
@@ -167,13 +239,14 @@
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", async () => {
|
||||
if (!localStorage.getItem("token") || localStorage.getItem("role") !== 'operario') {
|
||||
const currentRole = localStorage.getItem("role");
|
||||
if (!localStorage.getItem("token") || (currentRole !== 'operario' && currentRole !== 'operario_cerrado')) {
|
||||
window.location.href = "index.html"; return;
|
||||
}
|
||||
|
||||
await applyTheme();
|
||||
lucide.createIcons();
|
||||
|
||||
// PRIMERO VERIFICAMOS EL ROL REAL EN EL SERVIDOR
|
||||
await checkUserRole();
|
||||
|
||||
await loadStatuses();
|
||||
@@ -186,13 +259,13 @@
|
||||
const res = await fetch(`${API_URL}/auth/me`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
|
||||
const data = await res.json();
|
||||
if (data.ok && data.user) {
|
||||
// SI ES OPERARIO CERRADO, ACTIVAMOS MODO RESTRINGIDO
|
||||
myUserId = data.user.id;
|
||||
myUserName = data.user.full_name;
|
||||
|
||||
if (data.user.role === 'operario_cerrado') {
|
||||
isRestricted = true;
|
||||
// Ocultamos la pestaña de la bolsa inmediatamente
|
||||
const tabBolsa = document.getElementById('tab-unassigned');
|
||||
if(tabBolsa) tabBolsa.style.display = 'none';
|
||||
// Forzamos la pestaña 'mine'
|
||||
setTab('mine');
|
||||
}
|
||||
}
|
||||
@@ -360,6 +433,40 @@
|
||||
const isScheduled = !!raw.scheduled_date;
|
||||
const citaText = isScheduled ? `${raw.scheduled_date} | ${raw.scheduled_time}` : 'Sin Cita';
|
||||
|
||||
// Generación Dinámica de Botones según el Estado
|
||||
let actionButtons = `
|
||||
<button onclick="quickCall('${safePhone}')" class="flex-1 bg-slate-50 hover:bg-blue-50 border border-slate-200 hover:border-blue-200 text-slate-600 hover:text-blue-600 font-black py-2.5 rounded-xl flex items-center justify-center gap-1.5 transition-colors text-[10px] uppercase tracking-widest">
|
||||
<i data-lucide="phone" class="w-4 h-4"></i> Llamar
|
||||
</button>
|
||||
<button onclick="openDetailModal(${s.id})" class="flex-1 bg-slate-800 hover:bg-slate-700 text-white font-black py-2.5 rounded-xl flex items-center justify-center gap-1.5 transition-colors text-[10px] uppercase tracking-widest shadow-md">
|
||||
<i data-lucide="eye" class="w-4 h-4"></i> Entrar
|
||||
</button>
|
||||
`;
|
||||
|
||||
if (currentTab === 'mine') {
|
||||
if (!isScheduled) {
|
||||
actionButtons = `
|
||||
<button onclick="quickCopyPortalLink(${s.id}, '${safePhone}', '${name.replace(/'/g, "\\'")}', '${addr.replace(/'/g, "\\'")}', this)" class="flex-1 bg-primary-dynamic/10 hover:bg-primary-dynamic/20 border border-primary-dynamic/20 text-primary-dynamic font-black py-2.5 rounded-xl flex items-center justify-center gap-1.5 transition-colors text-[10px] uppercase tracking-widest relative overflow-hidden">
|
||||
<i data-lucide="link" class="w-4 h-4"></i> Enlace Portal
|
||||
</button>
|
||||
` + actionButtons;
|
||||
} else {
|
||||
// GOAL 1: BOTÓN CAMBIAR CITA
|
||||
actionButtons = `
|
||||
<button onclick="openActionModal(${s.id})" class="flex-1 bg-amber-50 hover:bg-amber-100 border border-amber-200 text-amber-600 font-black py-2.5 rounded-xl flex items-center justify-center gap-1.5 transition-colors text-[10px] uppercase tracking-widest">
|
||||
<i data-lucide="calendar-clock" class="w-4 h-4"></i> Cambiar Cita
|
||||
</button>
|
||||
` + actionButtons;
|
||||
}
|
||||
} else if (currentTab === 'unassigned') {
|
||||
// GOAL 2: BOTÓN ASIGNÁRMELO
|
||||
actionButtons = `
|
||||
<button onclick="claimService(${s.id})" class="flex-1 bg-emerald-500 hover:bg-emerald-600 text-white font-black py-2.5 rounded-xl flex items-center justify-center gap-1.5 transition-colors text-[10px] uppercase tracking-widest shadow-md">
|
||||
<i data-lucide="hand" class="w-4 h-4"></i> ¡Asignármelo!
|
||||
</button>
|
||||
` + actionButtons;
|
||||
}
|
||||
|
||||
return `
|
||||
<div class="bg-white p-5 rounded-3xl border border-slate-200 shadow-sm relative overflow-hidden flex flex-col gap-4">
|
||||
${isUrgent ? '<div class="absolute top-0 right-0 bg-red-500 text-white text-[8px] font-black px-3 py-1 rounded-bl-xl uppercase tracking-widest shadow-sm z-10">Urgente</div>' : ''}
|
||||
@@ -390,19 +497,7 @@
|
||||
` : ''}
|
||||
|
||||
<div class="flex gap-2 pt-2 border-t border-slate-100">
|
||||
<button onclick="quickCall('${safePhone}')" class="flex-1 bg-slate-50 hover:bg-blue-50 border border-slate-200 hover:border-blue-200 text-slate-600 hover:text-blue-600 font-black py-2.5 rounded-xl flex items-center justify-center gap-1.5 transition-colors text-[10px] uppercase tracking-widest">
|
||||
<i data-lucide="phone" class="w-4 h-4"></i> Llamar
|
||||
</button>
|
||||
|
||||
${!isScheduled && currentTab === 'mine' ? `
|
||||
<button onclick="quickCopyPortalLink(${s.id}, '${safePhone}', '${name.replace(/'/g, "\\'")}', '${addr.replace(/'/g, "\\'")}', this)" class="flex-1 bg-primary-dynamic/10 hover:bg-primary-dynamic/20 border border-primary-dynamic/20 text-primary-dynamic font-black py-2.5 rounded-xl flex items-center justify-center gap-1.5 transition-colors text-[10px] uppercase tracking-widest relative overflow-hidden">
|
||||
<i data-lucide="link" class="w-4 h-4"></i> Enlace Portal
|
||||
</button>
|
||||
` : ''}
|
||||
|
||||
<button onclick="openDetailModal(${s.id})" class="flex-1 bg-slate-800 hover:bg-slate-700 text-white font-black py-2.5 rounded-xl flex items-center justify-center gap-1.5 transition-colors text-[10px] uppercase tracking-widest shadow-md">
|
||||
<i data-lucide="eye" class="w-4 h-4"></i> Entrar
|
||||
</button>
|
||||
${actionButtons}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -419,11 +514,49 @@
|
||||
else alert("No hay un teléfono válido guardado.");
|
||||
}
|
||||
|
||||
async function claimService(id) {
|
||||
if (!myUserId) return alert("Error de sesión. Vuelve a entrar.");
|
||||
if (!confirm("¿Seguro que quieres asignarte este servicio?")) return;
|
||||
|
||||
// Buscamos el estado "Asignado" para ponerlo automáticamente
|
||||
const estadoAsignado = systemStatuses.find(st => st.name.toLowerCase() === 'asignado') || systemStatuses[1];
|
||||
const statusToSave = estadoAsignado ? String(estadoAsignado.id) : 'asignado_operario';
|
||||
|
||||
try {
|
||||
// Paramos cualquier automatismo que estuviese corriendo
|
||||
await fetch(`${API_URL}/providers/scraped/${id}`, {
|
||||
method: 'PUT',
|
||||
headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` },
|
||||
body: JSON.stringify({ automation_status: 'completed' })
|
||||
});
|
||||
|
||||
// Asignamos
|
||||
const res = await fetch(`${API_URL}/providers/scraped/${id}`, {
|
||||
method: 'PUT',
|
||||
headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` },
|
||||
body: JSON.stringify({
|
||||
assigned_to: myUserId,
|
||||
assigned_to_name: myUserName,
|
||||
status_operativo: statusToSave
|
||||
})
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
showToast("¡Te lo has quedado!");
|
||||
loadAllData(); // Recarga las listas
|
||||
} else {
|
||||
alert("Alguien ha sido más rápido o hubo un error.");
|
||||
}
|
||||
} catch (e) {
|
||||
alert("Error de conexión");
|
||||
}
|
||||
}
|
||||
|
||||
async function quickCopyPortalLink(serviceId, phone, name, addr, btnElement) {
|
||||
if (!phone) return alert("El cliente no tiene teléfono guardado");
|
||||
|
||||
const originalHtml = btnElement.innerHTML;
|
||||
btnElement.innerHTML = '<i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i> Generando...';
|
||||
btnElement.innerHTML = '<i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i>...';
|
||||
lucide.createIcons();
|
||||
|
||||
try {
|
||||
@@ -438,11 +571,11 @@
|
||||
const portalLink = `https://portal.integrarepara.es/?token=${data.client.portal_token}&service=${serviceId}`;
|
||||
await navigator.clipboard.writeText(portalLink);
|
||||
|
||||
btnElement.innerHTML = '<i data-lucide="check" class="w-4 h-4"></i> Copiado';
|
||||
btnElement.innerHTML = '<i data-lucide="check" class="w-4 h-4"></i>';
|
||||
btnElement.classList.replace('text-primary-dynamic', 'text-emerald-600');
|
||||
btnElement.classList.replace('border-primary-dynamic/20', 'border-emerald-200');
|
||||
btnElement.classList.replace('bg-primary-dynamic/10', 'bg-emerald-50');
|
||||
showToast("¡Enlace copiado al portapapeles!");
|
||||
showToast("¡Enlace copiado!");
|
||||
|
||||
setTimeout(() => {
|
||||
btnElement.innerHTML = originalHtml;
|
||||
@@ -450,7 +583,7 @@
|
||||
lucide.createIcons();
|
||||
}, 3000);
|
||||
} else {
|
||||
alert("No se pudo generar el enlace.");
|
||||
alert("No se pudo generar.");
|
||||
btnElement.innerHTML = originalHtml;
|
||||
}
|
||||
} catch (error) {
|
||||
@@ -460,7 +593,204 @@
|
||||
}
|
||||
|
||||
// ==========================================
|
||||
// MODAL DE DETALLES
|
||||
// SMART SCHEDULER (MODAL REAGENDAR)
|
||||
// ==========================================
|
||||
function timeToMins(t) { let [h, m] = t.split(':').map(Number); return h * 60 + m; }
|
||||
function minsToTime(m) { let h = Math.floor(m / 60).toString().padStart(2, '0'); let min = (m % 60).toString().padStart(2, '0'); return `${h}:${min}`; }
|
||||
function toISODate(dateObj) { const y = dateObj.getFullYear(); const m = String(dateObj.getMonth() + 1).padStart(2, '0'); const d = String(dateObj.getDate()).padStart(2, '0'); return `${y}-${m}-${d}`; }
|
||||
|
||||
function buildDayCarousel() {
|
||||
const container = document.getElementById('dayCarousel');
|
||||
container.innerHTML = "";
|
||||
let today = new Date();
|
||||
|
||||
for (let i = 0; i < 14; i++) {
|
||||
let d = new Date(today);
|
||||
d.setDate(today.getDate() + i);
|
||||
if (d.getDay() === 0) continue;
|
||||
|
||||
const isoDate = toISODate(d);
|
||||
const dayName = d.toLocaleDateString('es-ES', { weekday: 'short' }).replace('.', '').substring(0,3);
|
||||
const dayNum = d.getDate();
|
||||
|
||||
if (!pickerSelectedDate) pickerSelectedDate = isoDate;
|
||||
const isSelected = isoDate === pickerSelectedDate;
|
||||
|
||||
container.innerHTML += `
|
||||
<button type="button" onclick="selectPickerDate('${isoDate}')" class="day-chip flex flex-col items-center justify-center min-w-[3.5rem] p-2 rounded-2xl ${isSelected ? 'active' : 'inactive'}">
|
||||
<span class="text-[9px] font-black uppercase opacity-80">${dayName}</span>
|
||||
<span class="text-lg font-black leading-none mt-1">${dayNum}</span>
|
||||
</button>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
function selectPickerDate(isoDate) {
|
||||
pickerSelectedDate = isoDate;
|
||||
pickerSelectedTime = "";
|
||||
buildDayCarousel();
|
||||
renderTimeSlots();
|
||||
checkSaveButton();
|
||||
}
|
||||
|
||||
function selectPickerTime(timeStr) {
|
||||
pickerSelectedTime = timeStr;
|
||||
renderTimeSlots();
|
||||
checkSaveButton();
|
||||
}
|
||||
|
||||
function checkSaveButton() {
|
||||
const btn = document.getElementById('btnSaveAppt');
|
||||
if (pickerSelectedDate && pickerSelectedTime) {
|
||||
btn.disabled = false;
|
||||
btn.classList.remove('bg-slate-300', 'cursor-not-allowed');
|
||||
btn.classList.add('bg-primary-dynamic', 'active:scale-95', 'shadow-lg');
|
||||
} else {
|
||||
btn.disabled = true;
|
||||
btn.classList.add('bg-slate-300', 'cursor-not-allowed');
|
||||
btn.classList.remove('bg-primary-dynamic', 'active:scale-95', 'shadow-lg');
|
||||
}
|
||||
}
|
||||
|
||||
function getOccupiedRanges(dateStr) {
|
||||
let ranges = [];
|
||||
allServices.forEach(s => {
|
||||
const raw = s.raw_data || {};
|
||||
if (raw.scheduled_date === dateStr && raw.scheduled_time) {
|
||||
const startMin = timeToMins(raw.scheduled_time);
|
||||
const dur = parseInt(raw.duration_minutes || 60);
|
||||
ranges.push({ start: startMin, end: startMin + dur });
|
||||
}
|
||||
});
|
||||
return ranges;
|
||||
}
|
||||
|
||||
function isOverlapping(startMins, endMins, occupiedRanges) {
|
||||
for(let r of occupiedRanges) {
|
||||
if(startMins < r.end && endMins > r.start) return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function renderTimeSlots() {
|
||||
const grid = document.getElementById('timeGrid');
|
||||
const msg = document.getElementById('noSlotsMsg');
|
||||
const duration = parseInt(document.getElementById('durationInput').value) || 60;
|
||||
const occupied = getOccupiedRanges(pickerSelectedDate);
|
||||
|
||||
grid.innerHTML = "";
|
||||
let slotsGenerated = 0;
|
||||
|
||||
const genSlotsForPeriod = (startStr, endStr) => {
|
||||
let startMins = timeToMins(startStr);
|
||||
let endMins = timeToMins(endStr);
|
||||
for (let m = startMins; m + duration <= endMins; m += 15) {
|
||||
if (!isOverlapping(m, m + duration, occupied)) {
|
||||
const timeStr = minsToTime(m);
|
||||
const isSelected = timeStr === pickerSelectedTime;
|
||||
grid.innerHTML += `
|
||||
<button type="button" onclick="selectPickerTime('${timeStr}')" class="time-chip border rounded-xl py-2.5 text-xs font-bold ${isSelected ? 'active' : 'inactive hover:bg-slate-50'}">
|
||||
${timeStr}
|
||||
</button>
|
||||
`;
|
||||
slotsGenerated++;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
genSlotsForPeriod(bizHours.m_start, bizHours.m_end);
|
||||
genSlotsForPeriod(bizHours.a_start, bizHours.a_end);
|
||||
|
||||
if (slotsGenerated === 0) {
|
||||
msg.classList.remove('hidden');
|
||||
grid.classList.add('hidden');
|
||||
pickerSelectedTime = "";
|
||||
} else {
|
||||
msg.classList.add('hidden');
|
||||
grid.classList.remove('hidden');
|
||||
}
|
||||
|
||||
if (pickerSelectedTime && !grid.innerHTML.includes(`'${pickerSelectedTime}'`)) {
|
||||
pickerSelectedTime = "";
|
||||
}
|
||||
checkSaveButton();
|
||||
}
|
||||
|
||||
function openActionModal(id) {
|
||||
const s = allServices.find(x => x.id === id);
|
||||
if (!s) return;
|
||||
const raw = s.raw_data || {};
|
||||
|
||||
document.getElementById('detIdAppt').value = s.id;
|
||||
document.getElementById('detRefAppt').innerText = `Exp. #${s.service_ref || "S/R"}`;
|
||||
document.getElementById('detNameAppt').innerText = raw["Nombre Cliente"] || "Asegurado";
|
||||
|
||||
document.getElementById('durationInput').value = raw.duration_minutes || "60";
|
||||
pickerSelectedDate = "";
|
||||
pickerSelectedTime = "";
|
||||
buildDayCarousel();
|
||||
checkSaveButton();
|
||||
|
||||
const modal = document.getElementById('actionModal');
|
||||
const content = document.getElementById('actionModalContent');
|
||||
modal.classList.remove('hidden');
|
||||
void modal.offsetWidth;
|
||||
modal.classList.remove('opacity-0');
|
||||
content.classList.remove('translate-y-full');
|
||||
}
|
||||
|
||||
function closeActionModal() {
|
||||
const modal = document.getElementById('actionModal');
|
||||
const content = document.getElementById('actionModalContent');
|
||||
modal.classList.add('opacity-0');
|
||||
content.classList.add('translate-y-full');
|
||||
setTimeout(() => { modal.classList.add('hidden'); }, 300);
|
||||
}
|
||||
|
||||
async function saveAppointment() {
|
||||
const id = document.getElementById('detIdAppt').value;
|
||||
const duration = document.getElementById('durationInput').value;
|
||||
|
||||
if (!pickerSelectedDate || !pickerSelectedTime) return alert("Selecciona un hueco disponible.");
|
||||
|
||||
const btn = document.getElementById('btnSaveAppt');
|
||||
const originalContent = btn.innerHTML;
|
||||
btn.innerHTML = `<i data-lucide="loader-2" class="w-5 h-5 animate-spin"></i> Agendando...`;
|
||||
btn.disabled = true;
|
||||
|
||||
const citadoStatus = systemStatuses.find(st => st.name.toLowerCase().includes('citado'));
|
||||
const statusToSave = citadoStatus ? String(citadoStatus.id) : null;
|
||||
|
||||
try {
|
||||
const res = await fetch(`${API_URL}/services/set-appointment/${id}`, {
|
||||
method: 'PUT',
|
||||
headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` },
|
||||
body: JSON.stringify({
|
||||
date: pickerSelectedDate,
|
||||
time: pickerSelectedTime,
|
||||
duration_minutes: duration,
|
||||
status_operativo: statusToSave
|
||||
})
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
showToast("Cita Reagendada");
|
||||
closeActionModal();
|
||||
loadAllData();
|
||||
} else {
|
||||
alert("Error al guardar la cita.");
|
||||
}
|
||||
} catch (e) {
|
||||
alert("Error de conexión");
|
||||
} finally {
|
||||
btn.innerHTML = originalContent;
|
||||
btn.disabled = false;
|
||||
lucide.createIcons();
|
||||
}
|
||||
}
|
||||
|
||||
// ==========================================
|
||||
// MODAL DE DETALLES INFO
|
||||
// ==========================================
|
||||
function openDetailModal(id) {
|
||||
const s = allServices.find(x => x.id === id);
|
||||
|
||||
Reference in New Issue
Block a user