361 lines
13 KiB
JavaScript
361 lines
13 KiB
JavaScript
const API = '/api/pendientes';
|
|
let currentDate = new Date();
|
|
let todosPendientes = [];
|
|
|
|
const monthNames = ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'];
|
|
|
|
async function cargarPendientes() {
|
|
const res = await fetch(API);
|
|
todosPendientes = await res.json();
|
|
renderCalendar();
|
|
renderLista();
|
|
renderCompletados();
|
|
}
|
|
|
|
function formatearFecha(fechaStr) {
|
|
const partes = fechaStr.split('-');
|
|
return partes[2] + '-' + partes[1] + '-' + partes[0];
|
|
}
|
|
|
|
function hoyStr() {
|
|
const hoy = new Date();
|
|
return hoy.getFullYear() + '-' + String(hoy.getMonth() + 1).padStart(2, '0') + '-' + String(hoy.getDate()).padStart(2, '0');
|
|
}
|
|
|
|
function esVencido(p) {
|
|
if (p.estado === 'completado') return false;
|
|
return p.fecha < hoyStr();
|
|
}
|
|
|
|
function renderCalendar() {
|
|
const year = currentDate.getFullYear();
|
|
const month = currentDate.getMonth();
|
|
document.getElementById('monthYear').textContent = monthNames[month] + ' ' + year;
|
|
|
|
const firstDay = new Date(year, month, 1).getDay();
|
|
const daysInMonth = new Date(year, month + 1, 0).getDate();
|
|
const grid = document.getElementById('calendarGrid');
|
|
grid.innerHTML = '';
|
|
|
|
for (let i = 0; i < firstDay; i++) {
|
|
grid.appendChild(document.createElement('div'));
|
|
}
|
|
|
|
for (let d = 1; d <= daysInMonth; d++) {
|
|
const dateStr = year + '-' + String(month + 1).padStart(2, '0') + '-' + String(d).padStart(2, '0');
|
|
const delDia = todosPendientes.filter(function(p) { return p.fecha === dateStr; });
|
|
const dayEl = document.createElement('div');
|
|
const tieneVencidos = delDia.some(function(p) { return esVencido(p); });
|
|
dayEl.className = 'day' + (tieneVencidos ? ' vencido-dia' : '');
|
|
|
|
let html = '<span class="day-number">' + d + '</span>';
|
|
if (delDia.length) {
|
|
const vencidosCount = delDia.filter(function(p) { return esVencido(p); }).length;
|
|
const badgeClass = vencidosCount > 0 ? 'day-count vencidos' : 'day-count';
|
|
const badgeText = delDia.length > 9 ? '9+' : String(delDia.length);
|
|
html += '<span class="' + badgeClass + '">' + badgeText + '</span>';
|
|
|
|
const primero = delDia[0];
|
|
const texto = escaparHtml(primero.descripcion);
|
|
html += '<div class="day-summary">' + texto + '</div>';
|
|
}
|
|
dayEl.innerHTML = html;
|
|
dayEl.onclick = function() { abrirModalDia(dateStr, delDia); };
|
|
grid.appendChild(dayEl);
|
|
}
|
|
}
|
|
|
|
function abrirModalDia(fecha, pendientes) {
|
|
document.getElementById('modalTitulo').textContent = 'Pendientes del ' + formatearFecha(fecha);
|
|
const cont = document.getElementById('modalPendientes');
|
|
cont.innerHTML = '';
|
|
|
|
const noCompletados = pendientes.filter(function(p) { return p.estado !== 'completado'; });
|
|
const completados = pendientes.filter(function(p) { return p.estado === 'completado'; });
|
|
|
|
if (!pendientes.length) {
|
|
cont.innerHTML = '<p>No hay pendientes para este dia.</p>';
|
|
} else {
|
|
if (noCompletados.length) {
|
|
const tit = document.createElement('div');
|
|
tit.className = 'subsubtitulo';
|
|
tit.textContent = 'Pendientes (' + noCompletados.length + ')';
|
|
cont.appendChild(tit);
|
|
noCompletados.forEach(function(p) {
|
|
cont.appendChild(crearCardPendiente(p, true));
|
|
});
|
|
}
|
|
if (completados.length) {
|
|
const titC = document.createElement('div');
|
|
titC.className = 'subsubtitulo';
|
|
titC.textContent = 'Completados (' + completados.length + ')';
|
|
cont.appendChild(titC);
|
|
completados.forEach(function(p) {
|
|
cont.appendChild(crearCardPendiente(p, true));
|
|
});
|
|
}
|
|
}
|
|
document.getElementById('modalDia').classList.remove('hidden');
|
|
}
|
|
|
|
function crearCardPendiente(p, soloLectura) {
|
|
const vencido = esVencido(p);
|
|
const div = document.createElement('div');
|
|
div.className = 'pendiente-card ' + (vencido ? 'vencido' : p.urgencia);
|
|
|
|
let html = '<div class="pendiente-header">' +
|
|
'<div class="pendiente-info">' +
|
|
'<div><strong>' + escaparHtml(p.descripcion) + '</strong>';
|
|
if (vencido) {
|
|
html += '<span class="badge-vencido">Vencido</span>';
|
|
}
|
|
html += '</div>' +
|
|
'<div>' + formatearFecha(p.fecha) + ' - ' + p.estado + ' - Urgencia: ' + p.urgencia + '</div>' +
|
|
'</div>';
|
|
|
|
if (soloLectura) {
|
|
html += '</div>';
|
|
} else {
|
|
html += '<div class="menu-wrapper">' +
|
|
'<button class="menu-btn" onclick="toggleMenu(' + p.id + ')">\u22EF</button>' +
|
|
'<div class="menu-dropdown" id="menu-' + p.id + '">' +
|
|
'<button onclick="editarPendiente(' + p.id + ')">Editar</button>' +
|
|
'<button class="menu-delete" onclick="eliminarPendiente(' + p.id + ')">Eliminar</button>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>';
|
|
}
|
|
|
|
if (soloLectura) {
|
|
html += '<div class="acceso-rapido solo-lectura">';
|
|
html += '<div class="acceso-grupo">';
|
|
html += '<span class="acceso-label">Prioridad:</span>';
|
|
['alta', 'media', 'baja'].forEach(function(u) {
|
|
const activo = p.urgencia === u ? ' activo' : '';
|
|
const etiqueta = u.charAt(0).toUpperCase() + u.slice(1);
|
|
html += '<span class="quick-badge urgencia-' + u + activo + '">' + etiqueta + '</span>';
|
|
});
|
|
html += '</div>';
|
|
html += '<div class="acceso-grupo">';
|
|
html += '<span class="acceso-label">Estado:</span>';
|
|
[
|
|
{ val: 'pendiente', label: 'Pendiente' },
|
|
{ val: 'en progreso', label: 'En proceso' },
|
|
{ val: 'completado', label: 'Completado' }
|
|
].forEach(function(e) {
|
|
const activo = p.estado === e.val ? ' activo' : '';
|
|
const cls = e.val.replace(' ', '_');
|
|
html += '<span class="quick-badge estado-' + cls + activo + '">' + e.label + '</span>';
|
|
});
|
|
html += '</div>';
|
|
html += '</div>';
|
|
} else {
|
|
html += '<div class="acceso-rapido">';
|
|
html += '<div class="acceso-grupo">';
|
|
html += '<span class="acceso-label">Prioridad:</span>';
|
|
['alta', 'media', 'baja'].forEach(function(u) {
|
|
const activo = p.urgencia === u ? ' activo' : '';
|
|
const etiqueta = u.charAt(0).toUpperCase() + u.slice(1);
|
|
html += '<button class="quick-btn urgencia-' + u + activo + '" onclick="cambioRapido(' + p.id + ',\'urgencia\',\'' + u + '\')">' + etiqueta + '</button>';
|
|
});
|
|
html += '</div>';
|
|
html += '<div class="acceso-grupo">';
|
|
html += '<span class="acceso-label">Estado:</span>';
|
|
[
|
|
{ val: 'pendiente', label: 'Pendiente' },
|
|
{ val: 'en progreso', label: 'En proceso' },
|
|
{ val: 'completado', label: 'Completado' }
|
|
].forEach(function(e) {
|
|
const activo = p.estado === e.val ? ' activo' : '';
|
|
const cls = e.val.replace(' ', '_');
|
|
html += '<button class="quick-btn estado-' + cls + activo + '" onclick="cambioRapido(' + p.id + ',\'estado\',\'' + e.val + '\')">' + e.label + '</button>';
|
|
});
|
|
html += '</div>';
|
|
html += '</div>';
|
|
}
|
|
|
|
div.innerHTML = html;
|
|
return div;
|
|
}
|
|
|
|
function escaparHtml(texto) {
|
|
const div = document.createElement('div');
|
|
div.textContent = texto;
|
|
return div.innerHTML;
|
|
}
|
|
|
|
let menuAbiertoId = null;
|
|
|
|
function toggleMenu(id) {
|
|
if (menuAbiertoId === id) {
|
|
const m = document.getElementById('menu-' + menuAbiertoId);
|
|
if (m) m.classList.remove('show');
|
|
menuAbiertoId = null;
|
|
return;
|
|
}
|
|
if (menuAbiertoId !== null) {
|
|
const prev = document.getElementById('menu-' + menuAbiertoId);
|
|
if (prev) prev.classList.remove('show');
|
|
}
|
|
const menu = document.getElementById('menu-' + id);
|
|
if (menu) {
|
|
menu.classList.add('show');
|
|
menuAbiertoId = id;
|
|
}
|
|
}
|
|
|
|
document.addEventListener('click', function(e) {
|
|
if (menuAbiertoId !== null && !e.target.closest('.menu-wrapper')) {
|
|
const prev = document.getElementById('menu-' + menuAbiertoId);
|
|
if (prev) prev.classList.remove('show');
|
|
menuAbiertoId = null;
|
|
}
|
|
});
|
|
|
|
async function cambioRapido(id, campo, valor) {
|
|
const p = todosPendientes.find(function(x) { return x.id === id; });
|
|
if (!p) return;
|
|
const body = {
|
|
descripcion: p.descripcion,
|
|
fecha: p.fecha,
|
|
estado: p.estado,
|
|
urgencia: p.urgencia
|
|
};
|
|
body[campo] = valor;
|
|
await fetch(API + '/' + id, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(body)
|
|
});
|
|
cargarPendientes();
|
|
}
|
|
|
|
document.getElementById('cerrarModal').onclick = function() {
|
|
document.getElementById('modalDia').classList.add('hidden');
|
|
};
|
|
|
|
document.getElementById('prevMonth').onclick = function() {
|
|
currentDate.setMonth(currentDate.getMonth() - 1);
|
|
renderCalendar();
|
|
};
|
|
|
|
document.getElementById('nextMonth').onclick = function() {
|
|
currentDate.setMonth(currentDate.getMonth() + 1);
|
|
renderCalendar();
|
|
};
|
|
|
|
document.querySelectorAll('.tab').forEach(function(tab) {
|
|
tab.onclick = function() {
|
|
document.querySelectorAll('.tab').forEach(function(t) { t.classList.remove('active'); });
|
|
document.querySelectorAll('.section').forEach(function(s) { s.classList.remove('active'); });
|
|
tab.classList.add('active');
|
|
document.getElementById(tab.dataset.tab).classList.add('active');
|
|
};
|
|
});
|
|
|
|
document.getElementById('formPendiente').onsubmit = async function(e) {
|
|
e.preventDefault();
|
|
const id = document.getElementById('pendienteId').value;
|
|
const body = {
|
|
descripcion: document.getElementById('descripcion').value,
|
|
fecha: document.getElementById('fecha').value,
|
|
estado: document.getElementById('estado').value,
|
|
urgencia: document.getElementById('urgencia').value
|
|
};
|
|
if (id) {
|
|
await fetch(API + '/' + id, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
|
|
} else {
|
|
await fetch(API, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
|
|
}
|
|
resetForm();
|
|
cargarPendientes();
|
|
};
|
|
|
|
document.getElementById('btnCancelar').onclick = resetForm;
|
|
|
|
function resetForm() {
|
|
document.getElementById('formPendiente').reset();
|
|
document.getElementById('pendienteId').value = '';
|
|
document.getElementById('btnGuardar').textContent = 'Guardar';
|
|
document.getElementById('btnCancelar').classList.add('hidden');
|
|
}
|
|
|
|
function renderLista() {
|
|
const cont = document.getElementById('listaPendientes');
|
|
cont.innerHTML = '';
|
|
|
|
const noCompletados = todosPendientes.filter(function(p) { return p.estado !== 'completado'; });
|
|
const vencidos = noCompletados.filter(function(p) { return esVencido(p); });
|
|
const normales = noCompletados.filter(function(p) { return !esVencido(p); });
|
|
|
|
if (!noCompletados.length) {
|
|
cont.innerHTML = '<p>No hay pendientes.</p>';
|
|
return;
|
|
}
|
|
|
|
const titTotal = document.createElement('div');
|
|
titTotal.className = 'subtitulo';
|
|
titTotal.textContent = 'Pendientes (' + noCompletados.length + ')';
|
|
cont.appendChild(titTotal);
|
|
|
|
if (vencidos.length) {
|
|
const titVencidos = document.createElement('div');
|
|
titVencidos.className = 'subsubtitulo';
|
|
titVencidos.textContent = 'Vencidos / Prioritarios (' + vencidos.length + ')';
|
|
cont.appendChild(titVencidos);
|
|
vencidos.forEach(function(p) {
|
|
cont.appendChild(crearCardPendiente(p));
|
|
});
|
|
}
|
|
|
|
if (normales.length) {
|
|
const titNormales = document.createElement('div');
|
|
titNormales.className = 'subsubtitulo';
|
|
titNormales.textContent = 'Pendientes (' + normales.length + ')';
|
|
cont.appendChild(titNormales);
|
|
normales.forEach(function(p) {
|
|
cont.appendChild(crearCardPendiente(p));
|
|
});
|
|
}
|
|
}
|
|
|
|
function renderCompletados() {
|
|
const cont = document.getElementById('listaCompletados');
|
|
if (!cont) return;
|
|
cont.innerHTML = '';
|
|
const completados = todosPendientes.filter(function(p) { return p.estado === 'completado'; });
|
|
if (!completados.length) {
|
|
cont.innerHTML = '<p>No hay completados aun.</p>';
|
|
return;
|
|
}
|
|
const tit = document.createElement('div');
|
|
tit.className = 'subtitulo';
|
|
tit.textContent = 'Completados (' + completados.length + ')';
|
|
cont.appendChild(tit);
|
|
completados.forEach(function(p) {
|
|
cont.appendChild(crearCardPendiente(p));
|
|
});
|
|
}
|
|
|
|
async function editarPendiente(id) {
|
|
const p = todosPendientes.find(function(x) { return x.id === id; });
|
|
if (!p) return;
|
|
document.getElementById('pendienteId').value = p.id;
|
|
document.getElementById('descripcion').value = p.descripcion;
|
|
document.getElementById('fecha').value = p.fecha;
|
|
document.getElementById('estado').value = p.estado;
|
|
document.getElementById('urgencia').value = p.urgencia;
|
|
document.getElementById('btnGuardar').textContent = 'Actualizar';
|
|
document.getElementById('btnCancelar').classList.remove('hidden');
|
|
document.querySelector('.tab[data-tab=pendientes]').click();
|
|
}
|
|
|
|
async function eliminarPendiente(id) {
|
|
if (!confirm('Eliminar este pendiente?')) return;
|
|
await fetch(API + '/' + id, { method: 'DELETE' });
|
|
cargarPendientes();
|
|
}
|
|
|
|
cargarPendientes();
|
|
|