Ricardo MonlaandClaude Sonnet 4.6
1db200343d
- Nueva pantalla historial.html con movimientos agrupados por mes - Botón eliminar en cada movimiento con modal de confirmación - js/ui.js: sistema de modales y toasts reutilizables (reemplaza alert/confirm nativos) - API: endpoint GET ?view=historial y método DELETE en movimientos.php - add.html: categorías cargadas dinámicamente desde la API - index.html: "Ver todo" e ícono de nav apuntan a historial.html - Docker: eliminado volumen nombrado db_data para evitar problemas de permisos Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
68 lines
3.3 KiB
JavaScript
68 lines
3.3 KiB
JavaScript
(function () {
|
|
const MODAL_HTML = `
|
|
<div id="rm-modal-overlay" class="fixed inset-0 z-[100] flex items-end justify-center p-6 bg-black/50 backdrop-blur-sm hidden">
|
|
<div class="w-full max-w-sm bg-white rounded-[2rem] p-6 shadow-2xl space-y-3">
|
|
<h3 id="rm-modal-title" class="text-base font-bold text-on-surface"></h3>
|
|
<p id="rm-modal-message" class="text-sm text-on-surface-variant leading-relaxed"></p>
|
|
<div id="rm-modal-actions" class="flex gap-3 pt-2"></div>
|
|
</div>
|
|
</div>
|
|
<div id="rm-toast" class="fixed bottom-28 left-1/2 -translate-x-1/2 z-[200] px-5 py-3 rounded-full text-sm font-semibold shadow-xl opacity-0 transition-all duration-300 pointer-events-none whitespace-nowrap"></div>
|
|
`;
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
document.body.insertAdjacentHTML('beforeend', MODAL_HTML);
|
|
});
|
|
|
|
function show(title, message, buttons) {
|
|
document.getElementById('rm-modal-title').textContent = title;
|
|
document.getElementById('rm-modal-message').textContent = message;
|
|
const actions = document.getElementById('rm-modal-actions');
|
|
actions.innerHTML = '';
|
|
buttons.forEach(({ label, style, action }) => {
|
|
const b = document.createElement('button');
|
|
b.textContent = label;
|
|
const styles = {
|
|
primary: 'flex-1 py-3 bg-primary text-white rounded-xl font-bold active:scale-95 transition-transform',
|
|
danger: 'flex-1 py-3 bg-[#ba1a1a] text-white rounded-xl font-bold active:scale-95 transition-transform',
|
|
secondary: 'flex-1 py-3 bg-[#eceeed] text-[#191c1c] rounded-xl font-semibold active:scale-95 transition-transform',
|
|
};
|
|
b.className = styles[style] || styles.secondary;
|
|
b.onclick = action;
|
|
actions.appendChild(b);
|
|
});
|
|
document.getElementById('rm-modal-overlay').classList.remove('hidden');
|
|
}
|
|
|
|
function hide() {
|
|
document.getElementById('rm-modal-overlay').classList.add('hidden');
|
|
}
|
|
|
|
window.rmModal = {
|
|
alert(message, title = 'Aviso') {
|
|
return new Promise(resolve => {
|
|
show(title, message, [
|
|
{ label: 'Aceptar', style: 'primary', action: () => { hide(); resolve(); } }
|
|
]);
|
|
});
|
|
},
|
|
confirm(message, title = '¿Confirmar?') {
|
|
return new Promise(resolve => {
|
|
show(title, message, [
|
|
{ label: 'Cancelar', style: 'secondary', action: () => { hide(); resolve(false); } },
|
|
{ label: 'Eliminar', style: 'danger', action: () => { hide(); resolve(true); } }
|
|
]);
|
|
});
|
|
},
|
|
toast(message, type = 'success') {
|
|
const el = document.getElementById('rm-toast');
|
|
el.textContent = message;
|
|
el.className = `fixed bottom-28 left-1/2 -translate-x-1/2 z-[200] px-5 py-3 rounded-full text-sm font-semibold shadow-xl transition-all duration-300 pointer-events-none whitespace-nowrap ${
|
|
type === 'error' ? 'bg-[#ba1a1a] text-white' : 'bg-[#005050] text-white'
|
|
}`;
|
|
el.style.opacity = '1';
|
|
setTimeout(() => { el.style.opacity = '0'; }, 2500);
|
|
}
|
|
};
|
|
})();
|