mobility-toolbox-js 1.5.0-beta.2 → 1.5.1

package/common/layers/Layer.js

@@ -367,7 +367,10 @@ export default class Layer extends Observable {
 
     return this.getFeatureInfoAtCoordinate(evt.coordinate)
       .then((featureInfo) => {
-        this.clickCallbacks.forEach((callback) => callback(featureInfo));
+        const { features, layer, coordinate } = featureInfo;
+        this.clickCallbacks.forEach((callback) =>
+          callback(features, layer, coordinate),
+        );
         return featureInfo;
       })
       .catch(() => {
@@ -422,7 +425,10 @@ export default class Layer extends Observable {
 
     return this.getFeatureInfoAtCoordinate(evt.coordinate)
       .then((featureInfo) => {
-        this.hoverCallbacks.forEach((callback) => callback(featureInfo));
+        const { features, layer, coordinate } = featureInfo;
+        this.hoverCallbacks.forEach((callback) =>
+          callback({ features, layer, coordinate }),
+        );
         return featureInfo;
       })
       .catch(() => {

package/common/mixins/TrajservLayerMixin.js

@@ -302,7 +302,6 @@ const TrajservLayerMixin = (TrackerLayer) =>
     }
 
     stop() {
-      this.journeyId = null;
       this.stopUpdateTrajectories();
       this.abortFetchTrajectories();
       super.stop();
@@ -336,20 +335,78 @@ const TrajservLayerMixin = (TrackerLayer) =>
      * @private
      * @override
      */
-    onFeatureClick(featureInfo) {
-      const {
-        features: [feature],
-      } = featureInfo;
+    onFeatureClick(features, layer, coordinate) {
+      const [feature] = features;
       if (feature) {
         /** @ignore */
         this.selectedVehicleId = feature.get('id');
         /** @ignore */
         this.journeyId = feature.get('journeyIdentifier');
-        this.updateTrajectoryStations(this.selectedVehicleId);
+        this.highlightTrajectory();
       } else {
         this.selectedVehicleId = null;
+        this.journeyId = null;
       }
-      super.onFeatureClick(featureInfo);
+      super.onFeatureClick(features, layer, coordinate);
+    }
+
+    /**
+     * Highlight the trajectory of journey.
+     * @private
+     */
+    highlightTrajectory() {
+      const { selectedVehicleId, journeyId } = this;
+      const promises = [
+        // Fetch stations information with a trajectory id.
+        this.api.fetchTrajectoryStations(
+          this.getParams({
+            id: selectedVehicleId,
+            time: getUTCTimeString(new Date()),
+          }),
+        ),
+        // Full trajectory.
+        this.api.fetchTrajectoryById(
+          this.getParams({
+            id: journeyId,
+            time: getUTCTimeString(new Date()),
+          }),
+        ),
+      ];
+
+      Promise.all(promises)
+        .then(([trajStations, fullTraj]) => {
+          const stationsCoords = [];
+          if (trajStations) {
+            trajStations.stations.forEach((station) => {
+              stationsCoords.push(station.coordinates);
+            });
+          }
+
+          if (fullTraj) {
+            const { p: multiLine, t, c: color } = fullTraj;
+            const lineCoords = [];
+            multiLine.forEach((line) => {
+              line.forEach((point) => {
+                lineCoords.push([point.x, point.y]);
+              });
+            });
+
+            const lineColor = color ? `#${color}` : getBgColor(t);
+            // Don't allow white lines, use red instead.
+            const vehiculeColor = /#ffffff/i.test(lineColor)
+              ? '#ff0000'
+              : lineColor;
+
+            this.drawFullTrajectory(
+              stationsCoords,
+              lineCoords,
+              this.useDelayStyle ? '#a0a0a0' : vehiculeColor,
+            );
+          }
+        })
+        .catch(() => {
+          this.drawFullTrajectory();
+        });
     }
 
     updateFilters() {
@@ -370,14 +427,6 @@ const TrajservLayerMixin = (TrackerLayer) =>
       }
     }
 
-    updateTrajectoryStations(trajId) {
-      const params = this.getParams({
-        id: trajId,
-        time: getUTCTimeString(new Date()),
-      });
-      return this.api.fetchTrajectoryStations(params);
-    }
-
     getParams(extraParams = {}) {
       // The 5 seconds more are used as a buffer if the request takes too long.
       const requestIntervalInMs = (this.requestIntervalSeconds + 5) * 1000;
@@ -464,6 +513,16 @@ const TrajservLayerMixin = (TrackerLayer) =>
         });
     }
 
+    /**
+     * Draw the trajectory as a line with points for each stop.
+     *
+     * @param {Array} stationsCoords Array of station coordinates in EPSG:4326.
+     * @param {Array<ol/coordinate~Coordinate>} lineCoords A list of coordinates in EPSG:3857.
+     * @param {string} color The color of the line.
+     * @private
+     */
+    drawFullTrajectory(stationsCoords, lineCoords, color) {}
+
     /**
      * Define the style of the vehicle.
      *

package/common/mixins/TralisLayerMixin.js

@@ -147,17 +147,15 @@ const TralisLayerMixin = (TrackerLayer) =>
      * @private
      * @override
      */
-    onFeatureClick(featureInfo) {
-      const {
-        features: [feature],
-      } = featureInfo;
+    onFeatureClick(features, layer, coordinate) {
+      const [feature] = features;
       if (feature) {
         /** @ignore */
         this.selectedVehicleId = feature.get('train_id');
       } else {
         this.selectedVehicleId = null;
       }
-      super.onFeatureClick(featureInfo);
+      super.onFeatureClick(features, layer, coordinate);
     }
 
     onMessage(data) {