mobility-toolbox-js 1.6.0-beta.7 → 1.6.0-beta.8

package/common/mixins/TrackerLayerMixin.js

@@ -3,8 +3,15 @@
 import { buffer, containsCoordinate } from 'ol/extent';
 import { unByKey } from 'ol/Observable';
 import Feature from 'ol/Feature';
+import qs from 'query-string';
 import Tracker from '../Tracker';
 import { timeSteps } from '../trackerConfig';
+import createFilters from '../utils/createTrackerFilters';
+
+/* Permalink parameter used to filters vehicles */
+const LINE_FILTER = 'publishedlinename';
+const ROUTE_FILTER = 'tripnumber';
+const OPERATOR_FILTER = 'operator';
 
 /**
  * TrackerLayerInterface.
@@ -129,6 +136,13 @@ const TrackerLayerMixin = (Base) =>
         live,
       } = options;
 
+      let {
+        regexPublishedLineName,
+        publishedLineName,
+        tripNumber,
+        operator,
+      } = options;
+
       const initTrackerOptions = {
         pixelRatio: pixelRatio || window.devicePixelRatio || 1,
         interpolate,
@@ -314,6 +328,74 @@ const TrackerLayerMixin = (Base) =>
           default: false,
           writable: true,
         },
+
+        /**
+         * Filter properties used in combination with permalink parameters.
+         */
+        publishedLineName: {
+          get: () => {
+            return publishedLineName;
+          },
+          set: (newPublishedLineName) => {
+            publishedLineName = newPublishedLineName;
+            this.updateFilters();
+          },
+        },
+        tripNumber: {
+          get: () => {
+            return tripNumber;
+          },
+          set: (newTripNumber) => {
+            tripNumber = newTripNumber;
+            this.updateFilters();
+          },
+        },
+        operator: {
+          get: () => {
+            return operator;
+          },
+          set: (newOperator) => {
+            operator = newOperator;
+            this.updateFilters();
+          },
+        },
+        regexPublishedLineName: {
+          get: () => {
+            return regexPublishedLineName;
+          },
+          set: (newRegex) => {
+            regexPublishedLineName = newRegex;
+            this.updateFilters();
+          },
+        },
+
+        /**
+         * Style properties.
+         */
+        delayDisplay: {
+          value: options.delayDisplay || 300000,
+          writable: true,
+        },
+        delayOutlineColor: {
+          value: options.delayOutlineColor || '#000000',
+          writable: true,
+        },
+        useDelayStyle: {
+          value: options.useDelayStyle || false,
+          writable: true,
+        },
+
+        /**
+         * Debug properties.
+         */
+        // Not used anymore, but could be useful for debugging.
+        // showVehicleTraj: {
+        //   value:
+        //     options.showVehicleTraj !== undefined
+        //       ? options.showVehicleTraj
+        //       : true,
+        //   writable: true,
+        // },
       });
     }
 
@@ -375,6 +457,7 @@ const TrackerLayerMixin = (Base) =>
      */
     start() {
       this.stop();
+      this.updateFilters();
       this.tracker.setVisible(true);
       this.renderTrajectories();
       this.startUpdateTime();
@@ -587,10 +670,25 @@ const TrackerLayerMixin = (Base) =>
       const roundedZoom = Math.round(zoom);
       const timeStep = timeSteps[roundedZoom] || 25;
       const nextTick = Math.max(25, timeStep / this.speed);
-      console.log(`Next render in ${nextTick} ms.`);
+      // console.log(`Next render in ${nextTick} ms.`);
       return nextTick;
     }
 
+    /**
+     * Update filter provided by properties or permalink.
+     */
+    updateFilters() {
+      // Setting filters from the permalink if no values defined by the layer.
+      const parameters = qs.parse(window.location.search.toLowerCase());
+      // filter is the property in TrackerLayerMixin.
+      this.filter = createFilters(
+        this.publishedLineName || parameters[LINE_FILTER],
+        this.tripNumber || parameters[ROUTE_FILTER],
+        this.operator || parameters[OPERATOR_FILTER],
+        this.regexPublishedLineName,
+      );
+    }
+
     /**
      * @private
      */

package/common/mixins/TrajservLayerMixin.js

@@ -101,74 +101,6 @@ export class TrajservLayerInterface {
   defaultStyle(trajectory, viewState) {}
 }
 
-const LINE_FILTER = 'publishedlinename';
-const ROUTE_FILTER = 'tripnumber';
-const OPERATOR_FILTER = 'operator';
-
-/**
- * Create a array of filter functions based on some parameters.
- * @param {string} line
- * @param {string} route
- * @param {string} operator
- * @param {string} regexLine
- * @private
- */
-const createFilters = (line, route, operator, regexLine) => {
-  const filterList = [];
-
-  if (!line && !route && !operator && !regexLine) {
-    return null;
-  }
-
-  if (regexLine) {
-    const regexLineList =
-      typeof regexLine === 'string' ? [regexLine] : regexLine;
-    const lineFilter = (t) =>
-      regexLineList.some((tr) => new RegExp(tr, 'i').test(t.name));
-    filterList.push(lineFilter);
-  }
-
-  if (line) {
-    const lineFiltersList = typeof line === 'string' ? line.split(',') : line;
-    const lineList = lineFiltersList.map((l) =>
-      l.replace(/\s+/g, '').toUpperCase(),
-    );
-    const lineFilter = (l) =>
-      lineList.some((filter) => filter === l.name.toUpperCase());
-    filterList.push(lineFilter);
-  }
-
-  if (route) {
-    const routes = typeof route === 'string' ? route.split(',') : route;
-    const routeList = routes.map((item) => parseInt(item, 10));
-    const routeFilter = (item) => {
-      const routeId = parseInt(item.routeIdentifier.split('.')[0], 10);
-      return routeList.some((id) => id === routeId);
-    };
-    filterList.push(routeFilter);
-  }
-
-  if (operator) {
-    const operatorList = typeof operator === 'string' ? [operator] : operator;
-    const operatorFilter = (t) =>
-      operatorList.some((op) => new RegExp(op, 'i').test(t.operator));
-    filterList.push(operatorFilter);
-  }
-
-  if (!filterList.length) {
-    return null;
-  }
-
-  return (t) => {
-    for (let i = 0; i < filterList.length; i += 1) {
-      if (!filterList[i](t)) {
-        return false;
-      }
-    }
-    return true;
-  };
-};
-
 /**
  * Mixin for TrajservLayerInterface.
  *
@@ -185,12 +117,6 @@ const TrajservLayerMixin = (TrackerLayer) =>
      */
     defineProperties(options) {
       super.defineProperties(options);
-      let {
-        regexPublishedLineName,
-        publishedLineName,
-        tripNumber,
-        operator,
-      } = options;
 
       let requestIntervalSeconds = 3;
       let defaultApi;
@@ -205,25 +131,6 @@ const TrajservLayerMixin = (TrackerLayer) =>
         defaultApi = new TrajservAPI(apiOptions);
       }
       Object.defineProperties(this, {
-        showVehicleTraj: {
-          value:
-            options.showVehicleTraj !== undefined
-              ? options.showVehicleTraj
-              : true,
-          writable: true,
-        },
-        delayDisplay: {
-          value: options.delayDisplay || 300000,
-          writable: true,
-        },
-        delayOutlineColor: {
-          value: options.delayOutlineColor || '#000000',
-          writable: true,
-        },
-        useDelayStyle: {
-          value: options.useDelayStyle || false,
-          writable: true,
-        },
         requestIntervalSeconds: {
           get: () => {
             return requestIntervalSeconds;
@@ -238,42 +145,7 @@ const TrajservLayerMixin = (TrackerLayer) =>
             }
           },
         },
-        publishedLineName: {
-          get: () => {
-            return publishedLineName;
-          },
-          set: (newPublishedLineName) => {
-            publishedLineName = newPublishedLineName;
-            this.updateFilters();
-          },
-        },
-        tripNumber: {
-          get: () => {
-            return tripNumber;
-          },
-          set: (newTripNumber) => {
-            tripNumber = newTripNumber;
-            this.updateFilters();
-          },
-        },
-        operator: {
-          get: () => {
-            return operator;
-          },
-          set: (newOperator) => {
-            operator = newOperator;
-            this.updateFilters();
-          },
-        },
-        regexPublishedLineName: {
-          get: () => {
-            return regexPublishedLineName;
-          },
-          set: (newRegex) => {
-            regexPublishedLineName = newRegex;
-            this.updateFilters();
-          },
-        },
+
         api: {
           value: options.api || defaultApi,
         },
@@ -407,18 +279,6 @@ const TrajservLayerMixin = (TrackerLayer) =>
         });
     }
 
-    updateFilters() {
-      // Setting filters from the permalink if no values defined by the layer.
-      const parameters = qs.parse(window.location.search.toLowerCase());
-      // filter is the property in TrackerLayerMixin.
-      this.filter = createFilters(
-        this.publishedLineName || parameters[LINE_FILTER],
-        this.tripNumber || parameters[ROUTE_FILTER],
-        this.operator || parameters[OPERATOR_FILTER],
-        this.regexPublishedLineName,
-      );
-    }
-
     abortFetchTrajectories() {
       if (this.abortController) {
         this.abortController.abort();

package/common/mixins/TralisLayerMixin.js

@@ -164,6 +164,12 @@ const TralisLayerMixin = (TrackerLayer) =>
       if (!data.content) {
         return;
       }
+
+      // Temporary fix to avoid displaying old trains cached .
+      if (data.content.properties.mot) {
+        return;
+      }
+
       const feat = this.format.readFeature(data.content);
 
       feat.set('timeOffset', Date.now() - data.timestamp);

package/common/trackerConfig.js

@@ -12,19 +12,23 @@ const trackerRadiusMapping = {
 };
 
 /**
+ * Trajserv value: 'Tram',  'Subway / Metro / S-Bahn',  'Train', 'Bus', 'Ferry', 'Cable Car', 'Gondola', 'Funicular', 'Long distance bus', 'Rail',
+ * New endpoint use Rail instead of Train.
+ * New tracker values:  null, "tram", "subway", "rail", "bus", "ferry", "cablecar", "gondola", "funicular", "coach".
+ *
  * @ignore
  */
 export const types = [
-  'Tram',
-  'Subway / Metro / S-Bahn',
-  'Train',
-  'Bus',
-  'Ferry',
-  'Cable Car',
-  'Gondola',
-  'Funicular',
-  'Long distance bus',
-  'Rail', // New endpoint use Rail instead of Train.
+  /^Tram/i,
+  /^Subway( \/ Metro \/ S-Bahn)?/i,
+  /^Train/i,
+  /^Bus/i,
+  /^Ferry/i,
+  /^Cable ?Car/i,
+  /^Gondola/i,
+  /^Funicular/i,
+  /^(Long distance bus|coach)/i,
+  /^Rail/i, // New endpoint use Rail instead of Train.
 ];
 
 /**
@@ -89,10 +93,9 @@ export const timeSteps = [
 /**
  * @ignore
  */
-const getTypeIndex = (type) => {
+export const getTypeIndex = (type) => {
   if (typeof type === 'string') {
-    const matched = types.find((t) => new RegExp(type).test(t));
-    return types.indexOf(matched);
+    return types.findIndex((t) => t.test(type));
   }
   return type;
 };

package/common/trackerConfig.test.js

@@ -0,0 +1,38 @@
+import { getTypeIndex } from './trackerConfig';
+
+describe('trackerConfig', () => {
+  describe('#getTypeIndex()', () => {
+    test("retrurn the type is it's not a string", () => {
+      const obj = { foo: 'foo' };
+      expect(getTypeIndex(obj)).toBe(obj);
+      expect(getTypeIndex(0)).toBe(0);
+      expect(getTypeIndex(null)).toBe(null);
+      expect(getTypeIndex(undefined)).toBe(undefined);
+    });
+
+    test('find good index for old trajserv values', () => {
+      expect(getTypeIndex('Tram')).toBe(0);
+      expect(getTypeIndex('Subway / Metro / S-Bahn')).toBe(1);
+      expect(getTypeIndex('Train')).toBe(2);
+      expect(getTypeIndex('Bus')).toBe(3);
+      expect(getTypeIndex('Ferry')).toBe(4);
+      expect(getTypeIndex('Cable Car')).toBe(5);
+      expect(getTypeIndex('Gondola')).toBe(6);
+      expect(getTypeIndex('Funicular')).toBe(7);
+      expect(getTypeIndex('Long distance bus')).toBe(8);
+      expect(getTypeIndex('Rail')).toBe(9);
+    });
+
+    test('find good index for new tracker values', () => {
+      expect(getTypeIndex('tram')).toBe(0);
+      expect(getTypeIndex('subway')).toBe(1);
+      expect(getTypeIndex('bus')).toBe(3);
+      expect(getTypeIndex('ferry')).toBe(4);
+      expect(getTypeIndex('cablecar')).toBe(5);
+      expect(getTypeIndex('gondola')).toBe(6);
+      expect(getTypeIndex('funicular')).toBe(7);
+      expect(getTypeIndex('coach')).toBe(8);
+      expect(getTypeIndex('rail')).toBe(9);
+    });
+  });
+});

package/common/utils/createTrackerFilters.js

@@ -0,0 +1,82 @@
+/**
+ * Return a filter functions based on some parameters of a vehicle.
+ *
+ * @param {string|Array<string>} line - A list of vehicle's name to filter. Names can be separated by a comma. Ex: 'S1,S2,S3'
+ * @param {string|Array<string} route - A list of vehicle's route (contained in routeIdentifier property) to filter. Indentifiers can be separated by a comma. Ex: 'id1,id2,id3'
+ * @param {string|Array<string} operator  A list of vehicle's operator to filter. Operators can be separated by a comma. Ex: 'SBB,DB'
+ * @param {Regexp} regexLine - A regex aplly of vehcile's name.
+ * @private
+ */
+const createFilters = (line, route, operator, regexLine) => {
+  const filterList = [];
+
+  if (!line && !route && !operator && !regexLine) {
+    return null;
+  }
+
+  if (regexLine) {
+    const regexLineList =
+      typeof regexLine === 'string' ? [regexLine] : regexLine;
+    const lineFilter = (item) => {
+      const name = item.name || (item.line && item.line.name) || '';
+      if (!name) {
+        return false;
+      }
+      return regexLineList.some((regexStr) =>
+        new RegExp(regexStr, 'i').test(name),
+      );
+    };
+    filterList.push(lineFilter);
+  }
+
+  if (line) {
+    const lineFiltersList = typeof line === 'string' ? line.split(',') : line;
+    const lineList = lineFiltersList.map((l) =>
+      l.replace(/\s+/g, '').toUpperCase(),
+    );
+    const lineFilter = (item) => {
+      const name = (
+        item.name ||
+        (item.line && item.line.name) ||
+        ''
+      ).toUpperCase();
+      if (!name) {
+        return false;
+      }
+      return lineList.includes(name);
+    };
+    filterList.push(lineFilter);
+  }
+
+  if (route) {
+    const routes = typeof route === 'string' ? route.split(',') : route;
+    const routeList = routes.map((item) => parseInt(item, 10));
+    const routeFilter = (item) => {
+      const routeId = parseInt(item.routeIdentifier.split('.')[0], 10);
+      return routeList.includes(routeId);
+    };
+    filterList.push(routeFilter);
+  }
+
+  if (operator) {
+    const operatorList = typeof operator === 'string' ? [operator] : operator;
+    const operatorFilter = (item) =>
+      operatorList.some((op) => new RegExp(op, 'i').test(item.operator));
+    filterList.push(operatorFilter);
+  }
+
+  if (!filterList.length) {
+    return null;
+  }
+
+  return (t) => {
+    for (let i = 0; i < filterList.length; i += 1) {
+      if (!filterList[i](t)) {
+        return false;
+      }
+    }
+    return true;
+  };
+};
+
+export default createFilters;

package/common/utils/createTrackerFilters.test.js

@@ -0,0 +1,89 @@
+import createTrackerFilters from './createTrackerFilters';
+
+const u1 = {
+  routeIdentifier: '001.000827.004:7',
+  operator: 'FoO',
+  line: {
+    name: 'U1',
+  },
+};
+const ireta = {
+  routeIdentifier: '0022.000827.004:7',
+  operator: 'BAR',
+  line: {
+    name: 'IRETA',
+  },
+};
+const arb = {
+  routeIdentifier: '00333.000827.004:7',
+  operator: 'qux',
+  line: {
+    name: 'ARB',
+  },
+};
+
+const trajectories = [u1, ireta, arb];
+
+describe('#createTrackerFilter()', () => {
+  test('returns null', () => {
+    const filterFunc = createTrackerFilters();
+    expect(filterFunc).toBe(null);
+  });
+
+  describe('using line', () => {
+    test('as string', () => {
+      const filterFunc = createTrackerFilters('u1,foo');
+      expect(trajectories.filter(filterFunc)).toEqual([u1]);
+    });
+
+    test('as array of string', () => {
+      const filterFunc = createTrackerFilters(['u1', 'foo', 'IRETA']);
+      expect(trajectories.filter(filterFunc)).toEqual([u1, ireta]);
+    });
+  });
+
+  describe('using route identifier', () => {
+    test('as string', () => {
+      const filterFunc = createTrackerFilters(null, '1,foo');
+      expect(trajectories.filter(filterFunc)).toEqual([u1]);
+    });
+
+    test('as array of string', () => {
+      const filterFunc = createTrackerFilters(null, ['22', 'foo', '1']);
+      expect(trajectories.filter(filterFunc)).toEqual([u1, ireta]);
+    });
+  });
+
+  describe('using operator', () => {
+    test('as string', () => {
+      const filterFunc = createTrackerFilters(null, null, 'foo');
+      expect(trajectories.filter(filterFunc)).toEqual([u1]);
+    });
+
+    test('as array of string', () => {
+      const filterFunc = createTrackerFilters(null, null, ['bar', 'foo', '1']);
+      expect(trajectories.filter(filterFunc)).toEqual([u1, ireta]);
+    });
+  });
+
+  describe('using regexLine', () => {
+    test('as string', () => {
+      const filterFunc = createTrackerFilters(
+        null,
+        null,
+        null,
+        '^(S|R$|RE|PE|D|IRE|RB|TER)',
+      );
+      expect(trajectories.filter(filterFunc)).toEqual([ireta]);
+    });
+
+    test('as array of string', () => {
+      const filterFunc = createTrackerFilters(null, null, null, [
+        '^IR',
+        '^ARB$',
+        'foo',
+      ]);
+      expect(trajectories.filter(filterFunc)).toEqual([ireta, arb]);
+    });
+  });
+});

package/common/utils/trackerStyle.js

@@ -18,47 +18,43 @@ const style = (trajectory, viewState, trackerLayer) => {
     delayDisplay,
   } = trackerLayer;
 
-  const { zoom, pixelRatio } = viewState;
-
-  let { line = {} } = trajectory;
-
   const {
-    id,
-    delay,
-    type = 'Rail',
-    cancelled = false,
-    operatorProvidesRealtime = 'no',
-  } = trajectory;
+    zoom,
+    pixelRatio,
+    operator_provides_realtime_journey: operatorProvidesRealtime,
+  } = viewState;
+  let { line, type } = trajectory;
+  const { id, delay, cancelled = false } = trajectory;
+
+  if (!type) {
+    type = 'Rail';
+  }
 
   if (!line) {
     line = {};
   }
 
-  const { name = 'I' } = line;
-  let { text_color: textColor, color } = line;
+  let { name, text_color: textColor, color } = line;
 
-  if (!color) {
-    color = '#000000';
+  if (!name) {
+    name = 'I';
   }
 
   if (!textColor) {
-    textColor = '#ffffff';
+    textColor = '#000000';
   }
 
-  // Make sure color used have a # at the start
-  if (color[0] !== '#') {
+  if (color && color[0] !== '#') {
     color = `#${color}`;
   }
 
   if (textColor[0] !== '#') {
     textColor = `#${textColor}`;
   }
-  console.log(color, textColor);
 
   const z = Math.min(Math.floor(zoom || 1), 16);
   const hover = hoverVehicleId === id;
   const selected = selectedVehicleId === id;
-  let key = `${z}${type}${name}${color}${textColor}${operatorProvidesRealtime}${delay}${hover}${selected}${cancelled}`;
 
   // Calcul the radius of the circle
   let radius = getRadius(type, z) * pixelRatio;
@@ -71,8 +67,14 @@ const style = (trajectory, viewState, trackerLayer) => {
   const mustDrawText = radius > 10 * pixelRatio;
 
   // Optimize the cache key, very important in high zoom level
-  if (!mustDrawText) {
-    key = `${z}${type}${color}${operatorProvidesRealtime}${delay}${hover}${selected}${cancelled}`;
+  let key = `${z}${type}${color}${hover}${selected}${cancelled}${delay}`;
+
+  if (useDelayStyle) {
+    key += `${operatorProvidesRealtime}`;
+  }
+
+  if (mustDrawText) {
+    key += `${name}${textColor}`;
   }
 
   if (!styleCache[key]) {