Auto commit: 2025-11-24T22:27:36.668Z
This commit is contained in:
parent
c862b7dabc
commit
909621e9be
17
api.php
Normal file
17
api.php
Normal 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()]);
|
||||||
|
}
|
||||||
|
?>
|
||||||
115
localizacion.php
115
localizacion.php
@ -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: '© <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';
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user