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