@geops/rvf-mobility-web-component 0.1.8

package/src/utils/getMainColorForVehicle.test.ts

@@ -0,0 +1,27 @@
+import getMainColorForVehicle from "./getMainColorForVehicle";
+
+describe("getTextForVehicle", () => {
+  it("returns default rail color", () => {
+    expect(getMainColorForVehicle()).toBe("#ff8080");
+    expect(getMainColorForVehicle(null)).toBe("#ff8080");
+    expect(getMainColorForVehicle({ train_type: 178 })).toBe("#ff8080");
+    expect(getMainColorForVehicle({ vehicleType: 178 })).toBe("#ff8080");
+  });
+
+  it("returns color", () => {
+    expect(getMainColorForVehicle({ color: "foo" })).toBe("#foo");
+    expect(getMainColorForVehicle({ line: { color: "#foo" } })).toBe("#foo");
+    expect(
+      getMainColorForVehicle({ properties: { line: { color: "foo" } } }),
+    ).toBe("#foo");
+  });
+
+  it("returns type color", () => {
+    expect(getMainColorForVehicle({ type: "tram" })).toBe("#ffb400");
+    expect(getMainColorForVehicle({ properties: { type: "tram" } })).toBe(
+      "#ffb400",
+    );
+    expect(getMainColorForVehicle({ vehicleType: 0 })).toBe("#ffb400");
+    expect(getMainColorForVehicle({ train_type: 0 })).toBe("#ffb400");
+  });
+});

package/src/utils/getMainColorForVehicle.ts

@@ -0,0 +1,46 @@
+import {
+  RealtimeDeparture,
+  RealtimeLine,
+  RealtimeMot,
+  RealtimeStopSequence,
+  RealtimeTrajectory,
+} from "mobility-toolbox-js/types";
+
+import getBgColor from "./getBgColor";
+
+// This function returns the main color of a line using a line, trajectory, stopsequence or departure object.
+const getMainColorForVehicle = (object: unknown = null): string => {
+  let color =
+    (object as RealtimeTrajectory)?.properties?.line?.color ||
+    // @ts-expect-error bad type definition
+    (object as RealtimeStopSequence)?.line?.color ||
+    (object as RealtimeLine)?.color;
+
+  if (!color) {
+    let type: RealtimeMot =
+      (object as RealtimeTrajectory)?.properties?.type ||
+      (object as RealtimeStopSequence)?.type;
+
+    if (!type) {
+      let typeNumber: number = (object as RealtimeStopSequence)?.vehicleType;
+
+      if (!Number.isFinite(typeNumber)) {
+        typeNumber = (object as RealtimeDeparture)?.train_type;
+      }
+
+      if (Number.isFinite(typeNumber)) {
+        type = typeNumber as unknown as RealtimeMot;
+      } else {
+        type = "rail";
+      }
+    }
+    color = getBgColor(type) || getBgColor("rail");
+  }
+
+  if (color && color[0] !== "#") {
+    color = `#${color}`;
+  }
+
+  return color;
+};
+export default getMainColorForVehicle;

package/src/utils/getStopStatus.test.ts

@@ -0,0 +1,104 @@
+import getStopStatus from "./getStopStatus";
+
+describe("getStopStatus", () => {
+  describe("when the station is empty", () => {
+    it("returns a correct status", () => {
+      const stopSequence = {
+        stations: [{}],
+      };
+      const {
+        // progress,
+        // isInBetween,
+        // isCancelled,
+        // isFirst,
+        // isLast,
+        // isPassed,
+        // isLeft,
+        // isNotRealtime,
+        isNotStop,
+        // isBoarding,
+        // isNextStop,
+        // isCloseToNextStop,
+        // @ts-expect-error bad type definition
+      } = getStopStatus(stopSequence, 0);
+      expect(isNotStop).toBe(true);
+    });
+
+    it("returns a correct isNotRealtime status", () => {
+      const stopSequence = {
+        stations: [
+          { arrivalDelay: null, departureDelay: null, state: "PENDING" },
+          { arrivalDelay: null, departureDelay: null, state: "TIME_BASED" },
+          { arrivalDelay: 0, departureDelay: 0, state: "PENDING" },
+          { arrivalDelay: 0, departureDelay: 0, state: "TIME_BASED" },
+        ],
+      };
+      let {
+        isNotRealtime,
+        // @ts-expect-error bad type definition
+      } = getStopStatus(stopSequence, 0);
+      expect(isNotRealtime).toBe(true);
+      // @ts-expect-error bad type definition
+      isNotRealtime = getStopStatus(stopSequence, 1).isNotRealtime;
+      expect(isNotRealtime).toBe(true);
+      // @ts-expect-error bad type definition
+      isNotRealtime = getStopStatus(stopSequence, 2).isNotRealtime;
+      expect(isNotRealtime).toBe(false);
+      // @ts-expect-error bad type definition
+      isNotRealtime = getStopStatus(stopSequence, 3).isNotRealtime;
+      expect(isNotRealtime).toBe(true);
+    });
+  });
+
+  describe("when it's the first station", () => {
+    it("returns a correct status", () => {
+      const stopSequence = {
+        stations: [{}],
+      };
+      const {
+        // isInBetween,
+        // isCancelled,
+        isFirst,
+        // isLast,
+        // isPassed,
+        // isLeft,
+        // isNotRealtime,
+        // isNotStop,
+        // isBoarding,
+        isNextStop,
+        progress,
+        // isCloseToNextStop,
+        // @ts-expect-error bad type definition
+      } = getStopStatus(stopSequence, 0);
+      expect(progress).toBe(50);
+      expect(isFirst).toBe(true);
+      expect(isNextStop).toBe(true);
+    });
+  });
+  describe("when it's the first station", () => {
+    it("returns a correct status", () => {
+      const stopSequence = {
+        stations: [{}],
+      };
+      const {
+        // isInBetween,
+        // isCancelled,
+        isFirst,
+        // isBoarding,
+        isNextStop,
+        // isLast,
+        // isPassed,
+        // isLeft,
+        // isNotRealtime,
+        isNotStop,
+        progress,
+        // isCloseToNextStop,
+        // @ts-expect-error bad type definition
+      } = getStopStatus(stopSequence, 0);
+      expect(progress).toBe(50);
+      expect(isFirst).toBe(true);
+      expect(isNextStop).toBe(true);
+      expect(isNotStop).toBe(true);
+    });
+  });
+});

package/src/utils/getStopStatus.ts

@@ -0,0 +1,171 @@
+import { RealtimeStopSequence } from "mobility-toolbox-js/types";
+
+export interface StopStatus {
+  isBoarding?: boolean;
+  isCancelled?: boolean;
+  isCloseToNextStop?: boolean;
+  isFirst?: boolean;
+  isInBetween?: boolean;
+  isLast?: boolean;
+  isLeft?: boolean;
+  isNextStop?: boolean;
+  isNotRealtime?: boolean;
+  isNotStop?: boolean;
+  isPassed?: boolean;
+  progress?: number;
+}
+
+const getBasicStatus = (stop, currTime, previousStop, nextStop) => {
+  let topBoundary = stop.arrivalTime;
+  let bottomBoundary = stop.arrivalTime;
+
+  if (previousStop) {
+    topBoundary =
+      stop.arrivalTime - (stop.arrivalTime - previousStop.arrivalTime) / 2;
+  }
+  if (nextStop) {
+    bottomBoundary =
+      stop.arrivalTime + (nextStop.arrivalTime - stop.arrivalTime) / 2;
+  }
+
+  const isNotStop = !stop.arrivalTime && !stop.departureTime;
+  const hasNoDelays =
+    stop.arrivalDelay === null && stop.departureDelay === null;
+  const isNotRealtime = stop.state === "TIME_BASED" || hasNoDelays;
+  const isCancelled =
+    stop.state === "JOURNEY_CANCELLED" || stop.state === "STOP_CANCELLED";
+  const isBoarding = stop.state === "BOARDING";
+
+  const isPassedBottom = currTime > bottomBoundary;
+
+  const isLeft =
+    stop.state === "LEAVING" ||
+    (isNotRealtime && isPassedBottom) ||
+    (isCancelled && isPassedBottom);
+
+  return {
+    bottomBoundary,
+    isBoarding,
+    isCancelled,
+    isLeft,
+    isNotRealtime,
+    isNotStop,
+    isPassedBottom,
+    topBoundary,
+  };
+};
+
+/**
+ * This function provide an object with some informations about the status of the vehicle for this station.
+ * If the vehicul has already passed the sattion how far is it from the station, ...
+ */
+const getStopStatus = (
+  stopSequence: RealtimeStopSequence,
+  index: number,
+): StopStatus => {
+  const { stations: stops } = stopSequence;
+  let progress = 0;
+  const previousStop = stops[index - 1];
+  const stop = stops[index];
+  const nextStop = stops[index + 1];
+
+  if (!stop) {
+    return {};
+  }
+
+  const currTime = Date.now();
+  const previousStopStatus =
+    previousStop &&
+    getBasicStatus(previousStop, currTime, stops[index - 2], stop);
+  const basicStatus = getBasicStatus(stop, currTime, previousStop, nextStop);
+  let { isLeft } = basicStatus;
+  const {
+    bottomBoundary,
+    isBoarding,
+    isCancelled,
+    isNotRealtime,
+    isNotStop,
+    isPassedBottom,
+    topBoundary,
+  } = basicStatus;
+
+  const isNextStop = !isLeft && (!previousStop || previousStopStatus.isLeft);
+
+  // The future stop is the stop after a stop with state === "BOARDING"
+  const isFutureStop = !isLeft && (!previousStop || !previousStopStatus.isLeft);
+
+  let isCloseToNextStop = false;
+  if (isNextStop) {
+    const timeGap = (bottomBoundary - topBoundary) * 0.2; // 20% of the duration between 2 stops
+    isCloseToNextStop = currTime > stop.arrivalTime - timeGap;
+  }
+
+  // Check if the stop has been passed
+  // For SBAHNMW-298
+  // Considerate the state ("LEAVING")
+  // which is important if the data has not been updated for a long time
+  let isPassed = isPassedBottom && !isNextStop && !isFutureStop;
+
+  if (topBoundary < currTime && currTime < bottomBoundary && !isFutureStop) {
+    progress = Math.round(
+      ((currTime - topBoundary) * 100) / (bottomBoundary - topBoundary),
+    );
+  }
+
+  // For SBAHNMW-298
+  // Set the progress manually
+  // if the data has not been updated for a long time.
+  // These stops would have be passed if the data were up-to-date
+  if (isPassedBottom && (isNextStop || isFutureStop)) {
+    progress = 0;
+  }
+
+  // The first station is a special case because the top boundary starts at 50% of the div element.
+  const isFirstStation = index === 0;
+
+  if (isFirstStation) {
+    progress = 50;
+  }
+
+  if (isBoarding) {
+    // When the train has not left the first station the progress is 0.
+    progress = 50;
+  } else if (
+    !isFirstStation &&
+    ((isLeft && progress < 50) || (!isLeft && progress > 50))
+  ) {
+    // Here we ensure that isLeft and progress values are properly synced
+    // It doesn't apply to the the first station.
+    progress = 50;
+  }
+
+  // For SBAHNMW-210
+  // If some data (arrivalTime or state) from backend are wrong, 2 stops have the progress bar.
+  // So to avoid double progress display, we force the isPassed value to true.
+  if (progress > 50 && getStopStatus(stopSequence, index + 1).progress > 0) {
+    progress = 100;
+    isLeft = true;
+    isPassed = true;
+  }
+
+  if (isPassed) {
+    progress = 100;
+  }
+
+  return {
+    isBoarding,
+    isCancelled,
+    isCloseToNextStop,
+    isFirst: !previousStop,
+    isInBetween: !isPassed && progress > 0,
+    isLast: !nextStop,
+    isLeft,
+    isNextStop,
+    isNotRealtime,
+    isNotStop,
+    isPassed,
+    progress,
+  };
+};
+
+export default getStopStatus;

package/src/utils/getTextFontForVehicle.test.ts

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

package/src/utils/getTextFontForVehicle.tsx

@@ -0,0 +1,9 @@
+/**
+ * Return the font for the delay text in the map.
+ */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const getTextFontForVehicle = (fontSize: number, text?: string) => {
+  return `bold ${fontSize}px arial`;
+};
+
+export default getTextFontForVehicle;

package/src/utils/getTextForVehicle.test.ts

@@ -0,0 +1,17 @@
+import getTextForVehicle from "./getTextForVehicle";
+
+describe("getTextForVehicle", () => {
+  it("returns empty", () => {
+    expect(getTextForVehicle()).toBe("");
+    expect(getTextForVehicle(null)).toBe("");
+  });
+
+  it("returns name", () => {
+    expect(getTextForVehicle("name")).toBe("name");
+    expect(getTextForVehicle({ name: "name" })).toBe("name");
+    expect(getTextForVehicle({ line: { name: "name" } })).toBe("name");
+    expect(getTextForVehicle({ properties: { line: { name: "name" } } })).toBe(
+      "name",
+    );
+  });
+});

package/src/utils/getTextForVehicle.ts

@@ -0,0 +1,19 @@
+import {
+  RealtimeLine,
+  RealtimeStopSequence,
+  RealtimeTrajectory,
+} from "mobility-toolbox-js/types";
+
+const getTextForVehicle = (object: unknown = ""): string => {
+  const name =
+    (object as RealtimeTrajectory)?.properties?.line?.name ||
+    // @ts-expect-error bad type definition
+    (object as RealtimeStopSequence)?.line?.name ||
+    (object as RealtimeLine)?.name ||
+    (object as string) ||
+    "";
+
+  return name;
+};
+
+export default getTextForVehicle;

package/src/utils/hooks/useDebug.tsx

@@ -0,0 +1,11 @@
+import { useMemo } from "preact/hooks";
+
+const useDebug = () => {
+  const debug = useMemo(() => {
+    const value = new URLSearchParams(window.location.search).get("debug");
+    return !value || value === "false" ? false : value;
+  }, []);
+  return debug;
+};
+
+export default useDebug;

package/src/utils/hooks/useDeparture.tsx

@@ -0,0 +1,23 @@
+import { RealtimeDeparture } from "mobility-toolbox-js/types";
+import { createContext } from "preact";
+import { useContext } from "preact/hooks";
+
+export type DepartureContextType = {
+  index?: number;
+  departure?: RealtimeDeparture;
+};
+
+export const DepartureContext = createContext({
+  index: null,
+  departure: null,
+} as DepartureContextType);
+
+const useDeparture = (): DepartureContextType => {
+  const context = useContext<DepartureContextType>(DepartureContext);
+  if (!context) {
+    throw new Error("useDeparture must be used within a ContextProvider");
+  }
+  return context;
+};
+
+export default useDeparture;

package/src/utils/hooks/useI18n.tsx

@@ -0,0 +1,20 @@
+import { createContext } from "preact";
+import { useContext } from "preact/hooks";
+
+export type I18NContextType = {
+  t: (id: string, templateValues?: { [key: string]: string }) => string;
+};
+
+export const I18nContext = createContext({
+  t: (id, templateValues) => `${id} ${JSON.stringify(templateValues)}`,
+} as I18NContextType);
+
+const useI18n = (): I18NContextType => {
+  const context = useContext<I18NContextType>(I18nContext);
+  if (!context) {
+    throw new Error("useI18n must be used within a ContextProvider");
+  }
+  return context;
+};
+
+export default useI18n;

package/src/utils/hooks/useMapContext.tsx

@@ -0,0 +1,74 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import {
+  MaplibreLayer,
+  MaplibreStyleLayer,
+  RealtimeLayer,
+} from "mobility-toolbox-js/ol";
+import {
+  RealtimeStation,
+  RealtimeStationId,
+  RealtimeStopSequence,
+  RealtimeTrainId,
+} from "mobility-toolbox-js/types";
+import { Map } from "ol";
+import { createContext } from "preact";
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { useContext } from "preact/hooks";
+
+import type { MobilityMapProps } from "../../MobilityMap/MobilityMap";
+
+export type MapContextType = {
+  baseLayer: MaplibreLayer;
+  isFollowing: boolean;
+  isTracking: boolean;
+  map: Map;
+  realtimeLayer: RealtimeLayer;
+  setBaseLayer: (baseLayer: MaplibreLayer) => void;
+  setIsFollowing: (isFollowing: boolean) => void;
+  setIsTracking: (isTracking: boolean) => void;
+  setMap: (map?: Map) => void;
+  setRealtimeLayer: (realtimeLayer?: RealtimeLayer) => void;
+  setStation: (station?: RealtimeStation) => void;
+  setStationId: (stationId?: RealtimeStationId) => void;
+  setStationsLayer: (stationsLayer?: MaplibreStyleLayer) => void;
+  setStopSequence: (stopSequence?: RealtimeStopSequence) => void;
+  setTrainId: (trainId?: RealtimeTrainId) => void;
+  station: RealtimeStation;
+  stationId: RealtimeStationId;
+  stationsLayer: MaplibreStyleLayer;
+  stopSequence: RealtimeStopSequence;
+  trainId: RealtimeTrainId;
+} & MobilityMapProps;
+
+export const MapContext = createContext<MapContextType>({
+  baseLayer: null,
+  isFollowing: false,
+  isTracking: false,
+  map: null,
+  realtimeLayer: null,
+  setBaseLayer: (baseLayer?: MaplibreLayer) => {},
+  setIsFollowing: (isFollowing: boolean) => {},
+  setIsTracking: (isTracking: boolean) => {},
+  setMap: (map?: Map) => {},
+  setRealtimeLayer: (realtimeLayer?: RealtimeLayer) => {},
+  setStation: (station?: RealtimeStation) => {},
+  setStationId: (stationId?: RealtimeStationId) => {},
+  setStationsLayer: (stationsLayer?: MaplibreStyleLayer) => {},
+  setStopSequence: (stopSequence?: RealtimeStopSequence) => {},
+  setTrainId: (trainId?: RealtimeTrainId) => {},
+  station: null,
+  stationId: null,
+  stationsLayer: null,
+  stopSequence: null,
+  trainId: null,
+} as MapContextType);
+
+const useMapContext = (): MapContextType => {
+  const context = useContext<MapContextType>(MapContext);
+  if (!context) {
+    throw new Error("useMapContext must be used within a ContextProvider");
+  }
+  return context;
+};
+
+export default useMapContext;

package/src/utils/hooks/useParams.ts

@@ -0,0 +1,5 @@
+const useParams = () => {
+  return Object.fromEntries(new URLSearchParams(window.location.search));
+};
+
+export default useParams;

package/src/utils/hooks/useRouteStop.tsx

@@ -0,0 +1,33 @@
+import { RealtimeStation, RealtimeStop } from "mobility-toolbox-js/types";
+import { createContext } from "preact";
+import { useContext } from "preact/hooks";
+
+import { StopStatus } from "../getStopStatus";
+
+export interface RouteStopContextType {
+  index?: number;
+  invertColor?: boolean;
+  station?: RealtimeStation;
+  status?: StopStatus;
+  stop?: {
+    platform?: string;
+  } & RealtimeStop;
+}
+
+export const RouteStopContext = createContext({
+  index: null,
+  invertColor: null,
+  station: null,
+  status: null,
+  stop: null,
+} as RouteStopContextType);
+
+const useRouteStop = (): RouteStopContextType => {
+  const context = useContext<RouteStopContextType>(RouteStopContext);
+  if (!context) {
+    throw new Error("useRouteStop must be used within a ContextProvider");
+  }
+  return context;
+};
+
+export default useRouteStop;

package/src/utils/hooks/useStation.tsx

@@ -0,0 +1,21 @@
+import { RealtimeStation } from "mobility-toolbox-js/types";
+import { createContext } from "preact";
+import { useContext } from "preact/hooks";
+
+export interface StationContextType {
+  station?: RealtimeStation;
+}
+
+export const StationContext = createContext({
+  station: null,
+} as StationContextType);
+
+const useRouteStop = (): StationContextType => {
+  const context = useContext<StationContextType>(StationContext);
+  if (!context) {
+    throw new Error("useRouteStop must be used within a ContextProvider");
+  }
+  return context;
+};
+
+export default useRouteStop;

package/src/utils/hooks/useUpdatePermalink.tsx

@@ -0,0 +1,33 @@
+import { Map } from "ol";
+import { unByKey } from "ol/Observable";
+import { useEffect, useState } from "preact/hooks";
+
+const useUpdatePermalink = (map: Map, permalink: boolean) => {
+  const [x, setX] = useState<string>(null);
+  const [y, setY] = useState<string>(null);
+  const [z, setZ] = useState<string>(null);
+
+  useEffect(() => {
+    let listener;
+    if (map && permalink) {
+      listener = map.on("moveend", () => {
+        const urlParams = new URLSearchParams(window.location.search);
+        const newX = map.getView().getCenter()[0].toFixed(2);
+        const newY = map.getView().getCenter()[1].toFixed(2);
+        const newZ = map.getView().getZoom().toFixed(1);
+        setX(newX);
+        urlParams.set("x", newX);
+        setY(newY);
+        urlParams.set("y", newY);
+        setZ(newZ);
+        urlParams.set("z", newZ);
+        window.history.replaceState(null, null, `?${urlParams.toString()}`);
+      });
+    }
+    return () => {
+      unByKey(listener);
+    };
+  }, [map, permalink]);
+  return { x, y, z };
+};
+export default useUpdatePermalink;

package/src/utils/hooks/useZoom.tsx

@@ -0,0 +1,32 @@
+import { unByKey } from "ol/Observable";
+import { useEffect, useState } from "preact/hooks";
+
+import useMapContext from "./useMapContext";
+
+const useZoom = () => {
+  const { map } = useMapContext();
+  const [zoom, setZoom] = useState(map?.getView()?.getZoom());
+  useEffect(() => {
+    if (!map) {
+      return;
+    }
+    let timeout;
+    const view = map.getView();
+    if (view) {
+      setZoom(view.getZoom());
+    }
+    const zoomListener = view.on("change:resolution", () => {
+      clearTimeout(timeout);
+      timeout = setTimeout(() => {
+        return setZoom(view.getZoom());
+      }, 150);
+    });
+    return () => {
+      clearTimeout(timeout);
+      unByKey(zoomListener);
+    };
+  }, [map]);
+  return zoom;
+};
+
+export default useZoom;

package/src/utils/i18n.ts

@@ -0,0 +1,16 @@
+import rosetta from "rosetta";
+
+import translations from "./translations";
+
+const i18n = rosetta(translations);
+
+// Set current language to preferred browser language with fallback to english
+i18n.locale(
+  navigator.languages // @ts-expect-error bad type definition
+    .find((l) => {
+      return i18n.table(l.split("-")[0]) !== undefined;
+    })
+    ?.split("-")[0] || "en",
+);
+
+export default i18n;