tracktracker/src/front/index.js

import network from "../tam/network.json";
import * as simulation from "../tam/simulation.js";
import * as map from "./map/index.js";

// Run courses simulation
const coursesSimulation = simulation.start();
let courseId = null;

window.__courses = coursesSimulation.courses;
window.__network = network;

// 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(":");

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`;
    }
};

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 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");

        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 += `
            <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>${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;
}, 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];
    }
});