@geops/rvf-mobility-web-component 0.1.46 → 0.1.47

package/src/RvfFeatureDetailsTitle/RvfFeatureDetailsTitle.tsx

@@ -0,0 +1,81 @@
+import { icons } from "../utils/addSourceAndLayers";
+import {
+  RVF_LAYERS_NAMES,
+  RVF_LAYERS_TITLES,
+  TITLE_BY_CATEGORY,
+  TITLE_BY_FEED_ID,
+} from "../utils/constants";
+import useLayerConfig from "../utils/hooks/useLayerConfig";
+
+import type { Feature } from "ol";
+
+const defaultTitle = "Informations";
+
+function RvfFeatureDetailsTitle({ feature }: { feature: Feature }) {
+  const features = feature.get("features");
+  const selectedFeature = features?.[0] || feature;
+  const {
+    category,
+    condition_group: conditionGroup,
+    disruption_type: disruptionType,
+    feed_id: feedId,
+    line_id: lineId,
+    tickets,
+  } = selectedFeature.getProperties();
+  const layerConfigLinienNetz = useLayerConfig(RVF_LAYERS_NAMES.liniennetz);
+  const layerConfigMeldungen = useLayerConfig(RVF_LAYERS_NAMES.meldungen);
+
+  // moco export v1
+  if (disruptionType) {
+    return (
+      <div className={"flex items-center gap-2 text-sm"}>
+        <div className="min-w-8 shrink-0 grow-0">
+          <img
+            alt={disruptionType}
+            className={"w-8"}
+            src={icons[disruptionType] || icons.warning}
+          ></img>
+        </div>
+        <div className={"flex flex-col gap-2 text-base font-bold"}>
+          {layerConfigMeldungen.title}
+        </div>
+      </div>
+    );
+  }
+
+  // moco export v2
+  if (conditionGroup) {
+    return (
+      <div className={"flex items-center gap-2 text-sm"}>
+        {icons[conditionGroup] && (
+          <div className="min-w-8 shrink-0 grow-0">
+            <img
+              alt={conditionGroup}
+              className={"w-8"}
+              src={icons[conditionGroup] || icons.warning}
+            ></img>
+          </div>
+        )}
+        <div className={"flex flex-col gap-2 text-base font-bold"}>
+          {layerConfigMeldungen.title}
+        </div>
+      </div>
+    );
+  }
+  if (category) {
+    return TITLE_BY_CATEGORY[category] || defaultTitle;
+  }
+  if (feedId) {
+    return TITLE_BY_FEED_ID[feedId] || defaultTitle;
+  }
+
+  if (lineId) {
+    return layerConfigLinienNetz.title;
+  }
+  if (tickets) {
+    return RVF_LAYERS_TITLES.verkaufsstellen;
+  }
+  return defaultTitle;
+}
+
+export default RvfFeatureDetailsTitle;

package/src/RvfFeatureDetailsTitle/index.tsx

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

package/src/RvfFloatingMenu/RvfFloatingMenu.tsx

@@ -1,9 +1,9 @@
-import type { JSX, PreactDOMAttributes } from "preact";
-
 import ArrowDown from "../icons/ArrowDown";
 import ArrowUp from "../icons/ArrowUp";
 import useMapContext from "../utils/hooks/useMapContext";
 
+import type { JSX, PreactDOMAttributes } from "preact";
+
 export type RvfFloatingMenuProps = {
   isOpen: boolean;
   onClick: () => void;
@@ -23,8 +23,8 @@ function RvfFloatingMenu({
   }
 
   return (
-    <div className="pointer-events-none absolute bottom-8 left-2 top-2 z-10 flex flex-col overflow-hidden rounded-lg">
-      <div className="pointer-events-auto max-h-full w-48 rounded-lg border border-grey bg-white shadow-lg @lg/main:w-52">
+    <div className="pointer-events-none absolute top-2 bottom-8 left-2 z-10 flex flex-col overflow-hidden rounded-lg">
+      <div className="border-grey pointer-events-auto max-h-full w-48 rounded-lg border bg-white shadow-lg @lg/main:w-52">
         <button
           className="flex w-full items-center justify-between px-2 py-1.5 font-bold"
           onClick={onClick}

package/src/RvfGeolocationButton/GeolocationButton.tsx

@@ -0,0 +1,98 @@
+import { Feature, Geolocation } from "ol";
+import { Point } from "ol/geom";
+import VectorLayer from "ol/layer/Vector";
+import { unByKey } from "ol/Observable";
+import { fromLonLat } from "ol/proj";
+import VectorSource from "ol/source/Vector";
+import { Icon, Style } from "ol/style";
+import { memo } from "preact/compat";
+import { useEffect, useMemo } from "preact/hooks";
+
+import GeolocationIcon from "../icons/Geolocation";
+import locationSvg from "../icons/Geolocation/location.svg";
+import IconButton from "../ui/IconButton";
+import useMapContext from "../utils/hooks/useMapContext";
+
+import type { JSX, PreactDOMAttributes } from "preact";
+
+const point = new Point([0, 0]);
+const feature = new Feature(point);
+const layer = new VectorLayer({
+  source: new VectorSource({ features: [feature] }),
+  style: new Style({
+    image: new Icon({
+      anchor: [0.5, 1],
+      src: locationSvg,
+    }),
+  }),
+});
+
+export type GeolocationButtonProps = JSX.HTMLAttributes<HTMLButtonElement> &
+  PreactDOMAttributes;
+
+const TRACKING_ZOOM = 16;
+
+function GeolocationButton({ ...props }: GeolocationButtonProps) {
+  const mapContext = useMapContext();
+  const { isTracking, map, setIsTracking } = mapContext;
+
+  const geolocation = useMemo(() => {
+    return new Geolocation();
+  }, []);
+
+  useEffect(() => {
+    let keys = [];
+    if (!map || !geolocation) {
+      return;
+    }
+    keys = [
+      // First time we zoom and center on the position
+      geolocation.once("change:position", (evt) => {
+        const position = evt.target.getPosition();
+        if (evt.target.getPosition()) {
+          const coord = fromLonLat(position, "EPSG:3857");
+          map.getView().setZoom(TRACKING_ZOOM);
+          map.getView().setCenter(coord);
+          point.setCoordinates(coord);
+        }
+      }),
+      // then we only center the map.
+      geolocation.on("change:position", (evt) => {
+        const position = evt.target.getPosition();
+        if (evt.target.getPosition()) {
+          const coord = fromLonLat(position, "EPSG:3857");
+          map.getView().setCenter(coord);
+          point.setCoordinates(coord);
+        }
+      }),
+    ];
+
+    return () => {
+      unByKey(keys);
+    };
+  }, [map, geolocation]);
+
+  useEffect(() => {
+    geolocation.setTracking(isTracking);
+    if (isTracking) {
+      layer.setMap(map);
+    }
+    return () => {
+      layer.setMap(null);
+    };
+  }, [map, geolocation, isTracking]);
+
+  return (
+    <IconButton
+      onClick={() => {
+        setIsTracking(!isTracking);
+      }}
+      selected={isTracking}
+      {...props}
+    >
+      <GeolocationIcon className={isTracking ? "animate-pulse" : ""} />
+    </IconButton>
+  );
+}
+
+export default memo(GeolocationButton);

package/src/RvfGeolocationButton/index.tsx

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

package/src/RvfIconButton/RvfIconButton.tsx

@@ -1,22 +1,23 @@
-import type { JSX, PreactDOMAttributes } from "preact";
-
-import { memo, SVGProps, useMemo } from "preact/compat";
+import { memo, useMemo } from "preact/compat";
 import { twMerge } from "tailwind-merge";
 
-import { RvfButtonProps, themes } from "../RvfButton/RvfButton";
+import { themes } from "../RvfButton/RvfButton";
+
+import type { SVGProps } from "preact/compat";
+
+import type { RvfButtonProps } from "../RvfButton/RvfButton";
 
 export type RvfIconButtonProps = {
   Icon?: (props: SVGProps<SVGSVGElement>) => preact.JSX.Element;
-} & JSX.ButtonHTMLAttributes<HTMLButtonElement> &
-  PreactDOMAttributes &
-  RvfButtonProps;
+} & RvfButtonProps;
 
 const baseClasses =
-  "flex  size-[32px] @sm/main:size-[36px] @md/main:size-[40px] p-[7px] items-center justify-center rounded-full border";
+  "flex  size-[32px] @sm/main:size-[36px] @md/main:size-[40px] p-[7px] items-center justify-center rounded-full border cursor-pointer disabled:cursor-default";
 
 function RvfIconButton({
   children,
   className,
+  href,
   Icon,
   selected = false,
   theme = "secondary",
@@ -24,10 +25,20 @@ function RvfIconButton({
 }: RvfIconButtonProps) {
   const classes = useMemo(() => {
     return twMerge(
-      `${baseClasses} ${themes[theme].classes}  ${selected ? themes[theme].selectedClasses : ""} ${className || ""}`,
+      baseClasses,
+      themes[theme].classes,
+      selected ? themes[theme].selectedClasses : "",
+      className,
     );
   }, [className, selected, theme]);
 
+  if (href) {
+    return (
+      <a className={classes} href={href} {...props}>
+        {children || <Icon height={"100%"} width={"100%"} />}
+      </a>
+    );
+  }
   return (
     <button className={classes} {...props}>
       {children || <Icon height={"100%"} width={"100%"} />}

package/src/RvfInputCopy/RvfInputCopy.tsx

@@ -1,9 +1,9 @@
-import type { JSX, PreactDOMAttributes } from "preact";
-
 import { useRef, useState } from "preact/hooks";
 
 import Copy from "../icons/Copy";
-import RvfIconButton from "../RvfIconButton";
+import IconButton from "../ui/IconButton";
+
+import type { JSX, PreactDOMAttributes } from "preact";
 
 function RvfInputCopy(props: JSX.InputHTMLAttributes & PreactDOMAttributes) {
   const [positionTooltip, setPositionTooltip] = useState<DOMRect>();
@@ -12,7 +12,7 @@ function RvfInputCopy(props: JSX.InputHTMLAttributes & PreactDOMAttributes) {
 
   const handleCopyClick = (event) => {
     setPositionTooltip(event.currentTarget.getBoundingClientRect());
-    navigator.clipboard.writeText(window?.location.href).then(() => {
+    void navigator.clipboard.writeText(window?.location.href).then(() => {
       setIsTooltipShowed(true);
       setTimeout(() => {
         setIsTooltipShowed(false);
@@ -26,7 +26,7 @@ function RvfInputCopy(props: JSX.InputHTMLAttributes & PreactDOMAttributes) {
   };
 
   return (
-    <div className="flex items-center text-grey">
+    <div className="text-grey flex items-center">
       <input
         className="h-7 w-full rounded-sm rounded-r-none border border-r-0 border-current p-1 leading-4 outline-none"
         onFocus={handleInputFocus}
@@ -35,14 +35,14 @@ function RvfInputCopy(props: JSX.InputHTMLAttributes & PreactDOMAttributes) {
         type="text"
         {...props}
       />
-      <RvfIconButton
+      <IconButton
         className="!size-7 rounded-l-none rounded-r-sm border-current"
         onClick={handleCopyClick}
       >
         <Copy />
-      </RvfIconButton>
+      </IconButton>
       <div
-        className={`fixed rounded-md bg-grey p-1 text-sm text-white ${isTooptipShowed ? "block" : "hidden"}`}
+        className={`bg-grey fixed rounded-md p-1 text-sm text-white ${isTooptipShowed ? "block" : "hidden"}`}
         style={{
           left: positionTooltip?.left - 30,
           top: positionTooltip?.top - 40,

package/src/RvfLayerTree/RvfLayerTree.tsx

@@ -1,4 +1,3 @@
-import { JSX, PreactDOMAttributes } from "preact";
 import { memo } from "preact/compat";
 import { useEffect, useReducer } from "preact/hooks";
 
@@ -7,7 +6,11 @@ import {
   LayersTreeDispatchContext,
 } from "./layersTreeContext";
 import layersTreeReducer from "./layersTreeReducer";
-import TreeItem, { TreeItemProps } from "./TreeItem/TreeItem";
+import TreeItem from "./TreeItem/TreeItem";
+
+import type { JSX, PreactDOMAttributes } from "preact";
+
+import type { TreeItemProps } from "./TreeItem/TreeItem";
 
 export type RvfLayerTreeProps = {
   layers: TreeItemProps[];

package/src/RvfLayerTree/TreeItem/TreeItem.tsx

@@ -1,21 +1,17 @@
-import type { JSX, PreactDOMAttributes } from "preact";
-
-import BaseLayer from "ol/layer/Base";
-import {
-  SVGProps,
-  useContext,
-  useEffect,
-  useId,
-  useState,
-} from "preact/compat";
+import { useContext, useEffect, useId, useState } from "preact/compat";
 
 import ArrowDown from "../../icons/ArrowDown";
 import ArrowUp from "../../icons/ArrowUp";
 import minusGrey from "../../icons/Minus/minus-grey.svg";
 import RvfCheckbox from "../../RvfCheckbox";
 import RvfRadioButton from "../../RvfRadioButton";
+import useLayerConfig from "../../utils/hooks/useLayerConfig";
 import { LayersTreeDispatchContext } from "../layersTreeContext";
 
+import type BaseLayer from "ol/layer/Base";
+import type { JSX, PreactDOMAttributes } from "preact";
+import type { SVGProps } from "preact/compat";
+
 export enum SelectionType {
   CHECKBOX = "checkbox",
   RADIO = "radio",
@@ -46,6 +42,7 @@ function TreeItem({
   const dispatch = useContext(LayersTreeDispatchContext);
   const inputId = useId();
   const buttonId = useId();
+  const layerConfig = useLayerConfig(layer.get("name"));
 
   useEffect(() => {
     if (isCollapsedOnControlClick) {
@@ -59,7 +56,7 @@ function TreeItem({
     if (isCollapsedOnControlClick && !isContainerVisible) {
       dispatch({
         payload: {
-          ...this["props"],
+          ...this.props,
           isControlChecked: true,
         },
         type: "SELECT_ITEM",
@@ -70,7 +67,7 @@ function TreeItem({
   const handleSelectionChange = (event) => {
     dispatch({
       payload: {
-        ...this["props"],
+        ...this.props,
         isControlChecked: event.target.checked,
       },
       type: "SELECT_ITEM",
@@ -78,14 +75,14 @@ function TreeItem({
   };
 
   const renderedLayers = childItems
-    .filter(({ title }) => {
-      return !!title;
+    .filter(({ title: titlee }) => {
+      return !!titlee;
     })
     .map((item, idx) => {
       return <TreeItem key={idx} {...item} />;
     });
 
-  if (!title) {
+  if (!title && !layerConfig.title) {
     return null;
   }
 
@@ -128,7 +125,7 @@ function TreeItem({
           className={`flex-1 cursor-pointer`}
           htmlFor={renderedLayers.length > 0 ? buttonId : inputId}
         >
-          {title}
+          {layerConfig.title || title}
         </label>
         {renderedLayers.length > 0 && (
           <button

package/src/RvfLayerTree/layersTreeReducer.ts

@@ -5,14 +5,6 @@ const ROOT = {
   parent: null,
 };
 
-const initTree = (tree) => {
-  const initializedTree = { ...ROOT };
-  initializedTree.childItems = tree;
-  mapNode(initializedTree.childItems, initializedTree);
-
-  return initializedTree;
-};
-
 const mapNode = (childItems, parent) => {
   for (const child of childItems) {
     child.parent = parent;
@@ -23,6 +15,14 @@ const mapNode = (childItems, parent) => {
   }
 };
 
+const initTree = (tree) => {
+  const initializedTree = { ...ROOT };
+  initializedTree.childItems = tree;
+  mapNode(initializedTree.childItems, initializedTree);
+
+  return initializedTree;
+};
+
 const findNodeInTree = (node, nodeToFind) => {
   if (node.id === nodeToFind.id) {
     return node;
@@ -38,16 +38,6 @@ const findNodeInTree = (node, nodeToFind) => {
   }
 };
 
-const setNewControlCheckedStatus = (tree, newItem) => {
-  const currentItem = findNodeInTree(tree, newItem);
-
-  if (currentItem) {
-    updateCheckedControlStatus(currentItem, newItem, false);
-  }
-
-  return { ...tree };
-};
-
 const updateCheckedControlStatus = (currentItem, newItem, isParentUpdate) => {
   if (newItem.isControlChecked) {
     if (newItem.selectionType === SelectionType.CHECKBOX) {
@@ -58,6 +48,7 @@ const updateCheckedControlStatus = (currentItem, newItem, isParentUpdate) => {
         child.isControlChecked = child.id === currentItem.id;
 
         if (!child.isControlChecked) {
+          // eslint-disable-next-line @typescript-eslint/no-use-before-define
           updateRadioChildNodes(child);
         }
       }
@@ -71,17 +62,31 @@ const updateCheckedControlStatus = (currentItem, newItem, isParentUpdate) => {
 
   // check all children
   if (currentItem.childItems.length && !isParentUpdate) {
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
     updateChildNodes(currentItem);
   }
 
   // check all parents
+  // eslint-disable-next-line @typescript-eslint/no-use-before-define
   updateParentNodes(currentItem);
 };
 
+const setNewControlCheckedStatus = (tree, newItem) => {
+  const currentItem = findNodeInTree(tree, newItem);
+
+  if (currentItem) {
+    updateCheckedControlStatus(currentItem, newItem, false);
+  }
+
+  return { ...tree };
+};
+
 const updateChildNodes = (node) => {
   if (node.childItems[0].selectionType === SelectionType.RADIO) {
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
     updateRadioChildNodes(node);
   } else {
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
     updateCheckboxChildNodes(node);
   }
 };

package/src/RvfLayerTreeButton/RvfLayerTreeButton.tsx

@@ -1,13 +1,13 @@
-import type { JSX, PreactDOMAttributes } from "preact";
-
 import { memo } from "preact/compat";
 import { useCallback } from "preact/hooks";
 
 import Stack from "../icons/Stack";
-import RvfIconButton from "../RvfIconButton";
+import IconButton from "../ui/IconButton";
 import useRvfContext from "../utils/hooks/useRvfContext";
 
-export type RvfLayerTreeButtonProps = JSX.HTMLAttributes<HTMLButtonElement> &
+import type { HTMLAttributes, PreactDOMAttributes } from "preact";
+
+export type RvfLayerTreeButtonProps = HTMLAttributes<HTMLButtonElement> &
   PreactDOMAttributes;
 
 function RvfLayerTreeButton({ ...props }: RvfLayerTreeButtonProps) {
@@ -18,9 +18,9 @@ function RvfLayerTreeButton({ ...props }: RvfLayerTreeButtonProps) {
   }, [isLayerTreeOpen, setIsLayerTreeOpen]);
 
   return (
-    <RvfIconButton {...props} onClick={onClick} selected={isLayerTreeOpen}>
+    <IconButton {...props} onClick={onClick} selected={isLayerTreeOpen}>
       <Stack />
-    </RvfIconButton>
+    </IconButton>
   );
 }
 

package/src/RvfLineNetworkPlanLayer/RvfLineNetworkPlanLayer.tsx

@@ -1,5 +1,4 @@
 import { MaplibreStyleLayer } from "mobility-toolbox-js/ol";
-import { MaplibreStyleLayerOptions } from "mobility-toolbox-js/ol/layers/MaplibreStyleLayer";
 import { memo } from "preact/compat";
 import { useEffect, useMemo } from "preact/hooks";
 
@@ -7,6 +6,8 @@ import { RVF_LAYERS_NAMES } from "../utils/constants";
 import useMapContext from "../utils/hooks/useMapContext";
 import useRvfContext from "../utils/hooks/useRvfContext";
 
+import type { MaplibreStyleLayerOptions } from "mobility-toolbox-js/ol/layers/MaplibreStyleLayer";
+
 function RvfLineNetworkPlanLayer(props: MaplibreStyleLayerOptions) {
   const { baseLayer, map } = useMapContext();
   const { setLineNetworkPlanLayer } = useRvfContext();

package/src/RvfLink/RvfLink.tsx

@@ -1,13 +1,13 @@
-import type { JSX, PreactDOMAttributes } from "preact";
-
 import { memo, useMemo } from "preact/compat";
 import { twMerge } from "tailwind-merge";
 
 import ArrowUpRight from "../icons/ArrowUpRight";
 
+import type { AnchorHTMLAttributes, PreactDOMAttributes } from "preact";
+
 export type RvfLinkProps = {
   theme?: "primary" | "secondary";
-} & JSX.AnchorHTMLAttributes<HTMLAnchorElement> &
+} & AnchorHTMLAttributes<HTMLAnchorElement> &
   PreactDOMAttributes;
 
 const baseClasses =
@@ -33,6 +33,7 @@ function RvfLink({
 }: RvfLinkProps) {
   const classes = useMemo(() => {
     return twMerge(
+      // eslint-disable-next-line @typescript-eslint/no-base-to-string, @typescript-eslint/restrict-template-expressions
       `${baseClasses} ${themes[theme].classes}  ${className || ""}`,
     );
   }, [className, theme]);