94 lines
3.5 KiB
JavaScript
94 lines
3.5 KiB
JavaScript
document.addEventListener("DOMContentLoaded", () => {
|
|
cargarConciertos();
|
|
});
|
|
|
|
const listaConciertos = document.getElementById("listaConciertos");
|
|
const buscadorBoton = document.getElementById("buscadorBoton");
|
|
const buscadorInput = document.getElementById("buscadorColaborador");
|
|
|
|
async function cargarConciertos(filtro = "") {
|
|
try {
|
|
const respuesta = await fetch('controladores/conciertos.php');
|
|
if (!respuesta.ok) throw new Error("Error al cargar conciertos");
|
|
|
|
const conciertos = await respuesta.json();
|
|
listaConciertos.innerHTML = "";
|
|
|
|
const conciertosFiltrados = filtro
|
|
? conciertos.filter(c => c.nombre_concierto.toLowerCase().includes(filtro.toLowerCase()))
|
|
: conciertos;
|
|
|
|
if (conciertosFiltrados.length === 0) {
|
|
listaConciertos.innerHTML = `<p class="text-red-500 text-center">No se encontraron conciertos.</p>`;
|
|
return;
|
|
}
|
|
|
|
let tarjetas = [];
|
|
|
|
conciertosFiltrados.forEach((concierto) => {
|
|
const tarjeta = document.createElement("div");
|
|
tarjeta.classList.add("concierto-card");
|
|
|
|
let zonasHTML = "";
|
|
if (concierto.zonas.length > 0) {
|
|
zonasHTML = `<ul class="text-sm text-gray-300 mt-2">`;
|
|
concierto.zonas.forEach(zona => {
|
|
zonasHTML += `<li>🔹 ${zona.nombre_zona}: <b>${zona.capacidad} asientos</b> - $${zona.precio}</li>`;
|
|
});
|
|
zonasHTML += `</ul>`;
|
|
}
|
|
|
|
tarjeta.innerHTML = `
|
|
<div class="menu-container">
|
|
<button class="menu-btn">⋮</button>
|
|
<div class="menu">
|
|
<button class="edit">Editar</button>
|
|
<button class="delete">Eliminar</button>
|
|
</div>
|
|
</div>
|
|
<img src="img/concierto_${concierto.id}.jpg" alt="Concierto" class="card-img">
|
|
<div class="card-body">
|
|
<h3 class="card-title">${concierto.nombre_concierto}</h3>
|
|
<p class="card-text">🎤 ${concierto.artista}</p>
|
|
<p class="card-text">📅 ${concierto.fecha}</p>
|
|
<p class="card-text">📍 ${concierto.direccion || 'No definida'}</p>
|
|
<p class="card-text">🎟 ${concierto.capacidad_total} Asistentes</p>
|
|
${zonasHTML}
|
|
</div>
|
|
<button class="btn-comprar">Comprar Boletos</button>
|
|
`;
|
|
|
|
listaConciertos.appendChild(tarjeta);
|
|
tarjetas.push(tarjeta);
|
|
});
|
|
|
|
gsap.fromTo(
|
|
tarjetas,
|
|
{ opacity: 0, scale: 0.9 },
|
|
{ opacity: 1, scale: 1, duration: 0.6, stagger: 0.2, ease: "power3.out" }
|
|
);
|
|
|
|
} catch (error) {
|
|
console.error(error);
|
|
listaConciertos.innerHTML = `<p class="text-red-500">No se pudieron cargar los conciertos.</p>`;
|
|
}
|
|
}
|
|
|
|
buscadorBoton.addEventListener('click', (event) => {
|
|
event.preventDefault();
|
|
const termino = buscadorInput.value.trim();
|
|
cargarConciertos(termino);
|
|
});
|
|
|
|
document.addEventListener("click", (e) => {
|
|
if (e.target.classList.contains("menu-btn")) {
|
|
e.stopPropagation();
|
|
let menu = e.target.nextElementSibling;
|
|
menu.style.display = menu.style.display === "block" ? "none" : "block";
|
|
} else {
|
|
document.querySelectorAll(".menu").forEach(menu => {
|
|
menu.style.display = "none";
|
|
});
|
|
}
|
|
});
|