332 lines
13 KiB
JavaScript
332 lines
13 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function() {
|
|
let seleccionados = [];
|
|
const precioBoleto = 50.00; // Precio por boleto
|
|
|
|
// Inicializar gráficos
|
|
const ctxVendidos = document.getElementById('graficoVendidos').getContext('2d');
|
|
const ctxLibres = document.getElementById('graficoLibres').getContext('2d');
|
|
|
|
const graficoVendidos = new Chart(ctxVendidos, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ['Vendidos'],
|
|
datasets: [{
|
|
label: 'Asientos Vendidos',
|
|
data: [0],
|
|
backgroundColor: ['#dc3545']
|
|
}]
|
|
},
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
const graficoLibres = new Chart(ctxLibres, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ['Libres'],
|
|
datasets: [{
|
|
label: 'Asientos Libres',
|
|
data: [0],
|
|
backgroundColor: ['#28a745']
|
|
}]
|
|
},
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// Cargar el mapa de asientos al iniciar
|
|
cargarMapaAsientos();
|
|
|
|
// Agregar manejador para el formulario
|
|
const formulario = document.getElementById('formularioVenta');
|
|
formulario.addEventListener('submit', validarYEnviarFormulario);
|
|
|
|
// Agregar manejador para el botón de filtrar
|
|
const btnFiltrar = document.getElementById('btnFiltrar');
|
|
btnFiltrar.addEventListener('click', filtrarPorFecha);
|
|
|
|
// Función para cargar el mapa de asientos desde la API
|
|
async function cargarMapaAsientos() {
|
|
try {
|
|
const response = await fetch('../controlador/asientos.php');
|
|
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('Error al cargar el mapa de asientos: ' + data.message, 'error');
|
|
return;
|
|
}
|
|
|
|
renderizarMapaAsientos(data.mapa);
|
|
actualizarGraficos(data.mapa, data.precio); // Asegúrate de llamar a actualizarGraficos aquí
|
|
} 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) {
|
|
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);
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
// Función para validar y enviar el formulario
|
|
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;
|
|
}
|
|
|
|
// Preparar los datos para enviar
|
|
const asientosIds = seleccionados.map(asiento => asiento.id);
|
|
const datos = {
|
|
asientos: asientosIds,
|
|
nombre_cliente: nombreCliente
|
|
};
|
|
|
|
// Enviar los datos mediante fetch
|
|
fetch('../controlador/venta.php', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(datos)
|
|
})
|
|
.then(response => response.json())
|
|
.then(result => {
|
|
if (result.success) {
|
|
// Redireccionar a la página de comprobante
|
|
window.location.href = result.redirect || 'comprobante.php';
|
|
} else {
|
|
mostrarMensaje(result.mensaje || 'Error al procesar la venta', 'error');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
mostrarMensaje('Error de conexión con el servidor', 'error');
|
|
});
|
|
|
|
return false;
|
|
}
|
|
|
|
// 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);
|
|
}
|
|
}
|
|
|
|
// Función para actualizar los gráficos
|
|
function actualizarGraficos(mapa, precioBoleto) {
|
|
let totalVendidos = 0;
|
|
let totalLibres = 0;
|
|
let totalVenta = 0;
|
|
|
|
Object.values(mapa).forEach(asientosEnFila => {
|
|
Object.values(asientosEnFila).forEach(estado => {
|
|
if (estado === 'vendido') {
|
|
totalVendidos++;
|
|
totalVenta += precioBoleto; // Sumar el precio del boleto vendido
|
|
} else if (estado === 'disponible') {
|
|
totalLibres++;
|
|
}
|
|
});
|
|
});
|
|
|
|
graficoVendidos.data.datasets[0].data[0] = totalVendidos;
|
|
graficoLibres.data.datasets[0].data[0] = totalLibres;
|
|
|
|
graficoVendidos.update();
|
|
graficoLibres.update();
|
|
|
|
// Mostrar la suma total de boletos vendidos debajo del gráfico de asientos vendidos
|
|
const totalVendidosElement = document.getElementById('totalVendidos');
|
|
if (totalVendidosElement) {
|
|
totalVendidosElement.textContent = `Total boletos vendidos: ${totalVendidos}`;
|
|
} else {
|
|
const totalVendidosLabel = document.createElement('p');
|
|
totalVendidosLabel.id = 'totalVendidos';
|
|
totalVendidosLabel.textContent = `Total boletos vendidos: ${totalVendidos}`;
|
|
graficoVendidos.canvas.parentNode.appendChild(totalVendidosLabel);
|
|
}
|
|
|
|
// Mostrar la suma total vendida debajo del gráfico de asientos vendidos
|
|
const totalVentaElement = document.getElementById('totalVentaDia');
|
|
if (totalVentaElement) {
|
|
totalVentaElement.textContent = `Total vendido: $${totalVenta.toFixed(2)}`;
|
|
} else {
|
|
const totalVentaLabel = document.createElement('p');
|
|
totalVentaLabel.id = 'totalVentaDia';
|
|
totalVentaLabel.textContent = `Total vendido: $${totalVenta.toFixed(2)}`;
|
|
graficoVendidos.canvas.parentNode.appendChild(totalVentaLabel);
|
|
}
|
|
}
|
|
|
|
// Función para filtrar los datos por fecha
|
|
async function filtrarPorFecha() {
|
|
const fechaInicio = document.getElementById('fechaInicio').value;
|
|
const fechaFin = document.getElementById('fechaFin').value;
|
|
|
|
if (!fechaInicio || !fechaFin) {
|
|
mostrarMensaje('Por favor, seleccione un rango de fechas válido.', 'warning');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch(`../controlador/asientos.php?fechaInicio=${fechaInicio}&fechaFin=${fechaFin}`);
|
|
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('Error al filtrar los datos por fecha', 'error');
|
|
return;
|
|
}
|
|
|
|
renderizarMapaAsientos(data.mapa); // Asegúrate de renderizar el mapa de asientos filtrado
|
|
actualizarGraficos(data.mapa, data.precio);
|
|
} catch (error) {
|
|
console.error('Error al filtrar los datos por fecha:', error);
|
|
mostrarMensaje('Error de conexión con el servidor', 'error');
|
|
}
|
|
}
|
|
}); |