110 lines
4.4 KiB
JavaScript
110 lines
4.4 KiB
JavaScript
// comprobante.js - Maneja la comunicación entre el PHP y el HTML
|
|
|
|
// Cuando el documento esté listo, cargar los datos del comprobante
|
|
document.addEventListener('DOMContentLoaded', cargarComprobante);
|
|
|
|
// Función para cargar los datos del comprobante desde el servidor
|
|
function cargarComprobante() {
|
|
fetch('../controlador/comprobante.php')
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error('Error al obtener los datos del comprobante');
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(comprobante => {
|
|
// Llenar los datos básicos del comprobante
|
|
document.getElementById('id-venta').textContent = comprobante.id_venta;
|
|
document.getElementById('fecha-venta').textContent = comprobante.fecha;
|
|
document.getElementById('cliente-venta').textContent = comprobante.cliente;
|
|
document.getElementById('total-venta').textContent = formatearNumero(comprobante.total);
|
|
|
|
// Generar las filas de la tabla de boletos
|
|
const tablaBoletos = document.getElementById('detalle-boletos');
|
|
let contenidoTabla = '';
|
|
|
|
comprobante.boletos.forEach((boleto, index) => {
|
|
contenidoTabla += `
|
|
<tr>
|
|
<td>${index + 1}</td>
|
|
<td>Fila ${boleto.fila}, Asiento ${boleto.numero}</td>
|
|
<td>$${formatearNumero(boleto.precio)}</td>
|
|
</tr>
|
|
`;
|
|
});
|
|
|
|
tablaBoletos.innerHTML = contenidoTabla;
|
|
|
|
// Generar código QR con el ID de la venta
|
|
generarQR(comprobante.id_venta);
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
alert('No se pudo cargar el comprobante. Por favor, inténtelo de nuevo.');
|
|
window.location.href = 'index.html';
|
|
});
|
|
}
|
|
|
|
// Función para generar el código QR
|
|
function generarQR(idVenta) {
|
|
// Verificar si existe el elemento donde se mostrará el QR
|
|
const qrContainer = document.getElementById('qr-code');
|
|
if (!qrContainer) {
|
|
console.error('No se encontró el elemento para mostrar el código QR');
|
|
return;
|
|
}
|
|
|
|
// Limpiar el contenedor por si ya tiene contenido
|
|
qrContainer.innerHTML = '';
|
|
|
|
// Crear una nueva instancia de QRCode
|
|
new QRCode(qrContainer, {
|
|
text: idVenta.toString(),
|
|
width: 128,
|
|
height: 128,
|
|
colorDark: "#000000",
|
|
colorLight: "#ffffff",
|
|
correctLevel: QRCode.CorrectLevel.H // Alta corrección de errores
|
|
});
|
|
}
|
|
|
|
// Función para imprimir el comprobante
|
|
function imprimirComprobante() {
|
|
const contenido = document.getElementById('comprobante-imprimible').innerHTML;
|
|
const ventanaImpresion = window.open('', '_blank');
|
|
|
|
ventanaImpresion.document.write(`
|
|
<html>
|
|
<head>
|
|
<title>Comprobante de Venta</title>
|
|
<style>
|
|
body { font-family: Arial, sans-serif; }
|
|
.header { border-bottom: 2px solid #333; padding-bottom: 10px; margin-bottom: 20px; }
|
|
.info-venta { display: flex; justify-content: space-between; margin-bottom: 20px; }
|
|
.info-item { margin-bottom: 10px; }
|
|
.info-label { font-weight: bold; }
|
|
table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
|
|
th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
|
|
th { background-color: #f8f9fa; }
|
|
.total { font-size: 18px; font-weight: bold; text-align: right; margin-top: 20px; padding-top: 10px; border-top: 1px solid #ddd; }
|
|
.qr-container { text-align: center; margin: 20px 0; border-top: 1px dashed #ccc; padding-top: 20px;}
|
|
#qr-code { display: inline-block; margin: 0 auto; }
|
|
.qr-info { font-size: 14px; margin-top: 10px; }
|
|
.mensaje { margin-top: 40px; font-size: 14px; text-align: center;}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
${contenido}
|
|
</body>
|
|
</html>
|
|
`);
|
|
|
|
ventanaImpresion.document.close();
|
|
ventanaImpresion.focus();
|
|
ventanaImpresion.print();
|
|
}
|
|
|
|
// Función auxiliar para formatear números con dos decimales
|
|
function formatearNumero(numero) {
|
|
return Number(numero).toFixed(2);
|
|
} |