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:19:37 +00:00
parent 63bb11185c
commit fb4e8e14d6
1 changed files with 55 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
agenda.html
View File

@@ -371,44 +371,70 @@
}
async function loadActiveBlocks() {
const container = document.getElementById('blocksList');
const activeContainer = document.getElementById('blocksList');
const pastContainer = document.getElementById('pastBlocksList');
try {
const res = await fetch(`${API_URL}/agenda/blocks`, {
headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` }
});
const data = await res.json();
if (!data.ok || data.blocks.length === 0) {
container.innerHTML = `<p class="text-sm text-slate-400 italic">No hay bloqueos activos a futuro.</p>`;
return;
if (!data.ok) throw new Error("Error fetching blocks");
// Sacamos la fecha de hoy (YYYY-MM-DD) para comparar
const todayStr = new Date().toISOString().split('T')[0];
// El servidor los manda de más reciente a más antiguo (DESC).
// Los activos los queremos al revés (ASC: el próximo primero)
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
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>`;
} else {
activeContainer.innerHTML = activeBlocks.map(b => buildBlockHtml(b, false)).join('');
}
container.innerHTML = data.blocks.map(b => {
// Etiqueta visual si es de un gremio concreto o total
// Pintar Caducados
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>`;
} else {
pastContainer.innerHTML = pastBlocks.map(b => buildBlockHtml(b, true)).join('');
}
lucide.createIcons();
} catch(e) {
activeContainer.innerHTML = "Error cargando";
pastContainer.innerHTML = "Error cargando";
}
}
// Helper visual para pintar la tarjeta según sea activa o caducada
function buildBlockHtml(b, isPast) {
const badge = b.guild_name
? `<span class="bg-indigo-100 text-indigo-700 px-2 py-0.5 rounded text-[9px] uppercase tracking-widest font-black">Solo ${b.guild_name}</span>`
: `<span class="bg-rose-100 text-rose-700 px-2 py-0.5 rounded text-[9px] uppercase tracking-widest font-black">Bloqueo Total</span>`;
return `
<div class="bg-white p-4 rounded-xl border border-slate-200 flex justify-between items-center shadow-sm">
<div class="bg-white p-4 rounded-xl border ${isPast ? 'border-slate-100 shadow-none' : 'border-slate-200 shadow-sm'} flex justify-between items-center transition-all hover:border-red-200">
<div>
<div class="flex items-center gap-2">
<p class="font-black text-slate-800 flex items-center gap-1.5">
<i data-lucide="hard-hat" class="w-4 h-4 text-slate-400"></i> ${b.worker_name}
<p class="font-black ${isPast ? 'text-slate-500' : 'text-slate-800'} flex items-center gap-1.5">
<i data-lucide="hard-hat" class="w-4 h-4 ${isPast ? 'text-slate-300' : 'text-slate-400'}"></i> ${b.worker_name}
</p>
${badge}
</div>
<p class="text-xs text-slate-600 font-bold mt-1.5">${b.date} | ${b.time} (${b.duration} min)</p>
<p class="text-[10px] text-slate-500 uppercase mt-0.5">${b.reason}</p>
<p class="text-xs ${isPast ? 'text-slate-400' : 'text-slate-600'} font-bold mt-1.5">${b.date} | ${b.time} (${b.duration} min)</p>
<p class="text-[10px] text-slate-400 uppercase mt-0.5">${b.reason || 'Sin motivo especificado'}</p>
</div>
<button onclick="deleteBlock(${b.id})" class="text-slate-300 hover:text-red-500 p-2 transition-colors">
<i data-lucide="trash-2" class="w-5 h-5"></i>
<button onclick="deleteBlock(${b.id})" class="text-slate-300 hover:text-red-500 bg-slate-50 hover:bg-red-50 p-2.5 rounded-lg transition-colors">
<i data-lucide="trash-2" class="w-4 h-4"></i>
</button>
</div>
`;
}).join('');
lucide.createIcons();
} catch(e) { container.innerHTML = "Error"; }
}
async function deleteBlock(id) {