From 0a5e90d1efe1f1c22b677bcae1b4805c7c016a0c Mon Sep 17 00:00:00 2001
From: Christian Julian Jimenez <zs22016079@estudiantes.uv.mx>
Date: Sun, 9 Mar 2025 00:26:46 -0600
Subject: [PATCH 1/3] feat: agregar div para QR
---
vista/index.html | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/vista/index.html b/vista/index.html
index 3e903b5..0c53b73 100644
--- a/vista/index.html
+++ b/vista/index.html
@@ -9,7 +9,7 @@
</head>
<body>
<div class="container">
- <h1>Sistema de Venta de Boletos para Concierto</h1>
+ <h1>TicketFlow</h1>
<div id="mensajeAlerta" class="alert alert-warning d-none" role="alert"></div>
From f5e53a0799e2dc5d835c9605425fee8526e6d8cc Mon Sep 17 00:00:00 2001
From: Christian Julian Jimenez <zs22016079@estudiantes.uv.mx>
Date: Sun, 9 Mar 2025 00:28:53 -0600
Subject: [PATCH 2/3] feat: Implementar QR
---
vista/comprobante.html | 8 +++++++-
1 file changed, 7 insertions(+), 1 deletion(-)
diff --git a/vista/comprobante.html b/vista/comprobante.html
index 69b427d..b517579 100644
--- a/vista/comprobante.html
+++ b/vista/comprobante.html
@@ -52,7 +52,12 @@
Total: $<span id="total-venta"></span>
</div>
- <div style="margin-top: 40px; font-size: 14px; text-align: center;">
+ <div class="qr-container">
+ <div id="qr-code"></div>
+ <p class="qr-info">Este QR contiene el número de venta para verificación</p>
+ </div>
+
+ <div class="mensaje">
<p>¡Gracias por su compra!</p>
<p>Este comprobante es su entrada oficial para el evento.</p>
<p>Por favor, preséntelo en la entrada del concierto.</p>
@@ -65,6 +70,7 @@
</div>
</div>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script src="js/comprobante.js"></script>
</body>
</html>
\ No newline at end of file
From 792c1a7d4c4d963f454b4b52912d2fac2e3b23c0 Mon Sep 17 00:00:00 2001
From: Christian Julian Jimenez <zs22016079@estudiantes.uv.mx>
Date: Sun, 9 Mar 2025 00:30:51 -0600
Subject: [PATCH 3/3] feat: Soportar QR
---
vista/css/comprobante.css | 22 ++++++++++++++++++++++
vista/js/comprobante.js | 30 ++++++++++++++++++++++++++++++
2 files changed, 52 insertions(+)
diff --git a/vista/css/comprobante.css b/vista/css/comprobante.css
index bd3d2c1..fcf94c0 100644
--- a/vista/css/comprobante.css
+++ b/vista/css/comprobante.css
@@ -78,4 +78,26 @@ th {
}
.btn:hover {
opacity: 0.9;
+}
+
+.qr-container {
+ text-align: center;
+ margin: 30px 0;
+ padding: 10px;
+ 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;
}
\ No newline at end of file
diff --git a/vista/js/comprobante.js b/vista/js/comprobante.js
index c538e80..0978029 100644
--- a/vista/js/comprobante.js
+++ b/vista/js/comprobante.js
@@ -34,6 +34,9 @@ function cargarComprobante() {
});
tablaBoletos.innerHTML = contenidoTabla;
+
+ // Generar código QR con el ID de la venta
+ generarQR(comprobante.id_venta);
})
.catch(error => {
console.error('Error:', error);
@@ -42,6 +45,29 @@ function cargarComprobante() {
});
}
+// 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;
@@ -61,6 +87,10 @@ function imprimirComprobante() {
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>