@geops/rvf-mobility-web-component 0.1.60 → 0.1.62

package/src/MobilityMap/MobilityMapAttributes.ts

@@ -9,15 +9,17 @@ import {
 
 // 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>`;
+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>`;
 const geopsMocoApiLink = `<a href="https://geops.com/en/solution/disruption-information">geOps MOCO API</a>`;
-// const geopsRealtimeApiLink = `<a href="https://developer.geops.io/apis/realtime">geOps Realtime API</a>`;
+const geopsMapsetApiLink = `<a href="https://geops.com/en/solution/mapset">geOps Mapset API</a>`;
+const geopsRealtimeApiLink = `<a href="https://developer.geops.io/apis/realtime">geOps Realtime API</a>`;
 
 export interface WebComponentAttributeDoc {
   defaultValue?: string;
   description: string;
+  public?: boolean;
   type?: "boolean" | undefined;
 }
 
@@ -33,9 +35,15 @@ export type MobilityMapAttributeName =
   | "layers"
   | "layersconfig"
   | "layertree"
+  | "lines"
   | "lnp"
   | "mainlink"
   | "mainlinktitle"
+  | "mapset"
+  | "mapsetbbox"
+  | "mapsetplanid"
+  | "mapsettenants"
+  | "mapseturl"
   | "mapsurl"
   | "maxextent"
   | "maxzoom"
@@ -69,46 +77,55 @@ export type MobilityMapAttributes = Record<
 const attrs: MobilityMapAttributes = {
   apikey: {
     defaultValue: "5cc87b12d7c5370001c1d655820abcc37dfd4d968d7bab5b2a74a935",
-    description: null, //`Your ${geopsApiLink}`,
+    description: `Your ${geopsApiLink}`,
+    public: false,
   },
   baselayer: {
     defaultValue: "de.rvf_moco",
-    description: null, //`The style's name from the ${geopsMapsApiLink}. <br/>Ex: base_dark_v2, base_bright_v2, ...`,
+    description: `The style's name from the ${geopsMapsApiLink}. <br/>Ex: base_dark_v2, base_bright_v2, ...`,
+    public: false,
   },
   center: {
     description:
       "The center of the map in EPSG:3857 coordinates.<br/>Parameter required if extent is not set.",
+    public: true,
   },
   details: {
     defaultValue: "true",
     description:
       "When a feature of a queryable layer is clicked, it displays informations about it.",
+    public: true,
     type: "boolean",
   },
   embed: {
     defaultValue: "false",
     description:
       "Toggle the embedded navigation mode.<br/>In this mode zooming with mouse wheel is deactivated and, on touch device, you can only navigate with two finger, a warning message is displayed to warn the user.",
+    public: true,
     type: "boolean",
   },
   extent: {
     defaultValue: MAX_EXTENT.join(","),
     description:
       "The map's extent in EPSG:3857 coordinates.<br/>Ex: 831634,5933959,940649,6173660 .<br/>Parameter required if center and zoom are not set.",
+    public: true,
   },
   geolocation: {
     defaultValue: "true",
     description: "Toggle the display of the geolocation button or not.",
+    public: true,
     type: "boolean",
   },
   lang: {
     defaultValue: "de",
-    description: null,
-    // "The language to use for the map. Supported languages are : de, en, fr, it.",
+    description:
+      "The language to use for the map. Supported languages are : de, en, fr, it.",
+    public: false,
   },
   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.<br/>Layers available are ${Object.values(LAYERS_NAMES).join(", ")}.`,
+    public: true,
   },
   layersconfig: {
     description: `A JSON string to configure the layers and other components associated to it.<br/>
@@ -135,15 +152,22 @@ where:
     </ul>
   <li><i>title</i> is the title of the layer used in the details view header and in the layer tree, if not defined the layer name will be used.</li>
 </ul>`,
+    public: true,
   },
   layertree: {
     defaultValue: "true",
     description: "Show/hide the layers tree button in the toolbar.",
+    public: true,
     type: "boolean",
   },
+  lines: {
+    description: `A comma separated list of line ids to highlight on the linesnetworkplan layer. The line ids are the original_line_id property of the lines in the network plan.<br/>Ex: S1,RE10,RE1.`,
+    public: false,
+  },
   lnp: {
     defaultValue: "true",
-    description: null,
+    description: `Add the linesnetworkplans layer to the map. This layer will display lines network plans on the map.`,
+    public: false,
     type: "boolean",
   },
   mainlink: {
@@ -153,45 +177,83 @@ where:
   mainlinktitle: {
     description: "A title for the mainlink, used as tooltip.",
   },
+  mapset: {
+    defaultValue: "false",
+    description: `Add the mapset layer to the map. This layer will display mapset plans on the map.`,
+    public: true,
+    type: "boolean",
+  },
+  mapsetbbox: {
+    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.",
+    public: false,
+  },
+  mapsettenants: {
+    defaultValue: "geopstest",
+    description: `The ${geopsMapsetApiLink} tenant to get the mapset from.`,
+    public: true,
+  },
+  mapseturl: {
+    defaultValue: "https://editor.mapset.io/api/v1",
+    description: `The ${geopsMapsetApiLink} url to use.`,
+    public: true,
+  },
   mapsurl: {
     defaultValue: "https://maps.geops.io",
-    description: null,
+    description: `The ${geopsMapsApiLink} url to use.`,
+    public: false,
   },
   maxextent: {
     defaultValue: MAX_EXTENT.join(","),
     description:
       "The maximum extent of the map in EPSG:3857 coordinates.<br/>Ex: 831634,5933959,940649,6173660 .",
+    public: true,
   },
   maxzoom: {
     defaultValue: "20",
     description: "The maximal zoom level of the map.",
+    public: true,
   },
   minzoom: {
     description: "The minimal zoom level of the map.",
+    public: true,
   },
   mots: {
-    description: null,
+    description:
+      "Commas separated list of mots to display on the Realtime layer.<br/>Ex: rail,bus,coach,foot,tram,subway,gondola,funicular,ferry,car .",
+    public: false,
   },
   notification: {
     defaultValue: "true",
     description: `Add the notification layer to the map. This layer will display informations about disruptions on the network. Data comes from
         our ${geopsMocoApiLink} .`,
+    public: true,
     type: "boolean",
   },
   notificationat: {
-    description: null,
+    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,
   },
   notificationtenant: {
     defaultValue: "rvf",
-    description: null,
+    description: `The ${geopsMocoApiLink} tenant to get the notification from.`,
+    public: false,
   },
   notificationurl: {
     defaultValue: "https://moco.geops.io/api/v2/",
-    description: null,
+    description: `The ${geopsMocoApiLink} url to use.`,
+    public: false,
   },
   permalink: {
     defaultValue: "false",
-    description: null, //"Update some url parameters x,y,z,layers to the current window location. These parameters are used to store the current state of the map. They will be used on page load to configure the web-component.",
+    description:
+      "Update some url parameters x,y,z,layers to the current window location. These parameters are used to store the current state of the map. They will be used on page load to configure the web-component.",
+    public: false,
     type: "boolean",
   },
   permalinktemplate: {
@@ -199,63 +261,78 @@ where:
     description: `A template string to read the current browser url. Hash (starting with #) and URL search parameters (starting with ?) are supported.<br/>
      The template supports {{x}}, {{y}}, {{z}} variables.<br/> 
      Ex: "?x={{x}}&y={{y}}&z={{z}}" or "#map/{{x}}/{{y}}/{{z}}" .`,
+    public: true,
   },
   print: {
     defaultValue: "true",
     description: "Show/hide the print button in the toolbar.",
+    public: true,
     type: "boolean",
   },
   queryablelayers: {
     defaultValue: DEFAULT_QUERYABLE_LAYERS.toString(),
     description: `A comma separated list of layers's name. The data of these layers will be queryable by click on the map (see selectedfeature event). If empty, all layers will not be queryable.<br/>
-      Layers available are ${Object.values(LAYERS_NAMES).join(", ")}`,
+        Layers available are ${Object.values(LAYERS_NAMES).join(", ")}`,
+    public: true,
   },
   realtime: {
     defaultValue: "true",
-    description: null,
+    description: `Add the realtime layer to the map. Data comes from the ${geopsRealtimeApiLink} .`,
+    public: false,
     type: "boolean",
   },
   realtimebboxparameters: {
     defaultValue: "line_tags=RVF",
-    description: null,
+    description:
+      "A space separated list of parameters to add to the realtime BBOX request to define custom behavior.<br/>Ex: graph=XXX line_tags=XXX.",
+    public: false,
   },
   realtimetenant: {
-    description: null,
+    description: `The ${geopsRealtimeApiLink} tenant to get the realtime data from.`,
+    public: false,
   },
   realtimeurl: {
     defaultValue: "wss://api.geops.io/tracker-ws/v1/ws",
-    description: null,
+    description: `The ${geopsRealtimeApiLink} url to use.`,
+    public: false,
   },
   runs: {
     defaultValue: "false",
     description:
       "Shows the number of trips on a line in the sidebar, use only for debugging.",
+    public: true,
     type: "boolean",
   },
   search: {
     defaultValue: "false",
     description: "Toggle the search stops input.",
+    public: true,
     type: "boolean",
   },
   share: {
     defaultValue: "true",
     description: "Show/hide the share button in the toolbar.",
+    public: true,
     type: "boolean",
   },
   stopsurl: {
     defaultValue: "https://api.geops.io/stops/v1/",
-    description: null,
+    description: `The ${geopsStopsApiLink} to use.`,
+    public: false,
   },
   tenant: {
-    description: null,
+    description: `The tenant to use by default for all geOps APIs (Stops, Realtime, MOCO ...). Can be override for each API by other XXXXtenant parameters.`,
+    public: false,
   },
   toolbar: {
     defaultValue: "true",
     description: "Show/hide the toolbar on the top left.",
+    public: true,
     type: "boolean",
   },
   zoom: {
     description: "The zoom level of the map.",
+    public: true,
   },
 };
 

package/src/MobilityMap/MobilityMapEvents.ts

@@ -0,0 +1,53 @@
+export interface WebComponentEventDoc {
+  description: string;
+  public?: boolean;
+}
+
+export type MobilityMapEventName =
+  | "mwc:attribute"
+  | "mwc:messageready"
+  | "mwc:permalink"
+  | "mwc:selectedfeature"
+  | "mwc:singleclick"
+  | "mwc:stopssearchselect";
+
+export type MobilityMapEvents = Record<
+  MobilityMapEventName,
+  WebComponentEventDoc
+>;
+
+const attrs: MobilityMapEvents = {
+  "mwc:attribute": {
+    description:
+      "Event fired when an web component's attribute is changed. The event data contains the list of all attributes and their values.",
+    public: false,
+  },
+  "mwc:messageready": {
+    description:
+      "Only if the web-component is embedded in an iframe. Message event fired when the web component is ready to receive messages from parent window.",
+
+    public: false,
+  },
+  "mwc:permalink": {
+    description:
+      "Event fired when the map's state changes. The event data contains the permalink URL search parameters as string.",
+    public: false,
+  },
+  "mwc:selectedfeature": {
+    description:
+      "Event fired when a feature is selected on the map. The event data contains the selected feature in GeoJSON format.",
+    public: true,
+  },
+  "mwc:singleclick": {
+    description:
+      "Event fired when the map is clicked. The event data contains the map coordinates in EPSG:3857 and the pixel coordinates.",
+    public: false,
+  },
+  "mwc:stopssearchselect": {
+    description:
+      "Only when search attribute is 'true'. Event fired when a stop is selected in the stops search results. The event data contains the selected stop.",
+    public: false,
+  },
+};
+
+export default attrs;

package/src/MobilityNotifications/MobilityNotifications.tsx

@@ -0,0 +1,93 @@
+import { MocoAPI } from "mobility-toolbox-js/ol";
+import { memo, useEffect, useState } from "preact/compat";
+
+import SituationDetails from "../SituationDetails";
+import { I18nContext } from "../utils/hooks/useI18n";
+import i18n from "../utils/i18n";
+
+import MobilityNotificationsAttributes from "./MobilityNotificationsAttributes";
+
+// @ts-expect-error tailwind must be added for the search web component
+import tailwind from "../style.css";
+
+import type { SituationType } from "mobility-toolbox-js/types";
+
+import type { MobilityNotificationsAttributeName } from "./MobilityNotificationsAttributes";
+
+export type MobilityNotificationsProps = Record<
+  MobilityNotificationsAttributeName,
+  null | string | undefined
+>;
+
+function MobilityNotifications({
+  apikey,
+  lang,
+  notificationtenant,
+  notificationurl,
+}: MobilityNotificationsProps) {
+  const [situations, setSituations] = useState<SituationType[]>([]);
+
+  useEffect(() => {
+    new MocoAPI({
+      apiKey: apikey || undefined,
+      tenant: notificationtenant,
+      url: notificationurl,
+    })
+      .export({
+        contentMedium: true,
+        graph:
+          "np_topo4,np_topo5,np_topo6,np_topo7,np_topo8,np_topo9,np_topo10,np_topo11,np_topo12,np_topo13,np_topo14,np_topo15,osm",
+        hasGeoms: true,
+        publicAt: "2025-10-10T10:03:31.650Z",
+      })
+      .then((data) => {
+        if (data?.paginatedSituations?.results) {
+          setSituations(data.paginatedSituations.results);
+        }
+      })
+      .catch((e) => {
+        // eslint-disable-next-line no-console
+        console.error(e);
+      });
+  }, [apikey, notificationurl, notificationtenant]);
+
+  useEffect(() => {
+    i18n.locale(lang);
+  }, [lang]);
+
+  return (
+    <I18nContext.Provider value={i18n}>
+      <style>{tailwind}</style>
+      <div className="flex w-full flex-col gap-6">
+        {situations?.map((situation) => {
+          return (
+            <SituationDetails
+              canToggle={true}
+              headerClassName="text-rvf-h3 font-semibold"
+              iconClassName="w-8 h-8 text-red"
+              key={situation.id}
+              reasonClassName="hidden"
+              situation={situation}
+              timeIntervalClassName="pl-1 text-base py-3 font-semibold text-balance"
+              useShortMonth={false}
+            ></SituationDetails>
+          );
+        })}
+      </div>
+    </I18nContext.Provider>
+  );
+}
+
+// We creates a wrapper to inject the default props values from MobilityMapAttributes.
+const defaultProps = {};
+Object.entries(MobilityNotificationsAttributes).forEach(([key]) => {
+  defaultProps[key] = MobilityNotificationsAttributes[key].defaultValue || null;
+});
+
+function MobilityNotificationsWithDefaultProps(
+  props: MobilityNotificationsProps,
+) {
+  return <MobilityNotifications {...defaultProps} {...props} />;
+}
+
+export default memo(MobilityNotificationsWithDefaultProps);

package/src/MobilityNotifications/MobilityNotificationsAttributes.test.ts

@@ -0,0 +1,21 @@
+import attributes from "./MobilityNotificationsAttributes";
+
+describe("MobilityMapAttributes", () => {
+  Object.entries(attributes).forEach(([key, value]) => {
+    test(`${key} has a description`, () => {
+      expect(value.description).toBeDefined();
+    });
+
+    if (value.type === "boolean") {
+      test(`${key} has a defaultValue for boolean`, () => {
+        expect(value.defaultValue).toMatch(/^(true|false)$/);
+      });
+    }
+
+    if (value.defaultValue === "true" || value.defaultValue === "false") {
+      test(`${key} is boolean when defaultValue is true or false`, () => {
+        expect(value.type).toBe("boolean");
+      });
+    }
+  });
+});

package/src/MobilityNotifications/MobilityNotificationsAttributes.ts

@@ -0,0 +1,46 @@
+import type { WebComponentAttributeDoc } from "../MobilityMap/MobilityMapAttributes";
+
+const geopsApiLink = `<a href="https://developer.geops.io/">geOps API key</a>`;
+const geopsMocoApiLink = `<a href="https://geops.com/en/solution/disruption-information">geOps MOCO API</a>`;
+
+export type MobilityNotificationsAttributeName =
+  | "apikey"
+  | "lang"
+  | "notificationat"
+  | "notificationtenant"
+  | "notificationurl";
+
+export type MobilityNotificationsAttributes = Record<
+  MobilityNotificationsAttributeName,
+  WebComponentAttributeDoc
+>;
+
+const attrs: MobilityNotificationsAttributes = {
+  apikey: {
+    defaultValue: "5cc87b12d7c5370001c1d655820abcc37dfd4d968d7bab5b2a74a935",
+    description: `Your ${geopsApiLink}`,
+    public: false,
+  },
+  lang: {
+    defaultValue: "de",
+    description: "The language to use for the notifications.",
+    public: false,
+  },
+  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,
+  },
+  notificationtenant: {
+    defaultValue: "rvf",
+    description: `The ${geopsMocoApiLink} tenant to get the notification from.`,
+    public: false,
+  },
+  notificationurl: {
+    defaultValue: "https://moco.geops.io/api/v2/",
+    description: `The ${geopsMocoApiLink} url to use.`,
+    public: false,
+  },
+};
+
+export default attrs;

package/src/MobilityNotifications/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./MobilityNotifications";
+export { default as MobilityNotificationsAttributes } from "./MobilityNotificationsAttributes";

package/src/MobilitySearch/MobilitySearchEvents.ts

@@ -0,0 +1,21 @@
+import MobilityMapEvents from "../MobilityMap/MobilityMapEvents";
+
+import type { WebComponentEventDoc } from "../MobilityMap/MobilityMapEvents";
+
+export type MobilitySearchEventName = "mwc:attribute" | "mwc:stopssearchselect";
+
+export type MobilitySearchAttributes = Record<
+  MobilitySearchEventName,
+  WebComponentEventDoc
+>;
+
+const attrs: MobilitySearchAttributes = {
+  "mwc:attribute": MobilityMapEvents["mwc:attribute"],
+  "mwc:stopssearchselect": {
+    description:
+      "Event fired when a stop is selected in the stops search results. The event data contains the selected stop.",
+    public: true,
+  },
+};
+
+export default attrs;