@geops/rvf-mobility-web-component 0.1.64 → 0.1.65

package/src/RvfStationsLayer/RvfStationsLayer.tsx

@@ -0,0 +1,19 @@
+import { memo } from "preact/compat";
+
+import StationsLayer from "../StationsLayer/StationsLayer";
+
+import type { MaplibreStyleLayerOptions } from "mobility-toolbox-js/ol";
+
+const stationsLayerProps = () => {
+  return {
+    layersFilter: ({ metadata }) => {
+      return metadata?.["general.filter"] === "stations";
+    },
+    minZoom: 10,
+  };
+};
+function RvfStationsLayer(props: Partial<MaplibreStyleLayerOptions>) {
+  return <StationsLayer {...stationsLayerProps} {...props} />;
+}
+
+export default memo(RvfStationsLayer);

package/src/RvfStationsLayer/index.tsx

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

package/src/ShareMenu/ShareMenu.tsx

@@ -7,6 +7,7 @@ import PermalinkInput from "../PermalinkInput";
 import Button from "../ui/Button";
 import useI18n from "../utils/hooks/useI18n";
 import useMapContext from "../utils/hooks/useMapContext";
+import usePermalink from "../utils/hooks/usePermalink";
 
 import type { HTMLAttributes, PreactDOMAttributes } from "preact";
 
@@ -16,13 +17,14 @@ function ShareMenu({
 }: HTMLAttributes<HTMLDivElement> & PreactDOMAttributes) {
   const { map } = useMapContext();
   const { t } = useI18n();
+  const permalink = usePermalink();
 
   return (
     // eslint-disable-next-line @typescript-eslint/no-base-to-string, @typescript-eslint/restrict-template-expressions
     <div className={twMerge(`flex flex-col gap-4 ${className}`)} {...props}>
       <Button
         className="w-fit"
-        href={`mailto:?subject=Karte&body=${window?.location.href}`}
+        href={`mailto:?subject=Karte&body=${permalink}`}
       >
         <Email />
         <span>{t("share_email_send")}</span>

package/src/StationsLayer/index.tsx

@@ -1 +1 @@
-export { default } from "./StationsLayer";
+export { default } from "../RvfStationsLayer";

package/src/ui/InputCopy/InputCopy.tsx

@@ -2,6 +2,7 @@ import { useId, useState } from "preact/hooks";
 import { twMerge } from "tailwind-merge";
 
 import Copy from "../../icons/Copy";
+import useI18n from "../../utils/hooks/useI18n";
 import IconButton from "../IconButton";
 import Input from "../Input";
 
@@ -24,31 +25,38 @@ function InputCopy({
   tooltipProps = emptyProps,
   ...props
 }: InputCopyProps) {
+  const { t } = useI18n();
   const [positionTooltip, setPositionTooltip] = useState<DOMRect>();
   const [isTooptipShowed, setIsTooltipShowed] = useState(false);
   const inputId = useId();
+  const [node, setNode] = useState<HTMLDivElement | null>(null);
 
   const handleCopyClick = (event) => {
     setPositionTooltip(event.currentTarget.getBoundingClientRect());
-    void navigator.clipboard.writeText(window?.location.href).then(() => {
+    const input: HTMLInputElement | null = node.querySelector(`#${inputId}`);
+    void navigator.clipboard.writeText(input?.value).then(() => {
       setIsTooltipShowed(true);
       setTimeout(() => {
         setIsTooltipShowed(false);
       }, 1000);
     });
-    (document.getElementById(inputId) as HTMLInputElement | null)?.select();
+    input?.select();
   };
 
   const handleInputFocus = () => {
-    (document.getElementById(inputId) as HTMLInputElement | null)?.select();
+    const input: HTMLInputElement | null = node.querySelector(`#${inputId}`);
+    input?.select();
   };
 
   return (
     <div
+      ref={(elt) => {
+        setNode(elt);
+      }}
       {...containerProps}
       className={twMerge(
-        "relative flex items-center",
-        containerProps?.className,
+        "relative flex h-7 items-center",
+        containerProps?.className as string,
       )}
     >
       <Input
@@ -57,27 +65,30 @@ function InputCopy({
         readOnly
         type="text"
         {...props}
-        className={twMerge("h-full flex-1 border border-r-0", props?.className)}
+        className={twMerge(
+          "h-7 flex-1 border border-r-0",
+          props?.className as string,
+        )}
       />
       <IconButton
-        className="h-full rounded-none border p-2 shadow-none"
+        className="size-7 rounded-none border p-2 shadow-none"
         onClick={handleCopyClick}
       >
-        <Copy />
+        <Copy size={20} />
       </IconButton>
       <div
         {...tooltipProps}
         className={twMerge(
           `fixed hidden rounded bg-gray-600 p-1 text-sm text-white`,
           isTooptipShowed && "block",
-          tooltipProps?.className,
+          tooltipProps?.className as string,
         )}
         style={{
           left: positionTooltip?.left - 30,
           top: positionTooltip?.top - 30,
         }}
       >
-        Kopiert!
+        {t("input_copy_success")}!
       </div>
     </div>
   );

package/src/utils/constants.ts

@@ -71,6 +71,7 @@ export const DEFAULT_QUERYABLE_LAYERS = Object.values(LAYERS_NAMES).filter(
 // Order of the first level
 export const LAYER_TREE_ORDER = [
   LAYER_NAME_NOTIFICATIONS,
+  LAYER_NAME_MAPSET,
   LAYER_NAME_REALTIME,
   LAYER_NAME_STATIONS,
   LAYER_NAME_LINESNETWORKPLAN,
@@ -78,7 +79,6 @@ export const LAYER_TREE_ORDER = [
   LAYERS_NAMES.verkaufsstellen,
   LAYERS_NAMES.pois,
   LAYERS_NAMES.sharedMobility,
-  LAYER_NAME_MAPSET,
 ];
 
 export const LAYERS_WITH_LINK = Object.values(LAYERS_NAMES).filter((name) => {

package/src/utils/getUrlFromTemplate.test.ts

@@ -0,0 +1,23 @@
+import getUrlFromTemplate from "./getUrlFromTemplate";
+
+describe("getUrlFromTemplate", () => {
+  it("should replace parameters in the template", () => {
+    const template = "?z={{z}}&x={{x}}&y={{y}}";
+    const params = new URLSearchParams({ x: "512", y: "200", z: "10" });
+    const url = getUrlFromTemplate(template, params);
+    expect(url).toBe("http://localhost/?z=10&x=512&y=200");
+  });
+
+  it("should handle hash templates", () => {
+    const template = "#/map/{{z}}/{{x}}/{{y}}";
+    const params = new URLSearchParams({ x: "512", y: "200", z: "10" });
+    const url = getUrlFromTemplate(template, params);
+    expect(url).toBe("http://localhost/#/map/10/512/200");
+  });
+
+  it("should handle null templates returning the window location", () => {
+    const params = new URLSearchParams({ x: "512", y: "200", z: "10" });
+    const url = getUrlFromTemplate(null, params);
+    expect(url).toBe("http://localhost/");
+  });
+});

package/src/utils/getUrlFromTemplate.ts

@@ -0,0 +1,47 @@
+/**
+ * Return an url as a string from a template and a list of parameters.
+ * Example:
+ * template: "https://example.com/{{z}}/{{x}}/{{y}}.png"
+ * params: {z: "10", x: "512", y: "512"}
+ * return: "https://example.com/10/512/512.png"
+ *
+ * If a parameter is missing, the template is not replaced.
+ *
+ * @param template - The url template containing parameters in the form {{param}}
+ * @param params - An object containing the parameters to replace in the template
+ * @returns The url with the parameters replaced
+ */
+function getUrlFromTemplate(template: string, params: URLSearchParams): string {
+  let tpl = template || "";
+  params?.forEach((value, key) => {
+    tpl = tpl.replace(`{{${key}}}`, value);
+  });
+  if (tpl.startsWith("#")) {
+    tpl = `${window.location.href.split("#")[0]}${tpl}`;
+  } else if (tpl.startsWith("?") || !tpl) {
+    const existingParams = new URLSearchParams(window.location.search);
+
+    // Set current values of the template parameters
+    const tplParams = new URLSearchParams(tpl);
+    tplParams.forEach((value, key) => {
+      existingParams.set(key, value);
+    });
+
+    // Remove duplicated parameters if the template already includes them
+    if (template?.includes("{{x}}") && template?.includes("{{y}}")) {
+      existingParams.delete("center");
+    }
+    if (template?.includes("{{z}}")) {
+      existingParams.delete("zoom");
+    }
+
+    let str = existingParams.toString();
+    if (!str.startsWith("?") && tpl.length) {
+      str = `?${str}`;
+    }
+    tpl = `${window.location.href.split("?")[0]}${str}${window.location.hash}`;
+  }
+  return tpl;
+}
+
+export default getUrlFromTemplate;

package/src/utils/hooks/useI18n.tsx

@@ -3,11 +3,9 @@ import { useContext } from "preact/hooks";
 
 import type { Rosetta } from "rosetta";
 
-import type { Translations } from "../translations";
+export type I18NContextType = Rosetta<Record<string, string>>;
 
-export type I18NContextType = Rosetta<Translations>;
-
-export const I18nContext = createContext({
+export const I18nContext = createContext<I18NContextType>({
   t: (id: string, templateValues?: Record<string, string>) => {
     return `${id} ${JSON.stringify(templateValues)}`;
   },

package/src/utils/hooks/useInitialLayersVisiblity.tsx

@@ -1,28 +1,51 @@
 import { getLayersAsFlatArray } from "mobility-toolbox-js/ol";
 import { unByKey } from "ol/Observable";
-import { useEffect } from "preact/hooks";
+import { useEffect, useRef } from "preact/hooks";
 
 import applyInitialLayerVisibility from "../applyInitialLayerVisibility";
 
+import useInitialPermalink from "./useInitialPermalink";
+
 import type { Map } from "ol";
+const useInitialLayersVisiblity = (
+  map: Map,
+  layers: string,
+  permalinkTemplate: string,
+) => {
+  const isPermalinkAlreadyUsed = useRef(false);
+  const permalinkLayersRef = useRef(
+    useInitialPermalink(permalinkTemplate)?.layers,
+  );
 
-const useInitialLayersVisiblity = (map: Map, layers: string) => {
   // Apply initial visibility of layers from layers attribute
   useEffect(() => {
     if (!map) {
       return;
     }
+    let layersToUse = layers;
+
+    // We use the permalink param only once, at the first render
+    if (
+      permalinkLayersRef.current !== null &&
+      permalinkLayersRef.current !== undefined &&
+      !isPermalinkAlreadyUsed.current
+    ) {
+      layersToUse = permalinkLayersRef.current;
+      isPermalinkAlreadyUsed.current = true;
+    }
+
     getLayersAsFlatArray(map.getLayers().getArray()).forEach((layer) => {
-      applyInitialLayerVisibility(layers, layer);
+      applyInitialLayerVisibility(layersToUse, layer);
     });
 
     const key = map.getLayers().on("add", (event) => {
-      applyInitialLayerVisibility(layers, event.element);
+      applyInitialLayerVisibility(layersToUse, event.element);
     });
     return () => {
       unByKey(key);
     };
   }, [map, layers]);
+
   return null;
 };
 

package/src/utils/hooks/useInitialPermalink.tsx

@@ -1,27 +1,31 @@
-import { useMemo, useRef } from "preact/hooks";
+import { useMemo } from "preact/hooks";
+
+import useMapContext from "./useMapContext";
 
 import type { MobilityMapProps } from "../../MobilityMap/MobilityMap";
 
 /**
- * Return x,y and z values from the url. This hook should not managed more usecases than that.
+ * Return x,y,z and layers values from the url. This hook should not managed more usecases than that.
  * The application should be responsible to read url parameters then provides these parameters as attributes to the web-component.
  */
 const useInitialPermalink = (
-  permalinktemplate: string,
+  permalinkTemplate?: string,
 ): null | Partial<MobilityMapProps> => {
-  const prevProps = useRef<Partial<MobilityMapProps>>(null);
-
+  const { permalinktemplate } = useMapContext();
   const props = useMemo(() => {
-    if (!permalinktemplate) {
+    const template = permalinkTemplate || permalinktemplate;
+    console.log("template", template);
+    if (!template) {
       return null;
     }
     try {
-      let x: null | string,
+      let layers: null | string,
+        x: null | string,
         y: null | string,
-        z: null | string = null;
+        z: null | string;
 
-      if (permalinktemplate?.startsWith("?")) {
-        const urlSearchParams = new URLSearchParams(permalinktemplate);
+      if (template?.startsWith("?")) {
+        const urlSearchParams = new URLSearchParams(template);
         const names = [...urlSearchParams.keys()];
         const nameX = names.find((name) => {
           return urlSearchParams.get(name).includes("{{x}}");
@@ -32,12 +36,16 @@ const useInitialPermalink = (
         const nameZ = names.find((name) => {
           return urlSearchParams.get(name).includes("{{z}}");
         });
+        const nameLayers = names.find((name) => {
+          return urlSearchParams.get(name).includes("{{layers}}");
+        });
         const currSearchParams = new URLSearchParams(window.location.search);
         x = currSearchParams.get(nameX);
         y = currSearchParams.get(nameY);
         z = currSearchParams.get(nameZ);
-      } else if (permalinktemplate?.startsWith("#")) {
-        const values = permalinktemplate.substring(1).split("/");
+        layers = currSearchParams.get(nameLayers);
+      } else if (template?.startsWith("#")) {
+        const values = template.substring(1).split("/");
         const currHash = window.location.hash;
         const currIndexes = currHash.substring(1).split("/");
         const indexX = values.findIndex((name) => {
@@ -49,9 +57,13 @@ const useInitialPermalink = (
         const indexZ = values.findIndex((name) => {
           return name.includes("{{z}}");
         });
+        const indexLayers = values.findIndex((name) => {
+          return name.includes("{{layers}}");
+        });
         x = indexX > -1 ? currIndexes[indexX] : null;
         y = indexY > -1 ? currIndexes[indexY] : null;
         z = indexZ > -1 ? currIndexes[indexZ] : null;
+        layers = indexLayers > -1 ? currIndexes[indexLayers] : null;
       }
       const propsFromPermalink: Partial<MobilityMapProps> = {};
       if (x && y) {
@@ -60,24 +72,22 @@ const useInitialPermalink = (
       if (z) {
         propsFromPermalink.zoom = z;
       }
+      if (layers !== null && layers !== undefined) {
+        propsFromPermalink.layers = layers;
+      }
       return propsFromPermalink;
     } catch (error) {
       // eslint-disable-next-line no-console
       console.warn(
-        "Impossible to read x,y,z from the url with permalinktemplate",
-        permalinktemplate,
+        "Impossible to read x,y,z and layers from the url with template",
+        template,
         error,
       );
     }
     return null;
-  }, [permalinktemplate]);
+  }, [permalinktemplate, permalinkTemplate]);
 
-  // We want to apply the value from the url only once
-  if (!prevProps.current && props) {
-    prevProps.current = props;
-    return props;
-  }
-  return {};
+  return props;
 };
 
 export default useInitialPermalink;

package/src/utils/hooks/usePermalink.tsx

@@ -0,0 +1,25 @@
+// import debounce from "lodash.debounce";
+// import { getLayersAsFlatArray } from "mobility-toolbox-js/ol";
+// import { unByKey } from "ol/Observable";
+// import { useCallback, useEffect } from "preact/hooks";
+
+import getUrlFromTemplate from "../getUrlFromTemplate";
+
+import useMapContext from "./useMapContext";
+
+// import { LAYER_PROP_IS_EXPORTING } from "../constants";
+// import getPermalinkParameters from "../getPermalinkParameters";
+// // import getLayersAsFlatArray from "../getLayersAsFlatArray";
+
+// import useMapContext from "./useMapContext";
+
+// import type { Map } from "ol";
+// import type { EventsKey } from "ol/events";
+
+function usePermalink() {
+  const { permalinktemplate, permalinkUrlSearchParams } = useMapContext();
+  const url = getUrlFromTemplate(permalinktemplate, permalinkUrlSearchParams);
+  return url;
+}
+
+export default usePermalink;

package/src/utils/translations.ts

@@ -20,6 +20,7 @@ const translations: Translations = {
     from_to: "von {{from}} bis {{to}}",
     geolocation_button_title_off: "Geolokalisierung deaktivieren",
     geolocation_button_title_on: "Geolokalisierung aktivieren",
+    input_copy_success: "Kopiert!",
     [LAYERS_NAMES.bikeFrelo]: "Frelo",
     [LAYERS_NAMES.bikeOthers]: "Fahrrad, andere Anbieter",
     [LAYERS_NAMES.cargobikeFrelo]: "Lastenfrelo",
@@ -76,6 +77,7 @@ const translations: Translations = {
     from_to: "from {{from}} to {{to}}",
     geolocation_button_title_off: "Disable geolocation",
     geolocation_button_title_on: "Enable geolocation",
+    input_copy_success: "Copied!",
     [LAYERS_NAMES.bikeFrelo]: "Frelo",
     [LAYERS_NAMES.bikeOthers]: "Bicycle, other providers",
     [LAYERS_NAMES.cargobikeFrelo]: "Cargo bike Frelo",
@@ -129,6 +131,7 @@ const translations: Translations = {
     from_to: "de {{from}} à {{to}}",
     geolocation_button_title_off: "Désactiver la géolocalisation",
     geolocation_button_title_on: "Activer la géolocalisation",
+    input_copy_success: "Copié!",
     [LAYERS_NAMES.bikeFrelo]: "Frelo",
     [LAYERS_NAMES.bikeOthers]: "Vélo, autres fournisseurs",
     [LAYERS_NAMES.cargobikeFrelo]: "Cargobike Frelo",
@@ -182,6 +185,7 @@ const translations: Translations = {
     from_to: "da {{from}} a {{to}}",
     geolocation_button_title_off: "Disattiva geolocalizzazione",
     geolocation_button_title_on: "Attiva geolocalizzazione",
+    input_copy_success: "Copiato!",
     [LAYERS_NAMES.bikeFrelo]: "Frelo",
     [LAYERS_NAMES.bikeOthers]: "Bicicletta, altri fornitori",
     [LAYERS_NAMES.cargobikeFrelo]: "Cargobike Frelo",