@geops/rvf-mobility-web-component 0.1.127-beta.1 → 0.1.127-beta.2

package/src/MobilityMap/MobilityMapAttributes.ts

@@ -1,381 +0,0 @@
-//type: "checkbox" | "date" | "select" | "textfield";
-import {
-  DEFAULT_QUERYABLE_LAYERS,
-  LAYERS_NAMES,
-  LAYERS_WITH_LINK,
-  MAX_EXTENT,
-} 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>`;
-const geopsMocoApiLink = `<a href="https://geops.com/en/solution/disruption-information">geOps MOCO 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;
-}
-
-export type MobilityMapAttributeName =
-  | "apikey"
-  | "baselayer"
-  | "center"
-  | "details"
-  | "embed"
-  | "extent"
-  | "geolocation"
-  | "lang"
-  | "layers"
-  | "layersconfig"
-  | "layertree"
-  | "lineid"
-  | "lnp"
-  | "mainlink"
-  | "mainlinktitle"
-  | "mapset"
-  | "mapsetplanid"
-  | "mapsettags"
-  | "mapsettenants"
-  | "mapsettimestamp"
-  | "mapseturl"
-  | "mapsurl"
-  | "maxextent"
-  | "maxzoom"
-  | "minzoom"
-  | "mots"
-  | "notification"
-  | "notificationat"
-  | "notificationid"
-  | "notificationlang"
-  | "notificationtenant"
-  | "notificationurl"
-  | "permalink"
-  | "permalinktemplate"
-  | "print"
-  | "queryablelayers"
-  | "realtime"
-  | "realtimebboxparameters"
-  | "realtimeresturl"
-  | "realtimetenant"
-  | "realtimeurl"
-  | "runs"
-  | "search"
-  | "share"
-  | "stationid"
-  | "stopsurl"
-  | "tenant"
-  | "toolbar"
-  | "trainid"
-  | "zoom";
-
-export type MobilityMapAttributes = Record<
-  MobilityMapAttributeName,
-  WebComponentAttributeDoc
->;
-
-const attrs: MobilityMapAttributes = {
-  apikey: {
-    defaultValue: "5cc87b12d7c5370001c1d655cb6b0a94dc1a4b859313dc211675efd6",
-    description: `Your ${geopsApiLink}`,
-    public: false,
-  },
-  baselayer: {
-    defaultValue: "de.rvf_moco",
-    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:
-      "The language to use for the map. Supported languages are : de, en, fr, it.",
-    public: true,
-  },
-  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/>
-       The layers available are : ${LAYERS_WITH_LINK.toString()}.<br/>
-       Definition for a layer :
-<pre style="font-size: 12px; overflow: auto;">{
-  "liniennetz": {
-    "link": {
-      "href": "https://www.rvf.de/fahrtinfo/netzplan",
-      "show": true,
-      "text": "Zu den Liniennetzplänen"
-    },
-    "title": "Liniennetzpläne"
-  }
-  "sharedmobility": {
-    "minZoom": 14
-  }
-</pre>}
-<br/>
-where:
-<ul style="list-style-type: disc; padding-left: 20px;">
-  <li><i>link</i> defined a external link displayed at the bottom of the detail view</li>
-    <ul style="list-style-type: disc; padding-left: 40px;">
-      <li><i>href</i> is the target of the link. The <i>href</i> can be template, for example for the meldungen layer you can use {{id}} to insert the id of the notification in the url.</li>
-      <li><i>text</i> is the text display as a link</li>
-      <li><i>show</i> show/hide the link in the details view</li>
-    </ul>
-  <li><i>featurelink</i> defined a external link used when you click on single feature in detail view</li>
-    <ul style="list-style-type: disc; padding-left: 40px;">
-      <li><i>href</i> is the target of the link. The <i>href</i> can be template, for example for the meldungen layer you can use {{id}} to insert the id of the notification in the url.</li>
-    </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>
-  <li><i>minZoom</i> is the minimal zoom level at which the layer is visible (only <i>${LAYERS_NAMES.sharedMobility}</i> layer).</li>
-  </ul>`,
-    public: true,
-  },
-  layertree: {
-    defaultValue: "true",
-    description: "Show/hide the layers tree button in the toolbar.",
-    public: true,
-    type: "boolean",
-  },
-  lineid: {
-    description: `An id or a short/long name of a line to highlight. <br/>Ex: S1`,
-    public: false,
-  },
-  lnp: {
-    defaultValue: "true",
-    description: `Add the linesnetworkplans layer to the map. This layer will display lines network plans on the map.`,
-    public: false,
-    type: "boolean",
-  },
-  mainlink: {
-    description:
-      "A link displayed on bottom left of the map.  The link can be a template, for example  you can use {{x}} {{y}} {{z}} to insert the current position of the map in the url.<br/>Ex: http://mywebsite/mypage#map/{{x}}/{{y}}/{{z}}.",
-    public: true,
-  },
-  mainlinktitle: {
-    description: "A title for the mainlink, used as tooltip.",
-    public: true,
-  },
-  mapset: {
-    defaultValue: "false",
-    description: `Add the mapset layer to the map. This layer will display mapset plans on the map. By default, it will load only the standard plans valid at the current time.`,
-    public: true,
-    type: "boolean",
-  },
-  mapsetplanid: {
-    description:
-      "An id of the mapset plan to display. Mostly for debugging purposes.",
-    public: false,
-  },
-  mapsettags: {
-    description: `The ${geopsMapsetApiLink} tags to get the plans from.`,
-    public: true,
-  },
-  mapsettenants: {
-    defaultValue: "rvf",
-    description: `The ${geopsMapsetApiLink} tenant to get the plans from.`,
-    public: false,
-  },
-  mapsettimestamp: {
-    description: `The ${geopsMapsetApiLink} timestamp used to load valid standard plan. If not defined it will use the current time.`,
-    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: `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:
-      "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:
-      "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,
-  },
-  notificationid: {
-    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.`,
-    public: false,
-  },
-  notificationurl: {
-    defaultValue: "https://moco.geops.io/api/v2/",
-    description: `The ${geopsMocoApiLink} url to use.`,
-    public: false,
-  },
-  permalink: {
-    defaultValue: "false",
-    description:
-      "if true, the current browser window url will be updated automatically with the parameters defined in the `permalinktemplate` attribute.",
-    public: true,
-    type: "boolean",
-  },
-  permalinktemplate: {
-    defaultValue: "#map/{{x}}/{{y}}/{{z}}",
-    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}} and {{layers}} 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(", ")}`,
-    public: true,
-  },
-  realtime: {
-    defaultValue: "true",
-    description: `Add the realtime layer to the map. Data comes from the ${geopsRealtimeApiLink} .`,
-    public: false,
-    type: "boolean",
-  },
-  realtimebboxparameters: {
-    defaultValue: "line_tags=RVF",
-    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,
-  },
-  realtimeresturl: {
-    defaultValue: "https://api.geops.io/tracker-http/v1/",
-    description: `The ${geopsRealtimeApiLink} REST API url to use for fetching infos about realtime data.`,
-    public: false,
-  },
-  realtimetenant: {
-    description: `The ${geopsRealtimeApiLink} tenant to get the realtime data from.`,
-    public: false,
-  },
-  realtimeurl: {
-    defaultValue: "wss://api.geops.io/tracker-ws/v1/ws",
-    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",
-  },
-  stationid: {
-    description: `An id or a short/long name of a station to show details of.`,
-    public: false,
-  },
-  stopsurl: {
-    defaultValue: "https://api.geops.io/stops/v1/",
-    description: `The ${geopsStopsApiLink} to use.`,
-    public: false,
-  },
-  tenant: {
-    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",
-  },
-  trainid: {
-    description: `An id of a route to highlight on the map and to show details of.`,
-    public: false,
-  },
-  zoom: {
-    description: "The zoom level of the map.",
-    public: true,
-  },
-};
-
-export default attrs;

package/src/MobilityMap/MobilityMapEvents.ts

@@ -1,53 +0,0 @@
-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/MobilityMap/index.tsx

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

package/src/MobilityNotifications/MobilityNotifications.tsx

@@ -1,153 +0,0 @@
-import { MocoAPI } from "mobility-toolbox-js/ol";
-import { SeverityEnumeration } from "mobility-toolbox-js/types";
-import { memo, useEffect, useMemo, useState } from "preact/compat";
-
-import I18n from "../I18n";
-import SituationDetails from "../SituationDetails";
-import { MAX_EXTENT } from "../utils/constants";
-
-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
->;
-
-const severityOrder = {
-  [SeverityEnumeration.NoImpact]: 2,
-  [SeverityEnumeration.Normal]: 5,
-  [SeverityEnumeration.Severe]: 6,
-  [SeverityEnumeration.Slight]: 4,
-  [SeverityEnumeration.Undefined]: 1,
-  [SeverityEnumeration.Unknown]: 0,
-  [SeverityEnumeration.VerySevere]: 7,
-  [SeverityEnumeration.VerySlight]: 3,
-};
-
-function MobilityNotifications({
-  apikey,
-  lang,
-  notificationlang,
-  notificationtenant,
-  notificationurl,
-}: MobilityNotificationsProps) {
-  const [situations, setSituations] = useState<SituationType[]>([]);
-
-  // Define fallback languages from the notificationlang attribute
-  const fallbackLangs = useMemo(() => {
-    return (
-      notificationlang?.split(",").map((l) => {
-        return l.trim();
-      }) || []
-    );
-  }, [notificationlang]);
-
-  useEffect(() => {
-    new MocoAPI({
-      apiKey: apikey || undefined,
-      tenant: notificationtenant,
-      url: notificationurl,
-    })
-      .export({
-        bbox: MAX_EXTENT,
-        contentMedium: true,
-        includeGeoms: false,
-        includeLines: true,
-        includeStops: true,
-        // isEdited: true,
-        publicNow: true, // improve caching efficiency compare to use of publicAt
-      })
-      .then((data) => {
-        if (data?.paginatedSituations?.results) {
-          setSituations(data.paginatedSituations.results);
-        }
-      })
-      .catch((e) => {
-        // eslint-disable-next-line no-console
-        console.error(e);
-      });
-  }, [apikey, notificationurl, notificationtenant]);
-
-  return (
-    <I18n locale={lang}>
-      <style>{tailwind}</style>
-      <div className="flex w-full flex-col gap-6">
-        {situations
-          ?.sort((a, b) => {
-            // sort by startDate, because of the  TimeOffset we have to convert to date object
-            // TODO the sort by date should be done server side
-            const startDateA = a.affectedTimeIntervalsStart;
-            const startDateB = b.affectedTimeIntervalsStart;
-            if (startDateA && startDateB) {
-              const dateA = new Date(startDateA);
-              const dateB = new Date(startDateB);
-              // If they start the same day we sort by severity
-              if (
-                dateA.getDate() === dateB.getDate() &&
-                dateA.getMonth() === dateB.getMonth() &&
-                dateA.getFullYear() === dateB.getFullYear()
-              ) {
-                // Sort by severity;
-                const severityA =
-                  a.publications.find((pub) => {
-                    return !!pub.severity;
-                  })?.severity || 0;
-                const severityB =
-                  b.publications.find((pub) => {
-                    return !!pub.severity;
-                  })?.severity || 0;
-                return severityOrder[severityA] > severityOrder[severityB]
-                  ? -1
-                  : 1;
-              }
-              return startDateA < startDateB ? 1 : -1;
-            }
-
-            if (!startDateA) {
-              return -1;
-            }
-
-            if (!startDateB) {
-              return 1;
-            }
-          })
-          .map((situation) => {
-            return (
-              <SituationDetails
-                canToggle={true}
-                fallbackLangs={fallbackLangs}
-                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>
-    </I18n>
-  );
-}
-
-// 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

@@ -1,35 +0,0 @@
-import mapAttributes from "../MobilityMap/MobilityMapAttributes";
-
-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");
-      });
-    }
-  });
-  describe("default values are set correctly", () => {
-    test("apiKey attribute is properly set", () => {
-      expect(attributes.apikey.defaultValue).toBe(
-        "5cc87b12d7c5370001c1d655cb6b0a94dc1a4b859313dc211675efd6",
-      );
-    });
-    test("apiKey attribute is the same as the MobilityMap attribute", () => {
-      expect(attributes.apikey.defaultValue).toBe(
-        mapAttributes.apikey.defaultValue,
-      );
-    });
-  });
-});

package/src/MobilityNotifications/MobilityNotificationsAttributes.ts

@@ -1,53 +0,0 @@
-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"
-  | "notificationlang"
-  | "notificationtenant"
-  | "notificationurl";
-
-export type MobilityNotificationsAttributes = Record<
-  MobilityNotificationsAttributeName,
-  WebComponentAttributeDoc
->;
-
-const attrs: MobilityNotificationsAttributes = {
-  apikey: {
-    defaultValue: "5cc87b12d7c5370001c1d655cb6b0a94dc1a4b859313dc211675efd6",
-    description: `Your ${geopsApiLink}`,
-    public: false,
-  },
-  lang: {
-    defaultValue: "de",
-    description: "The language to use for the notifications.",
-    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.`,
-    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

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