142 lines
4.0 KiB
JavaScript
142 lines
4.0 KiB
JavaScript
import network from "../data/network.json";
|
||
import * as simulation from "../data/simulation.js";
|
||
import Map from "./map/index.js";
|
||
|
||
// Run courses simulation
|
||
const simstate = simulation.start();
|
||
|
||
// Create display panel
|
||
const panel = document.querySelector("#panel");
|
||
|
||
const timeFormat = new Intl.DateTimeFormat("fr-FR", {
|
||
timeZone: "Europe/Paris",
|
||
timeStyle: "medium",
|
||
});
|
||
|
||
const timeToHTML = time => {
|
||
const delta = Math.ceil((time - Date.now()) / 1000);
|
||
|
||
if (delta <= 0) {
|
||
return `Imminent`;
|
||
} else if (delta < 60) {
|
||
return `${delta} s`;
|
||
} else {
|
||
return `${Math.floor(delta / 60)} min ${delta % 60} s`;
|
||
}
|
||
};
|
||
|
||
const updatePanel = () => {
|
||
const vehicleCount = Object.values(simstate.courses).length;
|
||
const movingVehicles = Object.values(simstate.courses).filter(
|
||
course => course.properties.speed > 0
|
||
).length;
|
||
|
||
let html = `
|
||
<dl>
|
||
<dt>Heure locale</dt>
|
||
<dd>${timeFormat.format(Date.now())}</dd>
|
||
</dl>
|
||
<dl>
|
||
<dt>Véhicules sur la carte</dt>
|
||
<dd>
|
||
${movingVehicles} en mouvement,
|
||
${vehicleCount - movingVehicles} à l’arrêt
|
||
</dd>
|
||
</dl>
|
||
`;
|
||
|
||
if (map.selectedCourse !== null && map.selectedCourse in simstate.courses) {
|
||
const course = simstate.courses[map.selectedCourse].properties;
|
||
|
||
const stopToHTML = stopId => stopId in network.stops ?
|
||
network.stops[stopId].properties.name :
|
||
'<em>Arrêt inconnu</em>';
|
||
|
||
const passingsToHTML = passings => passings.map(([stopId, time]) => `
|
||
<tr>
|
||
<td>${stopToHTML(stopId)}</td>
|
||
<td>${timeFormat.format(time)}</td>
|
||
</tr>
|
||
`).join("\n");
|
||
|
||
const state = (
|
||
course.traveledDistance === 0 && course.speed === 0
|
||
? "stopped" : "moving"
|
||
);
|
||
|
||
let prevPassings = course.prevPassings;
|
||
|
||
if (state === "moving") {
|
||
prevPassings = prevPassings.concat([[course.departureStop, course.departureTime]]);
|
||
}
|
||
|
||
html += `
|
||
<h2>Véhicule</h2>
|
||
<dl>
|
||
<dt>ID</dt>
|
||
<dd>${map.selectedCourse}</dd>
|
||
|
||
<dt>Ligne</dt>
|
||
<dd>${course.line}</dd>
|
||
|
||
<dt>Destination</dt>
|
||
<dd>${stopToHTML(course.finalStop)}</dd>
|
||
|
||
<dt>État</dt>
|
||
<dd>${state === "moving"
|
||
? `Entre ${stopToHTML(course.departureStop)}
|
||
et ${stopToHTML(course.arrivalStop)}`
|
||
: `À l’arrêt ${stopToHTML(course.departureStop)}`}</dd>
|
||
|
||
${state === "moving" ? `
|
||
<dt>Arrivée dans</dt>
|
||
<dd>${timeToHTML(course.arrivalTime - 10000)}</dd>
|
||
|
||
<dt>Distance parcourue</dt>
|
||
<dd>${Math.ceil(course.traveledDistance)} m</dd>
|
||
|
||
<dt>Vitesse</dt>
|
||
<dd>${Math.ceil(course.speed * 3600)} km/h</dd>
|
||
` : `
|
||
<dt>Départ dans</dt>
|
||
<dd>${timeToHTML(course.departureTime)}</dd>
|
||
`}
|
||
</dl>
|
||
|
||
<h2>Arrêts précédents</h2>
|
||
<table>${passingsToHTML(prevPassings)}</table>
|
||
|
||
<h2>Arrêts suivants</h2>
|
||
<table>${passingsToHTML(course.nextPassings)}</table>
|
||
`;
|
||
}
|
||
|
||
panel.innerHTML = html;
|
||
};
|
||
|
||
setInterval(updatePanel, 1000);
|
||
|
||
const map = new Map("map", simstate, {
|
||
onVehicleClick(courses) {
|
||
courses = [...courses];
|
||
courses.sort();
|
||
|
||
const index = courses.indexOf(map.selectedCourse);
|
||
|
||
if (courses.length === 0) {
|
||
map.select(null);
|
||
} else if (index === -1) {
|
||
map.select(courses[0]);
|
||
} else {
|
||
map.select(courses[(index + 1) % courses.length]);
|
||
}
|
||
|
||
updatePanel();
|
||
}
|
||
});
|
||
|
||
// Reference as globals to facilitate debugging
|
||
window.__map = map;
|
||
window.__simstate = simstate.courses;
|
||
window.__network = network;
|