Actualizar Interfaz/scripts/BoletosArtista.js
This commit is contained in:
parent
4c674b4dc9
commit
41f239e38b
Interfaz/scripts
|
|
@ -1,277 +1,300 @@
|
|||
// Precios por artista y fila
|
||||
const preciosPorArtista = {
|
||||
'The Driver Era': {
|
||||
1: 4500, // Filas 1-3
|
||||
4: 2600, // Filas 4-7
|
||||
8: 1300 // Filas 8-10
|
||||
},
|
||||
'The 1975': {
|
||||
1: 5000, // Filas 1-3
|
||||
4: 3100, // Filas 4-7
|
||||
8: 1600 // Filas 8-10
|
||||
},
|
||||
'Taylor Swift': {
|
||||
1: 7800, // Filas 1-3
|
||||
4: 3800, // Filas 4-7
|
||||
8: 2100 // Filas 8-10
|
||||
}
|
||||
};
|
||||
|
||||
// Datos específicos del artista (se pasan como parámetros al inicializar)
|
||||
let artista, dias;
|
||||
|
||||
// Configuración inicial
|
||||
const filas = 10;
|
||||
const columnas = 12;
|
||||
let diaSeleccionado;
|
||||
const asientosVendidos = {};
|
||||
let asientosSeleccionados = {}; // Objeto: { "1A": 4500, "4B": 2600, ... }
|
||||
|
||||
// Función para inicializar la página
|
||||
function inicializarPagina(nombreArtista, diasArtista) {
|
||||
artista = nombreArtista;
|
||||
dias = diasArtista;
|
||||
diaSeleccionado = dias[0]; // Seleccionar el primer día por defecto
|
||||
|
||||
// Inicializar asientos vendidos para cada día
|
||||
dias.forEach(dia => asientosVendidos[dia] = new Set());
|
||||
|
||||
// Verificar e insertar asientos si no existen
|
||||
verificarEInsertarAsientos();
|
||||
|
||||
// Renderizar los días disponibles
|
||||
renderizarDias();
|
||||
}
|
||||
|
||||
// Función para obtener el precio de un asiento según la fila
|
||||
function obtenerPrecio(fila) {
|
||||
if (!artista || !preciosPorArtista[artista]) {
|
||||
console.error("Artista no definido o no tiene precios asignados.");
|
||||
return 0;
|
||||
}
|
||||
|
||||
if (fila >= 1 && fila <= 3) {
|
||||
return preciosPorArtista[artista][1];
|
||||
} else if (fila >= 4 && fila <= 7) {
|
||||
return preciosPorArtista[artista][4];
|
||||
} else if (fila >= 8 && fila <= 10) {
|
||||
return preciosPorArtista[artista][8];
|
||||
} else {
|
||||
return 0; // En caso de fila no válida
|
||||
}
|
||||
}
|
||||
|
||||
// Función para verificar e insertar asientos si no existen
|
||||
function verificarEInsertarAsientos() {
|
||||
const url = 'verificar_e_insertar_asientos.php';
|
||||
const data = {
|
||||
artista: artista,
|
||||
dias: dias,
|
||||
filas: filas,
|
||||
columnas: columnas
|
||||
};
|
||||
|
||||
fetch(url, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(data)
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(result => {
|
||||
if (result.error) {
|
||||
console.error("Error al verificar/insertar asientos:", result.error);
|
||||
} else {
|
||||
console.log(result.message);
|
||||
cargarAsientos(); // Cargar los asientos después de insertarlos
|
||||
}
|
||||
})
|
||||
.catch(error => console.error('Error al verificar/insertar asientos:', error));
|
||||
}
|
||||
|
||||
// Función para renderizar los días disponibles
|
||||
function renderizarDias() {
|
||||
const contenedorDias = document.querySelector('.dias');
|
||||
contenedorDias.innerHTML = '';
|
||||
dias.forEach(dia => {
|
||||
const boton = document.createElement('button');
|
||||
boton.className = 'btn btn-primary';
|
||||
boton.textContent = dia;
|
||||
boton.onclick = () => seleccionarDia(dia);
|
||||
contenedorDias.appendChild(boton);
|
||||
});
|
||||
}
|
||||
|
||||
// Función para seleccionar un día
|
||||
function seleccionarDia(dia) {
|
||||
diaSeleccionado = dia;
|
||||
asientosSeleccionados = {}; // Reiniciar los asientos seleccionados
|
||||
document.querySelectorAll('.dias button').forEach(btn => btn.classList.remove('selected'));
|
||||
event.target.classList.add('selected');
|
||||
cargarAsientos();
|
||||
}
|
||||
|
||||
// Función para cargar los asientos desde el servidor
|
||||
function cargarAsientos() {
|
||||
const url = `consultar_asientos.php?artista=${encodeURIComponent(artista)}&dia=${diaSeleccionado}`;
|
||||
|
||||
fetch(url)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.error) {
|
||||
console.error("Error al cargar los asientos:", data.error);
|
||||
return;
|
||||
}
|
||||
|
||||
asientosVendidos[diaSeleccionado].clear();
|
||||
|
||||
data.asientos.forEach(asiento => {
|
||||
if (asiento.estado === 'vendido') {
|
||||
asientosVendidos[diaSeleccionado].add(asiento.asiento);
|
||||
}
|
||||
});
|
||||
|
||||
renderizarAsientos();
|
||||
})
|
||||
.catch(error => console.error('Error al cargar los asientos:', error));
|
||||
}
|
||||
|
||||
// Función para seleccionar/deseleccionar un asiento
|
||||
function toggleAsiento(asiento, precio) {
|
||||
if (asientosVendidos[diaSeleccionado].has(asiento)) return;
|
||||
|
||||
if (asientosSeleccionados[asiento]) {
|
||||
// Si el asiento ya está seleccionado, eliminarlo
|
||||
delete asientosSeleccionados[asiento];
|
||||
} else {
|
||||
// Si el asiento no está seleccionado, agregarlo
|
||||
asientosSeleccionados[asiento] = precio;
|
||||
console.log(`Asiento seleccionado: ${asiento}, Precio: $${precio}`); // Verificar en la consola
|
||||
}
|
||||
|
||||
renderizarAsientos();
|
||||
}
|
||||
|
||||
// Función para renderizar los asientos
|
||||
function renderizarAsientos() {
|
||||
const contenedor = document.getElementById('asientos');
|
||||
contenedor.innerHTML = '';
|
||||
for (let i = 0; i < filas * columnas; i++) {
|
||||
const fila = Math.floor(i / columnas) + 1;
|
||||
const columna = String.fromCharCode(65 + (i % columnas)); // A, B, C, ..., L
|
||||
const asiento = `${fila}${columna}`;
|
||||
const precio = obtenerPrecio(fila);
|
||||
|
||||
const boton = document.createElement('button');
|
||||
boton.className = 'asiento';
|
||||
if (asientosVendidos[diaSeleccionado].has(asiento)) {
|
||||
boton.classList.add('vendido');
|
||||
} else if (asientosSeleccionados[asiento]) {
|
||||
boton.style.backgroundColor = 'orange';
|
||||
}
|
||||
boton.textContent = `${asiento} - $${precio}`;
|
||||
boton.onclick = () => toggleAsiento(asiento, precio);
|
||||
contenedor.appendChild(boton);
|
||||
}
|
||||
}
|
||||
|
||||
// Función para vender los asientos seleccionados
|
||||
function venderAsientos() {
|
||||
const asientos = Object.keys(asientosSeleccionados);
|
||||
if (asientos.length === 0) {
|
||||
alert("Selecciona al menos un asiento para vender.");
|
||||
return;
|
||||
}
|
||||
|
||||
let precioTotal = 0;
|
||||
const asientosSeleccionadosArray = [];
|
||||
|
||||
// Calcular el precio total y obtener los asientos seleccionados
|
||||
asientos.forEach(asiento => {
|
||||
const precio = asientosSeleccionados[asiento];
|
||||
if (typeof precio === 'number') { // Verificar que el precio es un número
|
||||
precioTotal += precio;
|
||||
asientosSeleccionadosArray.push(`${asiento} - $${precio}`);
|
||||
} else {
|
||||
console.error(`Precio no válido para el asiento ${asiento}:`, precio);
|
||||
}
|
||||
});
|
||||
|
||||
console.log(`Precio total calculado: $${precioTotal}`); // Verificar en la consola
|
||||
|
||||
const fechaHora = new Date().toLocaleString();
|
||||
|
||||
// Llenar los datos del modal
|
||||
document.getElementById('modalArtista').textContent = artista;
|
||||
document.getElementById('modalDia').textContent = diaSeleccionado;
|
||||
document.getElementById('modalAsientos').textContent = asientosSeleccionadosArray.join(', ');
|
||||
document.getElementById('modalPrecioTotal').textContent = `$${precioTotal}`;
|
||||
document.getElementById('modalFechaHora').textContent = fechaHora;
|
||||
|
||||
// Mostrar el modal
|
||||
document.getElementById('comprobanteModal').style.display = 'block';
|
||||
}
|
||||
|
||||
// Función para confirmar la venta
|
||||
function confirmarVenta() {
|
||||
const url = 'vender_asientos.php';
|
||||
const data = {
|
||||
artista: artista,
|
||||
dia: diaSeleccionado,
|
||||
asientos: Object.keys(asientosSeleccionados) // Enviar solo los asientos
|
||||
};
|
||||
|
||||
fetch(url, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(data)
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(result => {
|
||||
if (result.error) {
|
||||
console.error("Error al vender los asientos:", result.error);
|
||||
alert("Error al vender los asientos: " + result.error);
|
||||
} else {
|
||||
console.log("Venta realizada:", result.message);
|
||||
alert(result.message);
|
||||
|
||||
// Marcar los asientos como vendidos en la interfaz
|
||||
Object.keys(asientosSeleccionados).forEach(asiento => {
|
||||
asientosVendidos[diaSeleccionado].add(asiento);
|
||||
});
|
||||
asientosSeleccionados = {}; // Reiniciar los asientos seleccionados
|
||||
renderizarAsientos();
|
||||
}
|
||||
})
|
||||
.catch(error => console.error('Error al vender los asientos:', error));
|
||||
|
||||
// Cerrar el modal
|
||||
document.getElementById('comprobanteModal').style.display = 'none';
|
||||
}
|
||||
|
||||
// Función para rechazar la venta
|
||||
function rechazarVenta() {
|
||||
// Deseleccionar los asientos
|
||||
asientosSeleccionados = {};
|
||||
renderizarAsientos();
|
||||
|
||||
// Mostrar mensaje de compra cancelada
|
||||
alert("Compra cancelada");
|
||||
|
||||
// Cerrar el modal
|
||||
document.getElementById('comprobanteModal').style.display = 'none';
|
||||
}
|
||||
|
||||
// Manejar el cierre del modal
|
||||
const modal = document.getElementById('comprobanteModal');
|
||||
const span = document.getElementsByClassName('close')[0];
|
||||
|
||||
span.onclick = () => modal.style.display = 'none';
|
||||
window.onclick = (event) => {
|
||||
if (event.target === modal) {
|
||||
modal.style.display = 'none';
|
||||
}
|
||||
};
|
||||
const preciosPorArtista = {
|
||||
'The Driver Era': {
|
||||
1: 4500,
|
||||
4: 2600,
|
||||
8: 1300
|
||||
},
|
||||
'The 1975': {
|
||||
1: 5000,
|
||||
4: 3100,
|
||||
8: 1600
|
||||
},
|
||||
'Taylor Swift': {
|
||||
1: 7800,
|
||||
4: 3800,
|
||||
8: 2100
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
let artista, dias;
|
||||
|
||||
const filas = 10;
|
||||
const columnas = 12;
|
||||
let diaSeleccionado;
|
||||
const asientosVendidos = {};
|
||||
let asientosSeleccionados = {};
|
||||
|
||||
function inicializarPagina(nombreArtista, diasArtista) {
|
||||
artista = nombreArtista;
|
||||
dias = diasArtista;
|
||||
diaSeleccionado = dias[0];
|
||||
|
||||
dias.forEach(dia => asientosVendidos[dia] = new Set());
|
||||
|
||||
verificarEInsertarAsientos();
|
||||
|
||||
renderizarDias();
|
||||
}
|
||||
|
||||
function obtenerPrecio(fila) {
|
||||
if (!artista || !preciosPorArtista[artista]) {
|
||||
console.error("Artista no definido o no tiene precios asignados.");
|
||||
return 0;
|
||||
}
|
||||
|
||||
if (fila >= 1 && fila <= 3) {
|
||||
return preciosPorArtista[artista][1];
|
||||
} else if (fila >= 4 && fila <= 7) {
|
||||
return preciosPorArtista[artista][4];
|
||||
} else if (fila >= 8 && fila <= 10) {
|
||||
return preciosPorArtista[artista][8];
|
||||
} else {// En caso de fila no válida
|
||||
}
|
||||
}
|
||||
|
||||
function verificarEInsertarAsientos() {
|
||||
const url = 'control/verificar_e_insertar_asientos.php';
|
||||
const data = {
|
||||
artista: artista,
|
||||
dias: dias,
|
||||
filas: filas,
|
||||
columnas: columnas
|
||||
};
|
||||
|
||||
fetch(url, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(data)
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(result => {
|
||||
if (result.error) {
|
||||
console.error("Error al verificar/insertar asientos:", result.error);
|
||||
} else {
|
||||
console.log(result.message);
|
||||
cargarAsientos();
|
||||
}
|
||||
})
|
||||
.catch(error => console.error('Error al verificar/insertar asientos:', error));
|
||||
}
|
||||
|
||||
function renderizarDias() {
|
||||
const contenedorDias = document.querySelector('.dias');
|
||||
contenedorDias.innerHTML = '';
|
||||
dias.forEach(dia => {
|
||||
const boton = document.createElement('button');
|
||||
boton.className = 'btn btn-primary';
|
||||
boton.textContent = dia;
|
||||
boton.onclick = () => seleccionarDia(dia);
|
||||
contenedorDias.appendChild(boton);
|
||||
});
|
||||
}
|
||||
|
||||
function seleccionarDia(dia) {
|
||||
diaSeleccionado = dia;
|
||||
asientosSeleccionados = {};
|
||||
document.querySelectorAll('.dias button').forEach(btn => btn.classList.remove('selected'));
|
||||
event.target.classList.add('selected');
|
||||
document.getElementById("asientos").style.display = "grid";
|
||||
cargarAsientos();
|
||||
}
|
||||
|
||||
function cargarAsientos() {
|
||||
const url = `control/consultar_asientos.php?artista=${encodeURIComponent(artista)}&dia=${diaSeleccionado}`;
|
||||
|
||||
fetch(url)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.error) {
|
||||
console.error("Error al cargar los asientos:", data.error);
|
||||
return;
|
||||
}
|
||||
|
||||
asientosVendidos[diaSeleccionado].clear();
|
||||
|
||||
data.asientos.forEach(asiento => {
|
||||
if (asiento.estado === 'vendido') {
|
||||
asientosVendidos[diaSeleccionado].add(asiento.asiento);
|
||||
}
|
||||
});
|
||||
|
||||
renderizarAsientos();
|
||||
})
|
||||
.catch(error => console.error('Error al cargar los asientos:', error));
|
||||
}
|
||||
|
||||
function actualizarPanelBoletos() {
|
||||
const panel = document.getElementById("panel-boletos");
|
||||
const lista = document.getElementById("lista-boletos");
|
||||
const totalPrecio = document.getElementById("total-precio");
|
||||
|
||||
lista.innerHTML = "";
|
||||
const asientos = Object.keys(asientosSeleccionados);
|
||||
let total = 0;
|
||||
|
||||
if (asientos.length === 0) {
|
||||
panel.classList.add("oculto");
|
||||
return;
|
||||
} else {
|
||||
panel.classList.remove("oculto");
|
||||
}
|
||||
|
||||
asientos.forEach(asiento => {
|
||||
const precio = asientosSeleccionados[asiento];
|
||||
total += precio;
|
||||
|
||||
const boletoItem = document.createElement("div");
|
||||
boletoItem.className = "boleto-item";
|
||||
boletoItem.innerHTML = `
|
||||
<span>${asiento}</span>
|
||||
<span>$${precio} MXN</span>
|
||||
`;
|
||||
|
||||
lista.appendChild(boletoItem);
|
||||
});
|
||||
|
||||
totalPrecio.textContent = `$${total} MXN`;
|
||||
}
|
||||
|
||||
function toggleAsiento(asiento, precio) {
|
||||
if (asientosVendidos[diaSeleccionado].has(asiento)) return;
|
||||
|
||||
if (asientosSeleccionados[asiento]) {
|
||||
delete asientosSeleccionados[asiento];
|
||||
} else {
|
||||
asientosSeleccionados[asiento] = precio;
|
||||
}
|
||||
|
||||
actualizarPanelBoletos();
|
||||
renderizarAsientos();
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
function renderizarAsientos() {
|
||||
const contenedor = document.getElementById('asientos');
|
||||
contenedor.innerHTML = '';
|
||||
for (let i = 0; i < filas * columnas; i++) {
|
||||
const fila = Math.floor(i / columnas) + 1;
|
||||
const columna = String.fromCharCode(65 + (i % columnas));
|
||||
const asiento = `${fila}${columna}`;
|
||||
const precio = obtenerPrecio(fila);
|
||||
|
||||
const boton = document.createElement('button');
|
||||
boton.className = 'asiento';
|
||||
|
||||
if (asientosVendidos[diaSeleccionado].has(asiento)) {
|
||||
boton.classList.add('vendido');
|
||||
} else if (asientosSeleccionados[asiento]) {
|
||||
boton.style.backgroundColor = 'orange';
|
||||
}
|
||||
boton.textContent = `${asiento}`;
|
||||
boton.onclick = () => toggleAsiento(asiento, precio);
|
||||
contenedor.appendChild(boton);
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
document.getElementById("asientos").style.display = "none";
|
||||
|
||||
const btnVender = document.getElementById("btnVender");
|
||||
if (btnVender) {
|
||||
btnVender.addEventListener("click", venderAsientos);
|
||||
}
|
||||
});
|
||||
|
||||
function venderAsientos() {
|
||||
const asientos = Object.keys(asientosSeleccionados);
|
||||
if (asientos.length === 0) {
|
||||
alert("Selecciona al menos un asiento para vender.");
|
||||
return;
|
||||
}
|
||||
|
||||
let precioTotal = 0;
|
||||
const asientosSeleccionadosArray = [];
|
||||
|
||||
asientos.forEach(asiento => {
|
||||
const precio = asientosSeleccionados[asiento];
|
||||
if (typeof precio === 'number') {
|
||||
precioTotal += precio;
|
||||
asientosSeleccionadosArray.push(`${asiento} - $${precio}`);
|
||||
}
|
||||
});
|
||||
|
||||
const fechaHora = new Date().toLocaleString();
|
||||
|
||||
document.getElementById('modalArtista').textContent = artista;
|
||||
document.getElementById('modalDia').textContent = diaSeleccionado;
|
||||
document.getElementById('modalAsientos').textContent = asientosSeleccionadosArray.join(', ');
|
||||
document.getElementById('modalPrecioTotal').textContent = `$${precioTotal}`;
|
||||
document.getElementById('modalFechaHora').textContent = fechaHora;
|
||||
|
||||
document.getElementById('modalOverlay').classList.add('modal-visible');
|
||||
document.getElementById('comprobanteModal').style.display = 'block';
|
||||
}
|
||||
|
||||
|
||||
function confirmarVenta() {
|
||||
const url = 'control/vender_asientos.php';
|
||||
const data = {
|
||||
artista: artista,
|
||||
dia: diaSeleccionado,
|
||||
asientos: Object.keys(asientosSeleccionados)
|
||||
};
|
||||
|
||||
fetch(url, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(data)
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(result => {
|
||||
if (result.error) {
|
||||
console.error("Error al vender los asientos:", result.error);
|
||||
alert("Error al vender los asientos: " + result.error);
|
||||
} else {
|
||||
console.log("Venta realizada:", result.message);
|
||||
alert(result.message);
|
||||
|
||||
Object.keys(asientosSeleccionados).forEach(asiento => {
|
||||
asientosVendidos[diaSeleccionado].add(asiento);
|
||||
});
|
||||
asientosSeleccionados = {};
|
||||
renderizarAsientos();
|
||||
}
|
||||
})
|
||||
.catch(error => console.error('Error al vender los asientos:', error));
|
||||
|
||||
document.getElementById('modalOverlay').classList.remove('modal-visible');
|
||||
document.getElementById('comprobanteModal').style.display = 'none';
|
||||
}
|
||||
|
||||
|
||||
function rechazarVenta() {
|
||||
asientosSeleccionados = {};
|
||||
renderizarAsientos();
|
||||
|
||||
document.getElementById('modalOverlay').classList.remove('modal-visible');
|
||||
document.getElementById('comprobanteModal').style.display = 'none';
|
||||
}
|
||||
|
||||
|
||||
const modal = document.getElementById('comprobanteModal');
|
||||
const span = document.getElementsByClassName('close')[0];
|
||||
|
||||
span.onclick = () => modal.style.display = 'none';
|
||||
window.onclick = (event) => {
|
||||
if (event.target === modal) {
|
||||
modal.style.display = 'none';
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
document.getElementById("asientos").style.display = "none"; // Ocultar los asientos al cargar
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue