marsalva/App
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Actualizar calendario.html

Browse Source
This commit is contained in:
marsalva
2026-03-08 18:25:21 +00:00
parent 470e1b790b
commit 62c1d8be40
1 changed files with 72 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
calendario.html
View File

@@ -194,10 +194,10 @@
<div class="bg-white border border-slate-200 rounded-3xl p-5 shadow-sm space-y-4 text-left">
<p class="text-[10px] font-black text-blue-600 uppercase tracking-widest border-b border-slate-100 pb-2 flex items-center gap-1.5"><i data-lucide="calendar-clock" class="w-4 h-4"></i> Asignar Fechas y Tiempos</p>
<div class="grid grid-cols-2 gap-3 text-left">
<div class="grid grid-cols-2 gap-3 text-left">
<div>
<label class="block text-[10px] font-black text-slate-500 uppercase tracking-widest mb-1 ml-1">Fecha</label>
<input type="date" id="dateInput" class="w-full bg-slate-50 border border-slate-200 p-3 rounded-xl text-xs font-bold text-slate-700 shadow-sm outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-100 transition-all">
<input type="date" id="dateInput" onchange="renderModalAgenda()" class="w-full bg-slate-50 border border-slate-200 p-3 rounded-xl text-xs font-bold text-slate-700 shadow-sm outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-100 transition-all">
</div>
<div>
<label class="block text-[10px] font-black text-slate-500 uppercase tracking-widest mb-1 ml-1">Hora Inicio</label>
@@ -205,6 +205,11 @@
</div>
</div>
<div id="modalAgendaContainer" class="hidden mt-3 text-left bg-slate-50 border border-slate-200 rounded-xl p-3">
<p class="text-[9px] font-black text-slate-400 uppercase tracking-widest mb-2 flex items-center gap-1.5"><i data-lucide="eye" class="w-3 h-3"></i> Ocupación del día seleccionado</p>
<div id="modalAgendaList" class="flex flex-wrap gap-2"></div>
</div>
<div>
<label class="block text-[10px] font-black text-slate-500 uppercase tracking-widest mb-1 ml-1 text-left">Duración Estimada</label>
<div class="relative text-left">
@@ -582,6 +587,69 @@
let currentServiceId = null;
// --- NUEVA FUNCIÓN: Mostrar la agenda de un día en el Modal ---
function renderModalAgenda() {
const dateInput = document.getElementById('dateInput').value;
const agendaContainer = document.getElementById('modalAgendaContainer');
const agendaList = document.getElementById('modalAgendaList');
const currentId = document.getElementById('detId').value; // Para no mostrarse a sí mismo
if (!dateInput) {
agendaContainer.classList.add('hidden');
return;
}
// Filtrar servicios agendados en la fecha seleccionada que no sean el actual
const dayServices = localServices.filter(s => {
const date = String(s.raw_data.scheduled_date || "").trim();
return date === dateInput && String(s.id) !== String(currentId);
});
// Ordenar cronológicamente
dayServices.sort((a, b) => {
const tA = String(a.raw_data.scheduled_time || "23:59");
const tB = String(b.raw_data.scheduled_time || "23:59");
return tA.localeCompare(tB);
});
if (dayServices.length === 0) {
agendaList.innerHTML = `<span class="text-xs font-bold text-emerald-600 bg-emerald-50 px-3 py-1 rounded-lg border border-emerald-100 w-full text-center">¡Día totalmente libre!</span>`;
} else {
agendaList.innerHTML = dayServices.map(s => {
const time = s.raw_data.scheduled_time || "--:--";
const dur = parseInt(s.raw_data.duration_minutes || 60);
// Calculamos la hora de fin
let endTime = "--:--";
if (time.includes(':')) {
let [h, m] = time.split(':').map(Number);
m += dur;
h += Math.floor(m / 60);
m = m % 60;
endTime = `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
}
const city = s.raw_data["Población"] || "Sin Zona";
return `
<div class="bg-white border border-slate-200 rounded-lg p-2 text-xs w-full flex justify-between items-center shadow-sm">
<div class="flex items-center gap-2">
<div class="bg-red-50 text-red-600 font-black px-2 py-1 rounded-md text-[10px]">
${time} - ${endTime}
</div>
<span class="font-bold text-slate-700 truncate max-w-[120px]">${city}</span>
</div>
${s.provider === 'SYSTEM_BLOCK' ? '<i data-lucide="lock" class="w-3.5 h-3.5 text-slate-400"></i>' : ''}
</div>
`;
}).join('');
}
agendaContainer.classList.remove('hidden');
safeLoadIcons();
}
function openService(id) {
const s = localServices.find(x => x.id === id);
if (!s || s.provider === 'SYSTEM_BLOCK') return;
@@ -626,6 +694,8 @@
const dbStat = raw.status_operativo;
if(dbStat) document.getElementById('detStatusMap').value = dbStat;
renderModalAgenda();
const modal = document.getElementById('serviceModal');
modal.style.display = 'flex';
setTimeout(() => modal.classList.remove('translate-y-full'), 10);