@geops/rvf-mobility-web-component 0.1.93 → 0.1.95

package/package.json

@@ -2,20 +2,20 @@
   "name": "@geops/rvf-mobility-web-component",
   "license": "UNLICENSED",
   "description": "Web components for rvf in the domains of mobility and logistics.",
-  "version": "0.1.93",
+  "version": "0.1.95",
   "homepage": "https://rvf-mobility-web-component-geops.vercel.app/",
   "type": "module",
   "main": "index.js",
   "dependencies": {
     "graphql": "^16.10.0",
     "graphql-request": "^7.1.2",
-    "jspdf": "^3.0.3",
+    "jspdf": "^3.0.4",
     "lodash.debounce": "^4.0.8",
-    "maplibre-gl": "^5.10.0",
-    "mobility-toolbox-js": "3.5.1-beta.5",
-    "ol": "^10.6.1",
-    "preact": "^10.27.2",
-    "preact-custom-element": "^4.5.1",
+    "maplibre-gl": "5.12.0",
+    "mobility-toolbox-js": "3.6.0",
+    "ol": "^10.7.0",
+    "preact": "^10.28.0",
+    "preact-custom-element": "^4.6.0",
     "react": "npm:@preact/compat@^18.3.1",
     "react-dom": "npm:@preact/compat@^18.3.1",
     "react-icons": "^5.5.0",
@@ -23,21 +23,21 @@
     "rosetta": "^1.1.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "^20.1.0",
-    "@commitlint/config-conventional": "^20.0.0",
-    "@eslint/js": "^9.38.0",
+    "@commitlint/cli": "^20.2.0",
+    "@commitlint/config-conventional": "^20.2.0",
+    "@eslint/js": "^9.39.1",
     "@geops/eslint-config-react": "^1.6.0-beta.1",
-    "@tailwindcss/cli": "^4.1.16",
+    "@tailwindcss/cli": "^4.1.17",
     "@tailwindcss/container-queries": "^0.1.1",
     "@testing-library/preact": "^3.2.4",
     "@types/geojson": "^7946.0.16",
     "@types/jest": "^30.0.0",
-    "@types/lodash": "^4.17.20",
+    "@types/lodash": "^4.17.21",
     "@types/preact-custom-element": "^4.0.4",
     "concurrently": "^9.2.1",
-    "esbuild": "^0.25.11",
+    "esbuild": "^0.27.1",
     "esbuild-sass-plugin": "^3.3.1",
-    "eslint": "^9.38.0",
+    "eslint": "^9.39.1",
     "eslint-plugin-tailwindcss": "^4.0.0-beta.0",
     "fixpack": "^4.0.0",
     "generact": "^0.4.0",
@@ -46,16 +46,16 @@
     "jest-canvas-mock": "^2.5.2",
     "jest-environment-jsdom": "^30.2.0",
     "jest-preset-preact": "^4.1.1",
-    "next": "15.5.5",
+    "next": "15.5.7",
     "preact-render-to-string": "^6.6.3",
-    "prettier": "^3.6.2",
-    "prettier-plugin-tailwindcss": "^0.7.1",
+    "prettier": "^3.7.4",
+    "prettier-plugin-tailwindcss": "^0.7.2",
     "standard-version": "^9.5.0",
-    "tailwind-merge": "^3.3.1",
-    "tailwindcss": "^4.1.16",
-    "ts-jest": "^29.4.5",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss": "^4.1.17",
+    "ts-jest": "^29.4.6",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.46.2"
+    "typescript-eslint": "^8.49.0"
   },
   "scripts": {
     "build": "yarn build:css && yarn build:js && cp index*.js* doc/public/",

package/src/GeolocationButton/GeolocationButton.tsx

@@ -16,8 +16,7 @@ export type GeolocationButtonProps = IconButtonProps;
 const TRACKING_ZOOM = 16;
 
 function GeolocationButton({ ...props }: GeolocationButtonProps) {
-  const mapContext = useMapContext();
-  const { isTracking, map, setIsTracking } = mapContext;
+  const { isTracking, map, setIsTracking } = useMapContext();
   const { t } = useI18n();
 
   const geolocation = useMemo(() => {

package/src/GeolocationButton/index.tsx

@@ -1 +1 @@
-export { default } from "../RvfGeolocationButton";
+export { default } from "./GeolocationButton";

package/src/LayoutState/LayoutState.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect } from "preact/hooks";
 
 import useFit from "../utils/hooks/useFit";
+import useI18n from "../utils/hooks/useI18n";
 import useLnpLineInfo, { useLnpStopInfo } from "../utils/hooks/useLnp";
 import useMapContext from "../utils/hooks/useMapContext";
 import useRealtimeTrainByRouteIdentifier from "../utils/hooks/useRealtimeTrainsByRouteIdentifier";
@@ -32,6 +33,7 @@ function LayoutState() {
     notification,
     notificationid,
     notificationId,
+    notificationlang,
     permalink,
     previewNotifications,
     print,
@@ -60,6 +62,7 @@ function LayoutState() {
     setIsShareMenuOpen,
     setLinesIds,
     setNotificationId,
+    setNotificationLangFallbacks,
     setStationId,
     setTrainId,
     share,
@@ -75,6 +78,21 @@ function LayoutState() {
   const stopInfo = useLnpStopInfo(stationid);
   const trainInfo = useRealtimeTrainByRouteIdentifier(trainid);
   const fit = useFit();
+  const { locale } = useI18n();
+
+  // Define fallback languages from the notifications details
+  useEffect(() => {
+    const fallbackLangs =
+      notificationlang
+        ?.split(",")
+        .map((lang) => {
+          return lang.trim();
+        })
+        .filter((lang) => {
+          return lang !== locale();
+        }) || [];
+    setNotificationLangFallbacks(fallbackLangs);
+  }, [notificationlang, setNotificationLangFallbacks, locale]);
 
   useEffect(() => {
     setHasStations(!!tenant);
@@ -331,10 +349,10 @@ function LayoutState() {
         (hasPrint && isExportMenuOpen) ||
         (hasLayerTree && isLayerTreeOpen) ||
         (hasShare && isShareMenuOpen) ||
-        (hasRealtime && !!trainId) ||
-        (tenant && !!stationId) ||
-        (hasLnp && !!linesIds) ||
-        (hasNotification && !!notificationId),
+        (hasDetails && hasRealtime && !!trainId) ||
+        (hasDetails && tenant && !!stationId) ||
+        (hasDetails && hasLnp && !!linesIds) ||
+        (hasDetails && hasNotification && !!notificationId),
     );
   }, [
     hasDetails,

package/src/MobilityMap/MobilityMap.tsx

@@ -85,6 +85,8 @@ function MobilityMap(props: MobilityMapProps) {
   const [trainId, setTrainId] = useState<RealtimeTrainId>();
   const [linesIds, setLinesIds] = useState<string[]>();
   const [notificationId, setNotificationId] = useState<string>();
+  const [notificationLangFallbacks, setNotificationLangFallbacks] =
+    useState<string[]>();
 
   const [featuresInfos, setFeaturesInfos] = useState<
     LayerGetFeatureInfoResponse[]
@@ -110,7 +112,6 @@ function MobilityMap(props: MobilityMapProps) {
     return {
       // MobilityMapProps
       ...props,
-      // MapContextProps
       baseLayer,
       featuresInfos,
       featuresInfosHovered,
@@ -140,6 +141,8 @@ function MobilityMap(props: MobilityMapProps) {
       map,
       mapsetLayer,
       notificationId,
+      // MapContextProps
+      notificationLangFallbacks,
       notificationsLayer,
       permalinkUrlSearchParams,
       previewNotifications,
@@ -175,6 +178,7 @@ function MobilityMap(props: MobilityMapProps) {
       setMap,
       setMapsetLayer,
       setNotificationId,
+      setNotificationLangFallbacks,
       setNotificationsLayer,
       setPermalinkUrlSearchParams,
       setPreviewNotifications,
@@ -221,6 +225,7 @@ function MobilityMap(props: MobilityMapProps) {
     map,
     mapsetLayer,
     notificationId,
+    notificationLangFallbacks,
     notificationsLayer,
     permalinkUrlSearchParams,
     previewNotifications,

package/src/MobilityMap/MobilityMapAttributes.ts

@@ -1,5 +1,4 @@
 //type: "checkbox" | "date" | "select" | "textfield";
-
 import {
   DEFAULT_QUERYABLE_LAYERS,
   LAYERS_NAMES,
@@ -53,6 +52,7 @@ export type MobilityMapAttributeName =
   | "notification"
   | "notificationat"
   | "notificationid"
+  | "notificationlang"
   | "notificationtenant"
   | "notificationurl"
   | "permalink"
@@ -125,7 +125,7 @@ const attrs: MobilityMapAttributes = {
     defaultValue: "de",
     description:
       "The language to use for the map. Supported languages are : de, en, fr, it.",
-    public: false,
+    public: true,
   },
   layers: {
     defaultValue: null,
@@ -258,6 +258,12 @@ where:
     description: `An id of a notification to show details of.`,
     public: false,
   },
+  notificationlang: {
+    defaultValue: "en,de,fr",
+    description:
+      "A comma separated list of languages supported by the notification, if a textual content is not available in the current lang it will try to display the content in one of these languages. Order is important. <br/>Supported languages are: en,de,fr,it",
+    public: true,
+  },
   notificationtenant: {
     defaultValue: "rvf",
     description: `The ${geopsMocoApiLink} tenant to get the notification from.`,

package/src/MobilityNotifications/MobilityNotifications.tsx

@@ -1,9 +1,10 @@
 import { MocoAPI } from "mobility-toolbox-js/ol";
 import { SeverityEnumeration } from "mobility-toolbox-js/types";
-import { memo, useEffect, useState } from "preact/compat";
+import { memo, useEffect, useMemo, useState } from "preact/compat";
 
 import I18n from "../I18n";
 import SituationDetails from "../SituationDetails";
+import useI18n from "../utils/hooks/useI18n";
 
 import MobilityNotificationsAttributes from "./MobilityNotificationsAttributes";
 
@@ -33,10 +34,26 @@ const severityOrder = {
 function MobilityNotifications({
   apikey,
   lang,
+  notificationlang,
   notificationtenant,
   notificationurl,
 }: MobilityNotificationsProps) {
   const [situations, setSituations] = useState<SituationType[]>([]);
+  const { locale } = useI18n();
+
+  // Define fallback languages from the notificationlang attribute
+  const fallbackLangs = useMemo(() => {
+    return (
+      notificationlang
+        ?.split(",")
+        .map((l) => {
+          return l.trim();
+        })
+        .filter((l) => {
+          return l !== locale();
+        }) || []
+    );
+  }, [locale, notificationlang]);
 
   useEffect(() => {
     new MocoAPI({
@@ -104,6 +121,7 @@ function MobilityNotifications({
             return (
               <SituationDetails
                 canToggle={true}
+                fallbackLangs={fallbackLangs}
                 headerClassName="text-rvf-h3 font-semibold"
                 iconClassName="w-8 h-8 text-red"
                 key={situation.id}

package/src/MobilityNotifications/MobilityNotificationsAttributes.ts

@@ -7,6 +7,7 @@ export type MobilityNotificationsAttributeName =
   | "apikey"
   | "lang"
   | "notificationat"
+  | "notificationlang"
   | "notificationtenant"
   | "notificationurl";
 
@@ -24,13 +25,19 @@ const attrs: MobilityNotificationsAttributes = {
   lang: {
     defaultValue: "de",
     description: "The language to use for the notifications.",
-    public: false,
+    public: true,
   },
   notificationat: {
     description:
       "An ISO date string used to display active notification at this date in the notification layer. If not defined the current date will be used.<br/>Ex: 2025-08-01T00:00:00Z .",
     public: false,
   },
+  notificationlang: {
+    defaultValue: "en,de,fr",
+    description:
+      "A comma separated list of languages supported by the notification, if a textual content is not available in the current lang it will try to display the content in one of these languages. Order is important. <br/>Supported languages are: en,de,fr,it",
+    public: true,
+  },
   notificationtenant: {
     defaultValue: "rvf",
     description: `The ${geopsMocoApiLink} tenant to get the notification from.`,

package/src/NotificationDetails/NotificationDetails.tsx

@@ -52,7 +52,7 @@ function NotificationDetails({
   feature: Feature;
 }) {
   const { locale, t } = useI18n();
-  const { notificationId } = useMapContext();
+  const { notificationId, notificationLangFallbacks } = useMapContext();
   const situationParsed = useMocoSituation(notificationId);
 
   // moco export v2
@@ -116,20 +116,31 @@ function NotificationDetails({
             textualContentMedium,
             textualContentSmall,
           }) => {
+            let localeToUse = locale();
+
             // Get the textual content in German
             textualContentMultilingual =
               textualContentLarge ||
               textualContentMedium ||
               textualContentSmall;
 
-            textualContent = textualContentMultilingual?.[locale()];
+            textualContent = textualContentMultilingual?.[localeToUse];
 
-            // Fallback to default language if there is not title in the current language
             if (!textualContent?.summary) {
-              textualContent = textualContentMultilingual?.de;
+              // Try to find textualContent with a title using fallback languages
+              // If we do notfind a fallback we stick to the current language.
+              for (const fallbackLang of notificationLangFallbacks) {
+                const goodTextualContent =
+                  textualContentMultilingual?.[fallbackLang];
+                if (goodTextualContent?.summary) {
+                  localeToUse = fallbackLang;
+                  textualContent = goodTextualContent;
+                  break;
+                }
+              }
             }
 
-            const pubLines =
+            let pubLines =
               publicationLines?.flatMap((publication) => {
                 return (
                   publication.lines?.map(({ name }) => {
@@ -137,11 +148,14 @@ function NotificationDetails({
                   }) || []
                 );
               }) || [];
+            pubLines = [...new Set(pubLines)]; // Remove duplicates
 
-            const stations = publicationStops.map((publication) => {
+            let stations = publicationStops.map((publication) => {
               return publication?.name || "";
             });
 
+            stations = [...new Set(stations)]; // Remove duplicates
+
             return (
               <div className={"text-base"} key={id}>
                 <div className="text-xs uppercase">{reasonsToDisplay}</div>
@@ -233,8 +247,7 @@ function NotificationDetails({
                     <div>
                       {textualContentMultilingual.infoLinks.map(
                         ({ label, uri }) => {
-                          const title =
-                            label?.[locale()] || label?.de || uri || "";
+                          const title = label?.[localeToUse] || uri || "";
                           return (
                             <Link href={uri} key={uri} title={title}>
                               {title}

package/src/NotificationsLayer/NotificationsLayer.tsx

@@ -3,7 +3,10 @@ import { unByKey } from "ol/Observable";
 import { memo } from "preact/compat";
 import { useEffect, useMemo, useState } from "preact/hooks";
 
-import { LAYER_NAME_NOTIFICATIONS } from "../utils/constants";
+import {
+  LAYER_NAME_NOTIFICATIONS,
+  // MAX_EXTENT
+} from "../utils/constants";
 import useMapContext from "../utils/hooks/useMapContext";
 
 function NotificationsLayer(props?: Partial<MocoLayerOptions>) {
@@ -29,6 +32,7 @@ function NotificationsLayer(props?: Partial<MocoLayerOptions>) {
     const mocoLayer = new MocoLayer({
       apiKey: apikey,
       apiParameters: {
+        // bbox: MAX_EXTENT,
         contentMedium: true,
         isEdited: true,
         publicNow: true,

package/src/RvfFeatureDetails/RvfNotificationDetails/RvfNotificationDetails.tsx

@@ -2,13 +2,13 @@ import { twMerge } from "tailwind-merge";
 
 import ShadowOverflow from "../../ShadowOverflow";
 import SituationDetails from "../../SituationDetails";
+import useMapContext from "../../utils/hooks/useMapContext";
 import useMocoSituation from "../../utils/hooks/useMocoSituation";
 
 import type { Feature } from "ol";
 
 function NotificationDetails({
   className,
-  feature,
   ...props
 }: {
   className?: string;
@@ -20,12 +20,15 @@ function NotificationDetails({
   timeIntervalClassName?: string;
   toggleable?: boolean;
 }) {
-  const { situationId } = feature.getProperties();
-  const situationParsed = useMocoSituation(situationId);
-  console.log("situationParsed", feature.getProperties());
+  const { notificationId, notificationLangFallbacks } = useMapContext();
+  const situationParsed = useMocoSituation(notificationId);
+
   return (
     <ShadowOverflow {...props} className={twMerge("px-4 text-base", className)}>
-      <SituationDetails situation={situationParsed} />
+      <SituationDetails
+        fallbackLangs={notificationLangFallbacks}
+        situation={situationParsed}
+      />
     </ShadowOverflow>
   );
 }

package/src/RvfMapLayout/RvfMapLayout.tsx

@@ -82,7 +82,7 @@ function RvfMapLayout({
           <Copyright className="pointer-events-auto bg-slate-50/70" />
         </div>
         <div className="absolute top-2 right-2 z-10 flex">
-          {hasGeolocation && <GeolocationButton title={"Geolokalisierung"} />}
+          {hasGeolocation && <GeolocationButton />}
         </div>
         <div className="absolute right-2 bottom-10 z-10 flex flex-col justify-between gap-2">
           <ZoomButtons />

package/src/SituationDetails/SituationDetails.tsx

@@ -39,8 +39,11 @@ const toShortDate = (
   );
 };
 
+const emptyArray: string[] = [];
+
 function SituationDetails({
   canToggle = false,
+  fallbackLangs = emptyArray,
   headerClassName,
   iconClassName,
   publicationClassName,
@@ -50,6 +53,7 @@ function SituationDetails({
   useShortMonth = true,
 }: {
   canToggle?: boolean;
+  fallbackLangs?: string[];
   headerClassName?: string;
   iconClassName?: string;
   publicationClassName?: string;
@@ -122,15 +126,27 @@ function SituationDetails({
           textualContentMedium,
           textualContentSmall,
         }) => {
+          let localeToUse = locale();
+
           // Get the textual content in German
           textualContentMultilingual =
             textualContentLarge || textualContentMedium || textualContentSmall;
 
-          textualContent = textualContentMultilingual?.[locale()];
+          textualContent = textualContentMultilingual?.[localeToUse];
 
           // Fallback to default language if there is not title in the current language
           if (!textualContent?.summary) {
-            textualContent = textualContentMultilingual?.de;
+            // Try to find textualContent with a title using fallback languages
+            // If we do notfind a fallback we stick to the current language.
+            for (const fallbackLang of fallbackLangs) {
+              const goodTextualContent =
+                textualContentMultilingual?.[fallbackLang];
+              if (goodTextualContent?.summary) {
+                localeToUse = fallbackLang;
+                textualContent = goodTextualContent;
+                break;
+              }
+            }
           }
 
           const pubLines =
@@ -273,8 +289,7 @@ function SituationDetails({
                   <div>
                     {textualContentMultilingual.infoLinks.map(
                       ({ label, uri }) => {
-                        const title =
-                          label?.[locale()] || label?.de || uri || "";
+                        const title = label?.[localeToUse] || uri || "";
                         return (
                           <Link href={uri} key={uri} title={title}>
                             {title}

package/src/utils/applyInitialLayerVisibility.ts

@@ -14,28 +14,10 @@ const applyInitialLayerVisibility = (
     const names = layersAttrValue?.split(",") || [];
     const name = layer.get("name");
     const shouldBeVisible = names.includes(name);
-    if (layer.getVisible() !== shouldBeVisible) {
+    // Visiblity of group are defined by their children, they should not appear in the permalink.
+    if (layer.getVisible() !== shouldBeVisible && !(layer as Group).getLayers) {
       layer.setVisible(shouldBeVisible);
-
-      if ((layer as Group).getLayers) {
-        (layer as Group)
-          .getLayers()
-          .getArray()
-          .forEach((subLayer) => {
-            subLayer.setVisible(shouldBeVisible);
-            // applyInitialLayerVisibility(layersAttrValue, subLayer);
-          });
-      }
     }
   }
-  if ((layer as Group).getLayers) {
-    (layer as Group)
-      .getLayers()
-      .getArray()
-      .forEach((subLayer) => {
-        // subLayer.setVisible(false);
-        applyInitialLayerVisibility(layersAttrValue, subLayer);
-      });
-  }
 };
 export default applyInitialLayerVisibility;

package/src/utils/hooks/useInitialLayersVisiblity.tsx

@@ -7,6 +7,7 @@ import applyInitialLayerVisibility from "../applyInitialLayerVisibility";
 import useInitialPermalink from "./useInitialPermalink";
 
 import type { Map } from "ol";
+import type { Group } from "ol/layer";
 const useInitialLayersVisiblity = (
   map: Map,
   layers: string,
@@ -34,10 +35,31 @@ const useInitialLayersVisiblity = (
       isPermalinkAlreadyUsed.current = true;
     }
 
-    getLayersAsFlatArray(map.getLayers().getArray()).forEach((layer) => {
+    // We reverse the array to begin by the end of the tree (so the group layers are applied last)
+    const layersAsArray = getLayersAsFlatArray(map.getLayers().getArray());
+    layersAsArray.forEach((layer) => {
       applyInitialLayerVisibility(layersToUse, layer);
     });
 
+    // Hide group if there is no children visible
+    layersAsArray
+      .filter((l) => {
+        return (l as Group).getLayers;
+      })
+      .forEach((layer) => {
+        if (
+          layer.getVisible() &&
+          !(layer as Group)
+            .getLayers()
+            ?.getArray()
+            .some((l) => {
+              return l.getVisible();
+            })
+        ) {
+          layer.setVisible(false);
+        }
+      });
+
     const key = map.getLayers().on("add", (event) => {
       applyInitialLayerVisibility(layersToUse, event.element);
     });

package/src/utils/hooks/useMapContext.tsx

@@ -51,6 +51,7 @@ export type MapContextType = {
   map: Map;
   mapsetLayer?: MapsetLayer;
   notificationId?: string;
+  notificationLangFallbacks: string[];
   notificationsLayer?: MocoLayer;
   permalinkUrlSearchParams: URLSearchParams;
   previewNotifications?: SituationType[];
@@ -88,6 +89,7 @@ export type MapContextType = {
   setMap: (map?: Map) => void;
   setMapsetLayer: (mapsetLayer?: MapsetLayer) => void;
   setNotificationId: (notificationId?: string) => void;
+  setNotificationLangFallbacks: (langs: string[]) => void;
   setNotificationsLayer: (notificationsLayer?: MocoLayer) => void;
   setPermalinkUrlSearchParams: (
     setPermalinkUrlSearchParams: URLSearchParams,
@@ -128,6 +130,7 @@ export const MapContext = createContext<MapContextType>({
   isSearchOpen: false,
   isShareMenuOpen: false,
   isTracking: false,
+  notificationLangFallbacks: [],
   selectedFeatures: [],
   setBaseLayer: (baseLayer?: MaplibreLayer) => {},
   setIsFollowing: (isFollowing: boolean) => {},
@@ -137,6 +140,7 @@ export const MapContext = createContext<MapContextType>({
   setMap: (map?: Map) => {},
   setMapsetLayer: (mapsetLayer?: MapsetLayer) => {},
   setNotificationId: (notificationId?: string) => {},
+  setNotificationLangFallbacks: (langs: string[]) => {},
   setNotificationsLayer: (notificationsLayer?: MocoLayer) => {},
   setPermalinkUrlSearchParams: (
     permalinkUrlSearchParams: URLSearchParams,

package/src/utils/translations.ts

@@ -35,7 +35,7 @@ const translations: Translations = {
     [LAYERS_NAMES.notifications]: "Meldungen",
     [LAYERS_NAMES.pois]: "POIs",
     [LAYERS_NAMES.realtime]: "Echtzeit",
-    [LAYERS_NAMES.sharedMobility]: "Shared-Angebote",
+    [LAYERS_NAMES.sharedMobility]: "Sharing-Angebote",
     [LAYERS_NAMES.stations]: "Stationen",
     [LAYERS_NAMES.tarifzonen]: "Tarifzonen",
     [LAYERS_NAMES.verkaufsstellen]: "Verkaufsstellen",

package/.yarnrc.yml

@@ -1 +0,0 @@
-nodeLinker: node-modules