@geops/rvf-mobility-web-component 0.1.85 → 0.1.88

package/package.json

@@ -2,7 +2,7 @@
   "name": "@geops/rvf-mobility-web-component",
   "license": "UNLICENSED",
   "description": "Web components for rvf in the domains of mobility and logistics.",
-  "version": "0.1.85",
+  "version": "0.1.88",
   "homepage": "https://rvf-mobility-web-component-geops.vercel.app/",
   "type": "module",
   "main": "index.js",
@@ -12,7 +12,7 @@
     "jspdf": "^3.0.3",
     "lodash.debounce": "^4.0.8",
     "maplibre-gl": "^5.10.0",
-    "mobility-toolbox-js": "3.5.1-beta.4",
+    "mobility-toolbox-js": "3.5.1-beta.5",
     "ol": "^10.6.1",
     "preact": "^10.27.2",
     "preact-custom-element": "^4.5.1",

package/src/FeaturesInfosListener/FeaturesInfosListener.tsx

@@ -12,6 +12,7 @@ function FeaturesInfosListener() {
     featuresInfos,
     featuresInfosHovered,
     linesNetworkPlanLayer,
+    notificationsLayer,
     realtimeLayer,
     setLinesIds,
     setSelectedFeature,
@@ -36,6 +37,11 @@ function FeaturesInfosListener() {
         return info.layer === realtimeLayer;
       })?.features || [];
 
+    const [notificationFeature] =
+      featuresInfos?.find((info) => {
+        return info.layer === notificationsLayer;
+      })?.features || [];
+
     const [stationFeature] =
       featuresInfos?.find((info) => {
         return info.layer === stationsLayer;
@@ -60,25 +66,29 @@ function FeaturesInfosListener() {
         return info.features;
       }) || [];
 
-    if (realtimeFeature || stationFeature || !features.length) {
-      setSelectedFeature(realtimeFeature || stationFeature || null);
-      setSelectedFeatures(
-        realtimeFeature || stationFeature
-          ? [realtimeFeature || stationFeature]
-          : [],
-      );
+    const priorityFeature =
+      realtimeFeature || notificationFeature || stationFeature;
+
+    // TODO this if/else must be refactored. We should not have to do setLinesIds here
+    if (priorityFeature) {
+      setSelectedFeature(priorityFeature);
+      setSelectedFeatures([priorityFeature]);
+      setLinesIds(null);
+    } else if (!features.length) {
+      setSelectedFeature(null);
+      setSelectedFeatures([]);
+      setLinesIds(null);
     } else {
       setSelectedFeatures(features);
-      setSelectedFeature(realtimeFeature || stationFeature || features[0]);
-      if (linesIds.length) {
-        setLinesIds(linesIds?.length ? linesIds : null);
-      }
+      setSelectedFeature(features[0]);
+      setLinesIds(linesIds?.length ? linesIds : null);
     }
   }, [
     baseLayer?.mapLibreMap,
     featuresInfos,
     linesNetworkPlanLayer,
     realtimeLayer,
+    notificationsLayer,
     setLinesIds,
     setSelectedFeature,
     setSelectedFeatures,

package/src/I18n/I18n.tsx

@@ -0,0 +1,38 @@
+import { memo, useMemo } from "preact/compat";
+import rosetta from "rosetta";
+
+import { I18nContext } from "../utils/hooks/useI18n";
+import translations from "../utils/translations";
+// import rosetta from 'rosetta/debug';
+
+const i18n = rosetta(translations);
+
+export const defaultLanguage = "en";
+export const languages = ["de", "en", "fr", "it"];
+
+export interface I18nProps {
+  children: React.ReactNode;
+  lngDict?: Record<string, Record<string, string>>;
+  locale?: string;
+}
+
+function I18n({ children, locale = defaultLanguage }: I18nProps) {
+  const i18nWrapper = useMemo(() => {
+    i18n.locale(locale);
+
+    return {
+      locale: (lang?: string) => {
+        return i18n.locale(lang);
+      },
+      t: (...args: [key: string, params?: Record<string, unknown>]) => {
+        return i18n.t(...args);
+      },
+    };
+  }, [locale]);
+
+  return (
+    <I18nContext.Provider value={i18nWrapper}>{children}</I18nContext.Provider>
+  );
+}
+
+export default memo(I18n);

package/src/I18n/index.tsx

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

package/src/LayoutState/LayoutState.tsx

@@ -284,14 +284,7 @@ function LayoutState() {
       setLinesIds(null);
       setNotificationId(null);
     }
-  }, [
-    setFeaturesInfos,
-    closeMenus,
-    setLinesIds,
-    setNotificationId,
-    setTrainId,
-    stationId,
-  ]);
+  }, [closeMenus, setLinesIds, setNotificationId, setTrainId, stationId]);
 
   useEffect(() => {
     if (trainId) {
@@ -302,14 +295,7 @@ function LayoutState() {
       setLinesIds(null);
       setNotificationId(null);
     }
-  }, [
-    closeMenus,
-    setFeaturesInfos,
-    setLinesIds,
-    setNotificationId,
-    setStationId,
-    trainId,
-  ]);
+  }, [closeMenus, setLinesIds, setNotificationId, setStationId, trainId]);
 
   useEffect(() => {
     if (notificationId) {
@@ -320,15 +306,7 @@ function LayoutState() {
       setLinesIds(null);
       setTrainId(null);
     }
-  }, [
-    closeMenus,
-    notificationId,
-    setFeaturesInfos,
-    setLinesIds,
-    setNotificationId,
-    setStationId,
-    setTrainId,
-  ]);
+  }, [closeMenus, notificationId, setLinesIds, setStationId, setTrainId]);
 
   useEffect(() => {
     if (linesIds?.length) {
@@ -340,12 +318,8 @@ function LayoutState() {
       setTrainId(null);
     }
   }, [
-    linesIds?.length,
-    notificationId,
-    setFeaturesInfos,
     closeMenus,
-
-    setLinesIds,
+    linesIds?.length,
     setNotificationId,
     setStationId,
     setTrainId,

package/src/MapLayout/MapLayout.tsx

@@ -96,9 +96,9 @@ function MapLayout({
                   : "",
               )}
             >
+              {hasLayerTree && <LayerTreeButton />}
               {hasPrint && <ExportMenuButton />}
               {hasShare && <ShareMenuButton />}
-              {hasLayerTree && <LayerTreeButton />}
               {hasSearch && <SearchButton />}
             </div>
 
@@ -110,6 +110,7 @@ function MapLayout({
                 )}
               >
                 <Search
+                  autofocus
                   className={
                     "@container @sm/main:gap-4 @sm/main:rounded-l-none @sm/main:rounded-r-2xl"
                   }

package/src/MobilityMap/MobilityMap.tsx

@@ -1,8 +1,9 @@
 import { memo } from "preact/compat";
-import { useEffect, useMemo, useRef, useState } from "preact/hooks";
+import { useMemo, useRef, useState } from "preact/hooks";
 
 import BaseLayer from "../BaseLayer";
 import FeaturesInfosListener from "../FeaturesInfosListener";
+import I18n from "../I18n";
 import LayoutState from "../LayoutState";
 import LinesNetworkPlanLayer from "../LinesNetworkPlanLayer";
 import LinesNetworkPlanLayerHighlight from "../LinesNetworkPlanLayerHighlight";
@@ -14,10 +15,8 @@ import Permalink from "../Permalink";
 import RealtimeLayer from "../RealtimeLayer";
 import SingleClickListener from "../SingleClickListener";
 import StationsLayer from "../StationsLayer";
-import { I18nContext } from "../utils/hooks/useI18n";
 import useInitialLayersVisiblity from "../utils/hooks/useInitialLayersVisiblity";
 import { MapContext } from "../utils/hooks/useMapContext";
-import i18n from "../utils/i18n";
 import WindowMessageListener from "../WindowMessageListener";
 
 import MobilityMapAttributes from "./MobilityMapAttributes";
@@ -234,12 +233,8 @@ function MobilityMap(props: MobilityMapProps) {
     trainId,
   ]);
 
-  useEffect(() => {
-    i18n.locale(lang);
-  }, [lang]);
-
   return (
-    <I18nContext.Provider value={i18n}>
+    <I18n locale={lang}>
       {/* There is a bug in tailwindcss@4 , variables are not imported in the shadow dom
       see  https://github.com/tailwindlabs/tailwindcss/issues/15005*/}
       <style>
@@ -319,7 +314,7 @@ function MobilityMap(props: MobilityMapProps) {
           <MapLayout />
         </div>
       </MapContext.Provider>
-    </I18nContext.Provider>
+    </I18n>
   );
 }
 

package/src/MobilityNotifications/MobilityNotifications.tsx

@@ -2,9 +2,8 @@ import { MocoAPI } from "mobility-toolbox-js/ol";
 import { SeverityEnumeration } from "mobility-toolbox-js/types";
 import { memo, useEffect, useState } from "preact/compat";
 
+import I18n from "../I18n";
 import SituationDetails from "../SituationDetails";
-import { I18nContext } from "../utils/hooks/useI18n";
-import i18n from "../utils/i18n";
 
 import MobilityNotificationsAttributes from "./MobilityNotificationsAttributes";
 
@@ -64,12 +63,8 @@ function MobilityNotifications({
       });
   }, [apikey, notificationurl, notificationtenant]);
 
-  useEffect(() => {
-    i18n.locale(lang);
-  }, [lang]);
-
   return (
-    <I18nContext.Provider value={i18n}>
+    <I18n locale={lang}>
       <style>{tailwind}</style>
       <div className="flex w-full flex-col gap-6">
         {situations
@@ -106,7 +101,6 @@ function MobilityNotifications({
             }
           })
           .map((situation) => {
-            console.log("Rendering situation", situation.id, situation.title);
             return (
               <SituationDetails
                 canToggle={true}
@@ -121,7 +115,7 @@ function MobilityNotifications({
             );
           })}
       </div>
-    </I18nContext.Provider>
+    </I18n>
   );
 }
 

package/src/MobilitySearch/MobilitySearch.tsx

@@ -1,8 +1,7 @@
 import { memo } from "preact/compat";
 
+import I18n from "../I18n";
 import StopsSearch from "../StopsSearch/StopsSearch";
-import { I18nContext } from "../utils/hooks/useI18n";
-import i18n from "../utils/i18n";
 
 import MobilitySearchAttributes from "./MobilitySearchAttributes";
 
@@ -14,11 +13,12 @@ import type { StopsSearchProps } from "../StopsSearch/StopsSearch";
 export type MobilitySearchProps = StopsSearchProps;
 
 function MobilitySearch(props: MobilitySearchProps) {
+  const { lang } = props;
   return (
-    <I18nContext.Provider value={i18n}>
+    <I18n lang={lang}>
       <style>{tailwind}</style>
       <StopsSearch {...props} />
-    </I18nContext.Provider>
+    </I18n>
   );
 }
 

package/src/MobilitySearch/MobilitySearchAttributes.ts

@@ -9,6 +9,7 @@ export type MobilitySearchAttributeName =
   | "countrycode"
   | "event"
   | "field"
+  | "lang"
   | "limit"
   | "mots"
   | "onselect"
@@ -44,6 +45,12 @@ const attrs: MobilitySearchAttributes = {
     description: `Which field to look up, default all of them, Possible values:id, name, coords. See the ${geopsStopsApiLink} documentation.`,
     public: true,
   },
+  lang: {
+    defaultValue: "en",
+    description:
+      "The language to use for the search input texts. Supported languages are : de, en, fr, it.",
+    public: true,
+  },
   limit: {
     defaultValue: "5",
     description: `The number of suggestions to show. See the ${geopsStopsApiLink} documentation.`,

package/src/NotificationDetails/NotificationDetails.tsx

@@ -145,14 +145,12 @@ function NotificationDetails({
             return (
               <div className={"text-base"} key={id}>
                 <div className="text-xs uppercase">{reasonsToDisplay}</div>
-                <h3 className="space-x-2 text-lg font-bold text-balance">
-                  <span
-                    className={"line-height-[1.3] inline-block align-middle"}
-                  >
+                <h3 className="space-x-2 text-lg leading-[1.3] font-bold text-balance">
+                  <span className={"inline-block align-middle"}>
                     <Warning />
                   </span>
                   <span
-                    className={"*:inline"}
+                    className={"align-middle *:inline"}
                     dangerouslySetInnerHTML={{
                       __html: textualContent?.summary,
                     }}
@@ -252,8 +250,9 @@ function NotificationDetails({
                         {pubLines?.map((name) => {
                           return (
                             <div
+                              // px-4px and py-2px are important for bermekt
                               className={
-                                "rounded-md bg-black px-2 py-1 font-bold text-white"
+                                "rounded-md bg-black px-[4px] py-[2px] font-bold text-white"
                               }
                               key={name}
                             >

package/src/RouteStop/RouteStop.tsx

@@ -92,7 +92,7 @@ function RouteStop({
             <RouteStopTime className="ml-4 flex w-10 shrink-0 flex-col justify-center text-xs" />
             <RouteStopDelay className="flex w-8 shrink-0 flex-col justify-center text-[0.6rem]" />
             <RouteStopProgress className="relative flex w-8 shrink-0 items-center" />
-            <RouteStopStation className="flex grow flex-col items-start justify-center pr-2" />
+            <RouteStopStation className="flex grow items-center justify-center pr-2 text-sm font-medium" />
           </>
         )}
       </button>

package/src/RvfMapLayout/RvfMapLayout.tsx

@@ -139,9 +139,9 @@ function RvfMapLayout({
                   : "",
               )}
             >
+              {hasLayerTree && <LayerTreeButton />}
               {hasPrint && <ExportMenuButton />}
               {hasShare && <ShareMenuButton />}
-              {hasLayerTree && <LayerTreeButton />}
               {hasSearch && <SearchButton />}
             </div>
           </div>

package/src/RvfSearch/RvfSearch.tsx

@@ -14,7 +14,9 @@ function RvfSearch(props: Partial<StopsSearchProps>) {
 
   const onSelect = useCallback(
     (selected) => {
-      return fit.current(selected);
+      if (selected) {
+        return fit.current?.(selected);
+      }
     },
     [fit],
   );

package/src/Search/Search.tsx

@@ -23,11 +23,11 @@ function Search({
   return (
     <SearchHeadless
       childrenContainerClassName={twMerge(
-        "max-h-[300px] rounded-b-2xl bg-white shadow overflow-hidden",
+        "max-h-[400px] rounded-b-2xl bg-white shadow overflow-hidden",
         childrenContainerClassName,
       )}
       className={twMerge(
-        "border-grey @container m-0 h-[48px] gap-2 rounded-2xl border p-2 text-base",
+        "border-grey @container m-0 h-[48px] rounded-2xl border text-base",
         className,
       )}
       inputContainerClassName={twMerge("border-none", inputContainerClassName)}
@@ -36,7 +36,7 @@ function Search({
         resultClassName,
       )}
       resultsContainerClassName={twMerge(
-        "min-h-[100px] max-h-[200px] border border-t-0",
+        "min-h-[50px] max-h-[200px] border border-t-0",
         resultsContainerClassName,
       )}
       withResultsClassName={twMerge(

package/src/Search/SearchBase.tsx

@@ -1,5 +1,11 @@
 import { memo } from "preact/compat";
-import { useCallback, useMemo, useRef, useState } from "preact/hooks";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "preact/hooks";
 
 import InputSearch from "../ui/InputSearch";
 import useI18n from "../utils/hooks/useI18n";
@@ -12,6 +18,7 @@ import type { InputProps } from "../ui/Input/Input";
 import type { InputSearchProps } from "../ui/InputSearch/InputSearch";
 
 export type SearchBaseProps = {
+  autofocus?: boolean;
   cancelButtonProps?: IconButtonProps;
   childrenContainerClassName?: string;
   inputProps?: InputProps;
@@ -48,6 +55,7 @@ export const SearchContext = createContext<null | SearchContextType>({
 });
 
 function SearchBase({
+  autofocus,
   cancelButtonProps,
   children,
   childrenContainerClassName,
@@ -66,6 +74,15 @@ function SearchBase({
   const [open, setOpen] = useState(false);
   const resultsBySearchRef = useRef<Record<string, unknown[]>>({});
 
+  // Autofocus the input
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (autofocus && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [autofocus]);
+
   const setResults = useCallback(
     (id: string, results: unknown[]) => {
       resultsBySearchRef.current[id] = results;
@@ -94,6 +111,7 @@ function SearchBase({
   const inputPropss: InputProps = useMemo(() => {
     return {
       placeholder: t("search_placeholder"),
+      ref: inputRef,
       ...(inputProps || {}),
       onChange: (evt: TargetedInputEvent<HTMLInputElement>) => {
         setQuery((evt.target as HTMLInputElement).value);

package/src/Search/SearchHeadless.tsx

@@ -41,7 +41,7 @@ function SearchHeadless({ ...props }: SearchProps) {
     (stop: StopsFeature) => {
       setStationId(stop.properties.uid);
       // It means that the station wil have informations
-      fit.current(stop, !!tenant);
+      fit.current?.(stop, !!tenant);
     },
     [fit, setStationId, tenant],
   );
@@ -49,15 +49,15 @@ function SearchHeadless({ ...props }: SearchProps) {
   const onSelectLine = useCallback(
     (line: LnpLineInfo) => {
       setLinesIds([line.external_id]);
-      fit.current(line, true);
+      fit.current?.(line, true);
     },
     [fit, setLinesIds],
   );
 
   const onSelectTrain = useCallback(
     (match: RealtimeRouteIdentifierMatch) => {
-      setTrainId(match.trains[0].train_id);
-      fit.current(match, true);
+      setTrainId(match.train_id);
+      fit.current?.(match, true);
     },
     [fit, setTrainId],
   );

package/src/SearchTrainsResult/SearchTrainsResult.tsx

@@ -33,8 +33,8 @@ function SearchTrainsResult({
         onSelectItem?.(item, evt);
       }}
     >
-      <RouteIcon line={item.trains[0].line}></RouteIcon>
-      <div className="grow">{`${item.trains[0].line?.name} (${item.route_identifier})`}</div>
+      <RouteIcon line={item.line}></RouteIcon>
+      <div className="grow">{`${item.destination} (${item.route_identifier})`}</div>
     </button>
   );
 }

package/src/SearchTrainsResults/SearchTrainsResults.tsx

@@ -76,10 +76,7 @@ function SearchTrainsResults({
       >
         {results.map((item: RealtimeRouteIdentifierMatch) => {
           return (
-            <SearchResult
-              className={resultClassName}
-              key={item.trains[0].train_id}
-            >
+            <SearchResult className={resultClassName} key={item.train_id}>
               {toChildArray(children).map(
                 (
                   child: ReactElement<

package/src/SingleClickListener/SingleClickListener.tsx

@@ -22,6 +22,7 @@ function SingleClickListener({
 }: SingleClickListenerProps) {
   const {
     map,
+    mots,
     queryablelayers,
     setFeaturesInfos,
     setFeaturesInfosHovered,
@@ -54,10 +55,14 @@ function SingleClickListener({
         const stationsFeatures = featuresInfoStations?.features || [];
 
         const [stationFeature] = stationsFeatures.filter((feat) => {
-          // TODO: think how to do better. LNP stations should have a tralis_network property?
-          // travic stations has a tralis_network property
-          if (feat.get("tralis_network")) {
-            return feat.get("tralis_network").includes(tenant);
+          let found = false;
+          if (mots?.split(",")?.length > 0) {
+            found = !!mots.split(",").find((mot) => {
+              const hasMot = feat.get(mot.trim().toLowerCase());
+              if (hasMot === 1) {
+                return true;
+              }
+            });
           }
 
           // We move the external_id to uid to be consistent across all stations (lnp and others)
@@ -65,8 +70,16 @@ function SingleClickListener({
             feat.set("uid", feat.get("external_id"));
           }
 
-          // LNP stations have no tralis_network property
-          return true;
+          // Travic stations have a tralis_network property and mots property
+          if (found) {
+            return !!feat.get("tralis_network")?.includes(tenant);
+          }
+
+          // LNP stations have network property with CamelCase value like "Trenord"
+          if (feat.get("network")) {
+            return feat.get("network").toLowerCase().includes(tenant);
+          }
+          return found;
         });
 
         // Replace the features clicked in the stations layer by the filtered one
@@ -79,7 +92,7 @@ function SingleClickListener({
 
       return featuresInfos;
     },
-    [queryablelayers, stationsLayer, tenant],
+    [mots, queryablelayers, stationsLayer, tenant],
   );
 
   const onPointerMove = useCallback(

package/src/SituationDetails/SituationDetails.tsx

@@ -156,15 +156,15 @@ function SituationDetails({
               </div>
               <h3
                 className={twMerge(
-                  "space-x-2 text-xl font-bold text-balance",
+                  "space-x-2 text-xl leading-[1.3] font-bold text-balance",
                   headerClassName,
                 )}
               >
-                <span className={"line-height-[1.3] inline-block align-middle"}>
+                <span className={"inline-block align-middle"}>
                   <Warning className={twMerge(iconClassName)} />
                 </span>
                 <span
-                  className={"*:inline"}
+                  className={"align-middle *:inline"}
                   dangerouslySetInnerHTML={{
                     __html: textualContent?.summary,
                   }}
@@ -221,7 +221,7 @@ function SituationDetails({
                         key={startTime}
                       >
                         <span>
-                          {from && to ? `${from} - ${to}` : null}
+                          {from && to ? `${from} – ${to}` : null}
                           {from && !to ? t("from", { from }) : null}
                         </span>
                         {hasDailyTime && (
@@ -290,9 +290,10 @@ function SituationDetails({
                     <div className={"flex flex-wrap gap-1 text-sm"}>
                       {pubLines?.map((name) => {
                         return (
+                          // px-[8px] py-[4px] are important for bermekt
                           <div
                             className={
-                              "bg-red rounded-md px-2 py-1 font-bold text-white"
+                              "bg-red rounded-md px-[8px] py-[4px] font-bold text-white"
                             }
                             key={name}
                           >
@@ -311,8 +312,9 @@ function SituationDetails({
                       {stations.map((name) => {
                         return (
                           <div
+                            // px-[8px] py-[4px] are important for bermekt
                             className={
-                              "bg-red rounded-md px-2 py-1 font-bold text-white"
+                              "bg-red rounded-md px-[8px] py-[4px] font-bold text-white"
                             }
                             key={name}
                           >