- 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>
108 lines
4.0 KiB
JavaScript
108 lines
4.0 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
let currentMonto = "0";
|
|
let selectedTipo = "gasto"; // default
|
|
|
|
const montoEl = document.getElementById('ui-monto');
|
|
const btnGasto = document.getElementById('btn-gasto');
|
|
const btnIngreso = document.getElementById('btn-ingreso');
|
|
const numpad = document.getElementById('ui-numpad');
|
|
const btnSave = document.getElementById('btn-save');
|
|
const iptFecha = document.getElementById('ui-fecha');
|
|
|
|
// Default a hoy
|
|
iptFecha.valueAsDate = new Date();
|
|
|
|
// Cargar categorías desde la API
|
|
fetch('api/movimientos.php')
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
if (data.categorias) {
|
|
const sel = document.getElementById('ui-categoria');
|
|
sel.innerHTML = data.categorias.map(c =>
|
|
`<option value="${c.id}">${c.nombre}</option>`
|
|
).join('');
|
|
}
|
|
})
|
|
.catch(() => {});
|
|
|
|
// Tipo selector
|
|
const updateTipoUI = () => {
|
|
if (selectedTipo === 'gasto') {
|
|
btnGasto.classList.replace('text-on-surface-variant', 'text-primary');
|
|
btnGasto.classList.add('bg-surface-container-lowest');
|
|
btnIngreso.classList.replace('bg-surface-container-lowest', 'bg-transparent');
|
|
btnIngreso.classList.replace('text-primary', 'text-on-surface-variant');
|
|
} else {
|
|
btnIngreso.classList.replace('text-on-surface-variant', 'text-primary');
|
|
btnIngreso.classList.add('bg-surface-container-lowest');
|
|
btnGasto.classList.replace('bg-surface-container-lowest', 'bg-transparent');
|
|
btnGasto.classList.replace('text-primary', 'text-on-surface-variant');
|
|
}
|
|
};
|
|
|
|
btnGasto.addEventListener('click', () => { selectedTipo = 'gasto'; updateTipoUI(); });
|
|
btnIngreso.addEventListener('click', () => { selectedTipo = 'ingreso'; updateTipoUI(); });
|
|
|
|
// Numpad logic
|
|
numpad.addEventListener('click', (e) => {
|
|
const btn = e.target.closest('button');
|
|
if (!btn) return;
|
|
|
|
const val = btn.textContent.trim() || btn.innerText.trim();
|
|
|
|
if (val === 'backspace' || btn.querySelector('[data-icon="backspace"]')) {
|
|
currentMonto = currentMonto.slice(0, -1);
|
|
if (currentMonto === '') currentMonto = "0";
|
|
} else {
|
|
if (currentMonto === "0" && val !== ".") {
|
|
currentMonto = val;
|
|
} else {
|
|
if (val === "." && currentMonto.includes(".")) return;
|
|
currentMonto += val;
|
|
}
|
|
}
|
|
montoEl.textContent = currentMonto;
|
|
});
|
|
|
|
// Guardar Movimiento
|
|
btnSave.addEventListener('click', async () => {
|
|
const payload = {
|
|
tipo: selectedTipo,
|
|
monto: parseFloat(currentMonto),
|
|
fecha: document.getElementById('ui-fecha').value,
|
|
notas: document.getElementById('ui-notas').value,
|
|
id_categoria: document.getElementById('ui-categoria').value
|
|
};
|
|
|
|
if (isNaN(payload.monto) || payload.monto <= 0) {
|
|
rmModal.alert('Ingresá un monto mayor a 0.', 'Monto inválido');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const btnOriginal = btnSave.innerHTML;
|
|
btnSave.innerHTML = 'Guardando...';
|
|
btnSave.disabled = true;
|
|
|
|
const r = await fetch('api/movimientos.php', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(payload)
|
|
});
|
|
const data = await r.json();
|
|
|
|
if (data.status === 'success') {
|
|
window.location.href = 'index.html';
|
|
} else {
|
|
await rmModal.alert(data.message, 'Error al guardar');
|
|
btnSave.innerHTML = btnOriginal;
|
|
btnSave.disabled = false;
|
|
}
|
|
} catch (err) {
|
|
console.error(err);
|
|
await rmModal.alert('No se pudo conectar con el servidor.', 'Error de conexión');
|
|
btnSave.disabled = false;
|
|
}
|
|
});
|
|
});
|