@geops/rvf-mobility-web-component 0.1.13 → 0.1.14

package/src/RvfMobilityMap/RvfMobilityMap.tsx

@@ -33,12 +33,16 @@ import RvfExportMenu from "../RvfExportMenu";
 import RvfExportMenuButton from "../RvfExportMenuButton";
 import RvfFeatureDetails from "../RvfFeatureDetails";
 import RvfFloatingMenu from "../RvfFloatingMenu";
+import RvfLayerTreeButton from "../RvfLayerTreeButton";
 // Notificationurl example: https://mobility-web-component-tmp.vercel.app/geops-mobility?notificationurl=https%3A%2F%2Fmoco.geops.io%2Fapi%2Fv1%2Fexport%2Fnotification%2F%3Fsso_config%3Dsob&geolocation=false&realtime=false&search=false&notificationat=2024-01-25T22%3A59%3A00Z
 import RvfLineNetworkPlanLayer from "../RvfLineNetworkPlanLayer";
 import Modal from "../RvfModal";
+import RvfOverlayHeader from "../RvfOverlayHeader";
 import RvfPoisLayer from "../RvfPoisLayer";
 import RvfSellingPointsLayer from "../RvfSellingPointsLayer";
+import RvfShare from "../RvfShare";
 import RvfSharedMobilityLayerGroup from "../RvfSharedMobilityLayerGroup";
+import RvfShareMenuButton from "../RvfShareMenuButton";
 import RvfTarifZonenLayer from "../RvfTarifZonenLayer";
 import Topics from "../RvfTopics";
 import RvfZoomButtons from "../RvfZoomButtons";
@@ -59,7 +63,7 @@ import MobilityEvent from "../utils/MobilityEvent";
 // @ts-expect-error bad type definition
 import style from "./index.css";
 
-export type RvfMobilityMapProps = {} & MobilityMapProps;
+export type RvfMobilityMapProps = { toolbar: string } & MobilityMapProps;
 
 const bbox = RVF_EXTENT_3857.join(",");
 
@@ -98,6 +102,7 @@ function RvfMobilityMap({
   search = "false",
   stopsurl = "https://api.geops.io/stops/v1/",
   tenant = null,
+  toolbar = "true",
   zoom = null,
 }: RvfMobilityMapProps) {
   const eventNodeRef = useRef<HTMLDivElement>();
@@ -112,6 +117,7 @@ function RvfMobilityMap({
   const [stationId, setStationId] = useState<RealtimeStationId>();
   const [trainId, setTrainId] = useState<RealtimeTrainId>();
   const [isExportMenuOpen, setIsExportMenuOpen] = useState<boolean>(false);
+  const [isShareMenuOpen, setIsShareMenuOpen] = useState<boolean>(false);
   const [selectedFeature, setSelectedFeature] = useState<Feature>();
   const [selectedFeatures, setSelectedFeatures] = useState<Feature[]>();
   const [isLayerTreeOpen, setIsLayerTreeOpen] = useState<boolean>(false);
@@ -123,6 +129,7 @@ function RvfMobilityMap({
     useState<MaplibreStyleLayer>();
   const [sharedMobilityLayerGroup, setSharedMobilityLayerGroup] =
     useState<Group>();
+  const [hasToolbar] = useState<boolean>(toolbar === "true");
 
   // TODO: this should be removed. The parent application should be responsible to do this
   // or we should find something that fit more usecases
@@ -223,6 +230,7 @@ function RvfMobilityMap({
         realtimeurl,
         search,
         tenant,
+        toolbar,
         zoom,
       }),
     );
@@ -230,6 +238,7 @@ function RvfMobilityMap({
     baselayer,
     center,
     geolocation,
+    toolbar,
     mapsurl,
     maxzoom,
     minzoom,
@@ -251,6 +260,7 @@ function RvfMobilityMap({
     return {
       isExportMenuOpen,
       isLayerTreeOpen,
+      isShareMenuOpen,
       lineNetworkPlanLayer,
       poisLayer,
       selectedFeature,
@@ -258,6 +268,7 @@ function RvfMobilityMap({
       sellingPointsLayer,
       setIsExportMenuOpen,
       setIsLayerTreeOpen,
+      setIsShareMenuOpen,
       setLineNetworkPlanLayer,
       setPoisLayer,
       setSelectedFeature,
@@ -271,6 +282,7 @@ function RvfMobilityMap({
   }, [
     isExportMenuOpen,
     isLayerTreeOpen,
+    isShareMenuOpen,
     lineNetworkPlanLayer,
     poisLayer,
     selectedFeature,
@@ -302,6 +314,76 @@ function RvfMobilityMap({
     };
   }, []);
 
+  const stationsLayerProps = useMemo(() => {
+    return {
+      layersFilter: ({ metadata }) => {
+        return metadata?.["rvf.filter"] === "netzplan_stations";
+      },
+    };
+  }, []);
+
+  useEffect(() => {
+    if (hasToolbar && isLayerTreeOpen) {
+      setIsExportMenuOpen(false);
+      setIsLayerTreeOpen(isLayerTreeOpen);
+      setSelectedFeature(null);
+      setTrainId(null);
+      setStationId(null);
+      setIsShareMenuOpen(false);
+    }
+  }, [isLayerTreeOpen, hasToolbar]);
+
+  useEffect(() => {
+    if (hasToolbar && isExportMenuOpen) {
+      setIsLayerTreeOpen(false);
+      setIsExportMenuOpen(isExportMenuOpen);
+      setSelectedFeature(null);
+      setTrainId(null);
+      setIsShareMenuOpen(false);
+      setStationId(null);
+    }
+  }, [isExportMenuOpen, hasToolbar]);
+
+  useEffect(() => {
+    if (hasToolbar && selectedFeature) {
+      setIsLayerTreeOpen(false);
+      setIsExportMenuOpen(false);
+      setTrainId(null);
+      setIsShareMenuOpen(false);
+      setStationId(null);
+    }
+  }, [selectedFeature, hasToolbar]);
+
+  useEffect(() => {
+    if (hasToolbar && stationId) {
+      setIsLayerTreeOpen(false);
+      setIsExportMenuOpen(false);
+      setTrainId(null);
+      setIsShareMenuOpen(false);
+      setSelectedFeature(null);
+    }
+  }, [stationId, hasToolbar]);
+
+  useEffect(() => {
+    if (hasToolbar && trainId) {
+      setIsLayerTreeOpen(false);
+      setIsExportMenuOpen(false);
+      setStationId(null);
+      setIsShareMenuOpen(false);
+      setSelectedFeature(null);
+    }
+  }, [trainId, hasToolbar]);
+
+  useEffect(() => {
+    if (hasToolbar && isShareMenuOpen) {
+      setIsLayerTreeOpen(false);
+      setIsExportMenuOpen(false);
+      setStationId(null);
+      setTrainId(null);
+      setSelectedFeature(null);
+    }
+  }, [isShareMenuOpen, hasToolbar]);
+
   return (
     <I18nContext.Provider value={i18n}>
       <style>{tailwind}</style>
@@ -319,11 +401,21 @@ function RvfMobilityMap({
                 <SingleClickListener />
 
                 {realtime === "true" && <RealtimeLayer title="Echtzeit" />}
-                {tenant && <StationsLayer />}
+                {
+                  <StationsLayer
+                    minZoom={10}
+                    title="Haltestellen"
+                    {...stationsLayerProps}
+                  />
+                }
                 {notification === "true" && <NotificationLayer />}
-                <RvfSellingPointsLayer title="Verkaufsstellen" />
-                <RvfLineNetworkPlanLayer title="Liniennetz" />
-                <RvfTarifZonenLayer title="Tarifzonen" />
+                <RvfSellingPointsLayer isQueryable title="Verkaufsstellen" />
+                <RvfLineNetworkPlanLayer
+                  isQueryable
+                  minZoom={10}
+                  title="Liniennetz"
+                />
+                <RvfTarifZonenLayer isQueryable title="Tarifzonen" />
                 <RvfPoisLayer title="POIs" />
                 <RvfSharedMobilityLayerGroup title="Shared Mobility" />
 
@@ -337,7 +429,7 @@ function RvfMobilityMap({
 
                 <div className="absolute right-2 top-2 z-10 flex flex-col gap-2">
                   {geolocation === "true" && <GeolocationButton />}
-                  <RvfExportMenuButton />
+                  {!hasToolbar && <RvfExportMenuButton />}
                 </div>
 
                 {search === "true" && (
@@ -350,31 +442,97 @@ function RvfMobilityMap({
                   <RvfZoomButtons />
                 </div>
 
-                <RvfFloatingMenu
-                  isOpen={isLayerTreeOpen}
-                  onClick={onLayerTreeMenuClick}
-                  title="Kartendaten"
-                >
-                  <Topics className={"w-full px-2"} />
-                </RvfFloatingMenu>
+                {!hasToolbar && (
+                  <RvfFloatingMenu
+                    isOpen={isLayerTreeOpen}
+                    onClick={onLayerTreeMenuClick}
+                    title="Kartendaten"
+                  >
+                    <Topics className={"w-full px-2"} />
+                  </RvfFloatingMenu>
+                )}
               </Map>
-
               <Overlay
                 className={"z-50"}
                 ScrollableHandlerProps={scrollableHandlerProps}
               >
                 {realtime === "true" && trainId && (
-                  <RouteSchedule className="relative overflow-y-auto  overflow-x-hidden" />
+                  <>
+                    <RvfOverlayHeader
+                      onClose={() => {
+                        setTrainId(null);
+                      }}
+                      title="Train"
+                    ></RvfOverlayHeader>
+                    <RouteSchedule className="relative overflow-y-auto  overflow-x-hidden" />
+                  </>
                 )}
                 {tenant && stationId && (
-                  <Station className="relative overflow-y-auto  overflow-x-hidden" />
+                  <>
+                    <RvfOverlayHeader
+                      onClose={() => {
+                        setStationId(null);
+                      }}
+                      title="Station"
+                    ></RvfOverlayHeader>
+                    <Station className="relative flex flex-col overflow-y-auto overflow-x-hidden  p-2" />
+                  </>
                 )}
                 {selectedFeature && (
-                  <RvfFeatureDetails className="relative overflow-y-auto  overflow-x-hidden" />
+                  <>
+                    <RvfOverlayHeader
+                      onClose={() => {
+                        setSelectedFeature(null);
+                      }}
+                      title="Informations"
+                    ></RvfOverlayHeader>
+                    <RvfFeatureDetails className="relative flex flex-col gap-2 overflow-y-auto overflow-x-hidden  p-2" />
+                  </>
+                )}
+                {hasToolbar && isExportMenuOpen && (
+                  <>
+                    <RvfOverlayHeader
+                      onClose={() => {
+                        setIsExportMenuOpen(false);
+                      }}
+                      title="Export"
+                    ></RvfOverlayHeader>
+                    <RvfExportMenu className="relative flex flex-col gap-2 overflow-y-auto overflow-x-hidden  p-2" />
+                  </>
+                )}
+                {hasToolbar && isLayerTreeOpen && (
+                  <>
+                    <RvfOverlayHeader
+                      onClose={() => {
+                        setIsLayerTreeOpen(false);
+                      }}
+                      title="Layers"
+                    ></RvfOverlayHeader>
+                    <Topics className="relative flex h-full flex-col overflow-y-auto overflow-x-hidden p-2" />
+                  </>
+                )}
+                {hasToolbar && isShareMenuOpen && (
+                  <>
+                    <RvfOverlayHeader
+                      onClose={() => {
+                        setIsLayerTreeOpen(false);
+                      }}
+                      title="Share"
+                    ></RvfOverlayHeader>
+                    <RvfShare className="relative flex h-full flex-col overflow-y-auto overflow-x-hidden p-2" />
+                  </>
                 )}
               </Overlay>
 
-              {isExportMenuOpen && (
+              {hasToolbar && (
+                <div className={"overflow-x-hidden border-r"}>
+                  <RvfLayerTreeButton className={"border-none"} />
+                  <RvfExportMenuButton className={"border-none"} />
+                  <RvfShareMenuButton className={"border-none"} />
+                </div>
+              )}
+
+              {!hasToolbar && isExportMenuOpen && (
                 <Modal onClose={onExportMenuClose}>
                   <RvfExportMenu className="relative flex h-full flex-col overflow-y-auto  overflow-x-hidden" />
                 </Modal>

package/src/RvfOverlayHeader/RvfOverlayHeader.tsx

@@ -0,0 +1,40 @@
+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";
+
+export type RvfOverlayHeaderProps = {
+  onClose?: () => void;
+  title?: string;
+} & JSX.HTMLAttributes<HTMLDivElement> &
+  PreactDOMAttributes;
+
+function RvfOverlayHeader({
+  children,
+  className,
+  onClose,
+  title,
+  ...props
+}: RvfOverlayHeaderProps) {
+  return (
+    <div
+      className={twMerge(
+        "flex flex-row items-center justify-between gap-2 p-2 border-b" +
+          (className || ""),
+      )}
+      {...props}
+    >
+      {children || <span className={"font-bold"}>{title}</span>}
+      {onClose && (
+        <RvfIconButton className={"!size-[32px] border-none"} onClick={onClose}>
+          <Cancel />
+        </RvfIconButton>
+      )}
+    </div>
+  );
+}
+
+export default memo(RvfOverlayHeader);

package/src/RvfOverlayHeader/index.tsx

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

package/src/RvfPermalink/RvfPermalink.tsx

@@ -0,0 +1,18 @@
+import type { JSX, PreactDOMAttributes } from "preact";
+
+import RvfInputCopy from "../RvfInputCopy";
+
+function RvfPermalink({
+  ...props
+}: JSX.HTMLAttributes<HTMLDivElement> & PreactDOMAttributes) {
+  return (
+    <div {...props}>
+      <RvfInputCopy value={window?.location.href} />
+      <p className="py-2">
+        Sie können auch den Link aus der Adresszeile des Browsers kopieren.
+      </p>
+    </div>
+  );
+}
+
+export default RvfPermalink;

package/src/RvfPermalink/index.tsx

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

package/src/RvfSelect/RvfSelect.tsx

@@ -9,12 +9,12 @@ function RvfSelect({ children, className, onChange }: RvfSelectProps) {
   return (
     <div className="relative flex items-center text-grey">
       <select
-        className={`min-w-12 appearance-none rounded-xl border border-grey p-2 text-base focus:outline-none ${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}
       </select>
-      <ArrowDown className="pointer-events-none absolute right-1" />
+      <ArrowDown className="pointer-events-none absolute right-[8px]" />
     </div>
   );
 }

package/src/RvfSellingPointsLayer/RvfSellingPointsLayer.tsx

@@ -3,10 +3,14 @@ import { MaplibreStyleLayerOptions } from "mobility-toolbox-js/ol/layers/Maplibr
 import { memo } from "preact/compat";
 import { useEffect, useMemo } from "preact/hooks";
 
+import Automat from "../icons/Automat";
+import InPerson from "../icons/InPerson";
+import Video from "../icons/Video";
 import useMapContext from "../utils/hooks/useMapContext";
 import useRvfContext from "../utils/hooks/useRvfContext";
 
 function RvfSellingPointsLayer(props: MaplibreStyleLayerOptions) {
+  const { title } = props;
   const { baseLayer, map } = useMapContext();
   const { setSellingPointsLayer } = useRvfContext();
 
@@ -21,8 +25,19 @@ function RvfSellingPointsLayer(props: MaplibreStyleLayerOptions) {
       },
       maplibreLayer: baseLayer,
       ...(props || {}),
+
+      title: (
+        <div className="flex items-center justify-between gap-2">
+          {title}
+          <span className="flex items-center">
+            <Automat />
+            <InPerson />
+            <Video />
+          </span>
+        </div>
+      ),
     });
-  }, [baseLayer, props]);
+  }, [baseLayer, props, title]);
 
   useEffect(() => {
     setSellingPointsLayer(layer);

package/src/RvfShare/RvfPermalinkButton/RvfPermalinkButton.tsx

@@ -0,0 +1,61 @@
+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";
+
+function RvfPermalinkButton({
+  className,
+  ...props
+}: JSX.ButtonHTMLAttributes<HTMLButtonElement> & PreactDOMAttributes) {
+  const [showTooltip, setShowTooltip] = useState(null);
+  const [positionTooltip, setPositionTooltip] = useState<DOMRect>();
+
+  const handleIconClick = (event) => {
+    setPositionTooltip(event.currentTarget.getBoundingClientRect());
+    setShowTooltip(!showTooltip);
+  };
+
+  return (
+    <>
+      <RvfIconButton
+        className={"border-none " + className}
+        onClick={handleIconClick}
+        selected={showTooltip}
+        {...props}
+      >
+        <Share />
+      </RvfIconButton>
+
+      {showTooltip && positionTooltip && (
+        <div
+          className="fixed rounded-lg border border-grey 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"
+              onClick={handleIconClick}
+            >
+              <Cancel height="18px" width="18px" />
+            </RvfIconButton>
+            <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>
+      )}
+    </>
+  );
+}
+
+export default RvfPermalinkButton;

package/src/RvfShare/RvfPermalinkButton/index.tsx

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

package/src/RvfShare/RvfShare.tsx

@@ -0,0 +1,40 @@
+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 useMapContext from "../utils/hooks/useMapContext";
+
+function RvfShare({
+  className,
+  ...props
+}: JSX.HTMLAttributes<HTMLDivElement> & PreactDOMAttributes) {
+  const { map } = useMapContext();
+
+  return (
+    <div className={twMerge("flex flex-col gap-2 " + className)} {...props}>
+      <a
+        className="flex items-center gap-2"
+        href={`mailto:?subject=Karte&body=${window?.location.href}`}
+      >
+        <RvfButton>
+          <Email />
+          <span>Email senden</span>
+        </RvfButton>
+      </a>
+      <CanvasSaveButton map={map}>
+        <RvfButton className={"w-fit"}>
+          <Image />
+          <span>Bild speichern</span>
+        </RvfButton>
+      </CanvasSaveButton>
+      <RvfPermalink />
+    </div>
+  );
+}
+
+export default RvfShare;

package/src/RvfShare/index.tsx

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

package/src/RvfShareMenuButton/RvfShareMenuButton.tsx

@@ -0,0 +1,27 @@
+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 useRvfContext from "../utils/hooks/useRvfContext";
+
+export type RvfShareMenuButtonProps = JSX.HTMLAttributes<HTMLButtonElement> &
+  PreactDOMAttributes;
+
+function RvfShareMenuButton({ ...props }: RvfShareMenuButtonProps) {
+  const { isShareMenuOpen, setIsShareMenuOpen } = useRvfContext();
+
+  const onClick = useCallback(() => {
+    setIsShareMenuOpen(!isShareMenuOpen);
+  }, [isShareMenuOpen, setIsShareMenuOpen]);
+
+  return (
+    <RvfIconButton {...props} onClick={onClick} selected={isShareMenuOpen}>
+      <Share />
+    </RvfIconButton>
+  );
+}
+
+export default memo(RvfShareMenuButton);

package/src/RvfShareMenuButton/index.tsx

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