101 lines
3.6 KiB
HTML
101 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Stations carburant</title>
|
|
|
|
</head>
|
|
<body>
|
|
<h1>Stations autour de moi</h1>
|
|
<input type="range" min="5" max="150" value="10" id="distanceSlider">
|
|
<span id="distanceValue">10 km</span>
|
|
<button onclick="getLocation()">Localiser</button>
|
|
<table id="stationsTable" border="1">
|
|
<thead>
|
|
<tr>
|
|
<th onclick="sortTable(0)">Nom</th>
|
|
<th onclick="sortTable(1)">Distance</th>
|
|
<th onclick="sortTable(2)">Diesel</th>
|
|
<th onclick="sortTable(3)">E85</th>
|
|
<th onclick="sortTable(4)">E5</th>
|
|
<th onclick="sortTable(3)">SP98</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
|
|
<pre id="result"></pre>
|
|
|
|
<script>
|
|
const slider = document.getElementById("distanceSlider");
|
|
const value = document.getElementById("distanceValue");
|
|
|
|
slider.oninput = () => {
|
|
value.innerText = slider.value + " km";
|
|
};
|
|
|
|
async function getLocation() {
|
|
if (!navigator.geolocation) {
|
|
alert("Géolocalisation non supportée");
|
|
return;
|
|
}
|
|
const perm = await navigator.permissions.query({ name: "geolocation" });
|
|
|
|
if (perm.state === "denied") {
|
|
alert("Veuillez autoriser la localisation dans les paramètres du navigateur");
|
|
return;
|
|
}
|
|
|
|
navigator.geolocation.getCurrentPosition(async (pos) => {
|
|
const lat = pos.coords.latitude;
|
|
const lon = pos.coords.longitude;
|
|
const distance = document.getElementById("distanceSlider").value;
|
|
|
|
try {
|
|
const res = await fetch(`/carburant?lat=${lat}&lon=${lon}&dist=${distance}`);
|
|
const data = await res.json();
|
|
const tbody = document.querySelector("#stationsTable tbody");
|
|
tbody.innerHTML = "";
|
|
|
|
data.forEach(s => {
|
|
const row = `
|
|
<tr>
|
|
<td>${s.nom}</td>
|
|
<td>${s.distance.toFixed(2)} km</td>
|
|
<td>${s.diesel ?? "-"}</td>
|
|
<td>${s.e85 ?? "-"}</td>
|
|
<td>${s.E5 ?? "-"}</td>
|
|
<td>${s.sp98 ?? "-"}</td>
|
|
</tr>`;
|
|
tbody.innerHTML += row;
|
|
});
|
|
|
|
//document.getElementById("result").textContent =
|
|
// JSON.stringify(data, null, 2);
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
}, (err) => {
|
|
alert("Erreur géolocalisation: " + err.message);
|
|
});
|
|
function sortTable(colIndex) {
|
|
const table = document.getElementById("stationsTable");
|
|
const rows = Array.from(table.rows).slice(1);
|
|
|
|
const asc = table.getAttribute("data-sort") !== "asc";
|
|
table.setAttribute("data-sort", asc ? "asc" : "desc");
|
|
|
|
rows.sort((a, b) => {
|
|
const A = a.cells[colIndex].innerText;
|
|
const B = b.cells[colIndex].innerText;
|
|
|
|
return asc
|
|
? A.localeCompare(B, undefined, { numeric: true })
|
|
: B.localeCompare(A, undefined, { numeric: true });
|
|
});
|
|
|
|
rows.forEach(r => table.appendChild(r));
|
|
}
|
|
}</script>
|
|
</body>
|
|
</html> |