@geops/rvf-mobility-web-component 0.1.127 → 0.1.129

package/src/RvfOpenStrikeNotification/RvfOpenStrikeNotification.tsx

@@ -1,120 +0,0 @@
-// import { fromExtent } from "ol/geom/Polygon";
-import { unByKey } from "ol/Observable";
-import { memo } from "preact/compat";
-import { useEffect } from "preact/hooks";
-
-// import { MAX_EXTENT } from "../utils/constants";
-import useMapContext from "../utils/hooks/useMapContext";
-
-import type { EventsKey } from "ol/events";
-
-function RvfOpenStrikeNotification() {
-  const { notificationsLayer, setNotificationId } = useMapContext();
-
-  useEffect(() => {
-    const keys: EventsKey[] = [];
-
-    if (!notificationsLayer) {
-      return;
-    }
-
-    keys.push(
-      notificationsLayer.on("propertychange", (evt) => {
-        if (
-          evt.target &&
-          evt.key === "situations" &&
-          evt.oldValue?.length === 0
-        ) {
-          // console.log(
-          //   "RvfOpenStrikeNotification detected situations change",
-          //   evt,
-          // );
-          const l = evt.target;
-          // Set the rvf region situations to streik
-          const situations = l.get("situations") || [];
-          const newIndex = situations.findIndex((sit) => {
-            return sit.reasons?.[0]?.name === "Streik, Arbeitskampfmaßnahmen";
-          });
-
-          if (newIndex !== -1) {
-            // situations[newIndex].publications[0].publicationLines[0] = {
-            //   category: "DISRUPTION",
-            //   hasIcon: true,
-            //   lines: [
-            //     {
-            //       geometry: [
-            //         {
-            //           geom: {
-            //             coordinates: fromExtent(MAX_EXTENT).getCoordinates(),
-            //             type: "Polygon",
-            //           },
-            //           graph: "osm",
-            //         },
-            //       ],
-            //       name: "Freiburg Region",
-            //     },
-            //   ],
-            // };
-            setNotificationId(situations[newIndex].id);
-          }
-
-          // const mbMap = l.maplibreLayer?.mapLibreMap;
-          // const styleLayer = mbMap?.getLayer("moco-region-polygon");
-          // if (!styleLayer) {
-          //   mbMap.addLayer({
-          //     filter: [
-          //       "all",
-          //       ["==", ["get", "graph"], "osm"],
-          //       ["==", ["get", "isPublished"], true],
-          //       [
-          //         "==",
-          //         "Streik, Arbeitskampfmaßnahmen",
-          //         ["get", "name", ["at", 0, ["get", "reasons"]]],
-          //       ],
-          //       ["==", ["geometry-type"], "Polygon"],
-          //       [
-          //         "any",
-          //         [
-          //           "all",
-          //           ["!=", ["get", "serviceConditionGroup"], "DISRUPTION"],
-          //           ["!=", ["get", "severityGroup"], "HIGH"],
-          //         ],
-          //         ["==", ["get", "isAffected"], false],
-          //       ],
-          //     ],
-          //     id: "moco-region-polygon",
-          //     layout: {
-          //       "icon-allow-overlap": true,
-          //       "icon-image": "moco_blitz_rot",
-          //       visibility: "visible",
-          //     },
-          //     maxzoom: 24,
-          //     metadata: {
-          //       "general.filter": "moco",
-          //     },
-          //     minzoom: 0,
-          //     paint: {},
-          //     source: "moco",
-          //     type: "symbol",
-          //   });
-          // }
-
-          // console.log(
-          //   `Streik situation index: `,
-          //   situations[newIndex].id,
-          //   situations[newIndex],
-          // );
-          return;
-        }
-      }),
-    );
-
-    return () => {
-      unByKey(keys);
-    };
-  }, [notificationsLayer, setNotificationId]);
-
-  return null;
-}
-
-export default memo(RvfOpenStrikeNotification);

package/src/RvfOpenStrikeNotification/index.tsx

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

package/src/RvfOverlayHeader/RvfOverlayHeader.tsx

@@ -1,43 +0,0 @@
-import { memo } from "preact/compat";
-import { twMerge } from "tailwind-merge";
-
-import Cancel from "../icons/Cancel";
-import IconButton from "../ui/IconButton";
-
-import type { HTMLAttributes, PreactDOMAttributes } from "preact";
-
-export type RvfOverlayHeaderProps = {
-  onClose?: () => void;
-  title?: React.ReactNode;
-} & HTMLAttributes<HTMLDivElement> &
-  PreactDOMAttributes;
-
-function RvfOverlayHeader({
-  children,
-  className,
-  onClose,
-  title,
-  ...props
-}: RvfOverlayHeaderProps) {
-  return (
-    <div
-      className={twMerge(
-        `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}
-    >
-      {/* We set text-base so the clamp works on overlay container, not main */}
-      {children || <span className={"text-base font-bold"}>{title}</span>}
-      {onClose && (
-        <IconButton className={"!size-[32px] border-none"} onClick={onClose}>
-          <Cancel />
-        </IconButton>
-      )}
-    </div>
-  );
-}
-
-export default memo(RvfOverlayHeader);

package/src/RvfOverlayHeader/index.tsx

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

package/src/RvfPoisLayer/RvfPoisLayer.tsx

@@ -1,48 +0,0 @@
-import { MaplibreStyleLayer } from "mobility-toolbox-js/ol";
-import { memo } from "preact/compat";
-import { useEffect, useMemo } from "preact/hooks";
-
-import { 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();
-
-  const layer = useMemo(() => {
-    if (!baseLayer) {
-      return null;
-    }
-    return new MaplibreStyleLayer({
-      layersFilter: ({ metadata }) => {
-        return metadata?.["mapset.filter"] === "mapset_poi";
-      },
-      maplibreLayer: baseLayer,
-      name: LAYERS_NAMES.pois,
-      visible: false,
-      ...(props || {}),
-    });
-  }, [baseLayer, props]);
-
-  useEffect(() => {
-    setPoisLayer(layer);
-  }, [layer, setPoisLayer]);
-
-  useEffect(() => {
-    if (!map || !layer) {
-      return;
-    }
-
-    map.addLayer(layer);
-    return () => {
-      map.removeLayer(layer);
-    };
-  }, [map, layer]);
-
-  return null; // <RegisterForSelectFeaturesOnClick />;
-}
-
-export default memo(RvfPoisLayer);

package/src/RvfPoisLayer/index.tsx

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

package/src/RvfRadioButton/RvfRadioButton.tsx

@@ -1,16 +0,0 @@
-import type { JSX } from "preact";
-
-export type RvfRadioButtonProps =
-  {} & JSX.InputHTMLAttributes<HTMLInputElement>;
-
-function RvfRadioButton(props: RvfRadioButtonProps) {
-  return (
-    <input
-      className="peer border-grey accent-red mr-2 size-[20px] rounded-full border-2"
-      {...props}
-      type="radio"
-    />
-  );
-}
-
-export default RvfRadioButton;

package/src/RvfRadioButton/index.tsx

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

package/src/RvfRealtimeLayer/RvfRealtimeLayer.tsx

@@ -1,77 +0,0 @@
-import { memo } from "preact/compat";
-
-import RealtimeLayer from "../RealtimeLayer/RealtimeLayer";
-import fullTrajectoryStyle from "../utils/fullTrajectoryStyle";
-import getBgColor from "../utils/getBgColor";
-import { getRadius } from "../utils/getRadius";
-import getTextColor from "../utils/getTextColor";
-import realtimeRVFStyle from "../utils/realtimeRVFStyle";
-
-import type { RealtimeLayerOptions } from "mobility-toolbox-js/ol";
-import type { RealtimeTrajectory, ViewState } from "mobility-toolbox-js/types";
-
-const PRIORITY_FROM_TYPE = {
-  bus: 25,
-  coach: 15,
-  train: 30,
-  tram: 20,
-};
-
-const defaultProps: Partial<RealtimeLayerOptions> = {
-  fullTrajectoryStyle: fullTrajectoryStyle,
-  getMotsByZoom: (z: number) => {
-    if (z < 9) {
-      return ["rail"];
-    }
-    return null;
-  },
-  sort: (
-    { properties: { delay: delayA, type: typeA } },
-    { properties: { delay: delayB, type: typeB } },
-  ) => {
-    if (typeA !== typeB) {
-      if (PRIORITY_FROM_TYPE[typeA] < PRIORITY_FROM_TYPE[typeB]) {
-        return -1;
-      }
-      return 1;
-    }
-
-    if (delayA === delayB) {
-      return 0;
-    }
-
-    if (delayA < delayB) {
-      return -1;
-    }
-    return 1;
-  },
-  style: realtimeRVFStyle,
-  styleOptions: {
-    getColor: (trajectory?: RealtimeTrajectory): string => {
-      return getBgColor(
-        trajectory?.properties?.type,
-        trajectory?.properties?.line,
-      );
-    },
-    getMaxRadiusForStrokeAndDelay: () => {
-      return 4;
-    },
-    getMaxRadiusForText: () => {
-      return 8;
-    },
-    getRadius: (
-      trajectory?: RealtimeTrajectory,
-      viewState?: ViewState,
-    ): number => {
-      return getRadius(trajectory?.properties?.type, viewState?.zoom);
-    },
-    getTextColor: (trajectory?: RealtimeTrajectory): string => {
-      return getTextColor(trajectory?.properties?.type);
-    },
-  },
-};
-function RvfRealtimeLayer(props: Partial<RealtimeLayerOptions>) {
-  return <RealtimeLayer {...defaultProps} {...props} />;
-}
-
-export default memo(RvfRealtimeLayer);

package/src/RvfRealtimeLayer/index.tsx

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

package/src/RvfRouteIcon/RvfRouteIcon.tsx

@@ -1,10 +0,0 @@
-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

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

package/src/RvfSearch/RvfSearch.tsx

@@ -1,34 +0,0 @@
-import { memo } from "preact/compat";
-import { useCallback } from "preact/hooks";
-
-import StopsSearch from "../StopsSearch";
-import { RVF_EXTENT_4326 } from "../utils/constants";
-import useFit from "../utils/hooks/useFit";
-import useMapContext from "../utils/hooks/useMapContext";
-
-import type { StopsSearchProps } from "../StopsSearch/StopsSearch";
-
-function RvfSearch(props: Partial<StopsSearchProps>) {
-  const { apikey, stopsurl } = useMapContext();
-  const fit = useFit();
-
-  const onSelect = useCallback(
-    (selected) => {
-      if (selected) {
-        return fit.current?.(selected);
-      }
-    },
-    [fit],
-  );
-
-  return (
-    <StopsSearch
-      apikey={apikey}
-      bbox={RVF_EXTENT_4326.join(",")}
-      onselect={onSelect}
-      url={stopsurl}
-      {...props}
-    />
-  );
-}
-export default memo(RvfSearch);

package/src/RvfSearch/index.tsx

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

package/src/RvfSelect/RvfSelect.tsx

@@ -1,24 +0,0 @@
-import ArrowDown from "../icons/ArrowDown";
-
-import type { HTMLAttributes, PreactDOMAttributes } from "preact";
-
-export type RvfSelectProps = {
-  className?: string;
-} & HTMLAttributes<HTMLSelectElement> &
-  PreactDOMAttributes;
-
-function RvfSelect({ 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 RvfSelect;

package/src/RvfSelect/index.tsx

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

package/src/RvfSelectedFeatureHighlightLayer/RvfSelectedFeatureHighlightLayer.tsx

@@ -1,101 +0,0 @@
-import GeoJSON from "ol/format/GeoJSON";
-import { useEffect, useMemo } from "preact/hooks";
-
-import { EMPTY_FEATURE_COLLECTION, SOURCE_SELECT } from "../utils/constants";
-import useMapContext from "../utils/hooks/useMapContext";
-
-const geojson = new GeoJSON({
-  dataProjection: "EPSG:4326",
-  featureProjection: "EPSG:3857",
-});
-
-function RvfSelectedFeatureHighlightLayer() {
-  const { baseLayer } = useMapContext();
-  const { selectedFeature } = useMapContext();
-
-  // const layer = useMemo(() => {
-  //   const layer = new VectorLayer({
-  //     source: new Vector(),
-  //     style: new Style({
-  //       image: new Circle({
-  //         fill: null,
-  //         radius: 15,
-  //         stroke: new Stroke({
-  //           color: "red",
-  //           width: 3,
-  //         }),
-  //       }),
-  //     }),
-  //   });
-  //   return layer;
-  // }, []);
-
-  const mbMap = useMemo(() => {
-    return baseLayer?.mapLibreMap;
-  }, [baseLayer?.mapLibreMap]);
-
-  useEffect(() => {
-    const vectorTileFeature = selectedFeature?.get("vectorTileFeature");
-    selectedFeature?.set("selected", true);
-    let source;
-    if (selectedFeature) {
-      source = mbMap?.getSource(SOURCE_SELECT);
-      const feature = selectedFeature.clone();
-      feature.setStyle(null);
-
-      // Special highlight for the sharing mobility layer
-      if (
-        vectorTileFeature ||
-        // feature.get("station_id") ||
-        // feature.get("vehicle_id") ||
-        // feature.get("cluster_id") ||
-        feature.get("cluster_id")
-      ) {
-        mbMap?.setFeatureState(vectorTileFeature, {
-          hover: true,
-        });
-        if (feature.get("cluster_id")) {
-          // Maybe not the most robust solutions, so I set scooter by default in case something changes in the style.
-          feature.set(
-            "mot",
-            feature.get("vectorTileFeature")?.source?.split("_")?.pop() ||
-              "scooter",
-          );
-          feature.set("provider_name", "");
-          feature.set("num_vehicles_available", feature.get("point_count"));
-        }
-
-        if (!feature.get("disruption_type")) {
-          try {
-            const wrote = geojson.writeFeatureObject(feature);
-            source?.setData(wrote);
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          } catch (error) {
-            // console.error(e);
-          }
-        }
-      }
-    }
-
-    return () => {
-      source?.setData(EMPTY_FEATURE_COLLECTION);
-      // layer?.getSource().clear();
-      selectedFeature?.set("selected", false);
-      if (vectorTileFeature) {
-        mbMap?.setFeatureState(vectorTileFeature, {
-          hover: false,
-        });
-      }
-    };
-  }, [mbMap, selectedFeature]);
-
-  // useEffect(() => {
-  //   layer?.setMap(map);
-  //   return () => {
-  //     layer?.setMap(null);
-  //   };
-  // }, [layer, map]);
-
-  return null;
-}
-export default RvfSelectedFeatureHighlightLayer;

package/src/RvfSelectedFeatureHighlightLayer/index.tsx

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

package/src/RvfSellingPointsLayer/RvfSellingPointsLayer.tsx

@@ -1,67 +0,0 @@
-import { MaplibreStyleLayer } from "mobility-toolbox-js/ol";
-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 { LAYERS_NAMES } from "../utils/constants";
-import useI18n from "../utils/hooks/useI18n";
-import useLayerConfig from "../utils/hooks/useLayerConfig";
-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 { baseLayer, map } = useMapContext();
-  const { setSellingPointsLayer } = useRvfContext();
-  const layerConfig = useLayerConfig(LAYERS_NAMES.verkaufsstellen);
-  const { t } = useI18n();
-
-  const layer = useMemo(() => {
-    if (!baseLayer) {
-      return null;
-    }
-    return new MaplibreStyleLayer({
-      layersFilter: ({ metadata }) => {
-        return metadata?.["general.filter"] === "selling_points";
-      },
-      maplibreLayer: baseLayer,
-      name: LAYERS_NAMES.verkaufsstellen,
-      ...(props || {}),
-      layerTreeTitleRenderFunc: () => {
-        return (
-          <div className="flex flex-0 items-center justify-between gap-2">
-            {t(layerConfig?.title)}
-            <span className="flex items-center">
-              <Automat />
-              <InPerson />
-              <Video />
-            </span>
-          </div>
-        );
-      },
-      title: layerConfig?.title,
-    });
-  }, [baseLayer, props, layerConfig, t]);
-
-  useEffect(() => {
-    setSellingPointsLayer(layer);
-  }, [layer, setSellingPointsLayer]);
-
-  useEffect(() => {
-    if (!map || !layer) {
-      return;
-    }
-
-    map.addLayer(layer);
-    return () => {
-      map.removeLayer(layer);
-    };
-  }, [map, layer]);
-
-  return null; // <RegisterForSelectFeaturesOnClick />;
-}
-
-export default memo(RvfSellingPointsLayer);

package/src/RvfSellingPointsLayer/index.tsx

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