Auto commit: 2025-11-24T22:27:36.668Z

This commit is contained in:
Flatlogic Bot 2025-11-24 22:27:36 +00:00
parent c862b7dabc
commit 909621e9be
2 changed files with 85 additions and 49 deletions

17
api.php Normal file
View File

@ -0,0 +1,17 @@
<?php
header('Content-Type: application/json');
require_once 'db/config.php';
try {
$pdo = db();
$stmt = $pdo->query("SELECT t.matricula, t.modelo, lt.latitud, lt.longitud, lt.ultima_actualizacion
FROM localizacion_taxis lt
JOIN taxis t ON lt.id_taxi = t.id
ORDER BY lt.ultima_actualizacion DESC");
$localizaciones = $stmt->fetchAll(PDO::FETCH_ASSOC);
echo json_encode($localizaciones);
} catch (PDOException $e) {
http_response_code(500);
echo json_encode(['error' => 'Error de base de datos: ' . $e->getMessage()]);
}
?>

View File

@ -64,25 +64,30 @@ try {
$taxis_stmt = $pdo->query("SELECT id, matricula, modelo FROM taxis ORDER BY matricula"); $taxis_stmt = $pdo->query("SELECT id, matricula, modelo FROM taxis ORDER BY matricula");
$taxis = $taxis_stmt->fetchAll(PDO::FETCH_ASSOC); $taxis = $taxis_stmt->fetchAll(PDO::FETCH_ASSOC);
// Fetch all locations
$stmt = $pdo->query("SELECT lt.id, t.matricula, t.modelo, lt.latitud, lt.longitud, lt.ultima_actualizacion
FROM localizacion_taxis lt
JOIN taxis t ON lt.id_taxi = t.id
ORDER BY lt.ultima_actualizacion DESC");
$localizaciones = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) { } catch (PDOException $e) {
die("Error de base de datos: " . $e->getMessage()); die("Error de base de datos: " . $e->getMessage());
} }
?> ?>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<div class="container-fluid px-4"> <div class="container-fluid px-4">
<h1 class="mt-4">Localización de Taxis</h1> <h1 class="mt-4">Localización de Taxis en Tiempo Real</h1>
<ol class="breadcrumb mb-4"> <ol class="breadcrumb mb-4">
<li class="breadcrumb-item"><a href="index.php">Dashboard</a></li> <li class="breadcrumb-item"><a href="index.php">Dashboard</a></li>
<li class="breadcrumb-item active">Localización</li> <li class="breadcrumb-item active">Localización</li>
</ol> </ol>
<div class="card mb-4">
<div class="card-header">
<i class="fas fa-map-marked-alt me-1"></i>
Mapa de Taxis
</div>
<div class="card-body">
<div id="map" style="height: 500px;"></div>
</div>
</div>
<div class="row"> <div class="row">
<div class="col-xl-6"> <div class="col-xl-6">
<div class="card mb-4"> <div class="card mb-4">
@ -150,47 +155,61 @@ try {
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="card mb-4"> <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<div class="card-header"> <script>
<i class="fas fa-map-marker-alt me-1"></i> document.addEventListener('DOMContentLoaded', function () {
Últimas Localizaciones Registradas // Coordenadas iniciales para centrar el mapa (ej. Madrid)
</div> const initialCoords = [40.416775, -3.703790];
<div class="card-body"> const map = L.map('map').setView(initialCoords, 12);
<table id="datatablesSimple" class="table table-striped">
<thead> L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
<tr> maxZoom: 19,
<th>ID</th> attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
<th>Taxi</th> }).addTo(map);
<th>Latitud</th>
<th>Longitud</th> let markers = {};
<th>Última Actualización</th>
</tr> function updateMap() {
</thead> fetch('api.php')
<tbody> .then(response => response.json())
<?php if (!empty($localizaciones)): .then(data => {
foreach ($localizaciones as $localizacion): // Limpiar marcadores que ya no existen
?> Object.keys(markers).forEach(matricula => {
<tr> if (!data.find(taxi => taxi.matricula === matricula)) {
<td><?php echo htmlspecialchars($localizacion['id']); ?></td> map.removeLayer(markers[matricula]);
<td><?php echo htmlspecialchars($localizacion['matricula'] . ' (' . $localizacion['modelo'] . ')'); ?></td> delete markers[matricula];
<td><?php echo htmlspecialchars($localizacion['latitud']); ?></td> }
<td><?php echo htmlspecialchars($localizacion['longitud']); ?></td> });
<td><?php echo htmlspecialchars($localizacion['ultima_actualizacion']); ?></td>
</tr> data.forEach(taxi => {
<?php const lat = parseFloat(taxi.latitud);
endforeach; const lon = parseFloat(taxi.longitud);
else: const matricula = taxi.matricula;
?>
<tr> if (!isNaN(lat) && !isNaN(lon)) {
<td colspan="5" class="text-center">No hay localizaciones registradas.</td> const popupContent = `<b>Taxi:</b> ${matricula}<br><b>Modelo:</b> ${taxi.modelo || 'N/A'}<br><b>Última vez:</b> ${taxi.ultima_actualizacion}`;
</tr>
<?php endif; ?> if (markers[matricula]) {
</tbody> markers[matricula].setLatLng([lat, lon]).setPopupContent(popupContent);
</table> } else {
</div> markers[matricula] = L.marker([lat, lon]).addTo(map)
</div> .bindPopup(popupContent);
</div> }
}
});
})
.catch(error => console.error('Error al cargar las localizaciones:', error));
}
// Actualizar el mapa cada 5 segundos
setInterval(updateMap, 5000);
// Carga inicial
updateMap();
});
</script>
<?php <?php
require_once 'footer.php'; require_once 'footer.php';