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

package/src/DebugStop/index.tsx

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

package/src/Departure/Departure.tsx

@@ -1,57 +0,0 @@
-import { memo, useMemo } from "preact/compat";
-
-import DebugDeparture from "../DebugDeparture";
-import RouteIcon from "../RouteIcon";
-import getHoursAndMinutes from "../utils/getHoursAndMinutes";
-import { DepartureContext } from "../utils/hooks/useDeparture";
-import useMapContext from "../utils/hooks/useMapContext";
-
-import type { RealtimeDeparture } from "mobility-toolbox-js/types";
-
-export interface DepartureProps {
-  departure: RealtimeDeparture;
-  index: number;
-}
-
-function Departure({ departure, index, ...props }: DepartureProps) {
-  const { realtimeLayer, setFeaturesInfos, setStationId, setTrainId } =
-    useMapContext();
-
-  const departureState = useMemo(() => {
-    return { departure, index };
-  }, [departure, index]);
-
-  return (
-    <DepartureContext.Provider value={departureState}>
-      <button
-        className="w-full cursor-pointer border-b"
-        onClick={() => {
-          setFeaturesInfos(undefined);
-          setStationId();
-          realtimeLayer?.setVisible(true);
-          setTrainId(departure.train_id);
-        }}
-        {...props}
-      >
-        <div
-          className="gap-4 py-4"
-          style={{
-            alignItems: "center",
-            display: "flex",
-            overflow: "hidden",
-          }}
-        >
-          <div className="pl-4">
-            <RouteIcon departure={departure} />
-          </div>
-          <div className="grow text-left">
-            {[...new Set(departure.to)].join("/")}
-          </div>
-          <div className="pr-4">{getHoursAndMinutes(departure.time)}</div>
-        </div>
-      </button>
-      <DebugDeparture />
-    </DepartureContext.Provider>
-  );
-}
-export default memo(Departure);

package/src/Departure/index.tsx

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

package/src/EmbedNavigation/DragPanWarning.ts

@@ -1,133 +0,0 @@
-import { Control } from "ol/control";
-import { DragPan } from "ol/interaction";
-import { unByKey } from "ol/Observable";
-
-import type { Map, MapBrowserEvent } from "ol";
-import type { Options } from "ol/control/Control";
-import type { EventsKey } from "ol/events";
-
-export type DragPanWarningOptions = {
-  className?: string;
-  element?: HTMLElement;
-} & Options;
-
-class DragPanWarning extends Control {
-  dragPan?: DragPan;
-
-  icon: HTMLDivElement;
-
-  onPointerDragRef?: EventsKey;
-
-  text: HTMLParagraphElement;
-
-  constructor(options: DragPanWarningOptions = {}) {
-    let element = options.element;
-
-    if (!element) {
-      element = document.createElement("div");
-      element.className =
-        options.className !== undefined
-          ? options.className
-          : "ol-drag-pan-warning";
-    }
-
-    element.style.display = "none";
-    element.style.pointerEvents = "auto";
-
-    super({
-      element,
-      render: options.render,
-      target: options.target,
-    });
-
-    if (!options.element) {
-      this.icon = document.createElement("div");
-      this.icon.className = `${element.className}-icon`;
-
-      // sbb icons: sbb/two-finger-tap-large.svg';
-      this.icon.innerHTML = `
-      <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
-        <path fill="none" stroke="currentColor" stroke-width="2" d="M22.999,25 L22.997,13.002 C22.997,11.896 23.893,11 24.999,11 C26.105,11 27.001,11.896 27.001,13.002 L26.999,26.002 M31,25.003 C31,23.897 31.896,23.001 33.002,23.001 C34.11,23.001 35.006,23.897 35.006,25.003 C35.006,25.003 35,26.125 35,32.001 C35,37.875 33.2,41.001 33.2,41.001 L19,41.001 C19,41.001 12.21,29.483 11.586,28.419 C10.962,27.355 10.804,26.369 11.586,25.587 C12.37,24.805 13.636,24.805 14.418,25.587 L18.998,30.169 L19,30.169 L19,25.001 L18.996,15.003 C18.996,13.897 19.894,13.001 21,13.001 C22.106,13.001 23.002,13.897 23.002,15.003 L23,26.015 M26.9942,22.997 C26.9942,21.891 27.8902,20.995 28.9962,20.995 C30.1042,20.995 31.0002,21.891 31.0002,22.997 L31.0002,26.001 M30,16.3046 C30.632,15.3606 31,14.2246 31,13.0006 C31,9.6846 28.314,7.0006 25,7.0006 C23.208,7.0006 21.616,7.8026 20.518,9.0486 C17.432,9.2986 15,11.8506 15,15.0006 C15,16.2166 15.368,17.3426 15.988,18.2866"/>
-      </svg>
-    `;
-      this.element.appendChild(this.icon);
-
-      this.text = document.createElement("p");
-      this.text.className = `${element.className}-text`;
-      this.text.innerHTML = "Benutzen Sie 2 Finger um die Karte zu bedienen.";
-      this.element.appendChild(this.text);
-    }
-
-    this.dragPan = undefined;
-    this.onPointerDragRef = undefined;
-    this.onPointerDrag = this.onPointerDrag.bind(this);
-    this.onTouchEnd = this.onTouchEnd.bind(this);
-  }
-
-  onPointerDrag(event: MapBrowserEvent<PointerEvent>) {
-    // Show the warning on next pointerdrag events.
-    if (event.activePointers?.length !== 1) {
-      return true;
-    }
-    this.element.style.display = "flex";
-    document.addEventListener("touchend", this.onTouchEnd, { once: true });
-    return false;
-  }
-
-  onTouchEnd() {
-    unByKey(this.onPointerDragRef);
-    this.element.style.display = "none";
-  }
-
-  setMap(map: Map) {
-    super.setMap(map);
-    document.removeEventListener("touchend", this.onTouchEnd);
-    unByKey(this.onPointerDragRef);
-
-    if (map) {
-      const viewport = map.getViewport();
-
-      // We allow default scroll behavior for touch events.
-      viewport.style.touchAction = "pan-x pan-y";
-
-      // Deactivate drag pan only on touch events.
-      this.dragPan = map
-        .getInteractions()
-        .getArray()
-        .find((interaction) => {
-          return interaction instanceof DragPan;
-        });
-
-      if (!this.dragPan) {
-        // eslint-disable-next-line no-console
-        console.error(
-          "Impossible to find the DragPan interaction, DragPanWarning will not work as expected.",
-        );
-        return;
-      }
-
-      this.listenerKeys.push(
-        // @ts-expect-error - we need to listen to pointerdown events
-        map.on("pointerdown", (evt: MapBrowserEvent<PointerEvent>) => {
-          document.removeEventListener("touchend", this.onTouchEnd);
-
-          if (
-            evt.originalEvent.pointerType !== "touch" ||
-            // @ts-expect-error - condition_ is a private method
-            !this.dragPan?.condition_(evt)
-          ) {
-            this.element.style.display = "none";
-            return true;
-          }
-
-          this.onPointerDragRef = map.on("pointerdrag", this.onPointerDrag);
-
-          return true;
-        }),
-      );
-      this.element.addEventListener("click", this.onTouchEnd);
-    }
-  }
-}
-
-export default DragPanWarning;

package/src/EmbedNavigation/EmbedNavigation.tsx

@@ -1,89 +0,0 @@
-import { MouseWheelZoom } from "ol/interaction";
-import { useEffect, useState } from "preact/hooks";
-import { twMerge } from "tailwind-merge";
-
-import TouchFingers from "../icons/TouchFingers";
-import useI18n from "../utils/hooks/useI18n";
-import useMapContext from "../utils/hooks/useMapContext";
-
-import DragPanWarning from "./DragPanWarning";
-
-import type { HTMLAttributes, PreactDOMAttributes } from "preact";
-
-export type EmbedNavigationProps = {
-  elementClassName?: string;
-  iconProps?: React.SVGProps<SVGSVGElement>;
-} & HTMLAttributes<HTMLDivElement> &
-  PreactDOMAttributes;
-
-function EmbedNavigation({
-  children,
-  elementClassName,
-  iconProps,
-}: EmbedNavigationProps) {
-  const { t } = useI18n();
-  const { isEmbed, map } = useMapContext();
-  const [target, setTarget] = useState(null);
-  const [element, setElement] = useState(null);
-
-  useEffect(() => {
-    let dragPanWarningControl = null;
-
-    if (!map || !target || !isEmbed || !element) {
-      return;
-    }
-
-    // Deactivates mouse wheel zoom
-    map.getInteractions().forEach((interaction) => {
-      if (interaction instanceof MouseWheelZoom) {
-        interaction.setActive(false);
-      }
-    });
-
-    dragPanWarningControl = new DragPanWarning({
-      element: element,
-      target: target,
-    });
-    map.addControl(dragPanWarningControl);
-
-    return () => {
-      if (dragPanWarningControl) {
-        map.removeControl(dragPanWarningControl);
-      }
-
-      // Deactivates mouse wheel zoom
-      map.getInteractions().forEach((interaction) => {
-        if (interaction instanceof MouseWheelZoom) {
-          interaction.setActive(true);
-        }
-      });
-    };
-  }, [map, target, isEmbed, element]);
-  return (
-    <div
-      ref={(node) => {
-        return setTarget(node);
-      }}
-    >
-      <div
-        className={twMerge(
-          "absolute inset-0 z-100000 flex flex-col items-center justify-center bg-black/60 p-6 font-bold text-white",
-          elementClassName,
-          "hidden",
-        )}
-        ref={(node) => {
-          return setElement(node);
-        }}
-      >
-        {children || (
-          <>
-            <TouchFingers height="48" width="48" {...iconProps}></TouchFingers>
-            <p>{t("use_2_fingers")}</p>
-          </>
-        )}
-      </div>
-    </div>
-  );
-}
-
-export default EmbedNavigation;

package/src/EmbedNavigation/index.js

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

package/src/EmbedNavigation/index.tsx

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

package/src/ExportMenu/ExportMenu.tsx

@@ -1,114 +0,0 @@
-import { memo, useId, useState } from "preact/compat";
-
-import Button from "../ui/Button";
-import Checkbox from "../ui/Checkbox";
-import Select from "../ui/Select";
-import { LAYER_PROP_IS_EXPORTING, MAX_EXTENT } from "../utils/constants";
-import exportPdf from "../utils/exportPdf";
-import getAllLayers from "../utils/getAllLayers";
-import useI18n from "../utils/hooks/useI18n";
-import useMapContext from "../utils/hooks/useMapContext";
-
-import type { HTMLAttributes, PreactDOMAttributes } from "preact";
-
-export type ExportMenuButtonProps = HTMLAttributes<HTMLDivElement> &
-  PreactDOMAttributes;
-
-const formats = ["A4", "A3", "A1", "A0"];
-
-let prevRealtimeLayerVisibility = false;
-
-function ExportMenu({ ...props }: ExportMenuButtonProps) {
-  const { map, realtimeLayer } = useMapContext();
-  const [useMaxExtent, setUseMaxExtent] = useState(false);
-  const [format, setFormat] = useState<string>(formats[0]);
-  const checkboxId = useId();
-  const selectId = useId();
-  const [isExporting, setIsExporting] = useState(false);
-  const [isExportingError, setIsExportingError] = useState(false);
-  const { t } = useI18n();
-  return (
-    <div {...props}>
-      {/* <!-- Content --> */}
-      <div className="flex flex-1 flex-col gap-4">
-        <div className={"flex flex-wrap items-center gap-2"}>
-          <Checkbox
-            checked={useMaxExtent}
-            id={checkboxId}
-            onChange={() => {
-              return setUseMaxExtent(!useMaxExtent);
-            }}
-          />
-          <label htmlFor={checkboxId}>{t("export_all_region")}</label>
-        </div>
-        <div className={"flex flex-wrap items-center gap-2"}>
-          <label htmlFor={selectId}>{t("export_format_title")}:</label>
-          <Select
-            className={"w-24"}
-            id={selectId}
-            onChange={(evt) => {
-              setFormat((evt.target as HTMLSelectElement).value);
-            }}
-          >
-            {formats.map((formatt) => {
-              return <option key={formatt}>{formatt}</option>;
-            })}
-          </Select>
-        </div>
-      </div>
-      {/* <!-- Footer --> */}
-      <div>
-        <Button
-          disabled={isExporting}
-          // eslint-disable-next-line @typescript-eslint/no-misused-promises
-          onClick={async () => {
-            setIsExportingError(false);
-            setIsExporting(true);
-            const result = await exportPdf(
-              map,
-              { format },
-              {
-                maxExtent: useMaxExtent ? MAX_EXTENT : undefined,
-
-                onAfter: (mapp, layers) => {
-                  if (
-                    realtimeLayer &&
-                    prevRealtimeLayerVisibility !== realtimeLayer?.getVisible()
-                  ) {
-                    realtimeLayer.setVisible(prevRealtimeLayerVisibility);
-                  }
-                  getAllLayers(layers).forEach((layer) => {
-                    layer.set(LAYER_PROP_IS_EXPORTING, false);
-                  });
-                  mapp.set(LAYER_PROP_IS_EXPORTING, false);
-                },
-                onBefore: (mapp, layers) => {
-                  mapp.set(LAYER_PROP_IS_EXPORTING, true);
-                  if (realtimeLayer) {
-                    prevRealtimeLayerVisibility = realtimeLayer.getVisible();
-                    if (realtimeLayer.getVisible()) {
-                      realtimeLayer.setVisible(false);
-                    }
-                  }
-                  getAllLayers(layers).forEach((layer) => {
-                    layer.set(LAYER_PROP_IS_EXPORTING, true);
-                  });
-                },
-              },
-            );
-            setTimeout(() => {
-              setIsExporting(false);
-              setIsExportingError(!result);
-            }, 1000);
-          }}
-        >
-          {isExporting && t("exporting")}
-          {!isExporting && isExportingError && t("error")}
-          {!isExporting && !isExportingError && t("download")}
-        </Button>
-      </div>
-    </div>
-  );
-}
-
-export default memo(ExportMenu);

package/src/ExportMenu/index.tsx

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

package/src/ExportMenuButton/ExportMenuButton.tsx

@@ -1,33 +0,0 @@
-import { memo } from "preact/compat";
-import { useCallback } from "preact/hooks";
-
-import Download from "../icons/Download";
-import IconButton from "../ui/IconButton";
-import useI18n from "../utils/hooks/useI18n";
-import useMapContext from "../utils/hooks/useMapContext";
-
-import type { IconButtonProps } from "../ui/IconButton/IconButton";
-
-export type ExportMenuButtonProps = IconButtonProps;
-
-function ExportMenuButton({ ...props }: ExportMenuButtonProps) {
-  const { isExportMenuOpen, setIsExportMenuOpen } = useMapContext();
-  const { t } = useI18n();
-
-  const onClick = useCallback(() => {
-    setIsExportMenuOpen(!isExportMenuOpen);
-  }, [isExportMenuOpen, setIsExportMenuOpen]);
-
-  return (
-    <IconButton
-      title={t("print_menu_title")}
-      {...props}
-      onClick={onClick}
-      selected={isExportMenuOpen}
-    >
-      <Download />
-    </IconButton>
-  );
-}
-
-export default memo(ExportMenuButton);

package/src/ExportMenuButton/index.tsx

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

package/src/FeatureDetails/FeatureDetails.tsx

@@ -1,62 +0,0 @@
-import { memo } from "preact/compat";
-
-import LinesNetworkPlanDetails from "../LinesNetworkPlanDetails";
-import NotificationDetails from "../NotificationDetails";
-import RouteSchedule from "../RouteSchedule";
-import Station from "../Station";
-import useMapContext from "../utils/hooks/useMapContext";
-
-import type { FeatureInfo } from "mobility-toolbox-js/common/typedefs";
-import type { Feature } from "ol";
-import type BaseLayer from "ol/layer/Base";
-
-const contentClassName = ""; //`h-full overflow-x-hidden text-base bg-white`;
-
-export interface FeatureDetailsProps {
-  feature?: Feature;
-  featuresInfo?: FeatureInfo;
-  layer?: BaseLayer;
-}
-
-/**
- * This component is repsonsible to display the details of a feature passed as prop.
- */
-function FeatureDetails({ feature, featuresInfo, layer }: FeatureDetailsProps) {
-  const {
-    linesIds,
-    linesNetworkPlanLayer,
-    notificationId,
-    notificationsLayer,
-    realtimeLayer,
-    stationId,
-    stationsLayer,
-    trainId,
-  } = useMapContext();
-
-  if (!layer) {
-    return null;
-  }
-
-  return (
-    <>
-      {!!realtimeLayer && layer === realtimeLayer && trainId && (
-        <RouteSchedule />
-      )}
-      {!!stationsLayer && layer === stationsLayer && stationId && <Station />}
-      {!!linesNetworkPlanLayer &&
-        layer === linesNetworkPlanLayer &&
-        linesIds && (
-          <LinesNetworkPlanDetails
-            className={contentClassName}
-            features={featuresInfo?.features || []}
-          />
-        )}
-      {!!notificationsLayer &&
-        layer === notificationsLayer &&
-        notificationId && (
-          <NotificationDetails className={contentClassName} feature={feature} />
-        )}
-    </>
-  );
-}
-export default memo(FeatureDetails);

package/src/FeatureDetails/index.ts

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

package/src/FeaturesInfosListener/FeaturesInfosListener.tsx

@@ -1,142 +0,0 @@
-import { useEffect } from "preact/hooks";
-
-import { LNP_LINE_ID_PROP } from "../utils/constants";
-import useMapContext from "../utils/hooks/useMapContext";
-
-/**
- * This component defines the behavior when user select or hover a queryable feature
- */
-function FeaturesInfosListener() {
-  const {
-    baseLayer,
-    featuresInfos,
-    featuresInfosHovered,
-    linesNetworkPlanLayer,
-    notificationsLayer,
-    realtimeLayer,
-    setLinesIds,
-    setSelectedFeature,
-    setSelectedFeatures,
-    setStationId,
-    setTrainId,
-    stationsLayer,
-    tenant,
-  } = useMapContext();
-
-  useEffect(() => {
-    // We want to call this use effect only when a hover happened
-    // and a query has been done not when the component is mounted
-    if (!featuresInfosHovered?.length) {
-      return;
-    }
-    const [realtimeFeature] =
-      featuresInfosHovered?.find((info) => {
-        return info.layer === realtimeLayer;
-      })?.features || [];
-
-    const [notificationFeature] =
-      featuresInfosHovered?.find((info) => {
-        return info.layer === notificationsLayer;
-      })?.features || [];
-
-    // We prioritize only symbol notifications, because we want to be able to click on trains on lines
-    const isSymbolNotification =
-      notificationFeature?.getGeometry()?.getType() === "Point";
-
-    const priorityFeature = isSymbolNotification
-      ? notificationFeature || realtimeFeature
-      : realtimeFeature || notificationFeature;
-
-    if (priorityFeature === realtimeFeature) {
-      realtimeLayer?.highlight(realtimeFeature);
-    } else {
-      realtimeLayer?.highlight(null);
-    }
-  }, [featuresInfosHovered, notificationsLayer, realtimeLayer]);
-
-  useEffect(() => {
-    // We want to call this use effect only when a click happened
-    // and a query has been done not when the component is mounted
-    if (!featuresInfos?.length) {
-      // Reinitialize selected features
-      setSelectedFeature(null);
-      setSelectedFeatures([]);
-      return;
-    }
-
-    const [realtimeFeature] =
-      featuresInfos?.find((info) => {
-        return info.layer === realtimeLayer;
-      })?.features || [];
-
-    const [notificationFeature] =
-      featuresInfos?.find((info) => {
-        return info.layer === notificationsLayer;
-      })?.features || [];
-
-    const [stationFeature] =
-      featuresInfos?.find((info) => {
-        return info.layer === stationsLayer;
-      })?.features || [];
-
-    // Find the line to highlight in the LNP layer
-    const linesFeatures =
-      featuresInfos?.find((featuresInfo) => {
-        return featuresInfo.layer === linesNetworkPlanLayer;
-      })?.features || [];
-
-    const linesIds = [
-      ...new Set(
-        (linesFeatures || []).map((f) => {
-          return f.get(LNP_LINE_ID_PROP) as string;
-        }),
-      ),
-    ];
-
-    const features =
-      featuresInfos?.flatMap((info) => {
-        return info.features;
-      }) || [];
-
-    // We prioritize only symbol notifications, because we want to be able to click on trains on lines
-    const isSymbolNotification =
-      notificationFeature?.getGeometry()?.getType() === "Point";
-
-    let priorityFeature = isSymbolNotification
-      ? notificationFeature || realtimeFeature
-      : realtimeFeature || notificationFeature;
-
-    priorityFeature = priorityFeature || stationFeature;
-
-    // TODO this if/else must be refactored. We should not have to do setLinesIds here
-    if (priorityFeature) {
-      setSelectedFeature(priorityFeature);
-      setSelectedFeatures([priorityFeature]);
-      setLinesIds(null);
-    } else if (!features.length) {
-      setSelectedFeature(null);
-      setSelectedFeatures([]);
-      setLinesIds(null);
-    } else {
-      setSelectedFeatures(features);
-      setSelectedFeature(features[0]);
-      setLinesIds(linesIds?.length ? linesIds : null);
-    }
-  }, [
-    baseLayer?.mapLibreMap,
-    featuresInfos,
-    linesNetworkPlanLayer,
-    realtimeLayer,
-    notificationsLayer,
-    setLinesIds,
-    setSelectedFeature,
-    setSelectedFeatures,
-    setStationId,
-    setTrainId,
-    stationsLayer,
-    tenant,
-  ]);
-
-  return null;
-}
-export default FeaturesInfosListener;

package/src/FeaturesInfosListener/index.tsx

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