Proyecto_venta_boletos/vista/js/index.js

208 lines
8.1 KiB
JavaScript

// js/index.js - Script para manejar la interfaz de usuario y la comunicación con el backend
document.addEventListener('DOMContentLoaded', function() {
let seleccionados = [];
const precioBoleto = 50.00; // Precio por boleto
// Cargar el mapa de asientos al iniciar
cargarMapaAsientos();
// Agregar manejador para el formulario
const formulario = document.getElementById('formularioVenta');
formulario.addEventListener('submit', validarYEnviarFormulario);
// Función para cargar el mapa de asientos desde la API
async function cargarMapaAsientos() {
try {
const response = await fetch('../controlador/asientos.php');
const data = await response.json();
console.log('Datos recibidos:', data); // Agregar este log para ver los datos recibidos
if (!data.success) {
mostrarMensaje('Error al cargar el mapa de asientos', 'error');
return;
}
renderizarMapaAsientos(data.mapa);
} catch (error) {
console.error('Error al cargar el mapa de asientos:', error);
mostrarMensaje('Error de conexión con el servidor', 'error');
}
}
// Función para renderizar el mapa de asientos
function renderizarMapaAsientos(mapa) {
console.log('Mapa de asientos:', mapa); // Agregar este log para ver el mapa de asientos
const contenedor = document.getElementById('mapaAsientos');
contenedor.innerHTML = '';
Object.entries(mapa).forEach(([numeroFila, asientosEnFila]) => {
const filaElement = document.createElement('div');
filaElement.className = 'fila';
// Crear elemento para el número de fila
const numeroFilaElement = document.createElement('div');
numeroFilaElement.className = 'numero-fila';
numeroFilaElement.textContent = `F${numeroFila}`;
filaElement.appendChild(numeroFilaElement);
// Crear contenedor para los asientos
const asientosContainer = document.createElement('div');
asientosContainer.className = 'asientos';
// Crear cada asiento
Object.entries(asientosEnFila).forEach(([numeroAsiento, estado]) => {
const idBoleto = ((parseInt(numeroFila) - 1) * Object.keys(asientosEnFila).length) + parseInt(numeroAsiento);
const asiento = document.createElement('div');
// Determinar la clase según el estado
asiento.className = `asiento ${estado === 'disponible' ? 'disponible' : 'vendido'}`;
asiento.dataset.id = idBoleto;
asiento.textContent = numeroAsiento;
asientosContainer.appendChild(asiento);
});
filaElement.appendChild(asientosContainer);
contenedor.appendChild(filaElement);
});
// Una vez que se ha renderizado, añadir los eventos
configurarEventosAsientos();
}
// Configurar eventos para los asientos
function configurarEventosAsientos() {
const asientos = document.querySelectorAll('.asiento.disponible');
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();
});
});
}
// Función para actualizar el resumen de venta
function actualizarResumen() {
const resumenAsientos = document.getElementById('asientosSeleccionados');
const resumenTotal = document.getElementById('totalVenta');
const asientosInput = document.getElementById('asientosSeleccionadosInput');
if (seleccionados.length === 0) {
resumenAsientos.textContent = 'Ninguno';
resumenTotal.textContent = '0.00';
// Limpiar los inputs ocultos
if (asientosInput) {
asientosInput.innerHTML = '';
}
} 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
if (asientosInput) {
asientosInput.innerHTML = '';
seleccionados.forEach(asiento => {
const input = document.createElement('input');
input.type = 'hidden';
input.name = 'asientos[]';
input.value = asiento.id;
asientosInput.appendChild(input);
});
}
}
}
async function validarYEnviarFormulario(e) {
e.preventDefault();
if (seleccionados.length === 0) {
mostrarMensaje('Por favor, seleccione al menos un asiento.');
return false;
}
const nombreCliente = document.getElementById('nombre_cliente').value.trim();
if (nombreCliente === '') {
mostrarMensaje('Por favor, ingrese el nombre del cliente.');
return false;
}
const formData = new FormData();
formData.append('nombre_cliente', nombreCliente);
seleccionados.forEach(asiento => {
formData.append('asientos[]', asiento.id);
});
try {
const response = await fetch('../controlador/procesarVenta.php', {
method: 'POST',
body: formData
});
const responseText = await response.text(); // Capturar respuesta como texto para depurar
console.log('Respuesta del servidor:', responseText);
// Intentar parsear como JSON
const data = JSON.parse(responseText);
if (!data.success) {
mostrarMensaje(data.message || 'Error en la venta'); // Cambiar 'mensaje' a 'message'
return;
}
// Redirigir al comprobante
window.location.href = data.redirect;
} catch (error) {
console.error('Error al enviar la venta:', error);
mostrarMensaje('Error de conexión con el servidor', 'error');
}
}
// Función para mostrar mensajes
function mostrarMensaje(texto, tipo = 'warning') {
const mensajeElement = document.getElementById('mensajeAlerta');
if (mensajeElement) {
mensajeElement.textContent = texto;
mensajeElement.className = `alert alert-${tipo === 'error' ? 'danger' : 'warning'}`;
mensajeElement.classList.remove('d-none');
// Ocultar después de 5 segundos
setTimeout(() => {
mensajeElement.classList.add('d-none');
}, 5000);
} else {
// Si no existe el elemento, usar alert
alert(texto);
}
}
});