@geops/rvf-mobility-web-component 0.1.8

package/src/icons/Police/Police.tsx

@@ -0,0 +1,20 @@
+function Police({ ...props }) {
+  return (
+    <svg
+      fill="currentColor"
+      width="24px"
+      height="24px"
+      viewBox="0 0 15 15"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        id="rect4718"
+        d="M5.5,1L6,2h5l0.5-1H5.5z M6,2.5v1.25c0,0,0,2.75,2.5,2.75S11,3.75,11,3.75V2.5H6z M1.9844,3.9863&#xA;&#x9;C1.4329,3.9949,0.9924,4.4485,1,5v4c-0.0001,0.6398,0.5922,1.1152,1.2168,0.9766L5,9.3574V14l5.8789-6.9297&#xA;&#x9;C10.7391,7.0294,10.5947,7,10.4414,7H6.5L3,7.7539V5C3.0077,4.4362,2.5481,3.9775,1.9844,3.9863z M11.748,7.7109L6.4121,14H12&#xA;&#x9;V8.5586C12,8.2451,11.9061,7.9548,11.748,7.7109z"
+      />
+    </svg>
+  );
+}
+
+export default Police;

package/src/icons/Police/index.tsx

@@ -0,0 +1 @@
+export { default } from "./Police";

package/src/icons/README.md

@@ -0,0 +1,52 @@
+# Icons
+
+This folder contains icons used inside the web component.
+Icons are preact components that display an SVG. No raster data (PNGs,JPEGs...).
+Until we decide otherwise, we don't want to use automatic transformation from SVG to component like using SVGR.
+So you must create and clean your component manually.
+
+Icon must have their color defines with currentColor
+
+You can let the original svg file in the corrsponding folder to keep track of them.
+
+## Guidelines
+
+- Structure of folders follows the same rules as in normal components.
+
+```bash
+MyIcon/index.tsx   // only export the component
+      /MyIcon.tsx  // the component containing the SVG
+      /icon.svg    // the original SVG file
+```
+
+- Set the width and height attribute to 24 pixels
+
+- Propagate all the component props
+
+- Set the fill attribute to `currentcColor`
+  
+- Clean all useless properties.
+
+Here an example how it should look like:
+
+```js
+function MyIcon({ ...props }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      version="1.1"
+      width="24"
+      height="24"
+      fill="currentColor"
+      viewBox="0 0 14 14"
+      {...props}
+    >
+    </svg>
+  );
+}
+
+```
+
+## Where to find icons
+
+For now, if you need new icon, use <https://www.svgrepo.com/>  and select only icons you are allowed to use and modify.

package/src/icons/WaitingAreas/WaitingAreas.tsx

@@ -0,0 +1,16 @@
+function WaitingAreas({ ...props }) {
+  return (
+    <svg
+      fill="currentColor"
+      width="24px"
+      height="24px"
+      viewBox="0 0 15 15"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M13.5,13h-3V9h3a.5.5,0,0,0,.4092-.7871L11.66,5h.84a.5.5,0,0,0,.3838-.82l-2.5-3a.5155.5155,0,0,0-.7676,0l-2.5,3A.5.5,0,0,0,7.5,5h.84L6.0908,8.2129A.5.5,0,0,0,6.5,9h3v4H4V11H5.5a.5.5,0,0,0,0-1h-4a.5.5,0,0,0,0,1H3v2H1.5a.5.5,0,0,0,0,1h12a.5.5,0,0,0,0-1Z" />
+    </svg>
+  );
+}
+
+export default WaitingAreas;

package/src/icons/WaitingAreas/highway-rest-area-svgrepo-com.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" width="800px" height="800px" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" id="highway-rest-area">
+  <path d="M13.5,13h-3V9h3a.5.5,0,0,0,.4092-.7871L11.66,5h.84a.5.5,0,0,0,.3838-.82l-2.5-3a.5155.5155,0,0,0-.7676,0l-2.5,3A.5.5,0,0,0,7.5,5h.84L6.0908,8.2129A.5.5,0,0,0,6.5,9h3v4H4V11H5.5a.5.5,0,0,0,0-1h-4a.5.5,0,0,0,0,1H3v2H1.5a.5.5,0,0,0,0,1h12a.5.5,0,0,0,0-1Z"/>
+</svg>

package/src/icons/WaitingAreas/index.tsx

@@ -0,0 +1 @@
+export { default } from "./WaitingAreas";

package/src/icons/WaitingAreas/wheelchair-svgrepo-com.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="inheritColor" width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1"><path d="M12,6.5a2,2,0,1,0-2-2A2,2,0,0,0,12,6.5Zm7.5,14h-1v-5a1,1,0,0,0-1-1h-5v-2h5a1,1,0,0,0,0-2h-5v-2a1,1,0,0,0-2,0v7a1,1,0,0,0,1,1h5v5a1,1,0,0,0,1,1h2a1,1,0,0,0,0-2Zm-6.8-1.6a4,4,0,0,1-7.2-2.4,4,4,0,0,1,2.4-3.66A1,1,0,1,0,7.1,11a6,6,0,1,0,7.2,9.1,1,1,0,0,0-1.6-1.2Z"/></svg>

package/src/icons/WheelChair/WheelChair.tsx

@@ -0,0 +1,16 @@
+function WheelChair({ ...props }) {
+  return (
+    <svg
+      fill="currentColor"
+      width="24px"
+      height="24px"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M12,6.5a2,2,0,1,0-2-2A2,2,0,0,0,12,6.5Zm7.5,14h-1v-5a1,1,0,0,0-1-1h-5v-2h5a1,1,0,0,0,0-2h-5v-2a1,1,0,0,0-2,0v7a1,1,0,0,0,1,1h5v5a1,1,0,0,0,1,1h2a1,1,0,0,0,0-2Zm-6.8-1.6a4,4,0,0,1-7.2-2.4,4,4,0,0,1,2.4-3.66A1,1,0,1,0,7.1,11a6,6,0,1,0,7.2,9.1,1,1,0,0,0-1.6-1.2Z" />
+    </svg>
+  );
+}
+
+export default WheelChair;

package/src/icons/WheelChair/index.tsx

@@ -0,0 +1 @@
+export { default } from "./WheelChair";

package/src/icons/WheelChair/wheelchair-svgrepo-com.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="inheritColor" width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1"><path d="M12,6.5a2,2,0,1,0-2-2A2,2,0,0,0,12,6.5Zm7.5,14h-1v-5a1,1,0,0,0-1-1h-5v-2h5a1,1,0,0,0,0-2h-5v-2a1,1,0,0,0-2,0v7a1,1,0,0,0,1,1h5v5a1,1,0,0,0,1,1h2a1,1,0,0,0,0-2Zm-6.8-1.6a4,4,0,0,1-7.2-2.4,4,4,0,0,1,2.4-3.66A1,1,0,1,0,7.1,11a6,6,0,1,0,7.2,9.1,1,1,0,0,0-1.6-1.2Z"/></svg>

package/src/index.tsx

@@ -0,0 +1,50 @@
+import register from "preact-custom-element";
+
+import MobilityMap from "./MobilityMap";
+import MobilitySearch from "./StopsSearch";
+
+register(
+  MobilityMap,
+  "geops-mobility",
+  [
+    "apikey",
+    "baselayer",
+    "center",
+    "geolocation",
+    "mapsurl",
+    "mots",
+    "notification",
+    "notificationat",
+    "notificationurl",
+    "notificationbeforelayerid",
+    "realtime",
+    "realtimeUrl",
+    "search",
+    "tenant",
+    "zoom",
+    "permalink",
+  ],
+  { shadow: true },
+);
+
+register(
+  MobilitySearch,
+  "geops-mobility-search",
+  [
+    "apikey",
+    "bbox",
+    "countrycode",
+    "event",
+    "field",
+    "limit",
+    "mots",
+    "onselect",
+    "params",
+    "prefagencies",
+    "reflocation",
+    "url",
+  ],
+  {
+    shadow: true,
+  },
+);

package/src/utils/MobilityEvent.ts

@@ -0,0 +1,21 @@
+import type { MobilityMapProps } from "../MobilityMap/MobilityMap";
+
+export type MobilityEventType =
+  | "mwc:attribute"
+  | "mwc:stopssearchselect"
+  | string;
+
+class MobilityEvent<T> extends Event {
+  data: MobilityMapProps;
+
+  constructor(name: MobilityEventType, data: T, options: EventInit = {}) {
+    super(name, { ...options, composed: true });
+    this.data = data;
+  }
+
+  logImportantData() {
+    console.log(this.data);
+  }
+}
+
+export default MobilityEvent;

package/src/utils/addSourceAndLayers.ts

@@ -0,0 +1,62 @@
+// Add a source and styleLayer using the id in parameter.
+const addSourceAndLayers = (
+  mapboxLayer,
+  sourceId,
+  sourceData,
+  styleLayer,
+  beforeLayerId,
+) => {
+  if (!mapboxLayer.loaded) {
+    mapboxLayer.once("load", () => {
+      addSourceAndLayers(
+        mapboxLayer,
+        sourceId,
+        sourceData,
+        styleLayer,
+        beforeLayerId,
+      );
+    });
+    return;
+  }
+  const { mbMap } = mapboxLayer;
+
+  // Update source
+  if (sourceId && sourceData) {
+    const source = mbMap.getSource(sourceId);
+    if (source) {
+      source.setData(sourceData.data);
+    } else {
+      mbMap.addSource(sourceId, sourceData);
+    }
+  }
+
+  // Update layer
+  if (styleLayer) {
+    let layer = mbMap.getLayer(sourceId);
+    if (layer) {
+      mbMap.removeLayer(layer.id);
+    }
+
+    // styleLayer could be an array of styles to add.
+    let styleLayers = styleLayer;
+    if (!Array.isArray(styleLayer)) {
+      styleLayers = [styleLayer];
+    }
+    styleLayers.forEach((style) => {
+      if (mbMap.getSource(style.source)) {
+        layer = mbMap.getLayer(style.id);
+        if (layer) {
+          mbMap.removeLayer(layer.id);
+        }
+        mbMap.addLayer(style, beforeLayerId);
+      } else {
+        console.warn(
+          `The source ${style.source} doesn't exist. This layer can't be added`,
+          style,
+        );
+      }
+    });
+  }
+};
+
+export default addSourceAndLayers;

package/src/utils/centerOnStation.ts

@@ -0,0 +1,17 @@
+import { Map } from "ol";
+import { fromLonLat } from "ol/proj";
+
+import { StationFeature } from "../StopsSearch";
+
+const centerOnStation = (selectedStation: StationFeature, map: Map) => {
+  const center = selectedStation?.geometry?.coordinates;
+  if (center) {
+    map?.getView()?.animate({
+      center: fromLonLat(center),
+      duration: 500,
+      zoom: 16,
+    });
+  }
+};
+
+export default centerOnStation;

package/src/utils/centerOnVehicle.ts

@@ -0,0 +1,50 @@
+import { getVehiclePosition } from "mobility-toolbox-js/ol";
+import { RealtimeTrajectory } from "mobility-toolbox-js/types";
+import { Map } from "ol";
+import { linear } from "ol/easing";
+
+const centerOnVehicle = async (
+  vehicle: RealtimeTrajectory,
+  map: Map,
+  targetZoom = 0,
+) => {
+  if (!vehicle) {
+    return Promise.reject();
+  }
+
+  const {
+    geometry,
+    properties: { coordinate },
+  } = vehicle;
+  const view = map.getView();
+  const zoom = targetZoom || view.getZoom();
+  const resolution = zoom > 0 ? view.getResolutionForZoom(zoom) : undefined;
+
+  let center = coordinate;
+  if (!center && geometry) {
+    const { coord } = getVehiclePosition(Date.now(), vehicle, true);
+    center = coord as [number, number];
+  }
+  if (!center) {
+    return Promise.reject();
+  }
+
+  view.cancelAnimations();
+
+  const promise = new Promise((resolve) => {
+    view.animate(
+      {
+        center,
+        duration: 1000,
+        easing: linear,
+        resolution,
+      },
+      (success) => {
+        resolve(success);
+      },
+    );
+  });
+  return promise;
+};
+
+export default centerOnVehicle;

package/src/utils/getBgColor.ts

@@ -0,0 +1,3 @@
+import { realtimeConfig } from "mobility-toolbox-js/ol";
+
+export default realtimeConfig.getBgColor;

package/src/utils/getDelayColor.test.ts

@@ -0,0 +1,20 @@
+import getDelayColor from "./getDelayColor";
+
+describe("getDelayColor", () => {
+  it("returns green", () => {
+    expect(getDelayColor(0)).toBe("#16a34a");
+    expect(getDelayColor(2.49 * 60 * 1000)).toBe("#16a34a");
+  });
+  it("returns yellow", () => {
+    expect(getDelayColor(3 * 60 * 1000)).toBe("#ca8a04");
+    expect(getDelayColor(4.49 * 60 * 1000 - 1)).toBe("#ca8a04");
+  });
+  it("returns orange", () => {
+    expect(getDelayColor(5 * 60 * 1000)).toBe("#ea580c");
+    expect(getDelayColor(9.49 * 60 * 1000 - 1)).toBe("#ea580c");
+  });
+  it("returns red", () => {
+    expect(getDelayColor(10 * 60 * 1000)).toBe("#dc2626");
+    expect(getDelayColor(180 * 60 * 1000)).toBe("#dc2626");
+  });
+});

package/src/utils/getDelayColor.ts

@@ -0,0 +1,23 @@
+/**
+ * Returns a color class to display the delay.
+ * @param {Number} time Delay time in milliseconds.
+ */
+const getDelayColor = (timeInMs: number) => {
+  // we use rounded value to fit the getDelayString method.
+  const minutes = Math.round(timeInMs / 1000 / 60);
+  // if (minutes >= 60) {
+  // }
+  if (minutes >= 10) {
+    return "#dc2626"; // "text-red-600";
+  }
+  if (minutes >= 5) {
+    return "#ea580c"; // "text-orange-600";
+    // return "#d97706"; // "text-amber-600";
+  }
+  if (minutes >= 3) {
+    return "#ca8a04"; // "text-yellow-600";
+  }
+  return "#16a34a"; // "text-green-600";
+};
+
+export default getDelayColor;

package/src/utils/getDelayColorForVehicle.test.ts

@@ -0,0 +1,28 @@
+import getDelayColorForVehicle from "./getDelayColorForVehicle";
+
+describe("getDelayColorForVehicle", () => {
+  it("returns cancelled color", () => {
+    expect(getDelayColorForVehicle(0, true, true)).toBe("#dc2626");
+    expect(getDelayColorForVehicle(0, true, false)).toBe("#a0a0a0");
+  });
+  it("returns null delay (no realtime train) color", () => {
+    expect(getDelayColorForVehicle(null)).toBe("#a0a0a0");
+  });
+
+  it("returns green", () => {
+    expect(getDelayColorForVehicle(0)).toBe("#16a34a");
+    expect(getDelayColorForVehicle(2.49 * 60 * 1000)).toBe("#16a34a");
+  });
+  it("returns yellow", () => {
+    expect(getDelayColorForVehicle(3 * 60 * 1000)).toBe("#ca8a04");
+    expect(getDelayColorForVehicle(4.49 * 60 * 1000 - 1)).toBe("#ca8a04");
+  });
+  it("returns orange", () => {
+    expect(getDelayColorForVehicle(5 * 60 * 1000)).toBe("#ea580c");
+    expect(getDelayColorForVehicle(9.49 * 60 * 1000 - 1)).toBe("#ea580c");
+  });
+  it("returns red", () => {
+    expect(getDelayColorForVehicle(10 * 60 * 1000)).toBe("#dc2626");
+    expect(getDelayColorForVehicle(180 * 60 * 1000)).toBe("#dc2626");
+  });
+});

package/src/utils/getDelayColorForVehicle.ts

@@ -0,0 +1,25 @@
+import getDelayColor from "./getDelayColor";
+
+/**
+ * @private
+ * @param {number} delayInMs Delay in milliseconds.
+ * @param {boolean} cancelled true if the journey is cancelled.
+ * @param {boolean} isDelayText true if the color is used for delay text of the symbol.
+ */
+const getDelayColorForVehicle = (
+  delayInMs: null | number,
+  cancelled?: boolean,
+  isDelayText?: boolean,
+): string => {
+  if (cancelled) {
+    return isDelayText
+      ? "#dc2626" // "text-red-600";
+      : "#a0a0a0"; // gray
+  }
+  if (delayInMs === null) {
+    return "#a0a0a0";
+  }
+  return getDelayColor(delayInMs);
+};
+
+export default getDelayColorForVehicle;

package/src/utils/getDelayFontForVehicle.test.ts

@@ -0,0 +1,7 @@
+import getDelayFontForVehicle from "./getDelayFontForVehicle";
+
+describe("getDelayFontForVehicle", () => {
+  it("returns font that inherit", () => {
+    expect(getDelayFontForVehicle(12)).toBe("bold 12px arial");
+  });
+});

package/src/utils/getDelayFontForVehicle.tsx

@@ -0,0 +1,8 @@
+/**
+ * Return the font for the delay text in the map.
+ */
+const getDelayFontForVehicle = (fontSize: number) => {
+  return `bold ${fontSize}px arial`;
+};
+
+export default getDelayFontForVehicle;

package/src/utils/getDelayString.test.ts

@@ -0,0 +1,22 @@
+import getDelayString from "./getDelayString";
+
+describe("getDelayString", () => {
+  it("returns hours (floor)", () => {
+    expect(getDelayString(7200000)).toBe("2h");
+    expect(getDelayString(7255555)).toBe("2h1m");
+  });
+  it("returns minutes (round)", () => {
+    expect(getDelayString(120000)).toBe("2m");
+    expect(getDelayString(151000)).toBe("3m");
+  });
+  it("doesn't display seconds", () => {
+    expect(getDelayString(1000)).toBe("0");
+    expect(getDelayString(30000)).toBe("1m");
+    expect(getDelayString(7255555)).toBe("2h1m");
+  });
+  it("returns defsult 0 value", () => {
+    expect(getDelayString(0)).toBe("0");
+    expect(getDelayString(null)).toBe("0");
+    expect(getDelayString(undefined)).toBe("0");
+  });
+});

package/src/utils/getDelayString.ts

@@ -0,0 +1,28 @@
+/**
+ * Returns a string representing a delay.
+ * @param {Number} timeInMs Delay time in milliseconds.
+ * @ignore
+ */
+const getDelayString = (delayInMs: number) => {
+  let timeInMs = delayInMs;
+  if (timeInMs < 0) {
+    timeInMs = 0;
+  }
+  const h = Math.floor(timeInMs / 3600000);
+  const m = Math.round((timeInMs % 3600000) / 60000);
+  // const s = Math.floor(((timeInMs % 3600000) % 60000) / 1000);
+
+  let str = "";
+  if (h > 0) {
+    str += `${h}h`;
+  }
+  if (m > 0) {
+    str += `${m}m`;
+  }
+  // if (s > 0) {
+  //   str += `${s}s`;
+  // }
+  return str || "0";
+};
+
+export default getDelayString;

package/src/utils/getDelayTextForVehicle.test.ts

@@ -0,0 +1,28 @@
+import getDelayTextForVehicle from "./getDelayTextForVehicle";
+
+describe("getDelayTextForVehicle", () => {
+  it("returns cancelled character", () => {
+    expect(getDelayTextForVehicle(7200000, true)).toBe(
+      String.fromCodePoint(0x00d7),
+    );
+  });
+  it("returns hours (floor)", () => {
+    expect(getDelayTextForVehicle(7200000)).toBe("+2h");
+    expect(getDelayTextForVehicle(7255555)).toBe("+2h1m");
+  });
+  it("returns minutes (round)", () => {
+    expect(getDelayTextForVehicle(120000)).toBe("+2m");
+    expect(getDelayTextForVehicle(151000)).toBe("+3m");
+  });
+  it("doesn't display seconds", () => {
+    expect(getDelayTextForVehicle(1000)).toBe("");
+    expect(getDelayTextForVehicle(30000)).toBe("+1m");
+    expect(getDelayTextForVehicle(7255555)).toBe("+2h1m");
+  });
+  it("returns empty value", () => {
+    expect(getDelayTextForVehicle(1000)).toBe("");
+    expect(getDelayTextForVehicle(null)).toBe("");
+    expect(getDelayTextForVehicle(undefined)).toBe("");
+    expect(getDelayTextForVehicle(0)).toBe("");
+  });
+});

package/src/utils/getDelayTextForVehicle.ts

@@ -0,0 +1,21 @@
+import getDelayString from "./getDelayString";
+
+/**
+ * This function returns the text displays near the vehicle.
+ * We use getDelayString inside it to make sure that RouteSchedule and
+ * the map have the same values.
+ */
+const getDelayTextForVehicle = (
+  delayInMs: number,
+  cancelled = false,
+): string => {
+  if (cancelled) {
+    return String.fromCodePoint(0x00d7);
+  }
+  const delayString = getDelayString(delayInMs);
+  if (delayString === "0") {
+    return "";
+  }
+  return `+${delayString}`;
+};
+export default getDelayTextForVehicle;

package/src/utils/getFullTrajectoryAndFit.ts

@@ -0,0 +1,40 @@
+import { RealtimeLayer } from "mobility-toolbox-js/ol";
+import { RealtimeTrainId } from "mobility-toolbox-js/types";
+import { Map } from "ol";
+import { GeoJSON } from "ol/format";
+import { Vector } from "ol/source";
+
+const getFullTrajectoryAndFit = async (
+  map: Map,
+  realtimeLayer: RealtimeLayer,
+  trainId: RealtimeTrainId,
+  targetZoom = 0,
+) => {
+  // TO IMPROVE:
+  // We should be able to get a trajectory directly but it does not work because the trajectory is outside the bbox
+  // see /BAHNMW-805 and TGSRVI-1126
+  // So we get the full trajectory then zoom on it.
+
+  const fullTrajectory = await realtimeLayer.api.getFullTrajectory(
+    trainId,
+    realtimeLayer.mode,
+    realtimeLayer.engine.generalizationLevelByZoom[targetZoom],
+  );
+  if (fullTrajectory?.content?.features?.length) {
+    const extent = new Vector({
+      features: new GeoJSON().readFeatures(fullTrajectory.content),
+    }).getExtent();
+
+    const promise = new Promise((resolve) => {
+      map.getView().fit(extent, {
+        callback: (success) => {
+          resolve(success);
+        },
+      });
+    });
+    return promise;
+  }
+  return Promise.resolve(false);
+};
+
+export default getFullTrajectoryAndFit;

package/src/utils/getHoursAndMinutes.test.ts

@@ -0,0 +1,14 @@
+import getHoursAndMinutes from "./getHoursAndMinutes";
+
+describe("getHoursAndMinutes", () => {
+  it("returns hours and minutes", () => {
+    expect(getHoursAndMinutes(7200000)).toBe("02:00");
+    expect(getHoursAndMinutes(72999999)).toBe("20:16");
+  });
+  it("returns empty string", () => {
+    expect(getHoursAndMinutes(null)).toBe("");
+    expect(getHoursAndMinutes(undefined)).toBe("");
+    expect(getHoursAndMinutes(0)).toBe("");
+    expect(getHoursAndMinutes(-500000)).toBe("");
+  });
+});

package/src/utils/getHoursAndMinutes.ts

@@ -0,0 +1,22 @@
+/**
+ * Returns a string representation of a number, with a zero if the number is lower than 10.
+ * @ignore
+ */
+const pad = (integer: number) => {
+  return integer < 10 ? `0${integer}` : integer;
+};
+
+/**
+ * Returns a 'hh:mm' string from a time in ms.
+ * @param {Number} timeInMs Time in milliseconds.
+ * @ignore
+ */
+const getHoursAndMinutes = (timeInMs: number) => {
+  if (!timeInMs || timeInMs <= 0) {
+    return "";
+  }
+  const date = new Date(timeInMs);
+  return `${pad(date.getHours())}:${pad(date.getMinutes())}`;
+};
+
+export default getHoursAndMinutes;