@geops/rvf-mobility-web-component 0.1.56 → 0.1.57

package/src/Station/Station.tsx

@@ -1,15 +1,18 @@
 import { debounceDeparturesMessages } from "mobility-toolbox-js/ol";
 import { memo } from "preact/compat";
 import { useEffect, useRef, useState } from "preact/hooks";
+import { twMerge } from "tailwind-merge";
 
 import Departure from "../Departure";
 import StationHeader from "../StationHeader";
 import useMapContext from "../utils/hooks/useMapContext";
 
 import type { RealtimeDeparture } from "mobility-toolbox-js/types";
-import type { JSX, PreactDOMAttributes } from "preact";
+import type { HTMLAttributes, PreactDOMAttributes } from "preact";
 
-export type StationProps = JSX.HTMLAttributes<HTMLDivElement> &
+export type StationProps = {
+  className?: string;
+} & HTMLAttributes<HTMLDivElement> &
   PreactDOMAttributes;
 
 function Station(props: StationProps) {
@@ -48,7 +51,11 @@ function Station(props: StationProps) {
   return (
     <>
       <StationHeader />
-      <div className={className} ref={ref}>
+      <div
+        className={twMerge("flex flex-col p-2", className)}
+        ref={ref}
+        {...props}
+      >
         {(departures || [])
           // .filter(hideDepartures)
           .map((departure: RealtimeDeparture, index: number) => {

package/src/StationsLayer/StationsLayer.tsx

@@ -28,7 +28,6 @@ function StationsLayer(props: Partial<MaplibreStyleLayerOptions>) {
     if (!map || !layer) {
       return;
     }
-
     map.addLayer(layer);
     setStationsLayer(layer);
 

package/src/StopsSearch/StopsSearch.tsx

@@ -13,6 +13,7 @@ import { twMerge } from "tailwind-merge";
 import Cancel from "../icons/Cancel";
 import Search from "../icons/Search";
 import IconButton from "../ui/IconButton";
+import Input from "../ui/Input";
 import useI18n from "../utils/hooks/useI18n";
 import MobilityEvent from "../utils/MobilityEvent";
 
@@ -242,13 +243,12 @@ function StopsSearch({
             inputContainerClassName,
           )}
         >
-          <input
+          <Input
             autoComplete="off"
             className={twMerge(
-              "h-8 flex-1 overflow-hidden text-ellipsis outline-0 placeholder:text-zinc-400",
+              "h-8 w-1 grow overflow-hidden text-ellipsis placeholder:text-zinc-400",
               inputClassName,
             )}
-            id="searchfield"
             onChange={(evt) => {
               // @ts-expect-error target is missing
               setQuery(evt.target.value);
@@ -333,7 +333,6 @@ function StopsSearch({
           )}
         </div>
       )}
-      {/* </div> */}
     </>
   );
 }

package/src/StopsSearch/index.tsx

@@ -1 +1,2 @@
-export { default, SearchProps, StationFeature } from "./StopsSearch";
+export { default } from "./StopsSearch";
+export type { StopsFeature, StopsSearchProps } from "./StopsSearch";

package/src/WindowMessageListener/WindowMessageListener.tsx

@@ -25,7 +25,6 @@ function WindowMessageListener({ eventNode }: { eventNode: HTMLElement }) {
   useEffect(() => {
     const onMessage = (event) => {
       if (event.data.situations) {
-        console.log("Setting preview situations", event.data.situations);
         setPreviewNotifications(event.data.situations);
       }
     };
@@ -47,6 +46,13 @@ function WindowMessageListener({ eventNode }: { eventNode: HTMLElement }) {
         // @ts-expect-error children is the react property
         delete evt.data.children;
       }
+      if (evt.type === "mwc:selectedfeature") {
+        // @ts-expect-error children is the react property
+        if (evt.data?.properties?.olGeometry) {
+          // @ts-expect-error children is the react property
+          delete evt.data.properties.olGeometry;
+        }
+      }
       window.parent?.postMessage({ data: evt.data, type: evt.type }, "*");
     };
     evtTypes.forEach((eventType) => {

package/src/{RvfZoomButtons/RvfZoomButtons.tsx → ZoomButtons/ZoomButtons.tsx}

@@ -7,7 +7,7 @@ import Plus from "../icons/Plus";
 import IconButton from "../ui/IconButton";
 import useMapContext from "../utils/hooks/useMapContext";
 
-function RvfZoomButtons() {
+function ZoomButtons() {
   const { map } = useMapContext();
   const [isZoomInDisabled, setIsZoomInDisabled] = useState(false);
   const [isZoomOutDisabled, setIsZoomOutDisabled] = useState(false);
@@ -56,18 +56,15 @@ function RvfZoomButtons() {
 
   return (
     <>
-      <IconButton
-        disabled={isZoomInDisabled}
-        Icon={Plus}
-        onClick={handleZoomIn}
-      />
-      <IconButton
-        disabled={isZoomOutDisabled}
-        Icon={Minus}
-        onClick={handleZoomOut}
-      />
+      <IconButton disabled={isZoomInDisabled} onClick={handleZoomIn}>
+        <Plus />
+      </IconButton>
+
+      <IconButton disabled={isZoomOutDisabled} onClick={handleZoomOut}>
+        <Minus />
+      </IconButton>
     </>
   );
 }
 
-export default memo(RvfZoomButtons);
+export default memo(ZoomButtons);

package/src/ZoomButtons/index.tsx

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

package/src/icons/Geolocation/airport-14-svgrepo-com.svg

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg 
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   width="100%"
+   height="100%"
+   viewBox="0 0 14 14"
+   id="svg2">
+  <metadata
+     id="metadata8">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs6" />
+  <rect
+     width="14"
+     height="14"
+     x="0"
+     y="0"
+     id="canvas"
+     style="fill:none;stroke:none;visibility:hidden" />
+  <path
+     d="m 14,8 0,1 -6,-1 0,3 2,2 0,1 L 7,13 4,14 4,13 6,11 6,8 0,9 0,8 6,5 6,2 C 6,1 6.22222,0 7,0 7.77777,0 8,1 8,2 l 0,3 z"
+     id="airport"
+     style="fill:#000000;fill-opacity:1;stroke:none" />
+</svg>

package/src/ui/Button/Button.tsx

@@ -1,4 +1,5 @@
 import { memo, useMemo } from "preact/compat";
+import { twMerge } from "tailwind-merge";
 
 import type {
   AnchorHTMLAttributes,
@@ -14,7 +15,8 @@ export type ButtonProps = {
   ButtonHTMLAttributes &
   PreactDOMAttributes;
 
-const baseClasses = "flex";
+const baseClasses =
+  "flex gap-2 items-center px-4 py-2 rounded-2xl border hover:border-black hover:not-disabled:cursor-pointer";
 
 export const themes = {
   primary: {
@@ -36,7 +38,12 @@ function Button({
   ...props
 }: ButtonProps) {
   const classes = useMemo(() => {
-    return `${baseClasses} ${themes[theme].classes}  ${selected ? themes[theme].selectedClasses : ""} ${className || ""}`;
+    return twMerge(
+      baseClasses,
+      themes[theme].classes,
+      selected ? themes[theme].selectedClasses : "",
+      className,
+    );
   }, [className, selected, theme]);
 
   if (href) {

package/src/ui/Checkbox/Checkbox.tsx

@@ -0,0 +1,32 @@
+import { memo } from "preact/compat";
+import { twMerge } from "tailwind-merge";
+
+import ok from "../../icons/Ok/ok-grey.svg";
+
+import type { InputHTMLAttributes } from "preact";
+
+export type RvfCheckboxProps = {
+  checkedIconUrl?: string;
+  className?: string;
+} & InputHTMLAttributes;
+
+function Checkbox({ className, ...props }: RvfCheckboxProps) {
+  const checkedIconUrl = props.checkedIconUrl || ok;
+  return (
+    <input
+      checked={props.checked}
+      className={twMerge(
+        `border-grey text-grey disabled:border-lightgrey box-border size-[20px] flex-none cursor-pointer appearance-none rounded border-2 bg-white bg-contain bg-center disabled:cursor-default`,
+        className,
+      )}
+      style={{
+        backgroundImage:
+          props.checked && !props.disabled ? `url('${checkedIconUrl}')` : "",
+      }}
+      {...props}
+      type="checkbox"
+    />
+  );
+}
+
+export default memo(Checkbox);

package/src/ui/Checkbox/index.tsx

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

package/src/ui/IconButton/IconButton.tsx

@@ -1,16 +1,22 @@
 import { memo, useMemo } from "preact/compat";
+import { twMerge } from "tailwind-merge";
 
-import type { ButtonHTMLAttributes, PreactDOMAttributes } from "preact";
+import type {
+  AnchorHTMLAttributes,
+  ButtonHTMLAttributes,
+  PreactDOMAttributes,
+} from "preact";
 
 export type IconButtonProps = {
   className?: string;
   selected?: boolean;
   theme?: "primary" | "secondary";
-} & ButtonHTMLAttributes<HTMLButtonElement> &
+} & AnchorHTMLAttributes &
+  ButtonHTMLAttributes &
   PreactDOMAttributes;
 
 const baseClasses =
-  "flex size-9 items-center justify-center rounded-full bg-white p-1.5 shadow-lg";
+  "flex size-9 items-center justify-center rounded-full bg-white p-1.5 shadow-lg hover:not-disabled:cursor-pointer";
 
 export const themes = {
   primary: {
@@ -26,14 +32,28 @@ export const themes = {
 function IconButton({
   children,
   className,
+  href,
   selected = false,
   theme = "secondary",
   ...props
 }: IconButtonProps) {
   const classes = useMemo(() => {
-    return `${baseClasses} ${themes[theme].classes}  ${selected ? themes[theme].selectedClasses : ""} ${className || ""}`;
+    return twMerge(
+      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}

package/src/ui/Input/Input.tsx

@@ -0,0 +1,17 @@
+import { twMerge } from "tailwind-merge";
+
+import type { InputHTMLAttributes, PreactDOMAttributes } from "preact";
+
+export type InputProps = { className?: string } & InputHTMLAttributes &
+  PreactDOMAttributes;
+
+function Input({ className, ...props }: InputProps) {
+  return (
+    <input
+      {...props}
+      className={twMerge("p-2 text-sm read-only:text-gray-400", className)}
+    />
+  );
+}
+
+export default Input;

package/src/ui/Input/index.tsx

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

package/src/ui/InputCopy/InputCopy.tsx

@@ -0,0 +1,86 @@
+import { useId, useState } from "preact/hooks";
+import { twMerge } from "tailwind-merge";
+
+import Copy from "../../icons/Copy";
+import IconButton from "../IconButton";
+import Input from "../Input";
+
+import type {
+  HTMLAttributes,
+  InputHTMLAttributes,
+  PreactDOMAttributes,
+} from "preact";
+
+export type InputCopyProps = {
+  containerProps?: HTMLAttributes<HTMLDivElement> & PreactDOMAttributes;
+  tooltipProps?: HTMLAttributes<HTMLDivElement> & PreactDOMAttributes;
+} & InputHTMLAttributes &
+  PreactDOMAttributes;
+
+const emptyProps = {}; // avoid re-rendering
+
+function InputCopy({
+  containerProps = emptyProps,
+  tooltipProps = emptyProps,
+  ...props
+}: InputCopyProps) {
+  const [positionTooltip, setPositionTooltip] = useState<DOMRect>();
+  const [isTooptipShowed, setIsTooltipShowed] = useState(false);
+  const inputId = useId();
+
+  const handleCopyClick = (event) => {
+    setPositionTooltip(event.currentTarget.getBoundingClientRect());
+    void navigator.clipboard.writeText(window?.location.href).then(() => {
+      setIsTooltipShowed(true);
+      setTimeout(() => {
+        setIsTooltipShowed(false);
+      }, 1000);
+    });
+    (document.getElementById(inputId) as HTMLInputElement | null)?.select();
+  };
+
+  const handleInputFocus = () => {
+    (document.getElementById(inputId) as HTMLInputElement | null)?.select();
+  };
+
+  return (
+    <div
+      {...containerProps}
+      className={twMerge(
+        "relative flex items-center",
+        containerProps?.className,
+      )}
+    >
+      <Input
+        id={inputId}
+        onFocus={handleInputFocus}
+        readOnly
+        type="text"
+        {...props}
+        className={twMerge("h-full flex-1 border border-r-0", props?.className)}
+      />
+      <IconButton
+        className="h-full rounded-none border p-2 shadow-none"
+        onClick={handleCopyClick}
+      >
+        <Copy />
+      </IconButton>
+      <div
+        {...tooltipProps}
+        className={twMerge(
+          `fixed hidden rounded bg-gray-600 p-1 text-sm text-white`,
+          isTooptipShowed && "block",
+          tooltipProps?.className,
+        )}
+        style={{
+          left: positionTooltip?.left - 30,
+          top: positionTooltip?.top - 30,
+        }}
+      >
+        Kopiert!
+      </div>
+    </div>
+  );
+}
+
+export default InputCopy;

package/src/ui/InputCopy/index.tsx

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

package/src/ui/Select/Select.tsx

@@ -0,0 +1,24 @@
+import ArrowDown from "../../icons/ArrowDown";
+
+import type { HTMLAttributes, PreactDOMAttributes } from "preact";
+
+export type RvfSelectProps = {
+  className?: string;
+} & HTMLAttributes<HTMLSelectElement> &
+  PreactDOMAttributes;
+
+function Select({ children, className, onChange }: RvfSelectProps) {
+  return (
+    <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}`}
+        onChange={onChange}
+      >
+        {children}
+      </select>
+      <ArrowDown className="pointer-events-none absolute right-[8px]" />
+    </div>
+  );
+}
+
+export default Select;

package/src/ui/Select/index.tsx

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

package/src/utils/constants.ts

@@ -13,46 +13,49 @@ 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 LAYER_NAME_NOTIFICATIONS = "meldungen";
+export const LAYER_NAME_LINESNETWORKPLAN = "liniennetz";
 
 export const RVF_EXTENT_4326 = [7.5, 47.7, 8.45, 48.4];
 
-export const RVF_EXTENT_3857 = transformExtent(
+export const MAX_EXTENT = transformExtent(
   RVF_EXTENT_4326,
   "EPSG:4326",
   "EPSG:3857",
 );
 
+export const RVF_EXTENT_3857 = MAX_EXTENT;
+
 // @ts-expect-error - testsdsd sd
 window.fromLonLat = fromLonLat;
 // @ts-expect-error - testsdsd sd
 window.toLonLat = toLonLat;
 export const LAYER_PROP_IS_EXPORTING = "isExporting";
 
-export const RVF_LAYERS_TITLES = {
+export const LAYERS_TITLES = {
   auto: "Auto",
   autoandere: "Auto, andere Anbieter",
   cargobike: "Cargobike",
   cargobikeandere: "Lastenrad, andere Anbieter",
   cargobikefrelo: "Lastenfrelo",
   "e-roller": "E-Roller",
-  echtzeit: "Echtzeit",
   eroller: "E-Roller",
   fahrrad: "Fahrrad",
   fahrradandere: "Fahrrad, andere Anbieter",
   grueneflotte: "Grüne Flotte",
-  haltestellen: "Haltestellen",
-  liniennetz: "Liniennetz",
-  meldungen: "Meldungen",
+  linesnetworkplan: "Liniennetz",
   mitfahrpunkte: "Mitfahrpunkte",
   naturenergie: "Naturenergie-Sharing",
+  notifications: "Meldungen",
   pois: "POIs",
+  realtime: "Echtzeit",
   sharedMobility: "Shared Mobility",
+  stations: "Haltestellen",
   tarifzonen: "Tarifzonen",
   verkaufsstellen: "Verkaufsstellen",
 };
 
-export const RVF_LAYERS_NAMES = {
+export const LAYERS_NAMES = {
   bikeFrelo: "fahrradfrelo",
   bikeOthers: "fahrradandere",
   cargobikeFrelo: "cargobikefrelo",
@@ -60,37 +63,35 @@ export const RVF_LAYERS_NAMES = {
   carGrf: "grueneflotte",
   carNatur: "naturenergie",
   carOthers: "autoandere",
-  echtzeit: LAYER_NAME_REALTIME,
   eroller: "e-roller",
-  haltestellen: LAYER_NAME_STATIONS,
-  liniennetz: "liniennetz",
-  meldungen: LAYER_NAME_NOTIFICATION,
+  linesnetworkplan: LAYER_NAME_LINESNETWORKPLAN,
   mitfahrpunkte: "mitfahrpunkte",
+  notifications: LAYER_NAME_NOTIFICATIONS,
   pois: "pois",
+  realtime: LAYER_NAME_REALTIME,
+  stations: LAYER_NAME_STATIONS,
   tarifzonen: "tarifzonen",
   verkaufsstellen: "verkaufsstellen",
 };
 
-export const DEFAULT_QUERYABLE_LAYERS = Object.values(RVF_LAYERS_NAMES)
-  .filter((name) => {
+export const DEFAULT_QUERYABLE_LAYERS = Object.values(LAYERS_NAMES).filter(
+  (name) => {
     return ![
-      RVF_LAYERS_NAMES.haltestellen,
-      RVF_LAYERS_NAMES.mitfahrpunkte,
-      RVF_LAYERS_NAMES.pois,
-      RVF_LAYERS_NAMES.tarifzonen,
+      LAYERS_NAMES.mitfahrpunkte,
+      LAYERS_NAMES.pois,
+      LAYERS_NAMES.stations,
+      LAYERS_NAMES.tarifzonen,
     ].includes(name);
-  })
-  .toString();
-
-export const LAYERS_WITH_LINK = Object.values(RVF_LAYERS_NAMES)
-  .filter((name) => {
-    return (
-      name !== RVF_LAYERS_NAMES.tarifzonen &&
-      name !== RVF_LAYERS_NAMES.pois &&
-      name !== RVF_LAYERS_NAMES.echtzeit
-    );
-  })
-  .toString();
+  },
+);
+
+export const LAYERS_WITH_LINK = Object.values(LAYERS_NAMES).filter((name) => {
+  return (
+    name !== LAYERS_NAMES.tarifzonen &&
+    name !== LAYERS_NAMES.pois &&
+    name !== LAYERS_NAMES.realtime
+  );
+});
 
 export const WFS_CARGO_BIKE_TYPE = "sharing_stations_cargo_bicycle";
 export const WFS_CAR_TYPE = "sharing_stations_car";
@@ -128,21 +129,21 @@ export const API_REQUEST_FEATURE_TYPE = {
 };
 
 export const TITLE_BY_FEED_ID = {
-  callabike_ice: RVF_LAYERS_TITLES.fahrrad,
-  flinkster_carsharing: RVF_LAYERS_TITLES.auto,
-  "gruene-flotte_freiburg": RVF_LAYERS_TITLES.auto,
-  lastenvelo_fr: RVF_LAYERS_TITLES.cargobike,
-  naturenergie_sharing: RVF_LAYERS_TITLES.auto,
-  nextbike_df: RVF_LAYERS_TITLES.fahrrad,
-  yoio_freiburg: RVF_LAYERS_TITLES.eroller,
-  zeus_freiburg: RVF_LAYERS_TITLES.eroller,
+  callabike_ice: LAYERS_TITLES.fahrrad,
+  flinkster_carsharing: LAYERS_TITLES.auto,
+  "gruene-flotte_freiburg": LAYERS_TITLES.auto,
+  lastenvelo_fr: LAYERS_TITLES.cargobike,
+  naturenergie_sharing: LAYERS_TITLES.auto,
+  nextbike_df: LAYERS_TITLES.fahrrad,
+  yoio_freiburg: LAYERS_TITLES.eroller,
+  zeus_freiburg: LAYERS_TITLES.eroller,
 };
 
 export const TITLE_BY_CATEGORY = {
-  "Bike Sharing": RVF_LAYERS_TITLES.fahrrad,
-  "Cargo Bike Sharing": RVF_LAYERS_TITLES.cargobike,
-  "Car Sharing": RVF_LAYERS_TITLES.auto,
-  "E-Scooter": RVF_LAYERS_TITLES.eroller,
+  "Bike Sharing": LAYERS_TITLES.fahrrad,
+  "Cargo Bike Sharing": LAYERS_TITLES.cargobike,
+  "Car Sharing": LAYERS_TITLES.auto,
+  "E-Scooter": LAYERS_TITLES.eroller,
 };
 
 export const PROVIDER_BY_FEED_ID = {

package/src/utils/hooks/useInitialLayersVisiblity.tsx

@@ -1,8 +1,8 @@
+import { getLayersAsFlatArray } from "mobility-toolbox-js/ol";
 import { unByKey } from "ol/Observable";
 import { useEffect } from "preact/hooks";
 
 import applyInitialLayerVisibility from "../applyInitialLayerVisibility";
-import getLayersAsFlatArray from "../getLayersAsFlatArray";
 
 import type { Map } from "ol";
 

package/src/utils/hooks/useLayerConfig.tsx

@@ -1,4 +1,4 @@
-import { RVF_LAYERS_TITLES } from "../constants";
+import { LAYERS_TITLES } from "../constants";
 
 import useLayersConfig from "./useLayersConfig";
 
@@ -10,7 +10,7 @@ function useLayerConfig(layerName: string) {
   // Set defaultstyle if not present in layersconfig
   const layerConfig = layersConfig[layerName] || ({} as LayerConfig);
   if (!layerConfig.title) {
-    layerConfig.title = RVF_LAYERS_TITLES[layerName];
+    layerConfig.title = LAYERS_TITLES[layerName];
   }
 
   return layerConfig;

package/src/utils/hooks/useLayersConfig.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "preact/hooks";
 
-import { RVF_LAYERS_NAMES, RVF_LAYERS_TITLES } from "../constants";
+import { LAYERS_NAMES, LAYERS_TITLES } from "../constants";
 
 import useMapContext from "./useMapContext";
 
@@ -23,9 +23,9 @@ function useLayersConfig() {
       const config = JSON.parse(layersconfig || "{}");
 
       // Set the default title if not present in layersconfig
-      Object.values(RVF_LAYERS_NAMES).forEach((name) => {
+      Object.values(LAYERS_NAMES).forEach((name) => {
         config[name] = {
-          title: RVF_LAYERS_TITLES[name],
+          title: LAYERS_TITLES[name],
           ...(config[name] || {}),
         };
       });