@geops/rvf-mobility-web-component 0.1.83 → 0.1.84

package/src/utils/hooks/useRouteStop.tsx

@@ -1,7 +1,11 @@
 import { createContext } from "preact";
 import { useContext } from "preact/hooks";
 
-import type { RealtimeStation, RealtimeStop } from "mobility-toolbox-js/types";
+import type {
+  RealtimeStation,
+  RealtimeStop,
+  RealtimeStopSequence,
+} from "mobility-toolbox-js/types";
 
 import type { StopStatus } from "../getStopStatus";
 
@@ -13,6 +17,7 @@ export interface RouteStopContextType {
   stop?: {
     platform?: string;
   } & RealtimeStop;
+  stopSequence?: RealtimeStopSequence;
 }
 
 export const RouteStopContext = createContext({
@@ -21,6 +26,7 @@ export const RouteStopContext = createContext({
   station: null,
   status: null,
   stop: null,
+  stopSequence: null,
 } as RouteStopContextType);
 
 const useRouteStop = (): RouteStopContextType => {

package/src/utils/hooks/useSearchLines.tsx

@@ -0,0 +1,34 @@
+import { useMemo } from "preact/hooks";
+
+import { useLnpLinesInfos } from "./useLnp";
+import useMapContext from "./useMapContext";
+
+import type { LnpLineInfo } from "./useLnp";
+import type { SearchResponse } from "./useSearchStops";
+
+function useSearchLines(query: string): SearchResponse<LnpLineInfo> {
+  const { hasLnp } = useMapContext();
+  const linesInfos = useLnpLinesInfos();
+
+  const results = useMemo(() => {
+    if (!query || !linesInfos || !hasLnp) {
+      return [];
+    }
+    return Object.values(linesInfos || {}).filter((line: LnpLineInfo) => {
+      return (
+        line?.short_name?.toLowerCase().includes(query.toLowerCase()) ||
+        line?.long_name?.toLowerCase().includes(query.toLowerCase()) ||
+        line?.id?.toLowerCase().includes(query.toLowerCase()) ||
+        line?.external_id?.toLowerCase().includes(query.toLowerCase()) ||
+        line?.mot?.toLowerCase().includes(query.toLowerCase())
+      );
+    });
+  }, [hasLnp, linesInfos, query]);
+
+  return {
+    isLoading: false,
+    results: results || [],
+  };
+}
+
+export default useSearchLines;

package/src/utils/hooks/useSearchLnpStops.tsx

@@ -0,0 +1,38 @@
+import { useMemo } from "preact/hooks";
+
+import { useLnpStopsInfos } from "./useLnp";
+import useMapContext from "./useMapContext";
+
+import type { LnpStopInfo } from "./useLnp";
+import type { SearchResponse } from "./useSearchStops";
+
+function useSearchLnpStops(query: string): SearchResponse<LnpStopInfo> {
+  const { hasLnp } = useMapContext();
+  const infos = useLnpStopsInfos();
+
+  const results = useMemo(() => {
+    if (!query || !infos || !hasLnp) {
+      return [];
+    }
+    return Object.values(infos || {}).filter((item: LnpStopInfo) => {
+      return (
+        item?.short_name?.toLowerCase().includes(query.toLowerCase()) ||
+        item?.long_name?.toLowerCase().includes(query.toLowerCase()) ||
+        item?.external_id?.toLowerCase().includes(query.toLowerCase()) ||
+        item?.codes?.find((code) => {
+          return (
+            code.toLowerCase() === query.toLowerCase() ||
+            code.split(":")[1]?.toLowerCase() === query.toLowerCase()
+          );
+        })
+      );
+    });
+  }, [hasLnp, infos, query]);
+
+  return {
+    isLoading: false,
+    results: results || [],
+  };
+}
+
+export default useSearchLnpStops;

package/src/utils/hooks/useSearchStops.tsx

@@ -0,0 +1,85 @@
+import debounce from "lodash.debounce";
+import { StopsAPI } from "mobility-toolbox-js/ol";
+import { useEffect, useMemo, useState } from "preact/hooks";
+
+import { MAX_EXTENT_4326 } from "../constants";
+
+import useMapContext from "./useMapContext";
+
+import type { StopsParameters, StopsResponse } from "mobility-toolbox-js/types";
+
+export type StopsFeature = StopsResponse["features"][0];
+
+export interface SearchResponse<T> {
+  isLoading: boolean;
+  results: T[] | undefined;
+}
+
+/**
+ * This hook launch a request to the Stops API.
+ *
+ * @param query
+ */
+function useSearchStops(
+  query: string,
+  params?: Partial<StopsParameters>,
+): SearchResponse<StopsFeature> {
+  const { apikey, mots, stopsurl } = useMapContext();
+  const [results, setResults] = useState<StopsFeature[] | undefined>();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const api: StopsAPI = useMemo(() => {
+    if (!apikey || !stopsurl) {
+      return null;
+    }
+    return new StopsAPI({ apiKey: apikey, url: stopsurl });
+  }, [apikey, stopsurl]);
+
+  const debouncedSearch = useMemo(() => {
+    let abortCtrl: AbortController | undefined;
+
+    return debounce((q) => {
+      abortCtrl?.abort();
+      abortCtrl = new AbortController();
+
+      const reqParams = {
+        bbox: MAX_EXTENT_4326?.join(","),
+        mots,
+        q,
+        ...(params ?? {}),
+      } as StopsParameters;
+
+      setIsLoading(true);
+      api
+        .search(reqParams, { signal: abortCtrl.signal })
+        .then((res: StopsResponse) => {
+          setResults(res.features);
+          setIsLoading(false);
+        })
+        .catch((e) => {
+          // AbortError is expected
+          if (e.code !== 20) {
+            // eslint-disable-next-line no-console
+            console.error("Failed to fetch stations", e);
+            return;
+          }
+          setIsLoading(false);
+        });
+    }, 150);
+  }, [api, mots, params]);
+
+  useEffect(() => {
+    if (!query || !api) {
+      setResults([]);
+      return;
+    }
+    debouncedSearch(query);
+  }, [api, debouncedSearch, query]);
+
+  return {
+    isLoading,
+    results: results || [],
+  };
+}
+
+export default useSearchStops;

package/src/utils/hooks/useSearchTrains.tsx

@@ -0,0 +1,83 @@
+import debounce from "lodash.debounce";
+import { RealtimeRestAPI } from "mobility-toolbox-js/ol";
+import { useEffect, useMemo, useState } from "preact/hooks";
+
+import useMapContext from "./useMapContext";
+
+import type { RealtimeRouteIdentifierMatch } from "mobility-toolbox-js/types";
+
+import type { SearchResponse } from "./useSearchStops";
+
+function useSearchTrains(
+  query: string,
+): SearchResponse<RealtimeRouteIdentifierMatch> {
+  const { apikey, hasRealtime, realtimeresturl, realtimetenant, tenant } =
+    useMapContext();
+
+  const [results, setResults] = useState<
+    RealtimeRouteIdentifierMatch[] | undefined
+  >();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const tenantMemo = useMemo(() => {
+    return realtimetenant || tenant;
+  }, [realtimetenant, tenant]);
+
+  const api = useMemo(() => {
+    if (!apikey || !tenantMemo || !hasRealtime) {
+      return null;
+    }
+    return new RealtimeRestAPI({
+      apiKey: apikey,
+      tenant: tenantMemo,
+      url: realtimeresturl,
+    });
+  }, [apikey, tenantMemo, hasRealtime, realtimeresturl]);
+
+  const debouncedSearch = useMemo(() => {
+    let abortCtrl: AbortController | undefined;
+
+    return debounce((q?: string) => {
+      abortCtrl?.abort();
+      abortCtrl = new AbortController();
+
+      setIsLoading(true);
+      api
+        .trainsByRouteIdentifier(
+          {
+            exact_match: false,
+            query: q,
+          },
+          { signal: abortCtrl.signal },
+        )
+        .then((res) => {
+          setResults(res.matches);
+          setIsLoading(false);
+        })
+        .catch((e) => {
+          // AbortError is expected
+          if (e.code !== 20) {
+            // eslint-disable-next-line no-console
+            console.error("Failed to fetch trains by route identifier", e);
+            return;
+          }
+          setIsLoading(false);
+        });
+    }, 150);
+  }, [api]);
+
+  useEffect(() => {
+    if (!query || !api) {
+      setResults([]);
+      return;
+    }
+    debouncedSearch(query);
+  }, [api, debouncedSearch, query]);
+
+  return {
+    isLoading,
+    results: results || [],
+  };
+}
+
+export default useSearchTrains;

package/src/utils/realtimeRVFStyle.ts

@@ -1,6 +1,5 @@
 import { createCanvas } from "mobility-toolbox-js/ol";
 
-// @ts-expect-error - svg loaded as dataurl
 import noRealtime from "../icons/NoRealtime/norealtime.svg";
 
 import type {
@@ -174,6 +173,8 @@ const cacheText: StyleCache = {};
  * @private
  */
 export const getTextCanvas = (
+  trajectory: RealtimeTrajectory,
+  viewState: ViewState,
   text: string,
   origin: number,
   textSize: number,
@@ -181,7 +182,12 @@ export const getTextCanvas = (
   strokeColor: string,
   hasStroke: boolean,
   pixelRatio: number,
-  getTextFont: (fontSize: number, text?: string) => string,
+  getTextFont: (
+    trajectory: RealtimeTrajectory,
+    viewState: ViewState,
+    fontSize: number,
+    text?: string,
+  ) => string,
 ) => {
   const key = `${text}, ${origin}, ${textSize}, ${fillColor},${strokeColor}, ${hasStroke}, ${pixelRatio}`;
   if (!cacheText[key]) {
@@ -197,7 +203,7 @@ export const getTextCanvas = (
         ctx.save();
         ctx.textBaseline = "middle";
         ctx.textAlign = "center";
-        ctx.font = getTextFont(textSize + 2, text);
+        ctx.font = getTextFont(trajectory, viewState, textSize + 2, text);
         ctx.strokeStyle = strokeColor;
         ctx.strokeText(text, origin, origin);
         ctx.restore();
@@ -207,7 +213,7 @@ export const getTextCanvas = (
       ctx.textBaseline = "middle";
       ctx.textAlign = "center";
       ctx.fillStyle = fillColor;
-      ctx.font = getTextFont(textSize, text);
+      ctx.font = getTextFont(trajectory, viewState, textSize, text);
       ctx.strokeStyle = strokeColor;
       ctx.strokeText(text, origin, origin);
       ctx.fillText(text, origin, origin);
@@ -237,13 +243,13 @@ const realtimeRVFStyle: RealtimeStyleFunction = (
   const {
     delayDisplay = 300000,
     delayOutlineColor = "#000",
-    getBgColor = () => {
+    getColor = () => {
       return "#000";
     },
     getDelayColor = () => {
       return "#000";
     },
-    getDelayFont = (fontSize: number) => {
+    getDelayFont = (traj, viewStat, fontSize: number) => {
       return `bold ${fontSize}px arial, sans-serif`;
     },
     getDelayText = () => {
@@ -258,13 +264,13 @@ const realtimeRVFStyle: RealtimeStyleFunction = (
     getRadius = () => {
       return 0;
     },
-    getText = (text?: string) => {
-      return text;
+    getText = (traj: RealtimeTrajectory) => {
+      return traj?.properties?.line?.name || "I";
     },
     getTextColor = () => {
       return "#000";
     },
-    getTextFont = (fontSize: number) => {
+    getTextFont = (traj, viewStat, fontSize: number) => {
       return `bold ${fontSize}px arial, sans-serif`;
     },
     getTextSize = () => {
@@ -275,8 +281,8 @@ const realtimeRVFStyle: RealtimeStyleFunction = (
     useDelayStyle,
   } = options;
 
-  const { pixelRatio = 1, zoom } = viewState;
-  let { type } = trajectory.properties;
+  const { pixelRatio = 1 } = viewState;
+  const { type } = trajectory.properties;
   const {
     delay,
     has_realtime_journey: hasRealtimeJourney,
@@ -287,22 +293,16 @@ const realtimeRVFStyle: RealtimeStyleFunction = (
   } = trajectory.properties;
   let { color, name, text_color: textColor } = line || {};
 
-  name = getText(name);
+  name = getText(trajectory, viewState);
 
   const cancelled = state === "JOURNEY_CANCELLED";
 
-  if (!type) {
-    type = "Rail";
-  }
-
   if (!name) {
     name = "I";
   }
 
-  // if (!textColor) {
-  textColor = getTextColor(type); //"#000000";
-  // }
-  color = getBgColor(type, line);
+  textColor = getTextColor(trajectory, viewState);
+  color = getColor(trajectory, viewState);
 
   if (color && !color.startsWith("#")) {
     color = `#${color}`;
@@ -312,12 +312,11 @@ const realtimeRVFStyle: RealtimeStyleFunction = (
     textColor = `#${textColor}`;
   }
 
-  const z = Math.min(Math.floor(zoom || 1), 16);
   const hover = !!(hoverVehicleId && hoverVehicleId === id);
   const selected = !!(selectedVehicleId && selectedVehicleId === id);
 
   // Calcul the radius of the circle
-  let radius = getRadius(type, z) * pixelRatio;
+  let radius = getRadius(trajectory, viewState) * pixelRatio;
   const isDisplayStrokeAndDelay =
     radius >= getMaxRadiusForStrokeAndDelay() * pixelRatio;
 
@@ -362,7 +361,7 @@ const realtimeRVFStyle: RealtimeStyleFunction = (
       delayBg = getDelayBgCanvas(
         origin,
         radiusDelay,
-        getDelayColor(delay, cancelled),
+        getDelayColor(trajectory, viewState, delay, cancelled),
       );
     }
 
@@ -379,14 +378,19 @@ const realtimeRVFStyle: RealtimeStyleFunction = (
           cancelled ? 19 : 14,
           Math.min(cancelled ? 19 : 17, radius * 1.2),
         ) * pixelRatio;
-      const text = getDelayText(delay, cancelled);
+      const text = getDelayText(trajectory, viewState, delay, cancelled);
 
       if (text) {
         delayText = getDelayTextCanvas(
           text,
           fontSize,
-          getDelayFont(hover || viewState.zoom >= 13 ? fontSize : 0, text), // Only display delay labels on zoom 13+
-          getDelayColor(delay, cancelled, true),
+          getDelayFont(
+            trajectory,
+            viewState,
+            hover || viewState.zoom >= 13 ? fontSize : 0,
+            text,
+          ), // Only display delay labels on zoom 13+
+          getDelayColor(trajectory, viewState, delay, cancelled, true),
           delayOutlineColor,
           pixelRatio,
         );
@@ -398,9 +402,9 @@ const realtimeRVFStyle: RealtimeStyleFunction = (
     // Draw colored circle with black border
     let circleFillColor;
     if (useDelayStyle) {
-      circleFillColor = getDelayColor(delay, cancelled);
+      circleFillColor = getDelayColor(trajectory, viewState, delay, cancelled);
     } else {
-      circleFillColor = color || getBgColor(type, trajectory);
+      circleFillColor = color || getColor(trajectory, viewState);
     }
 
     const hasStroke = isDisplayStrokeAndDelay || hover || selected;
@@ -460,14 +464,16 @@ const realtimeRVFStyle: RealtimeStyleFunction = (
       if (isDisplayText) {
         const fontSize2 = Math.max(radius, 10);
         const textSize = getTextSize(
+          trajectory,
+          viewState,
           ctx,
           markerSize,
           name,
           fontSize2,
-          getTextFont,
+          getTextFont(trajectory, viewState, fontSize2, name),
         );
         const textColor2 = !useDelayStyle
-          ? textColor || getTextColor(type)
+          ? textColor || getTextColor(trajectory, viewState)
           : "#000000";
         const hasStroke2 =
           !!useDelayStyle &&
@@ -475,6 +481,8 @@ const realtimeRVFStyle: RealtimeStyleFunction = (
           operatorProvidesRealtime === "yes";
 
         circleText = getTextCanvas(
+          trajectory,
+          viewState,
           name,
           origin,
           textSize,

package/src/utils/translations.ts

@@ -53,7 +53,12 @@ const translations: Translations = {
     print_menu_title: "Drucken",
     reason: "Grund",
     recommendation: "Empfehlung",
+    search_input_cancel: "Eingabe löschen",
+    search_lines_results: "Linien",
     search_menu_title: "Suchen",
+    search_placeholder: "Haltestelle, Linie, Fährte suchen",
+    search_stops_results: "Haltestellen",
+    search_trains_results: "Fährte",
     share_email_send: "E-Mail senden",
     share_image_save: "Bild speichern",
     share_menu_title: "Teilen",
@@ -107,7 +112,11 @@ const translations: Translations = {
     print_menu_title: "Print",
     reason: "Reason",
     recommendation: "Recommendation",
+    search_lines_results: "Lines",
     search_menu_title: "Search",
+    search_placeholder: "Search stop, line, route",
+    search_stops_results: "Stops",
+    search_trains_results: "Routes",
     share_email_send: "Send email",
     share_image_save: "Save image",
     share_menu_title: "Share",
@@ -161,7 +170,11 @@ const translations: Translations = {
     print_menu_title: "Imprimer",
     reason: "Raison",
     recommendation: "Recommandation",
+    search_lines_results: "Lignes",
     search_menu_title: "Rechercher",
+    search_placeholder: "Rechercher un arrêt, une ligne, une route",
+    search_stops_results: "Arrêts",
+    search_trains_results: "Trajets",
     share_email_send: "Envoyer un email",
     share_image_save: "Enregistrer l'image",
     share_menu_title: "Partager",
@@ -215,7 +228,11 @@ const translations: Translations = {
     print_menu_title: "Stampa",
     reason: "Motivo",
     recommendation: "Raccomandazione",
+    search_lines_results: "Linee",
     search_menu_title: "Cerca",
+    search_placeholder: "Cerca fermata, linea, percorso",
+    search_stops_results: "Fermate",
+    search_trains_results: "Percorsi",
     share_email_send: "Invia email",
     share_image_save: "Salva immagine",
     share_menu_title: "Condividi",

package/tash

@@ -0,0 +1,58 @@
+diff --git a/src/MobilityMap/MobilityMapAttributes.ts b/src/MobilityMap/MobilityMapAttributes.ts
+index 25279ab..b1c1d8e 100644
+--- a/src/MobilityMap/MobilityMapAttributes.ts
++++ b/src/MobilityMap/MobilityMapAttributes.ts
+@@ -171,7 +171,7 @@ where:
+   },
+   lineid: {
+     description: `An id or a short/long name of a line to highlight. <br/>Ex: S1`,
+-    public: true,
++    public: false,
+   },
+   lnp: {
+     defaultValue: "true",
+@@ -197,7 +197,7 @@ where:
+   mapsetplanid: {
+     description:
+       "An id of the mapset plan to display. Mostly for debugging purposes.",
+-    public: true,
++    public: false,
+   },
+   mapsettags: {
+     description: `The ${geopsMapsetApiLink} tags to get the plans from.`,
+@@ -210,7 +210,7 @@ where:
+   },
+   mapsettimestamp: {
+     description: `The ${geopsMapsetApiLink} timestamp used to load valid standard plan. If not defined it will use the current time.`,
+-    public: true,
++    public: false,
+   },
+   mapseturl: {
+     defaultValue: "https://editor.mapset.io/api/v1/",
+@@ -256,7 +256,7 @@ where:
+   },
+   notificationid: {
+     description: `An id of a notification to show details of.`,
+-    public: true,
++    public: false,
+   },
+   notificationtenant: {
+     defaultValue: "rvf",
+@@ -342,7 +342,7 @@ where:
+   },
+   stationid: {
+     description: `An id or a short/long name of a station to show details of.`,
+-    public: true,
++    public: false,
+   },
+   stopsurl: {
+     defaultValue: "https://api.geops.io/stops/v1/",
+@@ -361,7 +361,7 @@ where:
+   },
+   trainid: {
+     description: `An id of a route to highlight on the map and to show details of.`,
+-    public: true,
++    public: false,
+   },
+   zoom: {
+     description: "The zoom level of the map.",

package/src/utils/centerOnStation.ts

@@ -1,18 +0,0 @@
-import { fromLonLat } from "ol/proj";
-
-import type { Map } from "ol";
-
-import type { 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/getDelayFontForVehicle.test.ts

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

package/src/utils/getDelayFontForVehicle.tsx

@@ -1,8 +0,0 @@
-/**
- * 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/hooks/useStation.tsx

@@ -1,22 +0,0 @@
-import { createContext } from "preact";
-import { useContext } from "preact/hooks";
-
-import type { RealtimeStation } from "mobility-toolbox-js/types";
-
-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;