juan-server/calendario-jp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Calendario solo visual no se puede editar

Browse Source
This commit is contained in:
juan-server
2026-08-12 11:05:34 -05:00
parent 67b5fa2ce0
commit 76c5c2c237
2 changed files with 86 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/script.js
+62 -35
View File
@@ -82,7 +82,7 @@ function abrirModalDia(fecha, pendientes) {
tit.textContent = 'Pendientes (' + noCompletados.length + ')'; tit.textContent = 'Pendientes (' + noCompletados.length + ')';
cont.appendChild(tit); cont.appendChild(tit);
noCompletados.forEach(function(p) { noCompletados.forEach(function(p) {
cont.appendChild(crearCardPendiente(p)); cont.appendChild(crearCardPendiente(p, true));
}); });
} }
if (completados.length) { if (completados.length) {
@@ -91,14 +91,14 @@ function abrirModalDia(fecha, pendientes) {
titC.textContent = 'Completados (' + completados.length + ')'; titC.textContent = 'Completados (' + completados.length + ')';
cont.appendChild(titC); cont.appendChild(titC);
completados.forEach(function(p) { completados.forEach(function(p) {
cont.appendChild(crearCardPendiente(p)); cont.appendChild(crearCardPendiente(p, true));
}); });
} }
} }
document.getElementById('modalDia').classList.remove('hidden'); document.getElementById('modalDia').classList.remove('hidden');
} }
function crearCardPendiente(p) { function crearCardPendiente(p, soloLectura) {
const vencido = esVencido(p); const vencido = esVencido(p);
const div = document.createElement('div'); const div = document.createElement('div');
div.className = 'pendiente-card ' + (vencido ? 'vencido' : p.urgencia); div.className = 'pendiente-card ' + (vencido ? 'vencido' : p.urgencia);
@@ -111,41 +111,68 @@ function crearCardPendiente(p) {
} }
html += '</div>' + html += '</div>' +
'<div>' + formatearFecha(p.fecha) + ' - ' + p.estado + ' - Urgencia: ' + p.urgencia + '</div>' + '<div>' + formatearFecha(p.fecha) + ' - ' + p.estado + ' - Urgencia: ' + p.urgencia + '</div>' +
'</div>' +
'<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>'; '</div>';
html += '<div class="acceso-rapido">'; 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>';
}
html += '<div class="acceso-grupo">'; if (soloLectura) {
html += '<span class="acceso-label">Prioridad:</span>'; html += '<div class="acceso-rapido solo-lectura">';
['alta', 'media', 'baja'].forEach(function(u) { html += '<div class="acceso-grupo">';
const activo = p.urgencia === u ? ' activo' : ''; html += '<span class="acceso-label">Prioridad:</span>';
const etiqueta = u.charAt(0).toUpperCase() + u.slice(1); ['alta', 'media', 'baja'].forEach(function(u) {
html += '<button class="quick-btn urgencia-' + u + activo + '" onclick="cambioRapido(' + p.id + ',\'urgencia\',\'' + u + '\')">' + etiqueta + '</button>'; const activo = p.urgencia === u ? ' activo' : '';
}); const etiqueta = u.charAt(0).toUpperCase() + u.slice(1);
html += '</div>'; html += '<span class="quick-badge urgencia-' + u + activo + '">' + etiqueta + '</span>';
});
html += '<div class="acceso-grupo">'; html += '</div>';
html += '<span class="acceso-label">Estado:</span>'; html += '<div class="acceso-grupo">';
[ html += '<span class="acceso-label">Estado:</span>';
{ val: 'pendiente', label: 'Pendiente' }, [
{ val: 'en progreso', label: 'En proceso' }, { val: 'pendiente', label: 'Pendiente' },
{ val: 'completado', label: 'Completado' } { val: 'en progreso', label: 'En proceso' },
].forEach(function(e) { { val: 'completado', label: 'Completado' }
const activo = p.estado === e.val ? ' activo' : ''; ].forEach(function(e) {
const cls = e.val.replace(' ', '_'); const activo = p.estado === e.val ? ' activo' : '';
html += '<button class="quick-btn estado-' + cls + activo + '" onclick="cambioRapido(' + p.id + ',\'estado\',\'' + e.val + '\')">' + e.label + '</button>'; const cls = e.val.replace(' ', '_');
}); html += '<span class="quick-badge estado-' + cls + activo + '">' + e.label + '</span>';
html += '</div>'; });
html += '</div>';
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; div.innerHTML = html;
return div; return div;
frontend/style.css
+24
View File
@@ -446,6 +446,30 @@ h1 {
.quick-btn.estado-en_progreso.activo { background: #4dabf7; } .quick-btn.estado-en_progreso.activo { background: #4dabf7; }
.quick-btn.estado-completado.activo { background: #51cf66; } .quick-btn.estado-completado.activo { background: #51cf66; }
.quick-badge {
padding: 5px 11px;
border: 1px solid rgba(255,255,255,0.2);
border-radius: 8px;
background: rgba(255,255,255,0.08);
color: #fff;
font-size: 0.78rem;
white-space: nowrap;
display: inline-block;
}
.quick-badge.activo {
font-weight: 700;
border-color: transparent;
}
.quick-badge.urgencia-alta.activo { background: #ff6b6b; }
.quick-badge.urgencia-media.activo { background: #feca57; color: #333; }
.quick-badge.urgencia-baja.activo { background: #48dbfb; color: #333; }
.quick-badge.estado-pendiente.activo { background: #6c757d; }
.quick-badge.estado-en_progreso.activo { background: #4dabf7; }
.quick-badge.estado-completado.activo { background: #51cf66; }
.subsubtitulo { .subsubtitulo {
margin: 14px 0 8px; margin: 14px 0 8px;
font-size: 0.92rem; font-size: 0.92rem;