@geops/rvf-mobility-web-component 0.1.76 → 0.1.78

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.76",
+  "version": "0.1.78",
   "homepage": "https://rvf-mobility-web-component-geops.vercel.app/",
   "type": "module",
   "main": "index.js",
@@ -11,8 +11,8 @@
     "graphql-request": "^7.1.2",
     "jspdf": "^3.0.3",
     "lodash.debounce": "^4.0.8",
-    "maplibre-gl": "^5.9.0",
-    "mobility-toolbox-js": "3.4.6-beta.1",
+    "maplibre-gl": "^5.10.0",
+    "mobility-toolbox-js": "3.4.6",
     "ol": "^10.6.1",
     "preact": "^10.27.2",
     "preact-custom-element": "^4.5.1",
@@ -25,9 +25,9 @@
   "devDependencies": {
     "@commitlint/cli": "^20.1.0",
     "@commitlint/config-conventional": "^20.0.0",
-    "@eslint/js": "^9.37.0",
+    "@eslint/js": "^9.38.0",
     "@geops/eslint-config-react": "^1.6.0-beta.1",
-    "@tailwindcss/cli": "^4.1.14",
+    "@tailwindcss/cli": "^4.1.16",
     "@tailwindcss/container-queries": "^0.1.1",
     "@testing-library/preact": "^3.2.4",
     "@types/geojson": "^7946.0.16",
@@ -35,9 +35,9 @@
     "@types/lodash": "^4.17.20",
     "@types/preact-custom-element": "^4.0.4",
     "concurrently": "^9.2.1",
-    "esbuild": "^0.25.10",
+    "esbuild": "^0.25.11",
     "esbuild-sass-plugin": "^3.3.1",
-    "eslint": "^9.37.0",
+    "eslint": "^9.38.0",
     "eslint-plugin-tailwindcss": "^4.0.0-beta.0",
     "fixpack": "^4.0.0",
     "generact": "^0.4.0",
@@ -47,15 +47,15 @@
     "jest-environment-jsdom": "^30.2.0",
     "jest-preset-preact": "^4.1.1",
     "next": "15.5.5",
-    "preact-render-to-string": "^6.6.2",
+    "preact-render-to-string": "^6.6.3",
     "prettier": "^3.6.2",
-    "prettier-plugin-tailwindcss": "^0.6.14",
+    "prettier-plugin-tailwindcss": "^0.7.1",
     "standard-version": "^9.5.0",
     "tailwind-merge": "^3.3.1",
-    "tailwindcss": "^4.1.14",
+    "tailwindcss": "^4.1.16",
     "ts-jest": "^29.4.5",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.46.1"
+    "typescript-eslint": "^8.46.2"
   },
   "scripts": {
     "build": "yarn build:css && yarn build:js && cp index*.js* doc/public/",

package/src/MapsetLayer/MapsetLayer.tsx

@@ -1,6 +1,5 @@
 import { MapsetLayer as MtbMapsetLayer } from "mobility-toolbox-js/ol";
 import { unByKey } from "ol/Observable";
-import { transformExtent } from "ol/proj";
 import { memo } from "preact/compat";
 import { useEffect, useMemo } from "preact/hooks";
 
@@ -8,8 +7,8 @@ import { LAYER_NAME_MAPSET } from "../utils/constants";
 import useMapContext from "../utils/hooks/useMapContext";
 
 import type { MapsetLayerOptions } from "mobility-toolbox-js/ol";
-
-let moveEndTimeout: ReturnType<typeof setTimeout>;
+import type { Feature } from "ol";
+import type { EventTypes } from "ol/Observable";
 
 export const isFeatureOutsideZoomLimit = (feature, map) => {
   const zoom = map?.getView()?.getZoom();
@@ -23,7 +22,6 @@ function MapsetLayer(props?: Partial<MapsetLayerOptions>) {
     apikey,
     baseLayer,
     map,
-    mapsetbbox,
     mapsetplanid,
     mapsettags,
     mapsettenants,
@@ -37,38 +35,8 @@ function MapsetLayer(props?: Partial<MapsetLayerOptions>) {
       return null;
     }
 
-    let bbox = undefined;
-    if (mapsetbbox) {
-      bbox = mapsetbbox?.split(",").map((coord) => {
-        return Number(coord.trim());
-      });
-      if (
-        bbox.length === 4 &&
-        !bbox.some((coord) => {
-          return Number.isNaN(coord);
-        })
-      ) {
-        bbox = transformExtent(bbox, "EPSG:3857", "EPSG:4326");
-      }
-    } else {
-      // we have to wait that the map is well sized to get the extent
-      // It triggers an erro in FF without this
-      if (
-        map.getView()?.getCenter() &&
-        map.getSize()[0] > 0 &&
-        map.getSize()[1] > 0
-      ) {
-        bbox = transformExtent(
-          map.getView()?.calculateExtent(),
-          "EPSG:3857",
-          "EPSG:4326",
-        );
-      }
-    }
     return new MtbMapsetLayer({
       apiKey: apikey,
-      bbox,
-      mapseturl: mapseturl || undefined,
       name: LAYER_NAME_MAPSET,
       planId: mapsetplanid ?? undefined,
       tags: mapsettags?.split(",").map((t) => {
@@ -77,14 +45,13 @@ function MapsetLayer(props?: Partial<MapsetLayerOptions>) {
       tenants: mapsettenants?.split(",").map((t) => {
         return t.trim();
       }),
-      timestamp: mapsettimestamp || new Date().toISOString(), // Load only standard plan
-      zoom: map.getView().getZoom(),
+      timestamp: mapsettimestamp, // Load only standard plan
+      url: mapseturl,
       ...(props || {}),
     });
   }, [
     baseLayer,
     map,
-    mapsetbbox,
     apikey,
     mapseturl,
     mapsetplanid,
@@ -109,49 +76,12 @@ function MapsetLayer(props?: Partial<MapsetLayerOptions>) {
     };
   }, [map, layer]);
 
-  useEffect(() => {
-    const view = map?.getView();
-    if (!view || !layer) {
-      return;
-    }
-    const handleMoveEnd = () => {
-      if (mapsetplanid || !layer.get("visible")) {
-        return;
-      }
-      clearTimeout(moveEndTimeout);
-      moveEndTimeout = setTimeout(() => {
-        const currentBbox = transformExtent(
-          view.calculateExtent(map.getSize()),
-          "EPSG:3857",
-          "EPSG:4326",
-        );
-        layer.bbox = currentBbox;
-        layer.zoom = view.getZoom();
-      }, 100);
-    };
-
-    const listeners = [
-      layer.on("change:visible", () => {
-        if (layer.get("visible")) {
-          handleMoveEnd();
-        }
-      }),
-      view.on("change:center", handleMoveEnd),
-      view.on("change:resolution", handleMoveEnd),
-    ];
-
-    return () => {
-      clearTimeout(moveEndTimeout);
-      unByKey(listeners);
-    };
-  }, [map, layer, mapsetplanid]);
-
-  // Apply fetaure's minzoom and maxzoom to its style
+  // Apply feature's minzoom and maxzoom to its style
   // TODO should be done by the mapset layer itself
   useEffect(() => {
     let key = null;
     if (layer) {
-      key = layer.on("updatefeatures", () => {
+      key = layer.on("updatefeatures" as EventTypes, () => {
         const features = layer.getSource()?.getFeatures();
         if (!features?.length) {
           return;

package/src/MobilityMap/MobilityMap.tsx

@@ -87,6 +87,7 @@ function MobilityMap(props: MobilityMapProps) {
   const [stationId, setStationId] = useState<RealtimeStationId>();
   const [trainId, setTrainId] = useState<RealtimeTrainId>();
   const [linesIds, setLinesIds] = useState<string[]>();
+  const [notificationId, setNotificationId] = useState<string>();
 
   const [featuresInfos, setFeaturesInfos] = useState<
     LayerGetFeatureInfoResponse[]
@@ -141,6 +142,7 @@ function MobilityMap(props: MobilityMapProps) {
       linesNetworkPlanLayer,
       map,
       mapsetLayer,
+      notificationId,
       notificationsLayer,
       permalinkUrlSearchParams,
       previewNotifications,
@@ -175,6 +177,7 @@ function MobilityMap(props: MobilityMapProps) {
       setLinesNetworkPlanLayer,
       setMap,
       setMapsetLayer,
+      setNotificationId,
       setNotificationsLayer,
       setPermalinkUrlSearchParams,
       setPreviewNotifications,
@@ -222,6 +225,7 @@ function MobilityMap(props: MobilityMapProps) {
     linesNetworkPlanLayer,
     map,
     mapsetLayer,
+    notificationId,
     notificationsLayer,
     permalinkUrlSearchParams,
     previewNotifications,

package/src/MobilityMap/MobilityMapAttributes.ts

@@ -40,7 +40,6 @@ export type MobilityMapAttributeName =
   | "mainlink"
   | "mainlinktitle"
   | "mapset"
-  | "mapsetbbox"
   | "mapsetplanid"
   | "mapsettags"
   | "mapsettenants"
@@ -191,12 +190,6 @@ where:
     public: true,
     type: "boolean",
   },
-  mapsetbbox: {
-    defaultValue: MAX_EXTENT.join(","),
-    description:
-      "The BBOX to constrain the boundary of the mapset layer in EPSG:3857 coordinates. Mandatory for mapset layer. <br/>Ex: 831634,5933959,940649,6173660 .",
-    public: false,
-  },
   mapsetplanid: {
     description:
       "The id of the mapset plan to display. Mostly for debugging purposes.",
@@ -216,7 +209,7 @@ where:
     public: false,
   },
   mapseturl: {
-    defaultValue: "https://editor.mapset.io/api/v1",
+    defaultValue: "https://editor.mapset.io/api/v1/",
     description: `The ${geopsMapsetApiLink} url to use.`,
     public: true,
   },

package/src/NotificationDetails/NotificationDetails.tsx

@@ -1,7 +1,6 @@
 import {
   type AffectedTimeIntervalType,
   type PublicationType,
-  type SituationType,
   type TextualContentType,
 } from "mobility-toolbox-js/types";
 import { twMerge } from "tailwind-merge";
@@ -10,6 +9,7 @@ import Warning from "../icons/Warning";
 import ShadowOverflow from "../ShadowOverflow";
 import Link from "../ui/Link";
 import useI18n from "../utils/hooks/useI18n";
+import useMocoSituation from "../utils/hooks/useMocoSituation";
 
 import type {
   MultilingualTextualContentType,
@@ -64,30 +64,8 @@ function NotificationDetails({
   feature: Feature;
 }) {
   const { locale, t } = useI18n();
-  const { situation } = feature.getProperties();
-
-  // useEffect(() => {
-  //   const abortController = new AbortController();
-  //   if (!notificationtenant) {
-  //     setLines([]);
-  //   }
-  //   fetch(
-  //     `https://tralis-tracker-api.geops.io/api/lines/${notificationtenant}/`,
-  //   )
-  //     .then((res) => {
-  //       return res.json();
-  //     })
-  //     .then((data) => {
-  //       setLines(data);
-  //     })
-  //     .catch((err) => {
-  //       // eslint-disable-next-line no-console
-  //       console.error("Failed to fetch lines", err);
-  //     });
-  //   return () => {
-  //     abortController?.abort();
-  //   };
-  // }, [notificationtenant]);
+  const { situationId } = feature.getProperties();
+  const situationParsed = useMocoSituation(situationId);
 
   // moco export v2
   let textualContentMultilingual: Partial<MultilingualTextualContentType> = {};
@@ -96,41 +74,36 @@ function NotificationDetails({
   let publicationsToDisplay: PublicationType[] = [];
   let reasonsToDisplay: string[] = [];
 
-  try {
-    const situationParsed: SituationType = JSON.parse(situation) || {};
-    const publicationsArr: PublicationType[] =
-      situationParsed?.publications || [];
+  // const situationParsed: SituationType = JSON.parse(situation) || {};
+  const publicationsArr: PublicationType[] =
+    situationParsed?.publications || [];
 
-    // Find the current publication(s) at the current date
-    publicationsToDisplay =
-      publicationsArr?.filter(({ publicationWindows }) => {
-        return publicationWindows.find(({ endTime, startTime }) => {
-          const now = new Date();
-          const startT = new Date(startTime);
-          const endT = new Date(endTime);
-          return startT <= now && now <= endT;
-        });
-      }) || [];
+  // Find the current publication(s) at the current date
+  publicationsToDisplay =
+    publicationsArr?.filter(({ publicationWindows }) => {
+      return publicationWindows.find(({ endTime, startTime }) => {
+        const now = new Date();
+        const startT = new Date(startTime);
+        const endT = new Date(endTime);
+        return startT <= now && now <= endT;
+      });
+    }) || [];
 
-    // Display the current and next affected time intervals not the one in the past
-    timeIntervalsToDisplay =
-      (situationParsed?.affectedTimeIntervals || []).filter(
-        ({ endTime, startTime }) => {
-          const now = new Date();
-          const startT = new Date(startTime);
-          const endT = new Date(endTime);
-          return (startT <= now && now <= endT) || now < startT;
-        },
-      ) || [];
+  // Display the current and next affected time intervals not the one in the past
+  timeIntervalsToDisplay =
+    (situationParsed?.affectedTimeIntervals || []).filter(
+      ({ endTime, startTime }) => {
+        const now = new Date();
+        const startT = new Date(startTime);
+        const endT = new Date(endTime);
+        return (startT <= now && now <= endT) || now < startT;
+      },
+    ) || [];
 
-    // Display the reasons
-    reasonsToDisplay = (situationParsed?.reasons || []).map(({ name }) => {
-      return name;
-    });
-  } catch (e) {
-    // eslint-disable-next-line no-console
-    console.error("Failed to parse publications", e);
-  }
+  // Display the reasons
+  reasonsToDisplay = (situationParsed?.reasons || []).map(({ name }) => {
+    return name;
+  });
 
   return (
     <ShadowOverflow {...props} className={twMerge("px-4 text-base", className)}>

package/src/NotificationsLayer/NotificationsLayer.tsx

@@ -1,12 +1,10 @@
-import { MocoLayer } from "mobility-toolbox-js/ol";
+import { MocoLayer, type MocoLayerOptions } from "mobility-toolbox-js/ol";
 import { memo } from "preact/compat";
 import { useEffect, useMemo } from "preact/hooks";
 
 import { LAYER_NAME_NOTIFICATIONS } from "../utils/constants";
 import useMapContext from "../utils/hooks/useMapContext";
 
-import type { MocoLayerOptions } from "mobility-toolbox-js/ol";
-
 function NotificationsLayer(props?: Partial<MocoLayerOptions>) {
   const {
     apikey,

package/src/RvfFeatureDetails/RvfNotificationDetails/RvfNotificationDetails.tsx

@@ -1,8 +1,8 @@
-import { type SituationType } from "mobility-toolbox-js/types";
 import { twMerge } from "tailwind-merge";
 
 import ShadowOverflow from "../../ShadowOverflow";
 import SituationDetails from "../../SituationDetails";
+import useMocoSituation from "../../utils/hooks/useMocoSituation";
 
 import type { Feature } from "ol";
 
@@ -20,17 +20,8 @@ function NotificationDetails({
   timeIntervalClassName?: string;
   toggleable?: boolean;
 }) {
-  const { situation } = feature.getProperties();
-
-  // moco export v2
-  let situationParsed: Partial<SituationType> = {};
-
-  try {
-    situationParsed = JSON.parse(situation) || {};
-  } catch (e) {
-    // eslint-disable-next-line no-console
-    console.error("Failed to parse publications", e);
-  }
+  const { situationId } = feature.getProperties();
+  const situationParsed = useMocoSituation(situationId);
 
   return (
     <ShadowOverflow {...props} className={twMerge("px-4 text-base", className)}>

package/src/icons/Warning/exported_features_20251029101203.kml

@@ -0,0 +1,17 @@
+
+- creation app/repo/deploy (lint) -> 4h
+- creation map with ArcGIS Maps SDK with SBB base layer(one or more?) -> 4h
+- add Betriebspunkte and Linien layers on the map -> 4h
+- using URL parameter "?betriebspunkte=BN":
+  - ask the ArcGIS FeatureServer the Betriebpunkte corresponding to URL paramter -> 4h
+  - zoom on it with a buffer if 5km   -> 2h 
+  - ask the ArcGIS FeatureServer the Gemeinde, the Kanton of the Betriebspunkte -> 4h
+  - ask the ArcGIS FeatureServer all Linien available in this 5km extent -> 3h
+  - show a dialog with Kanton, Gemiende and the list of selectable lines -> 4h
+  - define the default "KM von" and "KM bis" for each Linie using the 5km extent -> 4h
+  - display "KM von" and "KM bis" in the dialog as input text -> 2h
+
+- add a tool to select an area by bbox -> 1d
+- add a tool to select an area by "Frei Skizze" -> 1d
+- use the area drawn to recalculate the "KM von" and "KM bis" of all Linien -> 3h
+- 

package/src/utils/hooks/useMocoSituation.tsx

@@ -0,0 +1,54 @@
+import { useEffect, useMemo, useState } from "preact/hooks";
+
+import useMapContext from "./useMapContext";
+
+import type { MocoAPI } from "mobility-toolbox-js/maplibre";
+import type {
+  MocoExportParameters,
+  SituationType,
+} from "mobility-toolbox-js/types";
+
+function useMocoSituation(situationId?: string, params?: MocoExportParameters) {
+  const { lang, notificationsLayer } = useMapContext();
+  const [situation, setSituation] = useState<SituationType>();
+
+  const api: MocoAPI | undefined = useMemo(() => {
+    return notificationsLayer?.api;
+  }, [notificationsLayer]);
+
+  useEffect(() => {
+    const abortController = new AbortController();
+    api
+      ?.exportById(situationId, {
+        contentLarge: true,
+        contentMedium: true,
+        contentSmall: true,
+        includeGeoms: false,
+        includeLines: true,
+        includeStops: true,
+        [lang]: true,
+        limit: 1,
+        ...(params || {}),
+      })
+      .then((response) => {
+        setSituation(response);
+      })
+      .catch((err) => {
+        // 20: AbortError
+        if (err.code !== 20) {
+          setSituation(undefined);
+          // eslint-disable-next-line no-console
+          console.error("Failed to fetch situation", err);
+          return;
+        }
+      });
+
+    return () => {
+      abortController.abort();
+    };
+  }, [api, situationId, params, lang]);
+
+  return situation;
+}
+
+export default useMocoSituation;

package/src/utils/addSourceAndLayers.ts

@@ -1,130 +0,0 @@
-import sbbConstructionBanner from "../icons/sbb_construction_banner.png";
-// import sbbAddStop from "../icons/sbb_add_stop.png";
-// import sbbAlternative from "../icons/sbb_alternative.png";
-// import sbbCancellation from "../icons/sbb_cancellation.png";
-import sbbConstruction from "../icons/sbb_construction.png";
-// import sbbDelay from "../icons/sbb_delay.png";
-import sbbDisruptionBanner from "../icons/sbb_disruption_banner.png";
-import sbbDisruption from "../icons/sbb_disruption.png";
-// import sbbInfo from "../icons/sbb_info.png";
-import sbbMissedConnectionBanner from "../icons/sbb_missed_connection_banner.png";
-import sbbMissedConnection from "../icons/sbb_missed_connection.png";
-import sbbReplacementBusBanner from "../icons/sbb_replacementbus_banner.png";
-// import sbbPlatformChange from "../icons/sbb_platform_change.png";
-import sbbReplacementBus from "../icons/sbb_replacementbus.png";
-// import sbbReRoute from "../icons/sbb_reroute.png";
-// import warningbanner from "../icons/warning-banner.png";
-// import warning from "../icons/warning.png";
-
-// export const AffectedLineStyleCategoryChoices = {
-//   Construction: "CONSTRUCTION",
-//   Disruption: "DISRUPTION",
-//   IndustrialAction: "INDUSTRIAL_ACTION",
-//   LiftFailure: "LIFT_FAILURE",
-//   Other: "OTHER",
-//   RailReplacement: "RAIL_REPLACEMENT",
-//   SpecialEvent: "SPECIAL_EVENT",
-//   VehicleFaulure: "VEHICLE_FAULURE",
-//   Warning: "WARNING",
-// } as const;
-const defaultIcon = sbbMissedConnection;
-const defaultIconBanner = sbbMissedConnectionBanner;
-export const icons = {
-  CONSTRUCTION: sbbConstruction,
-  CONSTRUCTION_BANNER: sbbConstructionBanner,
-  DISRUPTION: sbbDisruption,
-  DISRUPTION_BANNER: sbbDisruptionBanner,
-  INDUSTRIAL_ACTION: defaultIcon,
-  INDUSTRIAL_ACTION_BANNER: defaultIconBanner,
-  LIFT_FAILURE: defaultIcon,
-  LIFT_FAILURE_BANNER: defaultIconBanner,
-  OTHER: defaultIcon,
-  OTHER_BANNER: defaultIconBanner,
-  RAIL_REPLACEMENT: sbbReplacementBus,
-
-  RAIL_REPLACEMENT_BANNER: sbbReplacementBusBanner,
-  SPECIAL_EVENT: defaultIcon,
-  SPECIAL_EVENT_BANNER: defaultIconBanner,
-  VEHICLE_FAULURE: defaultIcon,
-  VEHICLE_FAULURE_BANNER: defaultIconBanner,
-  warning: defaultIcon,
-  WARNING: defaultIcon,
-  warningBanner: defaultIconBanner,
-};
-
-// 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;
-
-  Object.keys(icons).forEach((icon) => {
-    if (!mbMap.getImage(icon)) {
-      mbMap.loadImage(icons[icon]).then((image) => {
-        if (!mbMap.getImage(icon)) {
-          mbMap.addImage(icon, image.data);
-        }
-      });
-    }
-  });
-
-  // Update source
-  if (sourceId && sourceData) {
-    const source = mbMap.getSource(sourceId);
-    if (source) {
-      source.setData(sourceData);
-    } else {
-      mbMap.addSource(sourceId, {
-        data: sourceData,
-        generateId: true,
-        type: "geojson",
-      });
-    }
-  }
-
-  // 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;