72 lines
3.1 KiB
JavaScript
72 lines
3.1 KiB
JavaScript
document.addEventListener("DOMContentLoaded", async () => {
|
|
try {
|
|
const respuesta = await fetch("controladores/obtener_boleto.php");
|
|
if (!respuesta.ok) throw new Error("Error al obtener los boletos.");
|
|
|
|
const boletos = await respuesta.json();
|
|
const tablaBody = document.querySelector("#tabla-boletos");
|
|
|
|
if (boletos.length === 0) {
|
|
tablaBody.innerHTML = `<tr><td colspan="7" class="text-center p-4">No hay boletos vendidos aún.</td></tr>`;
|
|
return;
|
|
}
|
|
|
|
boletos.forEach(boleto => {
|
|
const fila = document.createElement("tr");
|
|
fila.classList.add("border-b", "border-gray-700", "hover:bg-gray-700");
|
|
|
|
fila.innerHTML = `
|
|
<td class="p-3 border border-gray-600">${boleto.nombre_comprador}</td>
|
|
<td class="p-3 border border-gray-600">${boleto.nombre_concierto}</td>
|
|
<td class="p-3 border border-gray-600">${boleto.artista}</td>
|
|
<td class="p-3 border border-gray-600">${boleto.fecha_concierto}</td>
|
|
<td class="p-3 border border-gray-600">${boleto.nombre_zona}</td>
|
|
<td class="p-3 border border-gray-600">${boleto.id_asiento}</td>
|
|
<td class="p-3 border border-gray-600 text-center">
|
|
<button class="bg-yellow-400 text-black px-3 py-1 rounded-lg hover:bg-yellow-500"
|
|
onclick="imprimirBoleto('${boleto.nombre_comprador}', '${boleto.nombre_concierto}', '${boleto.artista}', '${boleto.fecha_concierto}', '${boleto.nombre_zona}', '${boleto.id_asiento}')">
|
|
🖨 Imprimir
|
|
</button>
|
|
</td>
|
|
`;
|
|
tablaBody.appendChild(fila);
|
|
});
|
|
|
|
} catch (error) {
|
|
console.error("Error al cargar los boletos:", error);
|
|
}
|
|
});
|
|
|
|
// Función para imprimir un boleto específico
|
|
function imprimirBoleto(comprador, concierto, artista, fecha, zona, asiento) {
|
|
const ventanaImpresion = window.open("", "_blank");
|
|
ventanaImpresion.document.write(`
|
|
<html>
|
|
<head>
|
|
<title>Boleto de Concierto</title>
|
|
<style>
|
|
body { font-family: Arial, sans-serif; text-align: center; padding: 20px; }
|
|
.boleto { border: 2px dashed #333; padding: 20px; width: 300px; margin: auto; }
|
|
h1 { color: #5CB85C; }
|
|
p { font-size: 16px; margin: 5px 0; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="boleto">
|
|
<h1>🎟 TicketFei</h1>
|
|
<p><strong>Comprador:</strong> ${comprador}</p>
|
|
<p><strong>Concierto:</strong> ${concierto}</p>
|
|
<p><strong>Artista:</strong> ${artista}</p>
|
|
<p><strong>Fecha:</strong> ${fecha}</p>
|
|
<p><strong>Zona:</strong> ${zona}</p>
|
|
<p><strong>Asiento:</strong> ${asiento}</p>
|
|
</div>
|
|
<script>
|
|
window.print();
|
|
setTimeout(() => window.close(), 500);
|
|
</script>
|
|
</body>
|
|
</html>
|
|
`);
|
|
}
|