feat: Agrega interacción a página principal y comprobante

2025-03-02 15:33:38 -06:00 · 2025-03-02 15:33:38 -06:00 · 32c0a2c6a5
parent d20948ba2a
commit 32c0a2c6a5
2 changed files with 113 additions and 0 deletions
--- a/js/comprobante.js
+++ b/js/comprobante.js
@ -0,0 +1,30 @@
+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; }
+            </style>
+        </head>
+        <body>
+            ${contenido}
+        </body>
+        </html>
+    `);
+    
+    ventanaImpresion.document.close();
+    ventanaImpresion.focus();
+    ventanaImpresion.print();
+}
--- a/js/index.js
+++ b/js/index.js
@ -0,0 +1,83 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const asientos = document.querySelectorAll('.asiento.disponible');
+    const resumenAsientos = document.getElementById('asientosSeleccionados');
+    const resumenTotal = document.getElementById('totalVenta');
+    const asientosInput = document.getElementById('asientosSeleccionadosInput');
+    const formulario = document.getElementById('formularioVenta');
+    
+    let seleccionados = [];
+    const precioBoleto = 50.00; // Precio por boleto
+    
+    // Función para actualizar el resumen
+    function actualizarResumen() {
+        if (seleccionados.length === 0) {
+            resumenAsientos.textContent = 'Ninguno';
+            resumenTotal.textContent = '0.00';
+        } else {
+            // Mostrar los asientos seleccionados
+            const detalles = seleccionados.map(asiento => {
+                const fila = Math.floor((asiento.id - 1) / 15) + 1;
+                const numero = ((asiento.id - 1) % 15) + 1;
+                return `F${fila}-${numero}`;
+            });
+            
+            resumenAsientos.textContent = detalles.join(', ');
+            resumenTotal.textContent = (seleccionados.length * precioBoleto).toFixed(2);
+            
+            // Actualizar campo oculto para el envío del formulario
+            asientosInput.innerHTML = '';
+            seleccionados.forEach(asiento => {
+                const input = document.createElement('input');
+                input.type = 'hidden';
+                input.name = 'asientos[]';
+                input.value = asiento.id;
+                asientosInput.appendChild(input);
+            });
+        }
+    }
+    
+    // Escuchar clics en los asientos
+    asientos.forEach(asiento => {
+        asiento.addEventListener('click', function() {
+            const asientoId = parseInt(this.getAttribute('data-id'));
+            
+            // Verificar si ya está seleccionado
+            const indice = seleccionados.findIndex(a => a.id === asientoId);
+            
+            if (indice === -1) {
+                // Agregar a seleccionados
+                seleccionados.push({
+                    id: asientoId,
+                    elemento: this
+                });
+                this.classList.remove('disponible');
+                this.classList.add('seleccionado');
+            } else {
+                // Quitar de seleccionados
+                seleccionados.splice(indice, 1);
+                this.classList.remove('seleccionado');
+                this.classList.add('disponible');
+            }
+            
+            actualizarResumen();
+        });
+    });
+    
+    // Validar formulario antes de enviar
+    formulario.addEventListener('submit', function(e) {
+        if (seleccionados.length === 0) {
+            e.preventDefault();
+            alert('Por favor, seleccione al menos un asiento.');
+            return false;
+        }
+        
+        const nombreCliente = document.getElementById('nombre_cliente').value.trim();
+        if (nombreCliente === '') {
+            e.preventDefault();
+            alert('Por favor, ingrese el nombre del cliente.');
+            return false;
+        }
+        
+        return true;
+    });
+});