From d9869ce2f76ab7382e11e8812ffb7e5debfd4689 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matt=C3=A9o=20Delabre?= Date: Mon, 27 Jul 2020 21:01:36 +0200 Subject: [PATCH] Show course informations in side pane --- src/front/index.html | 18 +++++++-- src/front/index.js | 85 +++++++++++++++++++++++++++++++++++++++++- src/front/map/index.js | 48 ++++-------------------- 3 files changed, 105 insertions(+), 46 deletions(-) diff --git a/src/front/index.html b/src/front/index.html index 3741fb4..00d2f7c 100644 --- a/src/front/index.html +++ b/src/front/index.html @@ -7,21 +7,31 @@ +
diff --git a/src/front/index.js b/src/front/index.js index 3771d79..dd1cd03 100644 --- a/src/front/index.js +++ b/src/front/index.js @@ -1,6 +1,89 @@ // eslint-disable-next-line node/no-extraneous-require require("regenerator-runtime/runtime"); +const network = require("../tam/network.json"); +const simulation = require("../tam/simulation"); const map = require("./map/index.js"); -map.create(/* map = */ "map"); +// Run courses simulation +const coursesSimulation = simulation.start(); +global.courses = coursesSimulation.courses; + +const informations = document.querySelector("#informations"); +let courseId = null; + +const displayTime = date => [ + date.getHours(), + date.getMinutes(), + date.getSeconds() +].map(number => number.toString().padStart(2, '0')).join(':'); + +setInterval(() => { + let html = ` +
+
Heure actuelle
+
${displayTime(new Date())}
+
+ `; + + if (courseId !== null && courseId in coursesSimulation.courses) { + const course = coursesSimulation.courses[courseId]; + + const timeToHTML = time => Math.ceil((time - Date.now()) / 1000); + + const stopToHTML = stopId => network.stops[stopId].properties.name; + + const passingsToHTML = passings => passings.map(([stopId, time]) => ` + + ${stopToHTML(stopId)} + ${displayTime(new Date(time))} + + `).join('\n'); + + html += ` +
+
ID
+
${courseId}
+ +
Ligne
+
${course.line}
+ +
Destination
+
${stopToHTML(course.finalStop)}
+ +
État
+
${course.state === 'moving' + ? `Entre ${stopToHTML(course.departureStop)} + et ${stopToHTML(course.arrivalStop)}` + : `À l’arrêt ${stopToHTML(course.currentStop)}`}
+ + ${course.state === 'moving' ? ` +
Arrivée dans
+
${timeToHTML(course.arrivalTime)} s
+ +
Distance parcourue
+
${Math.ceil(course.traveledDistance)} m
+ +
Vitesse
+
${Math.ceil(course.speed * 3600)} km/h
+ ` : ` +
Départ dans
+
${timeToHTML(course.departureTime)} s
+ `} +
+ +

Arrêts précédents

+ ${passingsToHTML(course.prevPassings)}
+ +

Arrêts suivants

+ ${passingsToHTML(course.nextPassings)}
+ `; + } + + informations.innerHTML = html; +}, 1000); + +// Create the network and courses map +map.create(/* map = */ "map", coursesSimulation, course => { + courseId = course; +}); diff --git a/src/front/map/index.js b/src/front/map/index.js index 0051f73..224040a 100644 --- a/src/front/map/index.js +++ b/src/front/map/index.js @@ -9,7 +9,6 @@ const tilesLayers = require("./tiles"); const networkLayers = require("./network"); const { sizes, makeBorderColor, makeCourseColor } = require("./common"); const network = require("../../tam/network.json"); -const simulation = require("../../tam/simulation"); const courseStyles = {}; @@ -59,7 +58,7 @@ const getCourseStyle = lineColor => { return courseStyles[lineColor]; }; -const create = target => { +const create = (target, coursesSimulation, onClick) => { const view = new View({ center: proj.fromLonLat([3.88, 43.605]), zoom: 14, @@ -78,32 +77,9 @@ const create = target => { const stopsLayer = map.getLayers().item(3); - // Run courses simulation - const simulInstance = simulation.start(); - - // Course on which the view is currently focused - let focusedCourse = null; - - const startFocus = courseId => { - if (courseId in simulInstance.courses) { - const course = simulInstance.courses[courseId]; - - view.animate({ - center: course.position, - duration: 500 - }, () => { - focusedCourse = courseId; - }); - } - }; - - const stopFocus = () => { - focusedCourse = null; - }; - // Draw courses directly on the map map.on("postcompose", ev => { - simulInstance.update(); + coursesSimulation.update(); // The normal way to access a layer’s vector context is through the // `postrender` event of that layer. However, `postrender` is not @@ -121,7 +97,8 @@ const create = target => { const ctx = getVectorContext(ev); - for (const course of Object.values(simulInstance.courses)) { + for (const course of Object.values(coursesSimulation.courses)) { + const point = new Point(course.position); const color = network.lines[course.line].color; const style = getCourseStyle(color); @@ -131,14 +108,7 @@ const create = target => { ); ctx.setStyle(style); - - const point = new Point(course.position); - ctx.drawGeometry(point); - - if (course.id === focusedCourse) { - view.setCenter(course.position); - } } } @@ -149,22 +119,18 @@ const create = target => { map.on("singleclick", ev => { const mousePixel = map.getPixelFromCoordinate(ev.coordinate); - const maxDistance = sizes.courseSize + sizes.courseOuterBorder; + const maxDistance = sizes.courseSize + sizes.courseInnerBorder; - for (const course of Object.values(simulInstance.courses)) { + for (const course of Object.values(coursesSimulation.courses)) { const coursePixel = map.getPixelFromCoordinate(course.position); const dx = mousePixel[0] - coursePixel[0]; const dy = mousePixel[1] - coursePixel[1]; const distance = dx * dx + dy * dy; if (distance <= maxDistance * maxDistance) { - startFocus(course.id); - return; + onClick(course.id); } } - - // Clicking anywhere else resets focus - stopFocus(); }); return map;