Add QR scanner for wallet selection and transaction management features
Co-authored-by: naielv <109038805+naielv@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
@@ -25,6 +25,13 @@ PAGES.pagos = {
|
||||
}
|
||||
}
|
||||
|
||||
// Check for scanned persona from QR scanner
|
||||
var scannedPersona = sessionStorage.getItem('pagos_scanned_persona');
|
||||
if (scannedPersona) {
|
||||
prefilledData.persona = scannedPersona;
|
||||
sessionStorage.removeItem('pagos_scanned_persona');
|
||||
}
|
||||
|
||||
var field_tipo = safeuuid();
|
||||
var field_monto = safeuuid();
|
||||
var field_persona = safeuuid();
|
||||
@@ -392,6 +399,14 @@ PAGES.pagos = {
|
||||
PAGES.pagos.datafono(JSON.parse(atob(tid2[2])))
|
||||
return
|
||||
}
|
||||
if (tid == "scan_qr") {
|
||||
PAGES.pagos.__scanQR()
|
||||
return
|
||||
}
|
||||
if (tid == "edit_transaction") {
|
||||
PAGES.pagos.__editTransaction(tid2[2])
|
||||
return
|
||||
}
|
||||
|
||||
var nameh1 = safeuuid();
|
||||
var field_ticket = safeuuid();
|
||||
@@ -408,6 +423,9 @@ PAGES.pagos = {
|
||||
var div_origen = safeuuid();
|
||||
var btn_volver = safeuuid();
|
||||
var btn_volver2 = safeuuid();
|
||||
var btn_edit = safeuuid();
|
||||
var btn_delete = safeuuid();
|
||||
var btn_revert = safeuuid();
|
||||
|
||||
container.innerHTML = `
|
||||
<h1>Transacción <code id="${nameh1}"></code></h1>
|
||||
@@ -471,6 +489,19 @@ PAGES.pagos = {
|
||||
<textarea id="${field_notas}" readonly rows="4" style="background: #f0f0f0;"></textarea><br><br>
|
||||
</label>
|
||||
</fieldset>
|
||||
|
||||
<fieldset style="margin-top: 20px;">
|
||||
<legend>Acciones</legend>
|
||||
<button id="${btn_edit}" class="btn5" style="font-size: 16px; padding: 10px 20px; margin: 5px;">
|
||||
✏️ Editar Transacción
|
||||
</button>
|
||||
<button id="${btn_revert}" class="btn6" style="font-size: 16px; padding: 10px 20px; margin: 5px;">
|
||||
↩️ Revertir Transacción
|
||||
</button>
|
||||
<button id="${btn_delete}" class="rojo" style="font-size: 16px; padding: 10px 20px; margin: 5px;">
|
||||
🗑️ Eliminar Transacción
|
||||
</button>
|
||||
</fieldset>
|
||||
`;
|
||||
|
||||
document.getElementById(btn_volver).onclick = () => {
|
||||
@@ -511,6 +542,95 @@ PAGES.pagos = {
|
||||
document.getElementById(field_origen).value = data.Origen + (data.OrigenID ? " (" + data.OrigenID + ")" : "");
|
||||
document.getElementById(div_origen).style.display = 'block';
|
||||
}
|
||||
|
||||
// Edit button - navigate to edit mode
|
||||
document.getElementById(btn_edit).onclick = () => {
|
||||
setUrlHash("pagos,edit_transaction," + key);
|
||||
};
|
||||
|
||||
// Delete button
|
||||
document.getElementById(btn_delete).onclick = () => {
|
||||
if (!checkRole("pagos:edit")) {
|
||||
alert("No tienes permisos para eliminar transacciones");
|
||||
return;
|
||||
}
|
||||
|
||||
if (confirm("¿Estás seguro de que quieres ELIMINAR esta transacción?\n\nEsta acción NO se puede deshacer y los cambios en los monederos NO se revertirán automáticamente.\n\nPara revertir los cambios en los monederos, usa el botón 'Revertir Transacción' en su lugar.")) {
|
||||
betterGunPut(gun.get(TABLE).get("pagos").get(key), null);
|
||||
toastr.success("Transacción eliminada");
|
||||
setTimeout(() => {
|
||||
setUrlHash("pagos");
|
||||
}, 1000);
|
||||
}
|
||||
};
|
||||
|
||||
// Revert button - reverses wallet balance changes and deletes transaction
|
||||
document.getElementById(btn_revert).onclick = () => {
|
||||
if (!checkRole("pagos:edit")) {
|
||||
alert("No tienes permisos para revertir transacciones");
|
||||
return;
|
||||
}
|
||||
|
||||
if (confirm("¿Estás seguro de que quieres REVERTIR esta transacción?\n\nEsto revertirá los cambios en los monederos y eliminará la transacción.")) {
|
||||
// Reverse the wallet balance changes
|
||||
var tipo = data.Tipo;
|
||||
var monto = parseFloat(data.Monto || 0);
|
||||
var personaId = data.Persona;
|
||||
|
||||
// For Ingreso, subtract from balance (reverse)
|
||||
// For Gasto, add to balance (reverse)
|
||||
// For Transferencia, reverse both sides
|
||||
|
||||
if (tipo === "Ingreso") {
|
||||
revertWalletBalance(personaId, "Gasto", monto, () => {
|
||||
deleteTransaction(key);
|
||||
});
|
||||
} else if (tipo === "Gasto") {
|
||||
revertWalletBalance(personaId, "Ingreso", monto, () => {
|
||||
deleteTransaction(key);
|
||||
});
|
||||
} else if (tipo === "Transferencia") {
|
||||
var destinoId = data.PersonaDestino;
|
||||
revertWalletBalance(personaId, "Ingreso", monto, () => {
|
||||
revertWalletBalance(destinoId, "Gasto", monto, () => {
|
||||
deleteTransaction(key);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function revertWalletBalance(personaId, tipo, monto, callback) {
|
||||
var persona = SC_Personas[personaId];
|
||||
if (!persona) {
|
||||
toastr.error("Error: Persona no encontrada");
|
||||
return;
|
||||
}
|
||||
|
||||
var currentBalance = parseFloat(persona.Monedero_Balance || 0);
|
||||
var newBalance = currentBalance;
|
||||
|
||||
if (tipo === "Ingreso") {
|
||||
newBalance = currentBalance + monto;
|
||||
} else if (tipo === "Gasto") {
|
||||
newBalance = currentBalance - monto;
|
||||
}
|
||||
|
||||
persona.Monedero_Balance = newBalance;
|
||||
|
||||
TS_encrypt(persona, SECRET, (encrypted) => {
|
||||
betterGunPut(gun.get(TABLE).get("personas").get(personaId), encrypted);
|
||||
if (callback) callback();
|
||||
});
|
||||
}
|
||||
|
||||
function deleteTransaction(transactionKey) {
|
||||
betterGunPut(gun.get(TABLE).get("pagos").get(transactionKey), null);
|
||||
toastr.success("Transacción revertida y eliminada");
|
||||
setTimeout(() => {
|
||||
setUrlHash("pagos");
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof data == "string") {
|
||||
@@ -654,16 +774,20 @@ PAGES.pagos = {
|
||||
|
||||
const monto = parseFloat(data.Monto || 0) || 0;
|
||||
const tipo = data.Tipo;
|
||||
const metodo = data.Metodo || "";
|
||||
|
||||
// Only count Tarjeta Monedero transactions in balance totals
|
||||
const isMonedero = metodo === "Tarjeta";
|
||||
|
||||
// Reset entries on every call for this ID
|
||||
if (tipo === "Ingreso") {
|
||||
if (isMonedero && tipo === "Ingreso") {
|
||||
totalData.gastos[id] = 0;
|
||||
totalData.ingresos[id] = monto;
|
||||
} else if (tipo === "Gasto") {
|
||||
} else if (isMonedero && tipo === "Gasto") {
|
||||
totalData.ingresos[id] = 0;
|
||||
totalData.gastos[id] = monto;
|
||||
} else {
|
||||
// For Transferencias, count as gasto + ingreso (neutral)
|
||||
// For non-Monedero transactions or Transferencias, don't count in totals
|
||||
totalData.ingresos[id] = 0;
|
||||
totalData.gastos[id] = 0;
|
||||
}
|
||||
@@ -694,5 +818,331 @@ PAGES.pagos = {
|
||||
setUrlHash("pagos," + safeuuid(""));
|
||||
};
|
||||
}
|
||||
},
|
||||
|
||||
// QR Scanner for selecting wallet/persona
|
||||
__scanQR: function() {
|
||||
if (!checkRole("pagos:edit")) {
|
||||
setUrlHash("pagos");
|
||||
return;
|
||||
}
|
||||
|
||||
var qrscan = safeuuid();
|
||||
var btn_cancel = safeuuid();
|
||||
|
||||
container.innerHTML = `
|
||||
<div style="max-width: 600px; margin: 0 auto; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 20px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.3);">
|
||||
<h1 style="color: white; text-align: center; margin-bottom: 20px;">
|
||||
📷 Escanear QR de Monedero
|
||||
</h1>
|
||||
|
||||
<div style="background: white; padding: 20px; border-radius: 10px; margin-bottom: 20px;">
|
||||
<p style="text-align: center; color: #333; margin-bottom: 15px;">
|
||||
Escanea el código QR del monedero de la persona para seleccionarlo automáticamente
|
||||
</p>
|
||||
<div style="max-width: 400px; margin: 0 auto;" id="${qrscan}"></div>
|
||||
</div>
|
||||
|
||||
<button id="${btn_cancel}" style="width: 100%; padding: 20px; font-size: 18px; font-weight: bold;
|
||||
background: #ff4757; color: white; border: none; border-radius: 8px; cursor: pointer;">
|
||||
❌ Cancelar
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Initialize QR scanner
|
||||
var html5QrcodeScanner = new Html5QrcodeScanner(
|
||||
qrscan, { fps: 10, qrbox: 250 }
|
||||
);
|
||||
|
||||
function onScanSuccess(decodedText, decodedResult) {
|
||||
html5QrcodeScanner.clear();
|
||||
|
||||
// Parse the QR code result
|
||||
// Expected format: "personas,{personaId}" or just "{personaId}"
|
||||
var personaId = decodedText;
|
||||
|
||||
// If it's a full URL hash, extract the persona ID
|
||||
if (decodedText.includes("personas,")) {
|
||||
var parts = decodedText.split(",");
|
||||
if (parts.length > 1) {
|
||||
personaId = parts[1];
|
||||
}
|
||||
}
|
||||
|
||||
// Verify the persona exists
|
||||
if (SC_Personas[personaId]) {
|
||||
toastr.success("✅ Monedero escaneado: " + SC_Personas[personaId].Nombre);
|
||||
|
||||
// Store the selected persona in sessionStorage and return to datafono
|
||||
sessionStorage.setItem('pagos_scanned_persona', personaId);
|
||||
|
||||
// Navigate back to datafono
|
||||
setUrlHash("pagos,datafono");
|
||||
} else {
|
||||
toastr.error("❌ Código QR no reconocido como un monedero válido");
|
||||
setTimeout(() => {
|
||||
setUrlHash("pagos,datafono");
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
|
||||
html5QrcodeScanner.render(onScanSuccess);
|
||||
EventListeners.QRScanner.push(html5QrcodeScanner);
|
||||
|
||||
// Cancel button
|
||||
document.getElementById(btn_cancel).onclick = () => {
|
||||
html5QrcodeScanner.clear();
|
||||
setUrlHash("pagos,datafono");
|
||||
};
|
||||
},
|
||||
|
||||
// Edit existing transaction
|
||||
__editTransaction: function(transactionId) {
|
||||
if (!checkRole("pagos:edit")) {
|
||||
setUrlHash("pagos");
|
||||
return;
|
||||
}
|
||||
|
||||
var field_tipo = safeuuid();
|
||||
var field_monto = safeuuid();
|
||||
var field_persona = safeuuid();
|
||||
var field_persona_destino = safeuuid();
|
||||
var field_metodo = safeuuid();
|
||||
var field_notas = safeuuid();
|
||||
var field_estado = safeuuid();
|
||||
var div_persona_destino = safeuuid();
|
||||
var btn_save = safeuuid();
|
||||
var btn_cancel = safeuuid();
|
||||
|
||||
var selectedPersona = "";
|
||||
var selectedPersonaDestino = "";
|
||||
var originalData = null;
|
||||
|
||||
container.innerHTML = `
|
||||
<div style="max-width: 600px; margin: 0 auto; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 20px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.3);">
|
||||
<h1 style="color: white; text-align: center; margin-bottom: 20px;">
|
||||
✏️ Editar Transacción
|
||||
</h1>
|
||||
|
||||
<div style="background: white; padding: 20px; border-radius: 10px; margin-bottom: 20px;">
|
||||
<fieldset style="border: 2px solid #667eea; border-radius: 8px; padding: 15px;">
|
||||
<legend style="color: #667eea; font-weight: bold;">Información de Transacción</legend>
|
||||
|
||||
<label style="display: block; margin-bottom: 15px;">
|
||||
<b>Tipo de Transacción:</b><br>
|
||||
<select id="${field_tipo}" style="width: 100%; padding: 10px; font-size: 16px; border: 2px solid #ddd; border-radius: 5px;">
|
||||
<option value="Ingreso">➕ Ingreso (Depósito)</option>
|
||||
<option value="Gasto">➖ Gasto (Retiro/Pago)</option>
|
||||
<option value="Transferencia">🔄 Transferencia</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label style="display: block; margin-bottom: 15px;">
|
||||
<b>Método de Pago:</b><br>
|
||||
<select id="${field_metodo}" style="width: 100%; padding: 10px; font-size: 16px; border: 2px solid #ddd; border-radius: 5px;">
|
||||
<option value="Efectivo">💵 Efectivo</option>
|
||||
<option value="Tarjeta">💳 Tarjeta Monedero</option>
|
||||
<option value="Transferencia">🏦 Transferencia Bancaria</option>
|
||||
<option value="Otro">❓ Otro</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label style="display: block; margin-bottom: 15px;">
|
||||
<b>Monto (€):</b><br>
|
||||
<input type="number" id="${field_monto}" step="0.01" min="0"
|
||||
style="width: calc(100% - 24px); padding: 15px; font-size: 24px; text-align: right;
|
||||
border: 3px solid #667eea; border-radius: 5px; font-weight: bold;">
|
||||
</label>
|
||||
|
||||
<label style="display: block; margin-bottom: 15px;">
|
||||
<b>Estado:</b><br>
|
||||
<select id="${field_estado}" style="width: 100%; padding: 10px; font-size: 16px; border: 2px solid #ddd; border-radius: 5px;">
|
||||
<option value="Completado">✅ Completado</option>
|
||||
<option value="Pendiente">⏳ Pendiente</option>
|
||||
<option value="Cancelado">❌ Cancelado</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label style="display: block; margin-bottom: 15px;">
|
||||
<b>Monedero (Persona):</b>
|
||||
<input type="hidden" id="${field_persona}">
|
||||
<div id="personaSelector"></div>
|
||||
</label>
|
||||
|
||||
<div id="${div_persona_destino}" style="display: none; margin-bottom: 15px;">
|
||||
<b>Monedero Destino:</b>
|
||||
<input type="hidden" id="${field_persona_destino}">
|
||||
<div id="personaDestinoSelector"></div>
|
||||
</div>
|
||||
|
||||
<label style="display: block; margin-bottom: 15px;">
|
||||
<b>Notas:</b><br>
|
||||
<textarea id="${field_notas}" rows="3"
|
||||
style="width: calc(100% - 24px); padding: 10px; font-size: 14px; border: 2px solid #ddd; border-radius: 5px;"
|
||||
placeholder="Notas adicionales..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;">
|
||||
<button id="${btn_cancel}" style="padding: 20px; font-size: 18px; font-weight: bold;
|
||||
background: #ff4757; color: white; border: none; border-radius: 8px; cursor: pointer;">
|
||||
❌ CANCELAR
|
||||
</button>
|
||||
<button id="${btn_save}" style="padding: 20px; font-size: 18px; font-weight: bold;
|
||||
background: #2ed573; color: white; border: none; border-radius: 8px; cursor: pointer;">
|
||||
💾 GUARDAR
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Load transaction data
|
||||
gun.get(TABLE).get("pagos").get(transactionId).once((data, key) => {
|
||||
function loadTransactionData(data) {
|
||||
originalData = data;
|
||||
|
||||
document.getElementById(field_tipo).value = data.Tipo || "Ingreso";
|
||||
document.getElementById(field_metodo).value = data.Metodo || "Efectivo";
|
||||
document.getElementById(field_monto).value = data.Monto || 0;
|
||||
document.getElementById(field_estado).value = data.Estado || "Completado";
|
||||
document.getElementById(field_notas).value = data.Notas || "";
|
||||
|
||||
selectedPersona = data.Persona || "";
|
||||
selectedPersonaDestino = data.PersonaDestino || "";
|
||||
|
||||
loadPersonaSelector();
|
||||
|
||||
if (data.Tipo === "Transferencia") {
|
||||
document.getElementById(div_persona_destino).style.display = 'block';
|
||||
loadPersonaDestinoSelector();
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof data == "string") {
|
||||
TS_decrypt(data, SECRET, loadTransactionData);
|
||||
} else {
|
||||
loadTransactionData(data || {});
|
||||
}
|
||||
});
|
||||
|
||||
// Tipo change handler
|
||||
document.getElementById(field_tipo).addEventListener('change', function() {
|
||||
var tipo = this.value;
|
||||
var divDestino = document.getElementById(div_persona_destino);
|
||||
if (tipo === 'Transferencia') {
|
||||
divDestino.style.display = 'block';
|
||||
loadPersonaDestinoSelector();
|
||||
} else {
|
||||
divDestino.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
function loadPersonaSelector() {
|
||||
var container = document.querySelector('#personaSelector');
|
||||
container.innerHTML = '';
|
||||
document.getElementById(field_persona).value = selectedPersona;
|
||||
addCategory_Personas(
|
||||
container,
|
||||
SC_Personas,
|
||||
selectedPersona,
|
||||
(personaId) => {
|
||||
document.getElementById(field_persona).value = personaId;
|
||||
selectedPersona = personaId;
|
||||
},
|
||||
"Monedero",
|
||||
false,
|
||||
"- No hay personas registradas -"
|
||||
);
|
||||
}
|
||||
|
||||
function loadPersonaDestinoSelector() {
|
||||
var container = document.querySelector('#personaDestinoSelector');
|
||||
container.innerHTML = '';
|
||||
document.getElementById(field_persona_destino).value = selectedPersonaDestino;
|
||||
addCategory_Personas(
|
||||
container,
|
||||
SC_Personas,
|
||||
selectedPersonaDestino,
|
||||
(personaId) => {
|
||||
document.getElementById(field_persona_destino).value = personaId;
|
||||
selectedPersonaDestino = personaId;
|
||||
},
|
||||
"Monedero Destino",
|
||||
false,
|
||||
"- No hay personas registradas -"
|
||||
);
|
||||
}
|
||||
|
||||
// Save button
|
||||
document.getElementById(btn_save).onclick = () => {
|
||||
var tipo = document.getElementById(field_tipo).value;
|
||||
var monto = parseFloat(document.getElementById(field_monto).value);
|
||||
var personaId = document.getElementById(field_persona).value;
|
||||
var metodo = document.getElementById(field_metodo).value;
|
||||
var notas = document.getElementById(field_notas).value;
|
||||
var estado = document.getElementById(field_estado).value;
|
||||
|
||||
if (!personaId) {
|
||||
alert("Por favor selecciona un monedero");
|
||||
return;
|
||||
}
|
||||
|
||||
if (isNaN(monto) || monto < 0) {
|
||||
alert("Por favor ingresa un monto válido");
|
||||
return;
|
||||
}
|
||||
|
||||
if (tipo === 'Transferencia') {
|
||||
var personaDestinoId = document.getElementById(field_persona_destino).value;
|
||||
if (!personaDestinoId) {
|
||||
alert("Por favor selecciona el monedero destino");
|
||||
return;
|
||||
}
|
||||
if (personaId === personaDestinoId) {
|
||||
alert("No puedes transferir al mismo monedero");
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (!confirm("¿Estás seguro de que quieres guardar los cambios?\n\nNOTA: Los cambios en los monederos NO se ajustarán automáticamente. Si cambiaste el monto, tipo o persona, deberías revertir la transacción original y crear una nueva.")) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Update transaction data
|
||||
var updatedData = {
|
||||
...originalData,
|
||||
Tipo: tipo,
|
||||
Monto: monto,
|
||||
Persona: personaId,
|
||||
Metodo: metodo,
|
||||
Notas: notas,
|
||||
Estado: estado
|
||||
};
|
||||
|
||||
if (tipo === 'Transferencia') {
|
||||
updatedData.PersonaDestino = document.getElementById(field_persona_destino).value;
|
||||
} else {
|
||||
delete updatedData.PersonaDestino;
|
||||
}
|
||||
|
||||
TS_encrypt(updatedData, SECRET, (encrypted) => {
|
||||
document.getElementById("actionStatus").style.display = "block";
|
||||
betterGunPut(gun.get(TABLE).get("pagos").get(transactionId), encrypted);
|
||||
toastr.success("¡Transacción actualizada!");
|
||||
setTimeout(() => {
|
||||
document.getElementById("actionStatus").style.display = "none";
|
||||
setUrlHash("pagos," + transactionId);
|
||||
}, 1500);
|
||||
});
|
||||
};
|
||||
|
||||
// Cancel button
|
||||
document.getElementById(btn_cancel).onclick = () => {
|
||||
if (confirm("¿Seguro que quieres cancelar? Los cambios no se guardarán.")) {
|
||||
setUrlHash("pagos," + transactionId);
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user