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

package/src/RvfModal/RvfModal.tsx

@@ -1,7 +1,8 @@
-import { JSX, PreactDOMAttributes } from "preact";
 import { memo } from "preact/compat";
 import { useEffect, useState } from "preact/hooks";
 
+import type { JSX, PreactDOMAttributes } from "preact";
+
 export type ModalProps = {
   onClose: () => void;
 } & JSX.HTMLAttributes<HTMLDialogElement> &
@@ -32,7 +33,7 @@ function RvfModal({ children, onClose, ...props }: ModalProps) {
   return (
     <dialog
       className={
-        "absolute inset-0 z-50 flex size-full items-center justify-center bg-transparent"
+        "absolute inset-0 z-50 flex size-full flex-col items-center justify-center bg-transparent"
       }
       ref={(n) => {
         setNode(n);
@@ -44,7 +45,7 @@ function RvfModal({ children, onClose, ...props }: ModalProps) {
         className="absolute inset-0 z-0 size-full bg-black/60"
         onClick={onClose}
       ></button>
-      <div className="z-10 h-3/4 w-1/2 bg-white">{children}</div>
+      <div className="z-10 flex h-3/4 w-1/2 flex-col bg-white">{children}</div>
     </dialog>
   );
 }

package/src/RvfOverlayContent/RvfOverlayContent.tsx

@@ -0,0 +1,126 @@
+import { twMerge } from "tailwind-merge";
+
+import RouteSchedule from "../RouteSchedule";
+import RvfExportMenu from "../RvfExportMenu";
+import RvfFeatureDetails from "../RvfFeatureDetails";
+import RvfFeatureDetailsTitle from "../RvfFeatureDetailsTitle/RvfFeatureDetailsTitle";
+import RvfOverlayHeader from "../RvfOverlayHeader";
+import RvfShare from "../RvfShare";
+import RvfTopics from "../RvfTopics";
+import Search from "../Search";
+import Station from "../Station";
+import { RVF_LAYERS_TITLES } from "../utils/constants";
+import useMapContext from "../utils/hooks/useMapContext";
+import useRvfContext from "../utils/hooks/useRvfContext";
+
+const contentClassName = `relative h-full overflow-x-hidden overflow-y-auto text-base`;
+
+function RvfOverlayContent({
+  hasDetails,
+  hasLayerTree,
+  hasPrint,
+  hasRealtime,
+  hasSearch,
+  hasShare,
+}: {
+  hasDetails: boolean;
+  hasLayerTree: boolean;
+  hasPrint: boolean;
+  hasRealtime: boolean;
+  hasSearch: boolean;
+  hasShare: boolean;
+}) {
+  const {
+    isExportMenuOpen,
+    isLayerTreeOpen,
+    isSearchOpen,
+    isShareMenuOpen,
+    selectedFeature,
+    setIsExportMenuOpen,
+    setIsLayerTreeOpen,
+    setIsShareMenuOpen,
+    setSelectedFeature,
+  } = useRvfContext();
+  const { setStationId, setTrainId, stationId, tenant, trainId } =
+    useMapContext();
+  return (
+    <>
+      {hasRealtime && trainId && (
+        <>
+          <RvfOverlayHeader
+            onClose={() => {
+              setTrainId(null);
+            }}
+            title={RVF_LAYERS_TITLES.echtzeit}
+          ></RvfOverlayHeader>
+          <RouteSchedule className={contentClassName} />
+        </>
+      )}
+      {tenant && stationId && (
+        <>
+          <RvfOverlayHeader
+            onClose={() => {
+              setStationId(null);
+            }}
+            title="Station"
+          ></RvfOverlayHeader>
+          <Station className={twMerge(contentClassName, "flex flex-col p-2")} />
+        </>
+      )}
+      {hasDetails && selectedFeature && (
+        <>
+          <RvfOverlayHeader
+            onClose={() => {
+              setSelectedFeature(null);
+            }}
+            title={<RvfFeatureDetailsTitle feature={selectedFeature} />}
+          ></RvfOverlayHeader>
+          <RvfFeatureDetails
+            className={twMerge(contentClassName, "flex flex-col gap-4 p-4")}
+          />
+        </>
+      )}
+      {hasPrint && isExportMenuOpen && (
+        <>
+          <RvfOverlayHeader
+            onClose={() => {
+              setIsExportMenuOpen(false);
+            }}
+            title="Drucken"
+          ></RvfOverlayHeader>
+          <RvfExportMenu
+            className={twMerge(contentClassName, "flex flex-col gap-4 p-4")}
+          />
+        </>
+      )}
+      {hasLayerTree && isLayerTreeOpen && (
+        <>
+          <RvfOverlayHeader
+            onClose={() => {
+              setIsLayerTreeOpen(false);
+            }}
+            title="Layers"
+          ></RvfOverlayHeader>
+          <RvfTopics className="relative flex h-full flex-col overflow-x-hidden overflow-y-auto p-2 text-base" />
+        </>
+      )}
+      {hasShare && isShareMenuOpen && (
+        <>
+          <RvfOverlayHeader
+            onClose={() => {
+              setIsShareMenuOpen(false);
+            }}
+            title="Share"
+          ></RvfOverlayHeader>
+          <RvfShare className="relative flex h-full flex-col overflow-x-hidden overflow-y-auto p-4 text-base" />
+        </>
+      )}
+      {hasSearch && isSearchOpen && (
+        <>
+          <Search className="relative flex h-full flex-col overflow-x-hidden overflow-y-auto p-2 text-base" />
+        </>
+      )}
+    </>
+  );
+}
+export default RvfOverlayContent;

package/src/RvfOverlayHeader/RvfOverlayHeader.tsx

@@ -1,15 +1,15 @@
-import type { JSX, PreactDOMAttributes } from "preact";
-
 import { memo } from "preact/compat";
 import { twMerge } from "tailwind-merge";
 
 import Cancel from "../icons/Cancel";
-import RvfIconButton from "../RvfIconButton";
+import IconButton from "../ui/IconButton";
+
+import type { HTMLAttributes, PreactDOMAttributes } from "preact";
 
 export type RvfOverlayHeaderProps = {
   onClose?: () => void;
-  title?: string;
-} & JSX.HTMLAttributes<HTMLDivElement> &
+  title?: React.ReactNode;
+} & HTMLAttributes<HTMLDivElement> &
   PreactDOMAttributes;
 
 function RvfOverlayHeader({
@@ -22,16 +22,19 @@ function RvfOverlayHeader({
   return (
     <div
       className={twMerge(
-        "flex flex-row items-center justify-between gap-2 p-2 border-b pl-4" +
-          (className || ""),
+        `flex flex-row items-center justify-between gap-2 border-b p-2 pl-4`,
+
+        // eslint-disable-next-line @typescript-eslint/no-base-to-string
+        className ? className.toString() : "",
       )}
       {...props}
     >
-      {children || <span className={"font-bold"}>{title}</span>}
+      {/* We set text-base so the clamp works on overlay container, not main */}
+      {children || <span className={"text-base font-bold"}>{title}</span>}
       {onClose && (
-        <RvfIconButton className={"!size-[32px] border-none"} onClick={onClose}>
+        <IconButton className={"!size-[32px] border-none"} onClick={onClose}>
           <Cancel />
-        </RvfIconButton>
+        </IconButton>
       )}
     </div>
   );

package/src/RvfPermalink/RvfPermalink.tsx

@@ -1,7 +1,7 @@
-import type { JSX, PreactDOMAttributes } from "preact";
-
 import RvfInputCopy from "../RvfInputCopy";
 
+import type { JSX, PreactDOMAttributes } from "preact";
+
 function RvfPermalink({
   ...props
 }: JSX.HTMLAttributes<HTMLDivElement> & PreactDOMAttributes) {

package/src/RvfPoisLayer/RvfPoisLayer.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 RvfPoisLayer(props: MaplibreStyleLayerOptions) {
   const { baseLayer, map } = useMapContext();
   const { setPoisLayer } = useRvfContext();

package/src/RvfRadioButton/RvfRadioButton.tsx

@@ -6,7 +6,7 @@ export type RvfRadioButtonProps =
 function RvfRadioButton(props: RvfRadioButtonProps) {
   return (
     <input
-      className="peer mr-2 size-[20px] rounded-full border-2 border-grey accent-red"
+      className="peer border-grey accent-red mr-2 size-[20px] rounded-full border-2"
       {...props}
       type="radio"
     />

package/src/RvfRouteIcon/RvfRouteIcon.tsx

@@ -0,0 +1,10 @@
+import RouteIcon from "../RouteIcon/RouteIcon";
+
+import type { RouteIconProps } from "../RouteIcon/RouteIcon";
+
+function RvfRouteIcon(props: RouteIconProps) {
+  return (
+    <RouteIcon {...props} className={"border"} displayNoRealtimeIcon={true} />
+  );
+}
+export default RvfRouteIcon;

package/src/RvfRouteIcon/index.tsx

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

package/src/RvfSearch/RvfSearch.tsx

@@ -6,7 +6,9 @@ import centerOnStation from "../utils/centerOnStation";
 import { RVF_EXTENT_4326 } from "../utils/constants";
 import useMapContext from "../utils/hooks/useMapContext";
 
-function RvfSearch() {
+import type { StopsSearchProps } from "../StopsSearch/StopsSearch";
+
+function RvfSearch(props: StopsSearchProps) {
   const { apikey, map, stopsurl } = useMapContext();
 
   const onSelect = useCallback(
@@ -22,6 +24,7 @@ function RvfSearch() {
       bbox={RVF_EXTENT_4326.join(",")}
       onselect={onSelect}
       url={stopsurl}
+      {...props}
     />
   );
 }

package/src/RvfSearchButton/RvfSearchButton.tsx

@@ -0,0 +1,27 @@
+import { memo } from "preact/compat";
+import { useCallback } from "preact/hooks";
+
+import Search from "../icons/Search";
+import IconButton from "../ui/IconButton";
+import useRvfContext from "../utils/hooks/useRvfContext";
+
+import type { HTMLAttributes, PreactDOMAttributes } from "preact";
+
+export type RvfLayerTreeButtonProps = HTMLAttributes<HTMLButtonElement> &
+  PreactDOMAttributes;
+
+function RvfSearchButton({ ...props }: RvfLayerTreeButtonProps) {
+  const { isSearchOpen, setIsSearchOpen } = useRvfContext();
+
+  const onClick = useCallback(() => {
+    setIsSearchOpen(!isSearchOpen);
+  }, [isSearchOpen, setIsSearchOpen]);
+
+  return (
+    <IconButton {...props} onClick={onClick} selected={isSearchOpen}>
+      <Search />
+    </IconButton>
+  );
+}
+
+export default memo(RvfSearchButton);

package/src/RvfSearchButton/index.tsx

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

package/src/RvfSelect/RvfSelect.tsx

@@ -1,15 +1,17 @@
-import type { JSX, PreactDOMAttributes } from "preact";
-
 import ArrowDown from "../icons/ArrowDown";
 
-export type RvfSelectProps = {} & JSX.HTMLAttributes<HTMLSelectElement> &
+import type { HTMLAttributes, PreactDOMAttributes } from "preact";
+
+export type RvfSelectProps = {
+  className?: string;
+} & HTMLAttributes<HTMLSelectElement> &
   PreactDOMAttributes;
 
 function RvfSelect({ children, className, onChange }: RvfSelectProps) {
   return (
-    <div className="relative flex items-center text-grey">
+    <div className="text-grey relative flex items-center">
       <select
-        className={`h-[32px] cursor-pointer appearance-none rounded-[12px] border border-current bg-white px-[13px] text-[16px]  leading-[22px]  disabled:cursor-default @sm/main:h-[36px] @md/main:h-[40px] ${className}`}
+        className={`h-[32px] cursor-pointer appearance-none rounded-[12px] border border-current bg-white px-[13px] text-[16px] leading-[22px] disabled:cursor-default @sm/main:h-[36px] @md/main:h-[40px] ${className}`}
         onChange={onChange}
       >
         {children}

package/src/RvfSelectedFeatureHighlightLayer/RvfSelectedFeatureHighlightLayer.tsx

@@ -1,4 +1,3 @@
-import { GeoJSONSource } from "maplibre-gl";
 import GeoJSON from "ol/format/GeoJSON";
 import { useEffect, useMemo } from "preact/hooks";
 
@@ -39,7 +38,7 @@ function SingleClickListener() {
   useEffect(() => {
     const vectorTileFeature = selectedFeature?.get("vectorTileFeature");
     selectedFeature?.set("selected", true);
-    const source = mbMap?.getSource(SOURCE_SELECT) as GeoJSONSource;
+    const source = mbMap?.getSource(SOURCE_SELECT);
     if (selectedFeature) {
       const feature = selectedFeature.clone();
       feature.setStyle(null);

package/src/RvfSellingPointsLayer/RvfSellingPointsLayer.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";
 
@@ -10,6 +9,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 RvfSellingPointsLayer(props: MaplibreStyleLayerOptions) {
   const { title } = props;
   const { baseLayer, map } = useMapContext();

package/src/RvfShare/RvfPermalinkButton/RvfPermalinkButton.tsx

@@ -1,16 +1,17 @@
-import type { JSX, PreactDOMAttributes } from "preact";
-
 import { useState } from "preact/hooks";
 
 import Cancel from "../../icons/Cancel";
 import Share from "../../icons/Share";
-import RvfIconButton from "../../RvfIconButton";
 import RvfInputCopy from "../../RvfInputCopy";
+import IconButton from "../../ui/IconButton";
+
+import type { ButtonHTMLAttributes, PreactDOMAttributes } from "preact";
 
 function RvfPermalinkButton({
   className,
   ...props
-}: JSX.ButtonHTMLAttributes<HTMLButtonElement> & PreactDOMAttributes) {
+}: { className?: string } & ButtonHTMLAttributes<HTMLButtonElement> &
+  PreactDOMAttributes) {
   const [showTooltip, setShowTooltip] = useState(null);
   const [positionTooltip, setPositionTooltip] = useState<DOMRect>();
 
@@ -21,37 +22,37 @@ function RvfPermalinkButton({
 
   return (
     <>
-      <RvfIconButton
-        className={"border-none " + className}
+      <IconButton
+        className={`border-none ${className}`}
         onClick={handleIconClick}
         selected={showTooltip}
         {...props}
       >
         <Share />
-      </RvfIconButton>
+      </IconButton>
 
       {showTooltip && positionTooltip && (
         <div
-          className="fixed rounded-lg border border-grey bg-white p-2 shadow-lg"
+          className="border-grey fixed rounded-lg border bg-white p-2 shadow-lg"
           style={{
             left: positionTooltip.left + 40,
             top: positionTooltip.top - 10,
           }}
         >
           <div className="pr-4">
-            <RvfIconButton
-              className="absolute right-[-5px] top-[-5px] border-none bg-transparent p-0"
+            <IconButton
+              className="absolute top-[-5px] right-[-5px] border-none bg-transparent p-0"
               onClick={handleIconClick}
             >
               <Cancel height="18px" width="18px" />
-            </RvfIconButton>
+            </IconButton>
             <RvfInputCopy />
             <p className="py-2">
               Sie können auch den Link aus der Adresszeile des Browsers
               kopieren.
             </p>
           </div>
-          <div className="absolute -left-1.5 top-4 size-2.5 rotate-45 border border-r-0 border-t-0 border-grey bg-white"></div>
+          <div className="border-grey absolute top-4 -left-1.5 size-2.5 rotate-45 border border-t-0 border-r-0 bg-white"></div>
         </div>
       )}
     </>

package/src/RvfShare/RvfShare.tsx

@@ -1,36 +1,37 @@
-import type { JSX, PreactDOMAttributes } from "preact";
-
 import CanvasSaveButton from "react-spatial/components/CanvasSaveButton";
 import { twMerge } from "tailwind-merge";
 
 import Email from "../icons/Email";
 import Image from "../icons/Image";
-import RvfButton from "../RvfButton";
 import RvfPermalink from "../RvfPermalink";
+import Button from "../ui/Button";
 import useMapContext from "../utils/hooks/useMapContext";
 
+import type { HTMLAttributes, PreactDOMAttributes } from "preact";
+
 function RvfShare({
-  className,
+  className = "",
   ...props
-}: JSX.HTMLAttributes<HTMLDivElement> & PreactDOMAttributes) {
+}: HTMLAttributes<HTMLDivElement> & PreactDOMAttributes) {
   const { map } = useMapContext();
 
   return (
-    <div className={twMerge("flex flex-col gap-6 " + className)} {...props}>
+    // 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}>
       <a
         className="flex items-center gap-2"
         href={`mailto:?subject=Karte&body=${window?.location.href}`}
       >
-        <RvfButton>
+        <Button>
           <Email />
           <span>Email senden</span>
-        </RvfButton>
+        </Button>
       </a>
       <CanvasSaveButton map={map}>
-        <RvfButton className={"w-fit"}>
+        <Button className={"w-fit"}>
           <Image />
           <span>Bild speichern</span>
-        </RvfButton>
+        </Button>
       </CanvasSaveButton>
       <RvfPermalink />
     </div>

package/src/RvfShareMenuButton/RvfShareMenuButton.tsx

@@ -1,12 +1,12 @@
-import type { JSX, PreactDOMAttributes } from "preact";
-
 import { memo } from "preact/compat";
 import { useCallback } from "preact/hooks";
 
 import Share from "../icons/Share";
-import RvfIconButton from "../RvfIconButton";
+import IconButton from "../ui/IconButton";
 import useRvfContext from "../utils/hooks/useRvfContext";
 
+import type { JSX, PreactDOMAttributes } from "preact";
+
 export type RvfShareMenuButtonProps = JSX.HTMLAttributes<HTMLButtonElement> &
   PreactDOMAttributes;
 
@@ -18,9 +18,9 @@ function RvfShareMenuButton({ ...props }: RvfShareMenuButtonProps) {
   }, [isShareMenuOpen, setIsShareMenuOpen]);
 
   return (
-    <RvfIconButton {...props} onClick={onClick} selected={isShareMenuOpen}>
+    <IconButton {...props} onClick={onClick} selected={isShareMenuOpen}>
       <Share />
-    </RvfIconButton>
+    </IconButton>
   );
 }
 

package/src/RvfSharedMobilityLayerGroup/RvfSharedMobilityLayerGroup.tsx

@@ -1,9 +1,4 @@
-import type { Options } from "ol/layer/Group";
-
-import { FeatureCollection, Point } from "geojson";
-import { GeoJSONSource } from "maplibre-gl";
 import { MaplibreStyleLayer } from "mobility-toolbox-js/ol";
-import { Extent } from "ol/extent";
 import { Group } from "ol/layer";
 import { unByKey } from "ol/Observable";
 import { transformExtent } from "ol/proj";
@@ -36,8 +31,14 @@ import {
 } from "../utils/constants";
 import useMapContext from "../utils/hooks/useMapContext";
 import useRvfContext from "../utils/hooks/useRvfContext";
-import {
-  fetchSharingWFS,
+import { fetchSharingWFS } from "../utils/sharingWFSUtils";
+
+import type { FeatureCollection, Point } from "geojson";
+import type { GeoJSONSource } from "maplibre-gl";
+import type { Extent } from "ol/extent";
+import type { Options } from "ol/layer/Group";
+
+import type {
   SharingStationWFS,
   SharingVehicleWFS,
 } from "../utils/sharingWFSUtils";
@@ -114,16 +115,18 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
         abortController,
         extent,
       );
-      const bikeStationsData: FeatureCollection<Point, SharingStationWFS> = {
+      const bikeStationsDatas: FeatureCollection<Point, SharingStationWFS> = {
+        features: [],
+        type: "FeatureCollection",
+      };
+      const cargoBikeStationsDatas: FeatureCollection<
+        Point,
+        SharingStationWFS
+      > = {
         features: [],
         type: "FeatureCollection",
       };
-      const cargoBikeStationsData: FeatureCollection<Point, SharingStationWFS> =
-        {
-          features: [],
-          type: "FeatureCollection",
-        };
-      const carStationsData: FeatureCollection<Point, SharingStationWFS> = {
+      const carStationsDatas: FeatureCollection<Point, SharingStationWFS> = {
         features: [],
         type: "FeatureCollection",
       };
@@ -132,21 +135,21 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
         if (station.properties.num_bicycles_available !== null) {
           station.properties.num_vehicles_available =
             station.properties.num_bicycles_available;
-          bikeStationsData.features.push(station);
+          bikeStationsDatas.features.push(station);
         } else if (station.properties.num_cargo_bicycles_available !== null) {
           station.properties.num_vehicles_available =
             station.properties.num_cargo_bicycles_available;
-          cargoBikeStationsData.features.push(station);
+          cargoBikeStationsDatas.features.push(station);
         } else if (station.properties.num_cars_available !== null) {
           station.properties.num_vehicles_available =
             station.properties.num_cars_available;
-          carStationsData.features.push(station);
+          carStationsDatas.features.push(station);
         }
       });
 
-      setBikeStationsData(bikeStationsData);
-      setCargoBikeStationsData(cargoBikeStationsData);
-      setCarStationsData(carStationsData);
+      setBikeStationsData(bikeStationsDatas);
+      setCargoBikeStationsData(cargoBikeStationsDatas);
+      setCarStationsData(carStationsDatas);
 
       // Fill free float data
       const freeFloatData = (await fetchSharingWFS(
@@ -190,7 +193,7 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
       setScooterFreeFloatData(scooter);
     };
 
-    fetchData();
+    void fetchData();
 
     return () => {
       abortController.abort();
@@ -202,7 +205,7 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
     const key = map?.on("moveend", updateData);
 
     // @ts-expect-error - change property can have custom values
-    const key2 = map?.on("change:" + LAYER_PROP_IS_EXPORTING, (evt) => {
+    const key2 = map?.on(`change:${LAYER_PROP_IS_EXPORTING}`, (evt) => {
       // Reupdate the data after finishing eporting the map
       if (!evt.target.get(LAYER_PROP_IS_EXPORTING)) {
         updateData();