2022-07-05 21:57:21 +00:00
|
|
|
|
import network from "../data/network.json";
|
|
|
|
|
import * as simulation from "../data/simulation.js";
|
2021-05-14 22:43:45 +00:00
|
|
|
|
import * as map from "./map/index.js";
|
2020-07-25 16:05:43 +00:00
|
|
|
|
|
2020-07-27 19:01:36 +00:00
|
|
|
|
// Run courses simulation
|
|
|
|
|
const coursesSimulation = simulation.start();
|
2021-05-23 14:47:15 +00:00
|
|
|
|
let selectedCourse = null;
|
2020-07-27 19:01:36 +00:00
|
|
|
|
|
2021-05-15 10:38:24 +00:00
|
|
|
|
window.__courses = coursesSimulation.courses;
|
|
|
|
|
window.__network = network;
|
|
|
|
|
|
2021-05-11 19:39:24 +00:00
|
|
|
|
// Create display panel
|
|
|
|
|
const panel = document.querySelector("#panel");
|
|
|
|
|
|
2020-07-27 19:01:36 +00:00
|
|
|
|
const displayTime = date => [
|
|
|
|
|
date.getHours(),
|
|
|
|
|
date.getMinutes(),
|
|
|
|
|
date.getSeconds()
|
2020-07-27 19:21:07 +00:00
|
|
|
|
].map(number => number.toString().padStart(2, "0")).join(":");
|
2020-07-27 19:01:36 +00:00
|
|
|
|
|
2021-05-14 22:43:45 +00:00
|
|
|
|
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`;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
2020-07-27 19:01:36 +00:00
|
|
|
|
setInterval(() => {
|
|
|
|
|
let html = `
|
|
|
|
|
<dl>
|
|
|
|
|
<dt>Heure actuelle</dt>
|
|
|
|
|
<dd>${displayTime(new Date())}</dd>
|
|
|
|
|
</dl>
|
|
|
|
|
`;
|
|
|
|
|
|
2021-05-23 14:47:15 +00:00
|
|
|
|
if (selectedCourse !== null && selectedCourse in coursesSimulation.courses) {
|
|
|
|
|
const course = coursesSimulation.courses[selectedCourse];
|
2020-07-27 19:01:36 +00:00
|
|
|
|
|
2020-07-27 21:48:10 +00:00
|
|
|
|
const stopToHTML = stopId => stopId in network.stops ?
|
|
|
|
|
network.stops[stopId].properties.name :
|
|
|
|
|
'<em>Arrêt inconnu</em>';
|
2020-07-27 19:01:36 +00:00
|
|
|
|
|
|
|
|
|
const passingsToHTML = passings => passings.map(([stopId, time]) => `
|
|
|
|
|
<tr>
|
|
|
|
|
<td>${stopToHTML(stopId)}</td>
|
|
|
|
|
<td>${displayTime(new Date(time))}</td>
|
|
|
|
|
</tr>
|
2020-07-27 19:21:07 +00:00
|
|
|
|
`).join("\n");
|
2020-07-27 19:01:36 +00:00
|
|
|
|
|
2021-05-14 22:43:45 +00:00
|
|
|
|
const state = (
|
|
|
|
|
course.traveledDistance === 0 && course.speed === 0
|
|
|
|
|
? "stopped" : "moving"
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
let prevPassings = course.prevPassings;
|
|
|
|
|
|
|
|
|
|
if (state === "moving") {
|
|
|
|
|
prevPassings = prevPassings.concat([[course.departureStop, course.departureTime]]);
|
|
|
|
|
}
|
|
|
|
|
|
2020-07-27 19:01:36 +00:00
|
|
|
|
html += `
|
|
|
|
|
<dl>
|
|
|
|
|
<dt>ID</dt>
|
2021-05-23 14:47:15 +00:00
|
|
|
|
<dd>${selectedCourse}</dd>
|
2020-07-27 19:01:36 +00:00
|
|
|
|
|
|
|
|
|
<dt>Ligne</dt>
|
|
|
|
|
<dd>${course.line}</dd>
|
|
|
|
|
|
|
|
|
|
<dt>Destination</dt>
|
|
|
|
|
<dd>${stopToHTML(course.finalStop)}</dd>
|
|
|
|
|
|
|
|
|
|
<dt>État</dt>
|
2021-05-14 22:43:45 +00:00
|
|
|
|
<dd>${state === "moving"
|
2020-07-27 19:21:07 +00:00
|
|
|
|
? `Entre ${stopToHTML(course.departureStop)}
|
|
|
|
|
et ${stopToHTML(course.arrivalStop)}`
|
2021-05-14 22:43:45 +00:00
|
|
|
|
: `À l’arrêt ${stopToHTML(course.departureStop)}`}</dd>
|
2020-07-27 19:01:36 +00:00
|
|
|
|
|
2021-05-14 22:43:45 +00:00
|
|
|
|
${state === "moving" ? `
|
2020-07-27 19:01:36 +00:00
|
|
|
|
<dt>Arrivée dans</dt>
|
2021-05-14 22:43:45 +00:00
|
|
|
|
<dd>${timeToHTML(course.arrivalTime - 10000)}</dd>
|
2020-07-27 19:01:36 +00:00
|
|
|
|
|
|
|
|
|
<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>
|
2021-05-14 22:43:45 +00:00
|
|
|
|
<dd>${timeToHTML(course.departureTime)}</dd>
|
2020-07-27 19:01:36 +00:00
|
|
|
|
`}
|
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
|
|
<h2>Arrêts précédents</h2>
|
2021-05-14 22:43:45 +00:00
|
|
|
|
<table>${passingsToHTML(prevPassings)}</table>
|
2020-07-27 19:01:36 +00:00
|
|
|
|
|
|
|
|
|
<h2>Arrêts suivants</h2>
|
|
|
|
|
<table>${passingsToHTML(course.nextPassings)}</table>
|
|
|
|
|
`;
|
|
|
|
|
}
|
|
|
|
|
|
2021-05-11 19:39:24 +00:00
|
|
|
|
panel.innerHTML = html;
|
2020-07-27 19:01:36 +00:00
|
|
|
|
}, 1000);
|
|
|
|
|
|
|
|
|
|
// Create the network and courses map
|
2021-05-11 09:02:18 +00:00
|
|
|
|
map.create(/* map = */ "map", coursesSimulation, courses => {
|
2021-05-23 14:47:15 +00:00
|
|
|
|
const index = courses.indexOf(selectedCourse);
|
|
|
|
|
|
2021-05-11 09:02:18 +00:00
|
|
|
|
if (courses.length === 0) {
|
2021-05-23 14:47:15 +00:00
|
|
|
|
selectedCourse = null;
|
|
|
|
|
} else if (index === -1) {
|
|
|
|
|
selectedCourse = courses[0];
|
2021-05-11 09:02:18 +00:00
|
|
|
|
} else {
|
2021-05-23 14:47:15 +00:00
|
|
|
|
selectedCourse = courses[(index + 1) % courses.length];
|
2021-05-11 09:02:18 +00:00
|
|
|
|
}
|
2020-07-27 19:01:36 +00:00
|
|
|
|
});
|