109 lines
3.3 KiB
JavaScript
109 lines
3.3 KiB
JavaScript
import network from "../tam/network.json";
|
||
import * as simulation from "../tam/simulation";
|
||
import * as map from "./map/index";
|
||
|
||
// Run courses simulation
|
||
const coursesSimulation = simulation.start();
|
||
let courseId = null;
|
||
|
||
// Create display panel
|
||
const panel = document.querySelector("#panel");
|
||
|
||
const displayTime = date => [
|
||
date.getHours(),
|
||
date.getMinutes(),
|
||
date.getSeconds()
|
||
].map(number => number.toString().padStart(2, "0")).join(":");
|
||
|
||
setInterval(() => {
|
||
let html = `
|
||
<dl>
|
||
<dt>Heure actuelle</dt>
|
||
<dd>${displayTime(new Date())}</dd>
|
||
</dl>
|
||
`;
|
||
|
||
if (courseId !== null && courseId in coursesSimulation.courses) {
|
||
const course = coursesSimulation.courses[courseId];
|
||
|
||
const timeToHTML = time => Math.ceil((time - Date.now()) / 1000);
|
||
|
||
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>${displayTime(new Date(time))}</td>
|
||
</tr>
|
||
`).join("\n");
|
||
|
||
html += `
|
||
<dl>
|
||
<dt>ID</dt>
|
||
<dd>${courseId}</dd>
|
||
|
||
<dt>Ligne</dt>
|
||
<dd>${course.line}</dd>
|
||
|
||
<dt>Destination</dt>
|
||
<dd>${stopToHTML(course.finalStop)}</dd>
|
||
|
||
<dt>État</dt>
|
||
<dd>${course.state === "moving"
|
||
? `Entre ${stopToHTML(course.departureStop)}
|
||
et ${stopToHTML(course.arrivalStop)}`
|
||
: `À l’arrêt ${stopToHTML(course.currentStop)}`}</dd>
|
||
|
||
${course.state === "moving" ? `
|
||
<dt>Arrivée dans</dt>
|
||
<dd>${timeToHTML(course.arrivalTime)} s</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)} s</dd>
|
||
`}
|
||
</dl>
|
||
|
||
<h2>Arrêts précédents</h2>
|
||
<table>${passingsToHTML(course.prevPassings)}</table>
|
||
|
||
<h2>Arrêts suivants</h2>
|
||
<table>${passingsToHTML(course.nextPassings)}</table>
|
||
`;
|
||
}
|
||
|
||
panel.innerHTML = html;
|
||
}, 1000);
|
||
|
||
// Create the network and courses map
|
||
map.create(/* map = */ "map", coursesSimulation, courses => {
|
||
if (courses.length === 0) {
|
||
// If no course were clicked, show nothing
|
||
courseId = null;
|
||
} else {
|
||
// If several courses were clicked, show the one departing the soonest,
|
||
// or the first moving one
|
||
courses.sort((id1, id2) => {
|
||
const course1 = coursesSimulation.courses[id1];
|
||
const course2 = coursesSimulation.courses[id2];
|
||
|
||
if (course1.state === "moving") {
|
||
return -1;
|
||
} else if (course2.state === "moving") {
|
||
return 1;
|
||
} else {
|
||
return course1.departureTime - course2.departureTime;
|
||
}
|
||
});
|
||
|
||
courseId = courses[0];
|
||
}
|
||
});
|