@geops/rvf-mobility-web-component 0.1.47-beta.0 → 0.1.48

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.47-beta.0",
+  "version": "0.1.48",
   "homepage": "https://rvf-mobility-web-component-geops.vercel.app/",
   "type": "module",
   "main": "index.js",
@@ -12,14 +12,14 @@
     "jspdf": "^2.5.2",
     "lodash.debounce": "^4.0.8",
     "maplibre-gl": "^5.7.2",
-    "mobility-toolbox-js": "3.3.4-beta.21",
+    "mobility-toolbox-js": "3.3.4-beta.31",
     "ol": "^10.6.1",
     "preact": "^10.27.2",
     "preact-custom-element": "^4.5.1",
     "react": "npm:@preact/compat@^18.3.1",
     "react-dom": "npm:@preact/compat@^18.3.1",
     "react-icons": "^5.5.0",
-    "react-spatial": "^1.12.2",
+    "react-spatial": "^2.0.0",
     "rosetta": "^1.1.0",
     "showdown": "^2.1.0"
   },
@@ -46,6 +46,7 @@
     "jest-canvas-mock": "^2.5.2",
     "jest-environment-jsdom": "^30.1.2",
     "jest-preset-preact": "^4.1.1",
+    "lint-staged": "^16.2.0",
     "next": "15.5.2",
     "preact-render-to-string": "^6.6.1",
     "prettier": "^3.6.2",

package/src/MobilityMap/MobilityMap.tsx

@@ -184,7 +184,7 @@ function MobilityMap(props: MobilityMapProps) {
                 <ScaleLine className="bg-slate-50/70" />
                 <Copyright className="bg-slate-50/70" />
               </div>
-              <div className="absolute top-2 right-2 z-10 flex flex-col gap-2">
+              <div className="absolute top-2 right-2 z-10 flex">
                 {hasGeolocation && <GeolocationButton />}
               </div>
               {hasSearch && (

package/src/MobilityMap/MobilityMapAttributes.ts

@@ -2,10 +2,13 @@
 
 import {
   DEFAULT_QUERYABLE_LAYERS,
+  LAYERS_WITH_LINK,
   RVF_EXTENT_3857,
   RVF_LAYERS_NAMES,
 } from "../utils/constants";
 
+import type { LayersConfig } from "../utils/hooks/useLayerConfig";
+
 // const geopsApiLink = `<a href="https://developer.geops.io/">geOps API key</a>`;
 // const geopsMapsApiLink = `<a href="https://developer.geops.io/apis/maps">geOps Maps API</a>`;
 // const geopsStopsApiLink = `<a href="https://developer.geops.io/apis/stops">geOps Stops API</a>`;
@@ -30,6 +33,7 @@ export type MobilityMapAttributeName =
   | "layersconfig"
   | "layertree"
   | "mainlink"
+  | "mainlinktitle"
   | "mapsurl"
   | "maxextent"
   | "maxzoom"
@@ -96,36 +100,37 @@ const attrs: MobilityMapAttributes = {
   },
   layers: {
     defaultValue: null,
-    description:
-      "A comma separated list of layers's name to make visible on load, others are hidden. If empty, all layers will be hidden except the baselayer.",
+    description: `A comma separated list of layers's name to make visible on load, others are hidden. If empty, all layers will be hidden except the baselayer.<br/>Layers available are ${Object.values(RVF_LAYERS_NAMES).join(", ")}.`,
   },
   layersconfig: {
     defaultValue: JSON.stringify({
       [RVF_LAYERS_NAMES.liniennetz]: {
         link: {
           href: "https://www.rvf.de/fahrtinfo/netzplan",
-          text: "Zum Liniennetzpläne",
+          show: true,
+          text: "Zu den Liniennetzplänen",
         },
         title: "Liniennetzpläne",
       },
       [RVF_LAYERS_NAMES.meldungen]: {
         link: {
-          href: "https://moco.dev.geops.io/situation/{{id}}",
+          href: "https://moco.geops.io/situation/{{id}}",
+          show: true,
           text: "Zum Moco",
         },
       },
-    }),
-    description: `A JSON string to configure the layers and other components associated to it. See "layers" attributes to find the list of available layers.<br/>
+    } as LayersConfig),
+    description: `A JSON string to configure the layers and other components associated to it. The layers available are : ${LAYERS_WITH_LINK}.<br/>
        Definition for a layer :
 <pre style="font-size: 12px; overflow: auto;">{
-  liniennetz: {
+  liniennetz: { // The layer name, here the liniennetz layer.
     link: { // Define the link to display int footer of the details view, if not defined no link is displayed.
-      text: "Zum Liniennetzpläne",  // The text of the link, if not defined the title is used.
+      text: "Zu den Liniennetzplänen",  // The text of the link, if not defined the title is used.
       href: "https://www.rvf.de/fahrtinfo/netzplan", // The url of the link, if not defined no link is displayed.
     },
     title: "Liniennetzpläne", // Text displayed on the layer tree and in the header of the details view.
   }
-<//pre>}`,
+</pre>}`,
   },
   layertree: {
     defaultValue: "true",
@@ -133,9 +138,13 @@ const attrs: MobilityMapAttributes = {
     type: "boolean",
   },
   mainlink: {
-    defaultValue: "https://www.rvf.de/",
+    // defaultValue: "https://www.rvf.de/",
     description: "A link displayed on bottom left of the map.",
   },
+  mainlinktitle: {
+    // defaultValue: "Gesamte Karte",
+    description: "A title for the mainlink, used as tooltip.",
+  },
   mapsurl: {
     defaultValue: "https://maps.geops.io",
     description: null, //`The ${geopsMapsApiLink} url to use.`,
@@ -157,7 +166,7 @@ const attrs: MobilityMapAttributes = {
     // "Commas separated list of mots to display on the Realtime layer.<br/>Ex: rail,bus,coach,foot,tram,subway,gondola,funicular,ferry,car .",
   },
   notification: {
-    defaultValue: "true",
+    defaultValue: "false",
     description: `Add the notification layer to the map. This layer will display informations about disruptions on the network. Data comes from
         our ${geopsMocoApiLink} .`,
     type: "boolean",
@@ -171,8 +180,8 @@ const attrs: MobilityMapAttributes = {
     description: null, // `The ${geopsMocoApiLink} tenant to get the notification from.`,
   },
   notificationurl: {
-    defaultValue: "https://moco.dev.geops.io/api/v2/",
-    description: null, // `The ${geopsMocoApiLink} url to use.`,
+    defaultValue: "https://moco.geops.io/api/v2/",
+    description: `The ${geopsMocoApiLink} url to use.`,
   },
   permalink: {
     defaultValue: "false",
@@ -214,7 +223,7 @@ const attrs: MobilityMapAttributes = {
     type: "boolean",
   },
   search: {
-    defaultValue: "true",
+    defaultValue: "false",
     description: "Toggle the search stops input.",
     type: "boolean",
   },

package/src/NotificationLayer/NotificationLayer.tsx

@@ -22,8 +22,11 @@ function NotificationLayer(props?: Partial<MocoLayerOptions>) {
     if (!baseLayer) {
       return null;
     }
-    return new MocoLayer({
+    const mocoLayer = new MocoLayer({
       apiKey: apikey,
+      apiParameters: {
+        contentMedium: true,
+      },
       date: notificationat ? new Date(notificationat) : undefined,
       maplibreLayer: baseLayer,
       name: LAYER_NAME_NOTIFICATION,
@@ -31,7 +34,12 @@ function NotificationLayer(props?: Partial<MocoLayerOptions>) {
       tenant: notificationtenant,
       url: notificationurl,
       ...(props || {}),
+      loadAll: !previewNotifications,
     });
+    if (!!previewNotifications && !mocoLayer.getVisible()) {
+      mocoLayer.setVisible(true);
+    }
+    return mocoLayer;
   }, [
     apikey,
     baseLayer,

package/src/RvfFeatureDetails/RvfFeatureDetails.tsx

@@ -26,7 +26,7 @@ function RvfFeatureDetails(props: RvfFeatureDetailsProps) {
   const { selectedFeature, selectedFeatures } = useRvfContext();
   const isSharedMobility = getIsSharedMobility(selectedFeature);
   const isSellingPoint = !!selectedFeature.get("tickets");
-  const isNotification = !!selectedFeature.get("severity");
+  const isNotification = !!selectedFeature.get("situation");
   const isLineNetwork = !!selectedFeature.get("original_line_id");
 
   const showDefaultData = () => {
@@ -46,22 +46,26 @@ function RvfFeatureDetails(props: RvfFeatureDetailsProps) {
 
   return (
     <div {...props}>
-      {isSellingPoint && <RvfSellingPointDetails feature={selectedFeature} />}
-      {isSharedMobility && (
-        <RvfSharedMobilityDetails selectedFeature={selectedFeature} />
-      )}
-      {isNotification && <RvfNotificationDetails feature={selectedFeature} />}
-      {isLineNetwork && (
-        <RvfLineNetworkDetails
-          feature={selectedFeature}
-          features={selectedFeatures}
-        />
-      )}
-      {!isLineNetwork &&
-        !isNotification &&
-        !isSharedMobility &&
-        !isSellingPoint &&
-        showDefaultData()}
+      <div className="p-4 pb-0">
+        {isSellingPoint && <RvfSellingPointDetails feature={selectedFeature} />}
+        {isSharedMobility && (
+          <RvfSharedMobilityDetails selectedFeature={selectedFeature} />
+        )}
+        {isNotification && <RvfNotificationDetails feature={selectedFeature} />}
+        {isLineNetwork && (
+          <RvfLineNetworkDetails
+            feature={selectedFeature}
+            features={selectedFeatures}
+          />
+        )}
+        {!isLineNetwork &&
+          !isNotification &&
+          !isSharedMobility &&
+          !isSellingPoint &&
+          showDefaultData()}
+      </div>
+      {/* TODO find why -1px is necessary */}
+      <div className="pointer-events-none sticky bottom-[-1px] h-6 w-full bg-gradient-to-b from-transparent to-white" />
     </div>
   );
 }

package/src/RvfFeatureDetails/RvfLineNetworkDetails/RvfLineNetworkDetails.tsx

@@ -1,9 +1,6 @@
 import { useEffect, useMemo, useState } from "preact/hooks";
 
 import RouteIcon from "../../RouteIcon";
-import Button from "../../ui/Button";
-import { RVF_LAYERS_NAMES } from "../../utils/constants";
-import useLayerConfig from "../../utils/hooks/useLayerConfig";
 import useMapContext from "../../utils/hooks/useMapContext";
 
 import type { RealtimeLine } from "mobility-toolbox-js/types";
@@ -51,8 +48,6 @@ function RvfLineNetworkDetails({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [stopInfosOpenId, setStopInfosOpenId] = useState<string>(null);
 
-  const layerConfig = useLayerConfig(RVF_LAYERS_NAMES.liniennetz);
-
   const isRunsDisplay = useMemo(() => {
     return new URLSearchParams(window.location.search).get("runs") === "true";
   }, []);
@@ -139,106 +134,102 @@ function RvfLineNetworkDetails({
   }
 
   return (
-    <div className="flex flex-col gap-4">
-      <div className="flex flex-col gap-4">
-        {Object.entries(lineInfosByOperator)
-          .sort(([operatorNameA], [operatorNameB]) => {
-            return lineInfosByOperator[operatorNameA].runs <
-              lineInfosByOperator[operatorNameB].runs
-              ? 1
-              : -1;
-          })
-          .map(([operatorName, linesInfos]) => {
-            return (
-              <div className={"flex flex-col gap-2"} key={operatorName}>
-                <div>{operatorName}</div>
-                <div className="flex flex-wrap gap-2">
-                  {linesInfos
-                    .sort((a, b) => {
-                      return a.runs < b.runs ? 1 : -1;
-                    })
-                    .map((lineInfo) => {
-                      const {
-                        color: backgroundColor,
-                        // color,
-                        // external_id,
-                        long_name,
-                        mot,
-                        runs,
-                        short_name: shortName,
-                        text_color: textColor,
-                      } = lineInfo;
-                      let longName = long_name;
+    <div className="space-y-4">
+      {Object.entries(lineInfosByOperator)
+        .sort(([operatorNameA], [operatorNameB]) => {
+          return lineInfosByOperator[operatorNameA].runs <
+            lineInfosByOperator[operatorNameB].runs
+            ? 1
+            : -1;
+        })
+        .map(([operatorName, linesInfos]) => {
+          return (
+            <div className={"flex flex-col gap-2"} key={operatorName}>
+              <div>{operatorName}</div>
+              <div className="flex flex-wrap gap-2">
+                {linesInfos
+                  .sort((a, b) => {
+                    return a.runs < b.runs ? 1 : -1;
+                  })
+                  .map((lineInfo) => {
+                    const {
+                      color: backgroundColor,
+                      // color,
+                      // external_id,
+                      long_name,
+                      mot,
+                      runs,
+                      short_name: shortName,
+                      text_color: textColor,
+                    } = lineInfo;
+                    let longName = long_name;
 
-                      let stops = null;
-                      //stopInfoIdsByLineId?.[id] || null;
-                      if (!stops?.length) {
-                        stops = null;
-                      }
+                    let stops = null;
+                    //stopInfoIdsByLineId?.[id] || null;
+                    if (!stops?.length) {
+                      stops = null;
+                    }
 
-                      if (!longName && stops) {
-                        const names = stops.map((stopId) => {
-                          return stopInfos[stopId].short_name;
-                        });
+                    if (!longName && stops) {
+                      const names = stops.map((stopId) => {
+                        return stopInfos[stopId].short_name;
+                      });
 
-                        longName = [
-                          ...new Set([names[0], names[names.length - 1]]),
-                        ].join(" - ");
-                      }
+                      longName = [
+                        ...new Set([names[0], names[names.length - 1]]),
+                      ].join(" - ");
+                    }
 
-                      // Build a line object
-                      const line: { type: string } & RealtimeLine = {
-                        color: null,
-                        id: null,
-                        name: shortName,
-                        stroke: null,
-                        text_color: null,
-                        type: mot,
-                      };
+                    // Build a line object
+                    const line: { type: string } & RealtimeLine = {
+                      color: null,
+                      id: null,
+                      name: shortName,
+                      stroke: null,
+                      text_color: null,
+                      type: mot,
+                    };
 
-                      if (textColor) {
-                        line.text_color = textColor.startsWith("#")
-                          ? textColor
-                          : `#${textColor}`;
-                      }
+                    if (textColor) {
+                      line.text_color = textColor.startsWith("#")
+                        ? textColor
+                        : `#${textColor}`;
+                    }
 
-                      if (backgroundColor) {
-                        line.color = backgroundColor.startsWith("#")
-                          ? backgroundColor
-                          : `#${backgroundColor}`;
-                      }
+                    if (backgroundColor) {
+                      line.color = backgroundColor.startsWith("#")
+                        ? backgroundColor
+                        : `#${backgroundColor}`;
+                    }
 
-                      return (
+                    return (
+                      <div className={longName ? "w-full" : ""} key={shortName}>
                         <div
-                          className={longName ? "w-full" : ""}
-                          key={shortName}
+                          className={"flex justify-between gap-2"}
+                          // onClick={() => {
+                          //   setStopInfosOpenId(stopInfosOpenId === id ? null : id);
+                          // }}
                         >
-                          <div
-                            className={"flex justify-between gap-2"}
-                            // onClick={() => {
-                            //   setStopInfosOpenId(stopInfosOpenId === id ? null : id);
-                            // }}
-                          >
-                            <div>
-                              <RouteIcon line={line}></RouteIcon>
+                          <div>
+                            <RouteIcon line={line}></RouteIcon>
+                          </div>
+                          {!!longName && (
+                            <div
+                              className={
+                                "flex-1 text-left *:before:content-['_–'] *:first:font-semibold *:first:before:!content-[_p] *:last:font-semibold *:last:before:!content-[_p]"
+                              }
+                            >
+                              {longName.split("-").map((name) => {
+                                return <div key={name}>{name}</div>;
+                              })}
                             </div>
-                            {!!longName && (
-                              <div
-                                className={
-                                  "flex-1 text-left *:before:content-['_–'] *:first:font-semibold *:first:before:!content-[_p] *:last:font-semibold *:last:before:!content-[_p]"
-                                }
-                              >
-                                {longName.split("-").map((name) => {
-                                  return <div key={name}>{name}</div>;
-                                })}
-                              </div>
-                            )}
-                            {isRunsDisplay && (
-                              <div className={"text-xs"}>{runs}</div>
-                            )}
+                          )}
+                          {isRunsDisplay && (
+                            <div className={"text-xs"}>{runs}</div>
+                          )}
 
-                            {/* We deactivate the list of stopsfor now */}
-                            {/* {!!stops && (
+                          {/* We deactivate the list of stopsfor now */}
+                          {/* {!!stops && (
                               <button className={"shrink-0"}>
                                 {stopInfosOpenId === id ? (
                                   <ArrowUp />
@@ -247,8 +238,8 @@ function RvfLineNetworkDetails({
                                 )}
                               </button>
                             )} */}
-                          </div>
-                          {/* {!!stops && (
+                        </div>
+                        {/* {!!stops && (
                             <div
                               className={`${stopInfosOpenId === id ? "" : "hidden"}`}
                             >
@@ -283,26 +274,13 @@ function RvfLineNetworkDetails({
                               })}
                             </div>
                           )} */}
-                        </div>
-                      );
-                    })}
-                </div>
+                      </div>
+                    );
+                  })}
               </div>
-            );
-          })}
-      </div>
-      {layerConfig.link && (
-        <div className={"flex"}>
-          <Button
-            className={"text-base"}
-            href={layerConfig.link.href}
-            target="_blank"
-            theme="primary"
-          >
-            {layerConfig.link.text || "Mehr erfahren"}
-          </Button>
-        </div>
-      )}
+            </div>
+          );
+        })}
     </div>
   );
 }