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

package/src/index.tsx

@@ -1,58 +1,20 @@
 import register from "preact-custom-element";
 
 import MobilityMap from "./MobilityMap";
-import MobilitySearch from "./StopsSearch";
+import MobilityMapAttributes from "./MobilityMap/MobilityMapAttributes";
+import MobilitySearch, { MobilitySearchAttributes } from "./MobilitySearch";
 
-register(
-  MobilityMap,
-  "geops-mobility",
-  [
-    "apikey",
-    "baselayer",
-    "center",
-    "extent",
-    "maxextent",
-    "geolocation",
-    "details",
-    "layers",
-    "layertree",
-    "mapsurl",
-    "mots",
-    "notification",
-    "notificationat",
-    "notificationurl",
-    "notificationbeforelayerid",
-    "print",
-    "realtime",
-    "realtimeurl",
-    "search",
-    "share",
-    "tenant",
-    "zoom",
-    "permalink",
-    "embed",
-  ],
-  { shadow: true },
-);
+register(MobilityMap, "geops-mobility", Object.keys(MobilityMapAttributes), {
+  mode: "open",
+  shadow: true,
+});
 
 register(
   MobilitySearch,
   "geops-mobility-search",
-  [
-    "apikey",
-    "bbox",
-    "countrycode",
-    "event",
-    "field",
-    "limit",
-    "mots",
-    "onselect",
-    "params",
-    "prefagencies",
-    "reflocation",
-    "url",
-  ],
+  Object.keys(MobilitySearchAttributes),
   {
+    mode: "open",
     shadow: true,
   },
 );

package/src/indexDoc.ts

@@ -0,0 +1,13 @@
+// This file contains what we need to build the documentation in the index.html file
+
+import MobilityMapAttributes from "./MobilityMap/MobilityMapAttributes";
+import MobilitySearchAttributes from "./MobilitySearch/MobilitySearchAttributes";
+
+if (typeof window !== "undefined") {
+  // @ts-expect-error it's wanted
+  window.MobilityMapAttributes = MobilityMapAttributes;
+  // @ts-expect-error it's wanted
+  window.MobilitySearchAttributes = MobilitySearchAttributes;
+}
+
+export default { MobilityMapAttributes, MobilitySearchAttributes };

package/src/ui/Button/Button.tsx

@@ -0,0 +1,57 @@
+import { memo, useMemo } from "preact/compat";
+
+import type {
+  AnchorHTMLAttributes,
+  ButtonHTMLAttributes,
+  PreactDOMAttributes,
+} from "preact";
+
+export type ButtonProps = {
+  className?: string;
+  selected?: boolean;
+  theme?: "primary" | "secondary";
+} & AnchorHTMLAttributes &
+  ButtonHTMLAttributes &
+  PreactDOMAttributes;
+
+const baseClasses = "flex";
+
+export const themes = {
+  primary: {
+    classes: "",
+    selectedClasses: "",
+  },
+  secondary: {
+    classes: "",
+    selectedClasses: "",
+  },
+};
+
+function Button({
+  children,
+  className,
+  href,
+  selected = false,
+  theme = "secondary",
+  ...props
+}: ButtonProps) {
+  const classes = useMemo(() => {
+    return `${baseClasses} ${themes[theme].classes}  ${selected ? themes[theme].selectedClasses : ""} ${className || ""}`;
+  }, [className, selected, theme]);
+
+  if (href) {
+    return (
+      <a className={classes} href={href} {...props}>
+        {children}
+      </a>
+    );
+  }
+
+  return (
+    <button className={classes} {...props}>
+      {children}
+    </button>
+  );
+}
+
+export default memo(Button);

package/src/ui/Button/index.tsx

@@ -0,0 +1 @@
+export { default } from "../../RvfButton";

package/src/ui/IconButton/IconButton.tsx

@@ -0,0 +1,44 @@
+import { memo, useMemo } from "preact/compat";
+
+import type { ButtonHTMLAttributes, PreactDOMAttributes } from "preact";
+
+export type IconButtonProps = {
+  className?: string;
+  selected?: boolean;
+  theme?: "primary" | "secondary";
+} & ButtonHTMLAttributes<HTMLButtonElement> &
+  PreactDOMAttributes;
+
+const baseClasses =
+  "flex size-9 items-center justify-center rounded-full bg-white p-1.5 shadow-lg";
+
+export const themes = {
+  primary: {
+    classes: "",
+    selectedClasses: "",
+  },
+  secondary: {
+    classes: "",
+    selectedClasses: "",
+  },
+};
+
+function IconButton({
+  children,
+  className,
+  selected = false,
+  theme = "secondary",
+  ...props
+}: IconButtonProps) {
+  const classes = useMemo(() => {
+    return `${baseClasses} ${themes[theme].classes}  ${selected ? themes[theme].selectedClasses : ""} ${className || ""}`;
+  }, [className, selected, theme]);
+
+  return (
+    <button className={classes} {...props}>
+      {children}
+    </button>
+  );
+}
+
+export default memo(IconButton);

package/src/ui/IconButton/index.tsx

@@ -0,0 +1 @@
+export { default } from "../../RvfIconButton";

package/src/utils/MobilityEvent.ts

@@ -1,12 +1,12 @@
-import type { MobilityMapProps } from "../MobilityMap/MobilityMap";
-
 export type MobilityEventType =
   | "mwc:attribute"
+  | "mwc:permalink"
+  | "mwc:selectedfeature"
   | "mwc:stopssearchselect"
   | string;
 
 class MobilityEvent<T> extends Event {
-  data: MobilityMapProps;
+  data: T;
 
   constructor(name: MobilityEventType, data: T, options: EventInit = {}) {
     super(name, { ...options, composed: true });
@@ -14,6 +14,7 @@ class MobilityEvent<T> extends Event {
   }
 
   logImportantData() {
+    // eslint-disable-next-line no-console
     console.log(this.data);
   }
 }

package/src/utils/applyInitialLayerVisibility.ts

@@ -1,5 +1,5 @@
-import { Group } from "ol/layer";
-import BaseLayer from "ol/layer/Base";
+import type { Group } from "ol/layer";
+import type BaseLayer from "ol/layer/Base";
 
 const applyInitialLayerVisibility = (
   layersAttrValue: string,
@@ -11,7 +11,7 @@ const applyInitialLayerVisibility = (
     !!(layersAttrValue !== null && layersAttrValue !== undefined);
 
   if (hasLayersAttribute) {
-    const names = (layersAttrValue && layersAttrValue.split(",")) || [];
+    const names = layersAttrValue?.split(",") || [];
     const name = layer.get("name");
     const shouldBeVisible = names.includes(name);
     if (layer.getVisible() !== shouldBeVisible) {

package/src/utils/centerOnStation.ts

@@ -1,7 +1,8 @@
-import { Map } from "ol";
 import { fromLonLat } from "ol/proj";
 
-import { StationFeature } from "../StopsSearch";
+import type { Map } from "ol";
+
+import type { StationFeature } from "../StopsSearch";
 
 const centerOnStation = (selectedStation: StationFeature, map: Map) => {
   const center = selectedStation?.geometry?.coordinates;

package/src/utils/centerOnVehicle.ts

@@ -1,15 +1,16 @@
 import { getVehiclePosition } from "mobility-toolbox-js/ol";
-import { RealtimeTrajectory } from "mobility-toolbox-js/types";
-import { Map } from "ol";
 import { linear } from "ol/easing";
 
+import type { RealtimeTrajectory } from "mobility-toolbox-js/types";
+import type { Map } from "ol";
+
 const centerOnVehicle = async (
   vehicle: RealtimeTrajectory,
   map: Map,
   targetZoom = 0,
 ) => {
   if (!vehicle) {
-    return Promise.reject();
+    return Promise.reject(new Error("No vehicle provided"));
   }
 
   const {
@@ -26,7 +27,7 @@ const centerOnVehicle = async (
     center = coord as [number, number];
   }
   if (!center) {
-    return Promise.reject();
+    return Promise.reject(new Error("No center found"));
   }
 
   view.cancelAnimations();

package/src/utils/constants.ts

@@ -1,4 +1,3 @@
-import { FeatureCollection } from "geojson";
 import { fromLonLat, toLonLat, transformExtent } from "ol/proj";
 
 import callBike from "../logos/callabike_logo.png";
@@ -10,6 +9,12 @@ import naturEnergieLogo from "../logos/natur_energie_logo.png";
 import yoioLogo from "../logos/yoio_logo.png";
 import zeusLogo from "../logos/zeus_logo.png";
 
+import type { FeatureCollection } from "geojson";
+
+export const LAYER_NAME_REALTIME = "echtzeit";
+export const LAYER_NAME_STATIONS = "haltestellen";
+export const LAYER_NAME_NOTIFICATION = "meldungen";
+
 export const RVF_EXTENT_4326 = [7.5, 47.7, 8.45, 48.4];
 
 export const RVF_EXTENT_3857 = transformExtent(
@@ -48,16 +53,25 @@ export const RVF_LAYERS_NAMES = {
   carGrf: "grueneflotte",
   carNatur: "naturenergie",
   carOthers: "autoandere",
-  echtzeit: "echtzeit",
+  echtzeit: LAYER_NAME_REALTIME,
   eroller: "e-roller",
-  haltestellen: "haltestellen",
+  haltestellen: LAYER_NAME_STATIONS,
   liniennetz: "liniennetz",
+  meldungen: LAYER_NAME_NOTIFICATION,
   mitfahrpunkte: "mitfahrpunkte",
   pois: "pois",
   tarifzonen: "tarifzonen",
   verkaufsstellen: "verkaufsstellen",
 };
 
+export const DEFAULT_QUERYABLE_LAYERS = Object.keys(RVF_LAYERS_NAMES)
+  .filter((name) => {
+    return (
+      name !== RVF_LAYERS_NAMES.tarifzonen && name !== RVF_LAYERS_NAMES.pois
+    );
+  })
+  .toString();
+
 export const WFS_CARGO_BIKE_TYPE = "sharing_stations_cargo_bicycle";
 export const WFS_CAR_TYPE = "sharing_stations_car";
 export const WFS_BIKE_TYPE = "sharing_stations_bicycle";

package/src/utils/exportPdf.ts

@@ -1,15 +1,19 @@
-import jsPDF, { jsPDFOptions } from "jspdf";
+import jsPDF from "jspdf";
 import { CopyrightControl } from "mobility-toolbox-js/ol";
 import { Map } from "ol";
-import { Coordinate } from "ol/coordinate";
-import { Extent, getBottomRight, getTopLeft } from "ol/extent";
-import BaseLayer from "ol/layer/Base";
-import { MapOptions } from "ol/Map";
-import { Size } from "ol/size";
-import View, { ViewOptions } from "ol/View";
+import { getBottomRight, getTopLeft } from "ol/extent";
+import View from "ol/View";
 
 import { RVF_EXTENT_3857 } from "./constants";
 
+import type { jsPDFOptions } from "jspdf";
+import type { Coordinate } from "ol/coordinate";
+import type { Extent } from "ol/extent";
+import type BaseLayer from "ol/layer/Base";
+import type { MapOptions } from "ol/Map";
+import type { Size } from "ol/size";
+import type { ViewOptions } from "ol/View";
+
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const getMargin = (destCanvas) => {
   const newMargin = destCanvas.width / 100; // 1% of the canvas width
@@ -186,7 +190,9 @@ const drawText = (
     const wordNumber = text.split(" ").length;
     for (let i = 0; i < wordNumber; i += 1) {
       // Stop removing word when fits within one line.
-      if (firstLineMetrics.width * scale < canvas.width) {
+      // Wher comes the scale from?
+      // if (firstLineMetrics.width * (scale ?? 1) < canvas.width) {
+      if (firstLineMetrics.width * 1 < canvas.width) {
         break;
       }
       firstLine = firstLine.substring(0, firstLine.lastIndexOf(" "));
@@ -213,12 +219,12 @@ const drawText = (
   lines.forEach((line) => {
     const { fontBoundingBoxAscent, fontBoundingBoxDescent } =
       ctx.measureText(line);
-    const height = fontBoundingBoxAscent + fontBoundingBoxDescent;
+    const heightt = fontBoundingBoxAscent + fontBoundingBoxDescent;
     ctx.fillText(line, lineX, lineY);
 
-    let delta = height;
+    let delta = heightt;
     if (textBaseline === "bottom") {
-      delta = -height;
+      delta = -heightt;
     }
 
     lineY = lineY + delta;
@@ -358,7 +364,7 @@ const calculatePixelsToExport = (map: Map, extent: Extent, coordinates) => {
 };
 
 // Create an canvas from a map.
-const createCanvasImage = async (
+const createCanvasImage = (
   map: Map,
   extent?: Extent,
   coordinates?: Coordinate[],
@@ -405,14 +411,14 @@ const createCanvasImage = async (
     );
   }
 
-  return destCanvas;
+  return Promise.resolve(destCanvas);
 };
 
-const downloadCanvasImage = async (
+const downloadCanvasImage = (
   canvas: HTMLCanvasElement,
   format = "image/png",
-  getDownloadImageName = (format: string) => {
-    return format.replace("/", ".");
+  getDownloadImageName = (formatImage: string) => {
+    return formatImage.replace("/", ".");
   },
 ): Promise<boolean> => {
   try {
@@ -442,10 +448,10 @@ const downloadCanvasImage = async (
       }, format);
     }
 
-    return true;
+    return Promise.resolve(true);
   } catch (error) {
     console.error(error);
-    return false;
+    return Promise.resolve(false);
   }
 };
 
@@ -499,7 +505,7 @@ const createMapToExport = async (
     }, 10000);
 
     // rendercomplete is triggered when all the layers renderer have the property "ready" to true.
-    mapHd.once("rendercomplete", async () => {
+    mapHd.once("rendercomplete", () => {
       clearTimeout(timeout);
       resolve(mapHd);
     });
@@ -633,7 +639,7 @@ async function exportPdf(
   if (useCopyright) {
     drawCopyright(copyrightText, canvas, {
       ...(mapExportOptions?.copyrightOptions || {}),
-      font: (pixelRatio * 12).toString() + "px Arial",
+      font: `${(pixelRatio * 12).toString()}px Arial`,
     });
   }
 

package/src/utils/fullTrajectoryStyle.ts

@@ -1,7 +1,7 @@
-import type { FeatureLike } from "ol/Feature";
-
 import { Circle, Fill, Stroke, Style } from "ol/style";
 
+import type { FeatureLike } from "ol/Feature";
+
 const borderStyle = new Style({
   image: new Circle({
     fill: new Fill({

package/src/utils/getAllLayers.ts

@@ -1,7 +1,8 @@
-import { Collection } from "ol";
-import BaseLayer from "ol/layer/Base";
 import Group from "ol/layer/Group";
 
+import type { Collection } from "ol";
+import type BaseLayer from "ol/layer/Base";
+
 const getAllLayers = (
   layersOrLayerGroup: BaseLayer[] | Collection<BaseLayer> | Group,
 ) => {
@@ -9,7 +10,7 @@ const getAllLayers = (
   function addLayersFrom(layers: BaseLayer[] | Collection<BaseLayer>) {
     layers.forEach(function (layer) {
       if (layer instanceof Group) {
-        addLayersFrom((layer as Group).getLayers());
+        addLayersFrom(layer.getLayers());
       } else {
         allLayers.push(layer);
       }

package/src/utils/getDelayColor.test.ts

@@ -14,6 +14,7 @@ describe("getDelayColor", () => {
     expect(getDelayColor(3 * 60 * 1000)).toBe("#ea580c");
     expect(getDelayColor(5 * 60 * 1000)).toBe("#ea580c");
   });
+
   it("returns red", () => {
     expect(getDelayColor(9.49 * 60 * 1000 - 1)).toBe("#dc2626");
     expect(getDelayColor(10 * 60 * 1000)).toBe("#dc2626");

package/src/utils/getDelayColorForVehicle.test.ts

@@ -5,6 +5,7 @@ describe("getDelayColorForVehicle", () => {
     expect(getDelayColorForVehicle(0, true, true)).toBe("#dc2626");
     expect(getDelayColorForVehicle(0, true, false)).toBe("#a0a0a0");
   });
+
   it("returns null delay (no realtime train) color", () => {
     expect(getDelayColorForVehicle(null)).toBe("transparent");
   });
@@ -27,6 +28,7 @@ describe("getDelayColorForVehicle", () => {
     expect(getDelayColorForVehicle(4.49 * 60 * 1000 - 1)).toBe("#ea580c");
     expect(getDelayColorForVehicle(5 * 60 * 1000)).toBe("#ea580c");
   });
+
   it("returns red", () => {
     expect(getDelayColorForVehicle(9.49 * 60 * 1000 - 1)).toBe("#dc2626");
     expect(getDelayColorForVehicle(10 * 60 * 1000)).toBe("#dc2626");

package/src/utils/getDelayString.test.ts

@@ -5,15 +5,18 @@ describe("getDelayString", () => {
     expect(getDelayString(7200000)).toBe("2h");
     expect(getDelayString(7255555)).toBe("2h1m");
   });
+
   it("returns minutes (round)", () => {
     expect(getDelayString(120000)).toBe("2m");
     expect(getDelayString(151000)).toBe("3m");
   });
+
   it("doesn't display seconds", () => {
     expect(getDelayString(1000)).toBe("0");
     expect(getDelayString(30000)).toBe("1m");
     expect(getDelayString(7255555)).toBe("2h1m");
   });
+
   it("returns defsult 0 value", () => {
     expect(getDelayString(0)).toBe("0");
     expect(getDelayString(null)).toBe("0");

package/src/utils/getDelayTextForVehicle.test.ts

@@ -6,19 +6,23 @@ describe("getDelayTextForVehicle", () => {
       String.fromCodePoint(0x00d7),
     );
   });
+
   it("returns hours (floor)", () => {
     expect(getDelayTextForVehicle(7200000)).toBe("+2h");
     expect(getDelayTextForVehicle(7255555)).toBe("+2h1m");
   });
+
   it("returns minutes (round)", () => {
     expect(getDelayTextForVehicle(120000)).toBe("+2m");
     expect(getDelayTextForVehicle(151000)).toBe("+3m");
   });
+
   it("doesn't display seconds", () => {
     expect(getDelayTextForVehicle(1000)).toBe("");
     expect(getDelayTextForVehicle(30000)).toBe("+1m");
     expect(getDelayTextForVehicle(7255555)).toBe("+2h1m");
   });
+
   it("returns empty value", () => {
     expect(getDelayTextForVehicle(1000)).toBe("");
     expect(getDelayTextForVehicle(null)).toBe("");

package/src/utils/getFullTrajectoryAndFit.ts

@@ -1,9 +1,10 @@
-import { RealtimeLayer } from "mobility-toolbox-js/ol";
-import { RealtimeTrainId } from "mobility-toolbox-js/types";
-import { Map } from "ol";
 import { GeoJSON } from "ol/format";
 import { Vector } from "ol/source";
 
+import type { RealtimeLayer } from "mobility-toolbox-js/ol";
+import type { RealtimeTrainId } from "mobility-toolbox-js/types";
+import type { Map } from "ol";
+
 const getFullTrajectoryAndFit = async (
   map: Map,
   realtimeLayer: RealtimeLayer,

package/src/utils/getHoursAndMinutes.test.ts

@@ -5,6 +5,7 @@ describe("getHoursAndMinutes", () => {
     expect(getHoursAndMinutes(7200000)).toBe("02:00");
     expect(getHoursAndMinutes(72999999)).toBe("20:16");
   });
+
   it("returns empty string", () => {
     expect(getHoursAndMinutes(null)).toBe("");
     expect(getHoursAndMinutes(undefined)).toBe("");

package/src/utils/getLayersAsFlatArray.ts

@@ -1,5 +1,5 @@
-import { Group } from "ol/layer";
-import BaseLayer from "ol/layer/Base";
+import type { Group } from "ol/layer";
+import type BaseLayer from "ol/layer/Base";
 
 const getLayersAsFlatArray = (
   layersOrLayer: BaseLayer | BaseLayer[],

package/src/utils/getLinkByDevice.ts

@@ -1,4 +1,4 @@
-import { Feature } from "ol";
+import type { Feature } from "ol";
 
 function getLinkByDevice(feature: Feature): string {
   const iosLink = feature?.get("rental_uris_ios");

package/src/utils/getMainColorForVehicle.ts

@@ -1,4 +1,6 @@
-import {
+import getBgColor from "./getBgColor";
+
+import type {
   RealtimeDeparture,
   RealtimeLine,
   RealtimeMot,
@@ -6,8 +8,6 @@ import {
   RealtimeTrajectory,
 } from "mobility-toolbox-js/types";
 
-import getBgColor from "./getBgColor";
-
 // This function returns the main color of a line using a line, trajectory, stopsequence or departure object.
 const getMainColorForVehicle = (object: unknown = null): string => {
   const line =

package/src/utils/getPermalinkParameters.ts

@@ -1,6 +1,6 @@
-import { Map } from "ol";
+import { getLayersAsFlatArray } from "mobility-toolbox-js/ol";
 
-import getLayersAsFlatArray from "./getLayersAsFlatArray";
+import type { Map } from "ol";
 
 // This function return URL parameters representing a map.
 const getPermalinkParameters = (

package/src/utils/getStopStatus.test.ts

@@ -75,7 +75,8 @@ describe("getStopStatus", () => {
       expect(isNextStop).toBe(true);
     });
   });
-  describe("when it's the first station", () => {
+
+  describe("when it's the first station and not a stop", () => {
     it("returns a correct status", () => {
       const stopSequence = {
         stations: [{}],

package/src/utils/getStopStatus.ts

@@ -1,4 +1,4 @@
-import { RealtimeStopSequence } from "mobility-toolbox-js/types";
+import type { RealtimeStopSequence } from "mobility-toolbox-js/types";
 
 export interface StopStatus {
   isBoarding?: boolean;

package/src/utils/getTextForVehicle.ts

@@ -1,4 +1,4 @@
-import {
+import type {
   RealtimeLine,
   RealtimeStopSequence,
   RealtimeTrajectory,

package/src/utils/hooks/useDeparture.tsx

@@ -1,15 +1,16 @@
-import { RealtimeDeparture } from "mobility-toolbox-js/types";
 import { createContext } from "preact";
 import { useContext } from "preact/hooks";
 
-export type DepartureContextType = {
-  index?: number;
+import type { RealtimeDeparture } from "mobility-toolbox-js/types";
+
+export interface DepartureContextType {
   departure?: RealtimeDeparture;
-};
+  index?: number;
+}
 
 export const DepartureContext = createContext({
-  index: null,
   departure: null,
+  index: null,
 } as DepartureContextType);
 
 const useDeparture = (): DepartureContextType => {

package/src/utils/hooks/useI18n.tsx

@@ -1,12 +1,14 @@
 import { createContext } from "preact";
 import { useContext } from "preact/hooks";
 
-export type I18NContextType = {
-  t: (id: string, templateValues?: { [key: string]: string }) => string;
-};
+export interface I18NContextType {
+  t: (id: string, templateValues?: Record<string, string>) => string;
+}
 
 export const I18nContext = createContext({
-  t: (id, templateValues) => `${id} ${JSON.stringify(templateValues)}`,
+  t: (id, templateValues) => {
+    return `${id} ${JSON.stringify(templateValues)}`;
+  },
 } as I18NContextType);
 
 const useI18n = (): I18NContextType => {