mobility-toolbox-js 2.0.0-beta.33 → 2.0.0-beta.36

package/common/utils/compareDepartures.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"compareDepartures.d.ts","sourceRoot":"","sources":["../../../src/common/utils/compareDepartures.js"],"names":[],"mappings":";AAAA;;;;;GAKG;AACH,2FA8BC"}
+{"version":3,"file":"compareDepartures.d.ts","sourceRoot":"","sources":["../../../src/common/utils/compareDepartures.js"],"names":[],"mappings":";AAAA;;;;;GAKG;AACH,sCAJW,MAAM,KACN,MAAM,0CAiChB"}

package/common/utils/compareDepartures.js

@@ -0,0 +1,34 @@
+/**
+ * Compare two given departures for sort alogithm,
+ * @param {Object} a First departure.
+ * @param {Object} b Second departure.
+ * @private
+ */
+const compareDepartures = (a, b, sortByMinArrivalTime = false) => {
+    // First LEAVING and HIDDEN, then BOARDING and then sorted by time.
+    const topStates = ['HIDDEN', 'LEAVING', 'BOARDING'];
+    const aTop = a.has_fzo && topStates.indexOf(a.state) > -1;
+    const bTop = b.has_fzo && topStates.indexOf(b.state) > -1;
+    if (aTop || bTop) {
+        if (aTop !== bTop) {
+            return aTop ? -1 : 1;
+        }
+        if (a.state !== b.state) {
+            // one is leaving
+            return topStates.indexOf(a.state) - topStates.indexOf(b.state);
+        }
+    }
+    let aDuration = null;
+    let bDuration = null;
+    const now = Date.now();
+    if (sortByMinArrivalTime) {
+        aDuration = new Date(a.min_arrival_time || a.time).getTime() - now;
+        bDuration = new Date(b.min_arrival_time || b.time).getTime() - now;
+    }
+    else {
+        aDuration = new Date(a.time).getTime() - now;
+        bDuration = new Date(b.time).getTime() - now;
+    }
+    return aDuration - bDuration;
+};
+export default compareDepartures;

package/common/utils/createCanvas.js

@@ -0,0 +1,27 @@
+/**
+ * This function try to create a canvas element and return it.
+ * it uses document.createElement('canvas') if document is available
+ * or new OffscreenCanvas(width, height) if OffscreenCanvas is avalaible (for web worker)
+ * or it returns null if neither is available.
+ */
+const createCanvas = (width, height) => {
+    let canvas = null;
+    // Prevent SSR errors
+    if (typeof window === 'undefined') {
+        return null;
+    }
+    if (document === null || document === void 0 ? void 0 : document.createElement) {
+        canvas = document.createElement('canvas');
+        canvas.width = width;
+        canvas.height = height;
+    }
+    else if (OffscreenCanvas) {
+        canvas = new OffscreenCanvas(width, height);
+    }
+    else {
+        // eslint-disable-next-line no-console
+        console.error("We didn't find a way to create a canvas element, document.createElement('canvas') and new OffscrenCanvas() are not supported");
+    }
+    return canvas;
+};
+export default createCanvas;

package/common/utils/createTrackerFilters.d.ts

@@ -8,5 +8,5 @@ export default createFilters;
  * @param {Regexp} regexLine - A regex aplly of vehcile's name.
  * @private
  */
-declare function createFilters(line: string | Array<string>, route: string | Array<string>, operator: string | Array<string>, regexLine: Regexp): (t: any) => boolean;
+declare function createFilters(line: string | Array<string>, route: string | Array<string>, operator: string | Array<string>, regexLine: Regexp): ((t: any) => boolean) | null;
 //# sourceMappingURL=createTrackerFilters.d.ts.map

package/common/utils/createTrackerFilters.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createTrackerFilters.d.ts","sourceRoot":"","sources":["../../../src/common/utils/createTrackerFilters.js"],"names":[],"mappings":";AAAA;;;;;;;;GAQG;AACH,qCANW,MAAM,GAAC,MAAM,MAAM,CAAC,SACpB,MAAM,GAAC,MAAM,MAAM,CAAA,YACnB,MAAM,GAAC,MAAM,MAAM,CAAA,0CA+E7B"}
+{"version":3,"file":"createTrackerFilters.d.ts","sourceRoot":"","sources":["../../../src/common/utils/createTrackerFilters.js"],"names":[],"mappings":";AAAA;;;;;;;;GAQG;AACH,qCANW,MAAM,GAAC,MAAM,MAAM,CAAC,SACpB,MAAM,GAAC,MAAM,MAAM,CAAA,YACnB,MAAM,GAAC,MAAM,MAAM,CAAA,mDA+E7B"}

package/common/utils/createTrackerFilters.js

@@ -0,0 +1,67 @@
+/**
+ * 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.properties.name ||
+                (item.properties.line && item.properties.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 { line: linee, name } = item.properties;
+            const lineName = (name || (linee && linee.name) || '').toUpperCase();
+            if (!lineName) {
+                return false;
+            }
+            return lineList.includes(lineName);
+        };
+        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.properties.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.properties.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/getLayersAsFlatArray.js

@@ -0,0 +1,14 @@
+const getLayersAsFlatArray = (layersOrLayer) => {
+    let layers = layersOrLayer;
+    if (!Array.isArray(layers)) {
+        layers = [layersOrLayer];
+    }
+    let flatLayers = [];
+    layers.forEach((layer) => {
+        flatLayers.push(layer);
+        const { children } = layer;
+        flatLayers = flatLayers.concat(getLayersAsFlatArray(children || []));
+    });
+    return flatLayers;
+};
+export default getLayersAsFlatArray;

package/common/utils/getMapboxMapCopyrights.js

@@ -0,0 +1,24 @@
+import removeDuplicate from './removeDuplicate';
+/**
+ * Return the copyright a Mapbox map.
+ * @param {mapboxgl.Map} map A Mapbox map
+ * @ignore
+ */
+const getMapboxMapCopyrights = (map) => {
+    if (!map || !map.style) {
+        return [];
+    }
+    const { sourceCaches } = map.style;
+    let copyrights = [];
+    Object.values(sourceCaches).forEach((sourceCache) => {
+        if (sourceCache.used) {
+            const source = sourceCache.getSource();
+            const attribution = source.attribution || (source.options && source.options.attribution);
+            if (attribution) {
+                copyrights = copyrights.concat(attribution.replace(/&copy;/g, '©').split(/(<a.*?<\/a>)/));
+            }
+        }
+    });
+    return removeDuplicate(copyrights);
+};
+export default getMapboxMapCopyrights;

package/common/utils/getMapboxRender.js

@@ -0,0 +1,74 @@
+/* eslint-disable no-underscore-dangle */
+import { toLonLat } from 'ol/proj';
+/**
+ * Return the render function fo the olLayer of a MaplibreLayer
+ */
+export default function getMapboxRender(mapoxLayer) {
+    return (frameState) => {
+        const { map, mbMap, renderState, olLayer } = mapoxLayer;
+        if (!map || !mbMap) {
+            return null;
+        }
+        let changed = false;
+        const canvas = mbMap.getCanvas();
+        const { viewState } = frameState;
+        const visible = olLayer.getVisible();
+        if (renderState.visible !== visible) {
+            canvas.style.display = visible ? 'block' : 'none';
+            renderState.visible = visible;
+            // Needed since mapbox-gl 1.9.0.
+            // Without you don't see others ol layers on top.
+            canvas.style.position = 'absolute';
+        }
+        const opacity = olLayer.getOpacity();
+        if (renderState.opacity !== opacity) {
+            canvas.style.opacity = opacity;
+            renderState.opacity = opacity;
+        }
+        // adjust view parameters in mapbox
+        const { rotation } = viewState;
+        if (renderState.rotation !== rotation) {
+            mbMap.rotateTo((-(rotation || 0) * 180) / Math.PI, {
+                animate: false,
+            });
+            changed = true;
+            renderState.rotation = rotation;
+        }
+        if (renderState.zoom !== viewState.zoom ||
+            renderState.center[0] !== viewState.center[0] ||
+            renderState.center[1] !== viewState.center[1]) {
+            mbMap.jumpTo({
+                center: toLonLat(viewState.center),
+                zoom: viewState.zoom - 1,
+                animate: false,
+            });
+            changed = true;
+            renderState.zoom = viewState.zoom;
+            renderState.center = viewState.center;
+        }
+        const size = map.getSize();
+        if (renderState.size[0] !== size[0] || renderState.size[1] !== size[1]) {
+            changed = true;
+            renderState.size = size;
+        }
+        // cancel the scheduled update & trigger synchronous redraw
+        // see https://github.com/mapbox/mapbox-gl-js/issues/7893#issue-408992184
+        // NOTE: THIS MIGHT BREAK WHEN UPDATING MAPBOX
+        if (mbMap && mbMap.style && mbMap.isStyleLoaded() && changed) {
+            try {
+                if (mbMap._frame) {
+                    mbMap._frame.cancel();
+                    mbMap._frame = null;
+                }
+                mbMap._render();
+            }
+            catch (err) {
+                // ignore render errors because it's probably related to
+                // a render during an update of the style.
+                // eslint-disable-next-line no-console
+                console.warn(err);
+            }
+        }
+        return mbMap.getContainer();
+    };
+}

package/common/utils/getMaplibreRender.js

@@ -0,0 +1,35 @@
+import { toLonLat } from 'ol/proj';
+import { toDegrees } from 'ol/math';
+/**
+ * Return the render function fo the olLayer of a MaplibreLayer
+ */
+export default function getMaplibreRender(maplibreLayer) {
+    return (frameState) => {
+        const { map, mbMap, olLayer } = maplibreLayer;
+        if (!map || !mbMap) {
+            return null;
+        }
+        const canvas = mbMap.getCanvas();
+        const { viewState } = frameState;
+        const opacity = olLayer.getOpacity();
+        canvas.style.opacity = opacity;
+        // adjust view parameters in mapbox
+        mbMap.jumpTo({
+            center: toLonLat(viewState.center),
+            zoom: viewState.zoom - 1,
+            bearing: toDegrees(-viewState.rotation),
+            animate: false,
+        });
+        if (!canvas.isConnected) {
+            // The canvas is not connected to the DOM, request a map rendering at the next animation frame
+            // to set the canvas size.
+            map.render();
+        }
+        else if (canvas.width !== frameState.size[0] ||
+            canvas.height !== frameState.size[1]) {
+            mbMap.resize();
+        }
+        mbMap.redraw();
+        return mbMap.getContainer();
+    };
+}

package/common/utils/getRealtimeModeSuffix.js

@@ -0,0 +1,7 @@
+/**
+ * Get the websocket channel suffix, depending on the current mode.
+ * @param {String} mode Mode 'topographic' ou 'schematic'.
+ * @private
+ */
+const getModeSuffix = (mode, modes) => mode === modes.SCHEMATIC ? '_schematic' : '';
+export default getModeSuffix;

package/common/utils/getUrlWithParams.js

@@ -0,0 +1,18 @@
+/**
+ * Return the styleUrl with apiKey parameters set.
+ * @param {string} url a url.
+ * @param {Object<String,String>} params a list of key/value pair to add to the url.
+ * @ignore
+ */
+const getUrlWithParams = (url, params) => {
+    // Clean requets parameters, removing undefined and null values.
+    const newUrl = new URL(url);
+    const searchParams = params || {};
+    Object.entries(searchParams).forEach(([key, value]) => {
+        if (value !== undefined && value !== null) {
+            newUrl.searchParams.set(key, value);
+        }
+    });
+    return newUrl;
+};
+export default getUrlWithParams;

package/common/utils/getVehiclePosition.js

@@ -0,0 +1,63 @@
+import GeomType from 'ol/geom/GeometryType';
+/**
+ * Interpolate or not the vehicle position from a trajectory at a specific date.
+ *
+ * @param {number} now Current date to interpolate a position with. In ms.
+ * @param {RealtimeTrajectory} trajectory The trajectory to interpolate.
+ * @param {boolean} noInterpolate If true, the vehicle position is not interpolated on each render but only once.
+ * @returns
+ */
+const getVehiclePosition = (now, trajectory, noInterpolate) => {
+    const { time_intervals: timeIntervals, olGeometry: geometry, coordinate, } = trajectory.properties;
+    let coord;
+    let rotation;
+    if (noInterpolate && coordinate) {
+        coord = coordinate;
+    }
+    else if (geometry.getType() === GeomType.POINT) {
+        coord = geometry.getCoordinates();
+    }
+    else if (geometry.getType() === GeomType.LINE_STRING) {
+        const intervals = timeIntervals || [[]];
+        const firstInterval = intervals[0];
+        const lastInterval = intervals[intervals.length - 1];
+        // Between the last time interval of a trajectory event and the beginning
+        // of the new trajectory event, there is few seconds, can be 6 to 30
+        // seconds (that's why the vehicle jumps sometimes).
+        // So we make the choice here to display the last (or the first) position
+        // of an trajectory event instead of removing them, if the current date is
+        // outside the time intervals we display the vehicle at the last (or first) position known.
+        if (now < firstInterval[0]) {
+            // Display first position known.
+            [, , rotation] = firstInterval;
+            coord = geometry.getFirstCoordinate();
+        }
+        else if (now > lastInterval[0]) {
+            // Display last position known.
+            [, , rotation] = lastInterval;
+            coord = geometry.getLastCoordinate();
+        }
+        else {
+            // Interpolate position using time intervals.
+            for (let j = 0; j < intervals.length - 1; j += 1) {
+                // Rotation only available in realtime layer.
+                const [start, startFrac] = intervals[j];
+                const [end, endFrac] = intervals[j + 1];
+                if (start <= now && now <= end) {
+                    // interpolate position inside the time interval.
+                    const timeFrac = Math.min((now - start) / (end - start), 1);
+                    const geomFrac = timeFrac * (endFrac - startFrac) + startFrac;
+                    coord = geometry.getCoordinateAt(geomFrac);
+                    [, , rotation] = intervals[j];
+                    break;
+                }
+            }
+        }
+    }
+    else {
+        // eslint-disable-next-line no-console
+        console.error('This geometry type is not supported. Only Point or LineString are. Current geometry: ', geometry);
+    }
+    return { coord, rotation };
+};
+export default getVehiclePosition;

package/common/utils/index.js

@@ -0,0 +1,12 @@
+export { default as getUrlWithParams } from './getUrlWithParams';
+export { default as getMapboxMapCopyrights } from './getMapboxMapCopyrights';
+export { default as removeDuplicate } from './removeDuplicate';
+export { default as createTrackerFilters } from './createTrackerFilters';
+export { default as getLayersAsFlatArray } from './getLayersAsFlatArray';
+export * from './timeUtils';
+export { default as sortByDelay } from './sortByDelay';
+export { default as renderTrajectories } from './renderTrajectories';
+export { default as getMaplibreRender } from './getMaplibreRender';
+export { default as getMapboxRender } from './getMapboxRender';
+import * as trackerConfig_1 from './trackerConfig';
+export { trackerConfig_1 as trackerConfig };

package/common/utils/removeDuplicate.d.ts

@@ -6,5 +6,5 @@ export default removeDuplicate;
  * @param {array} array Array of values.
  * @ignore
  */
-declare function removeDuplicate(array: any[]): any[];
+declare function removeDuplicate(array: any): any[];
 //# sourceMappingURL=removeDuplicate.d.ts.map

package/common/utils/removeDuplicate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"removeDuplicate.d.ts","sourceRoot":"","sources":["../../../src/common/utils/removeDuplicate.js"],"names":[],"mappings":";AAAA;;;;;;GAMG;AACH,sDAYC"}
+{"version":3,"file":"removeDuplicate.d.ts","sourceRoot":"","sources":["../../../src/common/utils/removeDuplicate.js"],"names":[],"mappings":";AAAA;;;;;;GAMG;AACH,oDAYC"}

package/common/utils/removeDuplicate.js

@@ -0,0 +1,15 @@
+/**
+ * This function remove duplicates lower case string value of an array.
+ * It removes also null, undefined or non string values.
+ *
+ * @param {array} array Array of values.
+ * @ignore
+ */
+const removeDuplicate = (array) => {
+    const arrWithoutEmptyValues = array.filter((val) => val !== undefined && val !== null && val.trim && val.trim());
+    const lowerCasesValues = arrWithoutEmptyValues.map((str) => str.toLowerCase());
+    const uniqueLowerCaseValues = [...new Set(lowerCasesValues)];
+    const uniqueValues = uniqueLowerCaseValues.map((uniqueStr) => arrWithoutEmptyValues.find((str) => str.toLowerCase() === uniqueStr));
+    return uniqueValues;
+};
+export default removeDuplicate;

package/common/utils/renderTrajectories.js

@@ -0,0 +1,107 @@
+/* eslint-disable no-param-reassign */
+import { compose, apply, create } from 'ol/transform';
+import getVehiclePosition from './getVehiclePosition';
+/**
+ * Draw all the trajectories available in a canvas.
+ * @param {HTMLCanvas|HTMLOffscreenCanvas} The canvas where to draw the trajectories.
+ * @param {ViewState} trajectories An array of trajectories.
+ * @param {Function} style A function that returns a canvas representing a vehicle of a specific trajectory.
+ * @param {ViewState} viewState The view state of the map.
+ * @param {boolean} options.hoverVehicleId The id of the vehicle to highlight.
+ * @param {boolean} options.selectedVehicleId The id of the vehicle to select.
+ * @param {boolean} options.noInterpolate If true trajectories are not interpolated but
+ *   drawn at the last known coordinate. Use this for performance optimization
+ *   during map navigation.
+ * @private
+ */
+const renderTrajectories = (canvas, trajectories, style, viewState, options) => {
+    if (!canvas) {
+        return {};
+    }
+    const { time = Date.now(), size = [], center, resolution, rotation = 0, pixelRatio, } = viewState;
+    const { noInterpolate = false, hoverVehicleId, selectedVehicleId } = options;
+    const context = canvas.getContext('2d');
+    context.clearRect(0, 0, canvas.width, canvas.height);
+    const [width, height] = size;
+    if (width && height && (canvas.width !== width || canvas.height !== height)) {
+        [canvas.width, canvas.height] = [width * pixelRatio, height * pixelRatio];
+    }
+    const coordinateToPixelTransform = compose(create(), size[0] / 2, size[1] / 2, 1 / resolution, -1 / resolution, -rotation, -center[0], -center[1]);
+    // Offscreen canvas has not style attribute
+    if (canvas.style) {
+        canvas.style.width = `${canvas.width / pixelRatio}px`;
+        canvas.style.height = `${canvas.height / pixelRatio}px`;
+    }
+    let hoverVehicleImg;
+    let hoverVehiclePx;
+    let hoverVehicleWidth;
+    let hoverVehicleHeight;
+    let selectedVehicleImg;
+    let selectedVehiclePx;
+    let selectedVehicleWidth;
+    let selectedVehicleHeight;
+    const renderedTrajectories = [];
+    for (let i = trajectories.length - 1; i >= 0; i -= 1) {
+        const trajectory = trajectories[i];
+        // We simplify the trajectory object
+        const { train_id: id, timeOffset } = trajectory.properties;
+        // We set the rotation and the timeFraction of the trajectory (used by tralis).
+        // if rotation === null that seems there is no rotation available.
+        const { coord, rotation: rotationIcon } = getVehiclePosition(time - (timeOffset || 0), trajectory, noInterpolate);
+        // We store  the current vehicle position to the trajectory.
+        trajectories[i].properties.coordinate = coord;
+        trajectories[i].properties.rotation = rotationIcon;
+        if (!coord) {
+            // eslint-disable-next-line no-continue
+            continue;
+        }
+        let px = apply(coordinateToPixelTransform, [...coord]);
+        if (!px) {
+            // eslint-disable-next-line no-continue
+            continue;
+        }
+        px = px.map((p) => p * pixelRatio);
+        if (px[0] < 0 ||
+            px[0] > canvas.width ||
+            px[1] < 0 ||
+            px[1] > canvas.height) {
+            // eslint-disable-next-line no-continue
+            continue;
+        }
+        const vehicleImg = style(trajectory, viewState, options);
+        if (!vehicleImg) {
+            // eslint-disable-next-line no-continue
+            continue;
+        }
+        const imgWidth = vehicleImg.width;
+        const imgHeight = vehicleImg.height;
+        if (hoverVehicleId !== id && selectedVehicleId !== id) {
+            context.drawImage(vehicleImg, px[0] - imgWidth / 2, px[1] - imgHeight / 2, imgWidth, imgHeight);
+        }
+        if (hoverVehicleId && hoverVehicleId === id) {
+            // Store the canvas to draw it at the end
+            hoverVehicleImg = vehicleImg;
+            hoverVehiclePx = px;
+            hoverVehicleWidth = imgWidth;
+            hoverVehicleHeight = imgHeight;
+        }
+        if (selectedVehicleId && selectedVehicleId === id) {
+            // Store the canvas to draw it at the end
+            selectedVehicleImg = vehicleImg;
+            selectedVehiclePx = px;
+            selectedVehicleWidth = imgWidth;
+            selectedVehicleHeight = imgHeight;
+        }
+        renderedTrajectories.push(trajectory);
+    }
+    if (selectedVehicleImg) {
+        context.drawImage(selectedVehicleImg, selectedVehiclePx[0] - selectedVehicleWidth / 2, selectedVehiclePx[1] - selectedVehicleHeight / 2, selectedVehicleWidth, selectedVehicleHeight);
+    }
+    if (hoverVehicleImg) {
+        context.drawImage(hoverVehicleImg, hoverVehiclePx[0] - hoverVehicleWidth / 2, hoverVehiclePx[1] - hoverVehicleHeight / 2, hoverVehicleWidth, hoverVehicleHeight);
+    }
+    return {
+        renderedTrajectories,
+    };
+};
+export default renderTrajectories;

package/common/utils/sortByDelay.js

@@ -0,0 +1,20 @@
+const sortByDelay = (traj1, traj2) => {
+    const props1 = traj1.properties;
+    const props2 = traj2.properties;
+    if (props1.delay === null && props2.delay !== null) {
+        return 1;
+    }
+    if (props2.delay === null && props1.delay !== null) {
+        return -1;
+    }
+    // We put cancelled train inbetween green and yellow trains
+    // >=180000ms corresponds to yellow train
+    if (props1.cancelled && !props2.cancelled) {
+        return props2.delay < 180000 ? -1 : 1;
+    }
+    if (props2.cancelled && !props1.cancelled) {
+        return props1.delay < 180000 ? 1 : -1;
+    }
+    return props2.delay - props1.delay;
+};
+export default sortByDelay;

package/common/utils/timeUtils.js

@@ -0,0 +1,39 @@
+/**
+ * Get a Date object as UTC date string .
+ * ex: 2019 09 01
+ * @ignore
+ */
+export const getUTCDateString = (now = new Date()) => {
+    let month = (now.getUTCMonth() + 1).toString();
+    month = month.length === 1 ? `0${month}` : month;
+    let day = now.getUTCDate().toString();
+    day = day.length === 1 ? `0${day}` : day;
+    return [now.getUTCFullYear(), month, day].join('');
+};
+/**
+ * Get the UTC time string of Date object.
+ * ex: 09:05:01.123
+ * @ignore
+ */
+export const getUTCTimeString = (date) => [
+    date.getUTCHours(),
+    date.getUTCMinutes(),
+    `${date.getUTCSeconds()}.${date.getUTCMilliseconds()}`,
+].join(':');
+/**
+ * Returns a string representation of a number, with a zero if the number is lower than 10.
+ * @ignore
+ */
+export const pad = (integer) => (integer < 10 ? `0${integer}` : integer);
+/**
+ * Returns a 'hh:mm' string from a time in ms.
+ * @param {Number} timeInMs Time in milliseconds.
+ * @ignore
+ */
+export const getHoursAndMinutes = (timeInMs) => {
+    if (!timeInMs || timeInMs <= 0) {
+        return '';
+    }
+    const date = new Date(timeInMs);
+    return `${pad(date.getHours())}:${pad(date.getMinutes())}`;
+};