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

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.77",
   "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.9.0",
-    "mobility-toolbox-js": "3.4.6-beta.1",
+    "mobility-toolbox-js": "3.4.6-beta.6",
     "ol": "^10.6.1",
     "preact": "^10.27.2",
     "preact-custom-element": "^4.5.1",

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/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/MocoLayer2.ts

@@ -0,0 +1,91 @@
+import {
+  getFeatureCollectionToRenderFromSituation,
+  MocoLayer,
+} from "mobility-toolbox-js/ol";
+import { unByKey } from "ol/Observable";
+
+import type { GeoJSONSource } from "maplibre-gl";
+import type { MocoNotificationFeatureCollectionToRender } from "mobility-toolbox-js/ol";
+import type { Map } from "ol";
+
+export const MOCO_SOURCE_ID = "moco";
+export const MOCO_MD_LAYER_FILTER = "moco";
+class MocoLayer2 extends MocoLayer {
+  constructor(options) {
+    super(options);
+  }
+
+  attachToMap(map: Map): void {
+    super.attachToMap(map);
+    unByKey(this.olEventsKeys);
+  }
+
+  getDataByGraph(
+    data: MocoNotificationFeatureCollectionToRender,
+  ): MocoNotificationFeatureCollectionToRender {
+    // const zoom = this.getMapInternal()?.getView()?.getZoom();
+    // const graphs = (
+    //   this.maplibreLayer?.mapLibreMap?.getStyle() as MapsStyleSpecification
+    // ).metadata?.graphs;
+
+    // const graph = getGraphByZoom(zoom, graphs);
+    const newData: MocoNotificationFeatureCollectionToRender = {
+      features: (data?.features || []).filter((feature) => {
+        delete feature.properties?.publicationStops;
+        delete feature.properties?.publicationLines;
+        delete feature.properties?.publication;
+        delete feature.properties?.situation;
+        return (
+          feature.properties?.graph === "osm" ||
+          // feature.properties?.graph === "np_topo4" ||
+          // feature.properties?.graph === "np_topo5" ||
+          // feature.properties?.graph === "np_topo6" //||
+          feature.properties?.graph === "np_topo7" ||
+          feature.properties?.graph === "np_topo8" ||
+          feature.properties?.graph === "np_topo9" ||
+          feature.properties?.graph === "np_topo10" ||
+          feature.properties?.graph === "np_topo11" ||
+          feature.properties?.graph === "np_topo12" ||
+          feature.properties?.graph === "np_topo13" ||
+          feature.properties?.graph === "np_topo14" ||
+          feature.properties?.graph === "np_topo15"
+        );
+      }),
+      type: "FeatureCollection",
+    };
+    return newData;
+  }
+  /**
+   * This function updates the GeoJSON source data, with the current situations available in this.situations.
+   * @returns
+   */
+  async updateData(): Promise<boolean | undefined> {
+    if (this.loadAll) {
+      const situations = await this.loadData();
+      // We don't use the setter here to avoid infinite loop
+      this.set("situations", situations ?? []);
+    }
+    const source = this.maplibreLayer?.mapLibreMap?.getSource(MOCO_SOURCE_ID);
+    if (!source) {
+      // eslint-disable-next-line no-console
+      console.warn("MocoLayer: No source found for id : ", MOCO_SOURCE_ID);
+      return Promise.reject(new Error("No source found"));
+    }
+
+    const data = {
+      features: (this.situations ?? []).flatMap((situation) => {
+        return getFeatureCollectionToRenderFromSituation(situation).features;
+      }),
+      type: "FeatureCollection",
+    } as MocoNotificationFeatureCollectionToRender;
+    // this.#dataInternal = data;
+
+    // Apply new data to the source
+    console.log(this.getDataByGraph(data));
+    // console.log(JSON.stringify(this.getDataByGraph(data)));
+    (source as GeoJSONSource).setData(this.getDataByGraph(data));
+    return Promise.resolve(true);
+  }
+}
+
+export default MocoLayer2;

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/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;