Proyecto_venta_boletos/Proyecto/vista/js/comprobante.js

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);
}