feat: Agrega interacción a página principal y comprobante
This commit is contained in:
parent
d20948ba2a
commit
32c0a2c6a5
|
@ -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();
|
||||||
|
}
|
|
@ -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;
|
||||||
|
});
|
||||||
|
});
|
Loading…
Reference in New Issue