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

Actualizar agenda.html

Browse Source
This commit is contained in:
marsalva
2026-02-22 12:27:37 +00:00
parent fb4e8e14d6
commit 2e3c457c7a
1 changed files with 43 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
agenda.html
View File

@@ -122,7 +122,35 @@
<div id="pastBlocksList" class="space-y-3 mt-4 opacity-80 grayscale-[20%]"> <div id="pastBlocksList" class="space-y-3 mt-4 opacity-80 grayscale-[20%]">
<p class="text-sm text-slate-400 font-medium">Cargando...</p> <p class="text-sm text-slate-400 font-medium">Cargando...</p>
</div> </div>
<div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm flex flex-col md:flex-row items-center justify-between mt-8 gap-4">
<div class="flex items-center gap-3 w-full md:w-auto">
<div class="bg-blue-50 p-2.5 rounded-xl text-blue-600 shrink-0">
<i data-lucide="calendar-search" class="w-5 h-5"></i>
</div>
<div>
<h3 class="text-sm font-black text-slate-800 uppercase tracking-widest leading-none">Filtrar por Mes</h3>
<p class="text-[10px] text-slate-500 font-medium mt-1">Busca bloqueos pasados o futuros</p>
</div>
</div>
<div class="flex items-center gap-3 w-full md:w-auto">
<input type="month" id="blockMonthFilter" onchange="loadActiveBlocks()" class="w-full md:w-auto bg-slate-50 border border-slate-200 text-sm font-bold text-slate-700 p-3 rounded-xl outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer transition-all">
<button onclick="document.getElementById('blockMonthFilter').value=''; loadActiveBlocks();" class="text-xs font-bold text-slate-400 hover:text-red-500 transition-colors shrink-0">Ver Todos</button>
</div>
</div>
<h3 class="font-black text-slate-800 text-lg flex items-center gap-2 mt-8">
<i data-lucide="shield" class="w-5 h-5 text-rose-500"></i> Bloqueos Activos a Futuro
</h3>
<div id="blocksList" class="space-y-3 mt-4">
<p class="text-sm text-slate-400 font-medium">Cargando...</p>
</div>
<h3 class="font-black text-slate-800 text-lg flex items-center gap-2 mt-12 opacity-60 border-t border-slate-200 pt-6">
<i data-lucide="history" class="w-5 h-5 text-slate-400"></i> Historial Pasado
</h3>
<div id="pastBlocksList" class="space-y-3 mt-4 opacity-80 grayscale-[20%]">
<p class="text-sm text-slate-400 font-medium">Cargando...</p>
</div>
</div> </div>
</div> </div>
@@ -374,6 +402,9 @@
const activeContainer = document.getElementById('blocksList'); const activeContainer = document.getElementById('blocksList');
const pastContainer = document.getElementById('pastBlocksList'); const pastContainer = document.getElementById('pastBlocksList');
// Leemos el valor del filtro de mes (Ej: "2026-02")
const monthFilter = document.getElementById('blockMonthFilter').value;
try { try {
const res = await fetch(`${API_URL}/agenda/blocks`, { const res = await fetch(`${API_URL}/agenda/blocks`, {
headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` }
@@ -382,25 +413,30 @@
if (!data.ok) throw new Error("Error fetching blocks"); if (!data.ok) throw new Error("Error fetching blocks");
let allBlocks = data.blocks;
// 🧠 APLICAMOS EL FILTRO POR MES SI HAY ALGUNO SELECCIONADO
if (monthFilter) {
// Nos quedamos solo con los bloqueos cuya fecha empiece por "YYYY-MM"
allBlocks = allBlocks.filter(b => b.date.startsWith(monthFilter));
}
// Sacamos la fecha de hoy (YYYY-MM-DD) para comparar // Sacamos la fecha de hoy (YYYY-MM-DD) para comparar
const todayStr = new Date().toISOString().split('T')[0]; const todayStr = new Date().toISOString().split('T')[0];
// El servidor los manda de más reciente a más antiguo (DESC). const activeBlocks = allBlocks.filter(b => b.date >= todayStr).reverse();
// Los activos los queremos al revés (ASC: el próximo primero) const pastBlocks = allBlocks.filter(b => b.date < todayStr);
const activeBlocks = data.blocks.filter(b => b.date >= todayStr).reverse();
// Los pasados los dejamos en DESC (el más reciente caducado arriba)
const pastBlocks = data.blocks.filter(b => b.date < todayStr);
// Pintar Activos // Pintar Activos
if (activeBlocks.length === 0) { if (activeBlocks.length === 0) {
activeContainer.innerHTML = `<p class="text-sm text-slate-400 italic bg-white p-4 rounded-xl border border-slate-200 text-center">No hay bloqueos activos a futuro.</p>`; activeContainer.innerHTML = `<p class="text-sm text-slate-400 italic bg-white p-4 rounded-xl border border-slate-200 text-center shadow-sm">No hay bloqueos activos en este periodo.</p>`;
} else { } else {
activeContainer.innerHTML = activeBlocks.map(b => buildBlockHtml(b, false)).join(''); activeContainer.innerHTML = activeBlocks.map(b => buildBlockHtml(b, false)).join('');
} }
// Pintar Caducados // Pintar Caducados
if (pastBlocks.length === 0) { if (pastBlocks.length === 0) {
pastContainer.innerHTML = `<p class="text-sm text-slate-400 italic bg-transparent p-4 text-center">No hay bloqueos antiguos.</p>`; pastContainer.innerHTML = `<p class="text-sm text-slate-400 italic bg-transparent p-4 text-center">No hay bloqueos antiguos en este periodo.</p>`;
} else { } else {
pastContainer.innerHTML = pastBlocks.map(b => buildBlockHtml(b, true)).join(''); pastContainer.innerHTML = pastBlocks.map(b => buildBlockHtml(b, true)).join('');
} }