feat: Se agrego canvas en index.html y las funciones para generar graficos en index.js
This commit is contained in:
parent
447658ddc7
commit
9bf4c64cda
controlador
corregido
vista
|
|
@ -50,7 +50,9 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
|||
|
||||
// Guardar la venta en la base de datos
|
||||
if ($bd->guardarVenta($venta)) {
|
||||
echo json_encode(['success' => true, 'message' => 'Venta realizada con éxito', 'total' => $total]);
|
||||
// Guardar comprobante en sesión
|
||||
$_SESSION['comprobante'] = $venta->generarComprobante();
|
||||
echo json_encode(['success' => true, 'message' => 'Venta realizada con éxito', 'redirect' => '../vista/comprobante.html']);
|
||||
} else {
|
||||
echo json_encode(['success' => false, 'message' => 'Error al registrar la venta']);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ require_once 'VendedorController.php';
|
|||
header('Content-Type: application/json');
|
||||
|
||||
// Conexión a base de datos
|
||||
$db = new BaseDatos('localhost:3306', 'root', '481037', 'boletos_db');
|
||||
$db = new BaseDatos('localhost:3306', 'root', 'password', 'boletos_db');
|
||||
|
||||
// Inicializar el controlador
|
||||
$vendedorController = new VendedorController($db);
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ if (empty($idsBoletos)) {
|
|||
}
|
||||
|
||||
// Conexión a base de datos
|
||||
$db = new BaseDatos('localhost:3306', 'root', '481037', 'boletos_db');
|
||||
$db = new BaseDatos('localhost:3306', 'root', 'password', 'boletos_db');
|
||||
|
||||
// Inicializar el controlador
|
||||
$vendedorController = new VendedorController($db);
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@
|
|||
width: auto;
|
||||
}
|
||||
</style>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
|
|
@ -87,6 +88,17 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
<h2>Graficos</h2>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<canvas id="graficoVendidos"></canvas>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<canvas id="graficoLibres"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="js/index.js"></script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,49 @@
|
|||
// js/index.js - Script para manejar la interfaz de usuario y la comunicación con el backend
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
let seleccionados = [];
|
||||
const precioBoleto = 50.00; // Precio por boleto
|
||||
|
||||
// Inicializar gráficos
|
||||
const ctxVendidos = document.getElementById('graficoVendidos').getContext('2d');
|
||||
const ctxLibres = document.getElementById('graficoLibres').getContext('2d');
|
||||
|
||||
const graficoVendidos = new Chart(ctxVendidos, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ['Vendidos'],
|
||||
datasets: [{
|
||||
label: 'Asientos Vendidos',
|
||||
data: [0],
|
||||
backgroundColor: ['#dc3545']
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const graficoLibres = new Chart(ctxLibres, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ['Libres'],
|
||||
datasets: [{
|
||||
label: 'Asientos Libres',
|
||||
data: [0],
|
||||
backgroundColor: ['#28a745']
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Cargar el mapa de asientos al iniciar
|
||||
cargarMapaAsientos();
|
||||
|
||||
|
|
@ -23,6 +63,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
}
|
||||
|
||||
renderizarMapaAsientos(data.mapa);
|
||||
actualizarGraficos(data.mapa); // Asegúrate de llamar a actualizarGraficos aquí
|
||||
} catch (error) {
|
||||
console.error('Error al cargar el mapa de asientos:', error);
|
||||
mostrarMensaje('Error de conexión con el servidor', 'error');
|
||||
|
|
@ -203,4 +244,26 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
alert(texto);
|
||||
}
|
||||
}
|
||||
|
||||
// Función para actualizar los gráficos
|
||||
function actualizarGraficos(mapa) {
|
||||
let totalVendidos = 0;
|
||||
let totalLibres = 0;
|
||||
|
||||
Object.values(mapa).forEach(asientosEnFila => {
|
||||
Object.values(asientosEnFila).forEach(estado => {
|
||||
if (estado === 'vendido') {
|
||||
totalVendidos++;
|
||||
} else if (estado === 'disponible') {
|
||||
totalLibres++;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
graficoVendidos.data.datasets[0].data[0] = totalVendidos;
|
||||
graficoLibres.data.datasets[0].data[0] = totalLibres;
|
||||
|
||||
graficoVendidos.update();
|
||||
graficoLibres.update();
|
||||
}
|
||||
});
|
||||
|
|
@ -10,6 +10,7 @@
|
|||
<style>
|
||||
|
||||
</style>
|
||||
<script src="jspdf.plugin.autotable.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
|
|
@ -56,6 +57,27 @@
|
|||
|
||||
<!-- Campo oculto para almacenar IDs de asientos seleccionados -->
|
||||
<div id="asientosSeleccionadosInput"></div>
|
||||
|
||||
|
||||
<div class="resumen" id="resumen">
|
||||
<h3>Graficos</h3>
|
||||
<table>
|
||||
|
||||
<thead>
|
||||
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
|
||||
<!-- Campo oculto para almacenar IDs de asientos seleccionados -->
|
||||
<div id="asientosSeleccionadosInput"></div>
|
||||
|
||||
|
||||
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -179,8 +179,8 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
return;
|
||||
}
|
||||
|
||||
mostrarMensaje('Venta confirmada con éxito', 'success');
|
||||
setTimeout(() => location.reload(), 2000);
|
||||
// Redirigir al comprobante
|
||||
window.location.href = data.redirect;
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error al enviar la venta:', error);
|
||||
|
|
|
|||
Loading…
Reference in New Issue