137 lines
4.3 KiB
JavaScript
137 lines
4.3 KiB
JavaScript
// ============ CONFIGURACIÓN ============
|
|
// Mismo servidor: rutas relativas
|
|
const API_URL = "";
|
|
const NOMBRE_HOJA = "cajaMenor";
|
|
|
|
// ============ CARGAR DATOS AL ABRIR LA PÁGINA ============
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
cargarMovimientos();
|
|
});
|
|
|
|
// ============ LEER DATOS ============
|
|
async function cargarMovimientos() {
|
|
const tbody = document.getElementById("tablaMovimientos");
|
|
|
|
try {
|
|
const respuesta = await fetch(`/leer?hoja=${NOMBRE_HOJA}`);
|
|
const data = await respuesta.json();
|
|
|
|
if (data.error) {
|
|
tbody.innerHTML = `<tr><td colspan="4" class="sin-datos">Error: ${data.error}</td></tr>`;
|
|
return;
|
|
}
|
|
|
|
mostrarMovimientos(data.datos);
|
|
calcularTotal(data.datos);
|
|
|
|
} catch (error) {
|
|
tbody.innerHTML = `<tr><td colspan="4" class="sin-datos">Error al cargar datos</td></tr>`;
|
|
console.error("Error:", error);
|
|
}
|
|
}
|
|
|
|
// ============ MOSTRAR EN LA TABLA ============
|
|
function mostrarMovimientos(movimientos) {
|
|
const tbody = document.getElementById("tablaMovimientos");
|
|
|
|
if (movimientos.length === 0) {
|
|
tbody.innerHTML = `<tr><td colspan="5" class="sin-datos">No hay movimientos registrados</td></tr>`;
|
|
return;
|
|
}
|
|
|
|
tbody.innerHTML = "";
|
|
|
|
// Mostrar del más reciente al más antiguo (ya viene ordenado del backend)
|
|
movimientos.forEach(mov => {
|
|
const fila = document.createElement("tr");
|
|
const esIngreso = mov.Tipo === "Ingreso";
|
|
|
|
fila.innerHTML = `
|
|
<td>${formatearFecha(mov.Fecha)}</td>
|
|
<td><span class="${esIngreso ? 'badge-ingreso' : 'badge-salida'}">${esIngreso ? '💵' : '💸'} ${mov.Tipo}</span></td>
|
|
<td>${mov["Descripción"]}</td>
|
|
<td class="${esIngreso ? 'monto-ingreso' : 'monto-salida'}">${esIngreso ? '+' : '-'}$${formatearMonto(mov.Monto)}</td>
|
|
`;
|
|
// Menú de opciones (⋮) con modales
|
|
const celdaOpciones = document.createElement("td");
|
|
celdaOpciones.appendChild(crearMenuOpciones(mov));
|
|
fila.appendChild(celdaOpciones);
|
|
|
|
tbody.appendChild(fila);
|
|
});
|
|
}
|
|
|
|
// ============ CALCULAR TOTAL ============
|
|
function calcularTotal(movimientos) {
|
|
let total = 0;
|
|
|
|
movimientos.forEach(mov => {
|
|
const monto = parseFloat(mov.Monto) || 0;
|
|
if (mov.Tipo === "Ingreso") {
|
|
total += monto;
|
|
} else {
|
|
total -= monto;
|
|
}
|
|
});
|
|
|
|
const totalElement = document.getElementById("totalCaja");
|
|
totalElement.textContent = `$${formatearMonto(total)}`;
|
|
totalElement.className = "total-monto " + (total >= 0 ? "positivo" : "negativo");
|
|
}
|
|
|
|
// ============ GUARDAR NUEVO MOVIMIENTO ============
|
|
document.getElementById("formMovimiento").addEventListener("submit", async (e) => {
|
|
e.preventDefault();
|
|
|
|
const btnGuardar = e.target.querySelector("button");
|
|
btnGuardar.disabled = true;
|
|
btnGuardar.textContent = "⏳ Guardando...";
|
|
|
|
const datos = {
|
|
hoja: NOMBRE_HOJA,
|
|
datos: {
|
|
"Fecha": document.getElementById("fecha").value,
|
|
"Tipo": document.getElementById("tipo").value,
|
|
"Descripción": document.getElementById("descripcion").value,
|
|
"Monto": document.getElementById("monto").value
|
|
}
|
|
};
|
|
|
|
try {
|
|
const respuesta = await fetch("/guardar", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(datos)
|
|
});
|
|
|
|
const resultado = await respuesta.json();
|
|
|
|
if (resultado.error) {
|
|
alert("Error: " + resultado.error);
|
|
}
|
|
|
|
// Limpiar formulario y recargar tabla
|
|
document.getElementById("formMovimiento").reset();
|
|
cargarMovimientos();
|
|
|
|
} catch (error) {
|
|
console.error("Error al guardar:", error);
|
|
alert("Error al guardar el registro");
|
|
}
|
|
|
|
btnGuardar.disabled = false;
|
|
btnGuardar.textContent = "💾 Guardar";
|
|
});
|
|
|
|
// ============ FUNCIONES AUXILIARES ============
|
|
function formatearFecha(fecha) {
|
|
if (!fecha) return "";
|
|
const f = new Date(fecha);
|
|
return f.toLocaleDateString("es-CO", { day: "2-digit", month: "2-digit", year: "numeric" });
|
|
}
|
|
|
|
function formatearMonto(monto) {
|
|
const num = parseFloat(monto) || 0;
|
|
return num.toLocaleString("es-CO", { minimumFractionDigits: 0, maximumFractionDigits: 0 });
|
|
}
|