Actualizado 5/3/25
This commit is contained in:
parent
d955299678
commit
4aa177c5c5
|
|
@ -0,0 +1,44 @@
|
|||
<?php
|
||||
include 'conexion.php';
|
||||
|
||||
header('Content-Type: application/json');
|
||||
error_reporting(E_ALL);
|
||||
ini_set('display_errors', 1);
|
||||
|
||||
if (!isset($_GET['id'])) {
|
||||
echo json_encode(["error" => "No se proporcionó un ID de concierto"]);
|
||||
exit;
|
||||
}
|
||||
|
||||
$conciertoId = intval($_GET['id']);
|
||||
|
||||
$consulta = "SELECT nombre_zona, capacidad, precio FROM zonas WHERE id_concierto = ? ORDER BY FIELD(nombre_zona, 'General', 'Plata', 'Oro', 'VIP')";
|
||||
|
||||
$stmt = $conexionBD->prepare($consulta);
|
||||
if (!$stmt) {
|
||||
echo json_encode(["error" => "Error en la preparación de la consulta: " . $conexionBD->error]);
|
||||
exit;
|
||||
}
|
||||
|
||||
$stmt->bind_param('i', $conciertoId);
|
||||
$stmt->execute();
|
||||
$resultado = $stmt->get_result();
|
||||
|
||||
$zonas = [];
|
||||
while ($fila = $resultado->fetch_assoc()) {
|
||||
$zonas[] = [
|
||||
'nombre_zona' => $fila['nombre_zona'],
|
||||
'capacidad' => $fila['capacidad'],
|
||||
'precio' => $fila['precio']
|
||||
];
|
||||
}
|
||||
|
||||
if (empty($zonas)) {
|
||||
echo json_encode(["error" => "No se encontraron zonas para este concierto"]);
|
||||
} else {
|
||||
echo json_encode($zonas, JSON_PRETTY_PRINT);
|
||||
}
|
||||
|
||||
$stmt->close();
|
||||
$conexionBD->close();
|
||||
?>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
.mapa-estadio {
|
||||
position: relative;
|
||||
width: 600px;
|
||||
height: 500px;
|
||||
background-color: #f0f0f0;
|
||||
border-radius: 50% 50% 0 0;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.escenario {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
background-color: black;
|
||||
color: white;
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
font-weight: bold;
|
||||
border-radius: 10px 10px 0 0;
|
||||
}
|
||||
|
||||
.zona {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
border-radius: 50% 50% 0 0;
|
||||
}
|
||||
|
||||
.general {
|
||||
background-color: gray;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
bottom: 10%;
|
||||
left: 0;
|
||||
border-radius: 50% 50% 0 0;
|
||||
}
|
||||
|
||||
.plata {
|
||||
background-color: silver;
|
||||
width: 80%;
|
||||
height: 30%;
|
||||
bottom: 20%;
|
||||
left: 10%;
|
||||
border-radius: 50% 50% 0 0;
|
||||
}
|
||||
|
||||
.oro {
|
||||
background-color: gold;
|
||||
width: 60%;
|
||||
height: 25%;
|
||||
bottom: 30%;
|
||||
left: 20%;
|
||||
border-radius: 50% 50% 0 0;
|
||||
}
|
||||
|
||||
.vip {
|
||||
background-color: purple;
|
||||
width: 40%;
|
||||
height: 20%;
|
||||
bottom: 10%;
|
||||
left: 30%;
|
||||
border-radius: 50% 50% 0 0;
|
||||
}
|
||||
|
||||
.selected { border: 3px solid red; }
|
||||
|
||||
.asientos-container {
|
||||
display: none;
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.asiento {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin: 5px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
background-color: green;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.asiento.seleccionado { background-color: orange; }
|
||||
|
|
@ -110,7 +110,7 @@ async function cargarConciertos(filtro = "") {
|
|||
<p class="card-text">🎟 ${concierto.capacidad_total} Asistentes</p>
|
||||
${zonasHTML}
|
||||
</div>
|
||||
<button class="btn-comprar">Comprar Boletos</button>
|
||||
<button class="btn-comprar" data-id="${concierto.id}">Comprar Boletos</button>
|
||||
`;
|
||||
|
||||
// Evento para editar
|
||||
|
|
@ -124,6 +124,11 @@ async function cargarConciertos(filtro = "") {
|
|||
mostrarModalConfirmacion(id);
|
||||
});
|
||||
|
||||
tarjeta.querySelector(".btn-comprar").addEventListener("click", (e) => {
|
||||
const id = e.target.dataset.id;
|
||||
window.location.href = `ventaBoletos.html?id=${id}`;
|
||||
});
|
||||
|
||||
listaConciertos.appendChild(tarjeta);
|
||||
tarjetas.push(tarjeta);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -9,28 +9,39 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||
|
||||
if (paso === 3) {
|
||||
capacidadTotal = parseInt(document.getElementById("capacidad_total").value) || 0;
|
||||
document.getElementById("capacidad_disponible").textContent = capacidadTotal;
|
||||
const capacidadDisponible = document.getElementById("capacidad_disponible");
|
||||
if (capacidadDisponible) {
|
||||
capacidadDisponible.textContent = capacidadTotal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function actualizarCapacidad() {
|
||||
let asignado = 0;
|
||||
["capacidad_general", "capacidad_plata", "capacidad_oro", "capacidad_vip"].forEach(id => {
|
||||
asignado += parseInt(document.getElementById(id).value) || 0;
|
||||
const input = document.getElementById(id);
|
||||
if (input) {
|
||||
asignado += parseInt(input.value) || 0;
|
||||
}
|
||||
});
|
||||
|
||||
const restante = capacidadTotal - asignado;
|
||||
document.getElementById("capacidad_disponible").textContent = restante < 0 ? "Excede la capacidad total" : restante;
|
||||
const capacidadDisponible = document.getElementById("capacidad_disponible");
|
||||
if (capacidadDisponible) {
|
||||
capacidadDisponible.textContent = restante < 0 ? "Excede la capacidad total" : restante;
|
||||
}
|
||||
}
|
||||
|
||||
formulario.addEventListener("submit", async (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
if (parseInt(document.getElementById("capacidad_disponible").textContent) < 0) {
|
||||
const capacidadDisponible = document.getElementById("capacidad_disponible");
|
||||
if (capacidadDisponible && parseInt(capacidadDisponible.textContent) < 0) {
|
||||
mensajeDiv.innerHTML = '<div class="alert alert-danger">Error: La suma de capacidades de zonas no puede exceder la capacidad total.</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
// 🔹 Construir objeto JSON con todas las zonas
|
||||
const datosConcierto = {
|
||||
nombre_concierto: document.getElementById("nombre_concierto").value.trim(),
|
||||
artista: document.getElementById("artista").value.trim(),
|
||||
|
|
@ -40,10 +51,59 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||
numero_direccion: document.getElementById("numero_direccion").value.trim(),
|
||||
codigo_postal: document.getElementById("codigo_postal").value.trim(),
|
||||
estado: document.getElementById("estado").value.trim(),
|
||||
capacidad_total: capacidadTotal
|
||||
capacidad_total: capacidadTotal,
|
||||
zonas: [
|
||||
{
|
||||
nombre_zona: "General",
|
||||
capacidad: parseInt(document.getElementById("capacidad_general").value) || 0,
|
||||
precio: parseFloat(document.getElementById("precio_general").value) || 0
|
||||
},
|
||||
{
|
||||
nombre_zona: "Plata",
|
||||
capacidad: parseInt(document.getElementById("capacidad_plata").value) || 0,
|
||||
precio: parseFloat(document.getElementById("precio_plata").value) || 0
|
||||
},
|
||||
{
|
||||
nombre_zona: "Oro",
|
||||
capacidad: parseInt(document.getElementById("capacidad_oro").value) || 0,
|
||||
precio: parseFloat(document.getElementById("precio_oro").value) || 0
|
||||
},
|
||||
{
|
||||
nombre_zona: "VIP",
|
||||
capacidad: parseInt(document.getElementById("capacidad_vip").value) || 0,
|
||||
precio: parseFloat(document.getElementById("precio_vip").value) || 0
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
mensajeDiv.innerHTML = '<div class="alert alert-success">Concierto registrado correctamente.</div>';
|
||||
console.log("Enviando datos:", JSON.stringify(datosConcierto)); // Depuración
|
||||
|
||||
try {
|
||||
const respuesta = await fetch("controladores/insertar_concierto.php", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
body: JSON.stringify(datosConcierto)
|
||||
});
|
||||
|
||||
const resultado = await respuesta.json();
|
||||
console.log("Respuesta del servidor:", resultado); // Depuración
|
||||
|
||||
if (!resultado.insercionCorrecta) {
|
||||
throw new Error(resultado.error || "Error al guardar el concierto");
|
||||
}
|
||||
|
||||
mensajeDiv.innerHTML = '<div class="alert alert-success">Concierto registrado correctamente.</div>';
|
||||
|
||||
setTimeout(() => {
|
||||
window.location.href = "ventanaConciertos.html";
|
||||
}, 2000);
|
||||
|
||||
} catch (error) {
|
||||
console.error("Error:", error);
|
||||
mensajeDiv.innerHTML = `<div class="alert alert-danger">Error: ${error.message}</div>`;
|
||||
}
|
||||
});
|
||||
|
||||
window.siguientePaso = siguientePaso;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,67 @@
|
|||
document.addEventListener("DOMContentLoaded", async () => {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const conciertoId = urlParams.get("id");
|
||||
if (!conciertoId) {
|
||||
alert("No se encontró el ID del concierto.");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const respuesta = await fetch(`controladores/concierto_zonas.php?id=${conciertoId}`);
|
||||
if (!respuesta.ok) throw new Error("Error al cargar las zonas del concierto");
|
||||
|
||||
const zonas = await respuesta.json();
|
||||
cargarZonas(zonas);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
alert("Error al cargar los datos del concierto");
|
||||
}
|
||||
});
|
||||
|
||||
function cargarZonas(zonas) {
|
||||
const container = document.getElementById('zonas-container');
|
||||
container.innerHTML = "";
|
||||
|
||||
zonas.forEach(zona => {
|
||||
let div = document.createElement('div');
|
||||
div.classList.add('zona', zona.nombre_zona.toLowerCase());
|
||||
div.textContent = `${zona.nombre_zona} - ${zona.capacidad} asientos - $${zona.precio}`;
|
||||
div.onclick = function() {
|
||||
document.querySelectorAll('.zona').forEach(el => el.classList.remove('selected'));
|
||||
div.classList.add('selected');
|
||||
mostrarAsientos(zona.capacidad);
|
||||
};
|
||||
container.appendChild(div);
|
||||
});
|
||||
}
|
||||
|
||||
function mostrarAsientos(capacidad) {
|
||||
const asientosContainer = document.getElementById('asientos-container');
|
||||
asientosContainer.innerHTML = "";
|
||||
asientosContainer.style.display = "flex";
|
||||
|
||||
for (let i = 0; i < capacidad; i++) {
|
||||
let asiento = document.createElement('div');
|
||||
asiento.classList.add('asiento');
|
||||
asiento.textContent = i + 1;
|
||||
asiento.onclick = function() {
|
||||
asiento.classList.toggle('seleccionado');
|
||||
};
|
||||
asientosContainer.appendChild(asiento);
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById("confirmarSeleccion").addEventListener("click", () => {
|
||||
let selectedZona = document.querySelector('.zona.selected');
|
||||
if (!selectedZona) {
|
||||
alert("No has seleccionado ninguna zona.");
|
||||
return;
|
||||
}
|
||||
let selectedAsientos = document.querySelectorAll('.asiento.seleccionado');
|
||||
if (selectedAsientos.length === 0) {
|
||||
alert("No has seleccionado ningún asiento.");
|
||||
return;
|
||||
}
|
||||
let asientosSeleccionados = Array.from(selectedAsientos).map(asiento => asiento.textContent);
|
||||
alert(`Zona seleccionada: ${selectedZona.textContent}\nAsientos: ${asientosSeleccionados.join(', ')}`);
|
||||
});
|
||||
|
|
@ -3,50 +3,45 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Registro de Conciertos</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/ventanaPrincipal.css">
|
||||
<title>Compra de Boletos</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||||
<script defer src="js/ventaBoletos.js"></script>
|
||||
<link rel="stylesheet" href="css/conciertos.css">
|
||||
<link rel="stylesheet" href="css/zonas.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="ventanaPrincipal.html">TicketFei</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav me-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="ventanaPrincipal.html">Conciertos</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Reporte Ventas</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<form class="d-flex">
|
||||
<input class="form-control me-2" type="search" id="buscadorColaborador" placeholder="Buscar concierto" aria-label="Buscar">
|
||||
<button class="btn btn-outline-light" type="submit" id="buscadorBoton">
|
||||
<i class="bi bi-search"></i>
|
||||
</button>
|
||||
</form>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<button class="btn btn-danger" id="cerrarSesion">Cerrar Sesión</button>
|
||||
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<a href="ventanaInsertarConcierto.html" class="navbar-brand">TicketFei</a>
|
||||
<div class="nav-links">
|
||||
<a href="ventanaInsertarConcierto.html">Crear Conciertos</a>
|
||||
<a href="ventanaConciertos.html">Ver Conciertos</a>
|
||||
<a href="#">Reporte Ventas</a>
|
||||
</div>
|
||||
<div class="search-container">
|
||||
<input type="search" id="buscadorColaborador" placeholder="Buscar...">
|
||||
<button id="buscadorBoton">Buscar</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<div class="container mt-5">
|
||||
|
||||
|
||||
<div class="container mt-4 text-center">
|
||||
<h2>Selecciona tu zona</h2>
|
||||
</div>
|
||||
|
||||
<div class="mapa-estadio">
|
||||
<div class="escenario">ESCENARIO</div>
|
||||
<div class="zona general" onclick="seleccionarZona('General')">General</div>
|
||||
<div class="zona plata" onclick="seleccionarZona('Plata')">Plata</div>
|
||||
<div class="zona oro" onclick="seleccionarZona('Oro')">Oro</div>
|
||||
<div class="zona vip" onclick="seleccionarZona('VIP')">VIP</div>
|
||||
</div>
|
||||
|
||||
<div id="asientos-container" class="asientos-container"></div>
|
||||
|
||||
<div class="text-center mt-3">
|
||||
<button class="btn btn-primary" id="confirmarSeleccion">Confirmar selección</button>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="js/conciertos.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
Loading…
Reference in New Issue