UI: rediseño responsive desktop + fix categorías + plan actualizado
- Sidebar fija en todas las pantallas (md+): logo, nav, logout - index.html: grid 3/5 + 2/5 en desktop (movimientos | donut chart) - add.html: 2 columnas desktop (form | monto+numpad), botones mobile/desktop unificados - historial.html: max-w-3xl, header con botón Nuevo integrado - dashboard.js: formato de moneda con toLocaleString, skeleton loading, mes dinámico - add.js: lógica simplificada con doSave(), teclado ignora inputs de texto - auth.php + login.php: cookie con httponly y SameSite=Lax - docs/plan/00_PLAN.md: estado actualizado, CLI marcado como fase futura Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Ricardo Monla
co-authored by
Claude Sonnet 4.6
Claude Sonnet 4.6
parent
ead1bf8ffc
commit
7cb6107cb4
+42
-53
@@ -1,89 +1,78 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
let currentMonto = "0";
|
||||
let selectedTipo = "gasto"; // default
|
||||
let selectedTipo = "gasto";
|
||||
|
||||
const montoEl = document.getElementById('ui-monto');
|
||||
const btnGasto = document.getElementById('btn-gasto');
|
||||
// Hay dos displays de monto (desktop / mobile) y dos botones guardar
|
||||
const montoEls = ['ui-monto', 'ui-monto-mobile'].map(id => document.getElementById(id)).filter(Boolean);
|
||||
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');
|
||||
const numpad = document.getElementById('ui-numpad');
|
||||
const iptFecha = document.getElementById('ui-fecha');
|
||||
const saveButtons = ['btn-save', 'btn-save-mobile'].map(id => document.getElementById(id)).filter(Boolean);
|
||||
|
||||
// Default a hoy
|
||||
iptFecha.valueAsDate = new Date();
|
||||
|
||||
// Cargar categorías desde la API
|
||||
apiFetch('api/movimientos.php')
|
||||
.then(r => r.json())
|
||||
.then(r => r ? r.json() : Promise.reject('no-auth'))
|
||||
.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('');
|
||||
}
|
||||
if (!data || !data.categorias) return;
|
||||
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');
|
||||
}
|
||||
const isGasto = selectedTipo === 'gasto';
|
||||
btnGasto.classList.toggle('bg-surface-container-lowest', isGasto);
|
||||
btnGasto.classList.toggle('text-primary', isGasto);
|
||||
btnGasto.classList.toggle('shadow-sm', isGasto);
|
||||
btnGasto.classList.toggle('text-on-surface-variant', !isGasto);
|
||||
btnIngreso.classList.toggle('bg-surface-container-lowest', !isGasto);
|
||||
btnIngreso.classList.toggle('text-primary', !isGasto);
|
||||
btnIngreso.classList.toggle('shadow-sm', !isGasto);
|
||||
btnIngreso.classList.toggle('text-on-surface-variant', isGasto);
|
||||
};
|
||||
|
||||
btnGasto.addEventListener('click', () => { selectedTipo = 'gasto'; updateTipoUI(); });
|
||||
btnGasto.addEventListener('click', () => { selectedTipo = 'gasto'; updateTipoUI(); });
|
||||
btnIngreso.addEventListener('click', () => { selectedTipo = 'ingreso'; updateTipoUI(); });
|
||||
|
||||
// Numpad
|
||||
function applyInput(val) {
|
||||
if (val === 'backspace') {
|
||||
currentMonto = currentMonto.slice(0, -1);
|
||||
if (currentMonto === '') currentMonto = "0";
|
||||
currentMonto = currentMonto.slice(0, -1) || "0";
|
||||
} else if (/^[0-9]$/.test(val)) {
|
||||
if (currentMonto === "0") {
|
||||
currentMonto = val;
|
||||
} else {
|
||||
currentMonto += val;
|
||||
}
|
||||
currentMonto = currentMonto === "0" ? val : currentMonto + val;
|
||||
} else if (val === '.') {
|
||||
if (!currentMonto.includes('.')) currentMonto += '.';
|
||||
}
|
||||
montoEl.textContent = currentMonto;
|
||||
montoEls.forEach(el => el.textContent = currentMonto);
|
||||
}
|
||||
|
||||
// Numpad táctil
|
||||
numpad.addEventListener('click', (e) => {
|
||||
const btn = e.target.closest('button');
|
||||
if (!btn) return;
|
||||
if (btn.querySelector('[data-icon="backspace"]')) {
|
||||
applyInput('backspace');
|
||||
} else {
|
||||
applyInput(btn.textContent.trim());
|
||||
}
|
||||
applyInput(btn.querySelector('[data-icon="backspace"]') ? 'backspace' : btn.textContent.trim());
|
||||
});
|
||||
|
||||
// Teclado físico (desktop)
|
||||
// Teclado físico
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (document.activeElement.tagName === 'INPUT') return;
|
||||
if (e.key >= '0' && e.key <= '9') applyInput(e.key);
|
||||
else if (e.key === '.' || e.key === ',') applyInput('.');
|
||||
else if (e.key === 'Backspace') applyInput('backspace');
|
||||
else if (e.key === 'Enter') btnSave.click();
|
||||
else if (e.key === 'Enter') doSave();
|
||||
});
|
||||
|
||||
// Guardar Movimiento
|
||||
btnSave.addEventListener('click', async () => {
|
||||
// Guardar
|
||||
async function doSave() {
|
||||
const payload = {
|
||||
tipo: selectedTipo,
|
||||
monto: parseFloat(currentMonto),
|
||||
fecha: document.getElementById('ui-fecha').value,
|
||||
fecha: iptFecha.value,
|
||||
notas: document.getElementById('ui-notas').value,
|
||||
id_categoria: document.getElementById('ui-categoria').value
|
||||
};
|
||||
@@ -93,29 +82,29 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const btnOriginal = btnSave.innerHTML;
|
||||
btnSave.innerHTML = 'Guardando...';
|
||||
btnSave.disabled = true;
|
||||
saveButtons.forEach(b => { b.disabled = true; b.textContent = 'Guardando…'; });
|
||||
|
||||
try {
|
||||
const r = await apiFetch('api/movimientos.php', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
if (!r) return;
|
||||
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;
|
||||
saveButtons.forEach(b => { b.disabled = false; b.textContent = 'Guardar Movimiento'; });
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
await rmModal.alert('No se pudo conectar con el servidor.', 'Error de conexión');
|
||||
btnSave.disabled = false;
|
||||
saveButtons.forEach(b => { b.disabled = false; b.textContent = 'Guardar Movimiento'; });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
saveButtons.forEach(btn => btn.addEventListener('click', doSave));
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user