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

package/src/SingleClickListener/SingleClickListener.tsx

@@ -1,164 +0,0 @@
-import debounce from "lodash.debounce";
-import { getFeatureInfoAtCoordinate } from "mobility-toolbox-js/ol";
-import { unByKey } from "ol/Observable";
-import { useCallback, useEffect } from "preact/hooks";
-
-import useMapContext from "../utils/hooks/useMapContext";
-
-import type { DebounceSettings } from "lodash";
-import type { MapBrowserEvent } from "ol";
-import type { EventsKey } from "ol/events";
-
-export interface SingleClickListenerProps {
-  debounceOptions?: DebounceSettings;
-  debounceTimeout?: number;
-  hover?: boolean;
-}
-
-function SingleClickListener({
-  debounceOptions,
-  debounceTimeout = 150,
-  hover = true,
-}: SingleClickListenerProps) {
-  const {
-    map,
-    mots,
-    queryablelayers,
-    setFeaturesInfos,
-    setFeaturesInfosHovered,
-    setLinesIds,
-    setNotificationId,
-    setStationId,
-    setTrainId,
-    stationsLayer,
-    tenant,
-  } = useMapContext();
-
-  const getFeaturesInfosAtEvt = useCallback(
-    async (evt: MapBrowserEvent<PointerEvent>) => {
-      const queryableLayers = evt.map.getAllLayers().filter((l) => {
-        return queryablelayers.split(",").includes(l.get("name"));
-      });
-      const featuresInfos = await getFeatureInfoAtCoordinate(
-        evt.coordinate,
-        queryableLayers,
-        5,
-        true,
-      );
-
-      // Filter the features clicked in the stations layer by the tenant
-      if (stationsLayer) {
-        // Clean the features infos stations clicked
-        const featuresInfoStations = featuresInfos?.find((info) => {
-          return info.layer === stationsLayer;
-        });
-        const stationsFeatures = featuresInfoStations?.features || [];
-
-        const [stationFeature] = stationsFeatures.filter((feat) => {
-          let found = false;
-          if (mots?.split(",")?.length > 0) {
-            found = !!mots.split(",").find((mot) => {
-              const hasMot = feat.get(mot.trim().toLowerCase());
-              if (hasMot === 1) {
-                return true;
-              }
-            });
-          }
-
-          // We move the external_id to uid to be consistent across all stations (lnp and others)
-          if (!feat.get("uid") && feat.get("external_id")) {
-            feat.set("uid", feat.get("external_id"));
-          }
-
-          // Travic stations have a tralis_network property and mots property
-          if (found) {
-            return !!feat.get("tralis_network")?.includes(tenant);
-          }
-
-          // LNP stations have network property with CamelCase value like "Trenord"
-          if (feat.get("network")) {
-            return feat.get("network").toLowerCase().includes(tenant);
-          }
-          return found;
-        });
-
-        // Replace the features clicked in the stations layer by the filtered one
-        if (featuresInfoStations) {
-          featuresInfoStations.features = stationFeature
-            ? [stationFeature]
-            : [];
-        }
-      }
-
-      return featuresInfos;
-    },
-    [mots, queryablelayers, stationsLayer, tenant],
-  );
-
-  const onPointerMove = useCallback(
-    async (evt: MapBrowserEvent<PointerEvent>) => {
-      const featureInfos = await getFeaturesInfosAtEvt(evt);
-      setFeaturesInfosHovered(featureInfos);
-      const features = featureInfos.flatMap((featureInfo) => {
-        return featureInfo.features;
-      });
-
-      evt.map.getTargetElement().style.cursor = features?.length
-        ? "pointer"
-        : "default";
-    },
-    [getFeaturesInfosAtEvt, setFeaturesInfosHovered],
-  );
-
-  const onSingleClick = useCallback(
-    async (evt: MapBrowserEvent<PointerEvent>) => {
-      const featuresInfos = await getFeaturesInfosAtEvt(evt);
-      setFeaturesInfos(featuresInfos);
-      // When user click we close the overlay
-      if (
-        featuresInfos?.flatMap((fi) => {
-          return fi.features;
-        }).length === 0
-      ) {
-        // It means no feature selectable were clicked so we set all ids to null
-        // to close the overlay
-        setTrainId(null);
-        setStationId(null);
-        setNotificationId(null);
-        setLinesIds(null);
-      }
-    },
-    [
-      getFeaturesInfosAtEvt,
-      setFeaturesInfos,
-      setLinesIds,
-      setNotificationId,
-      setStationId,
-      setTrainId,
-    ],
-  );
-
-  useEffect(() => {
-    const key = map?.on("singleclick", onSingleClick);
-    return () => {
-      unByKey(key);
-    };
-  }, [map, onSingleClick]);
-
-  useEffect(() => {
-    let key: EventsKey;
-    if (hover) {
-      let debounced = onPointerMove;
-      if (debounceTimeout) {
-        debounced = debounce(onPointerMove, debounceTimeout, debounceOptions);
-      }
-      key = map?.on("pointermove", debounced);
-    }
-    return () => {
-      unByKey(key);
-    };
-  }, [debounceOptions, debounceTimeout, hover, map, onPointerMove]);
-
-  return null;
-}
-export default SingleClickListener;

package/src/SingleClickListener/index.tsx

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

package/src/SituationDetails/SituationDetails.tsx

@@ -1,370 +0,0 @@
-import {
-  type AffectedTimeIntervalType,
-  type PublicationType,
-  type SituationType,
-  type TextualContentType,
-} from "mobility-toolbox-js/types";
-import { memo } from "preact/compat";
-import { useState } from "preact/hooks";
-import { twMerge } from "tailwind-merge";
-
-import ArrowDown from "../icons/ArrowDown";
-import ArrowUp from "../icons/ArrowUp";
-import Warning from "../icons/Warning";
-import Link from "../ui/Link";
-import useI18n from "../utils/hooks/useI18n";
-import mergePublications from "../utils/mergePublications";
-
-import type { MultilingualTextualContentType } from "mobility-toolbox-js/types";
-
-const toShortDate = (
-  date: Date,
-  showTime?: boolean,
-  showYear?: boolean,
-  useShortMonth = true,
-) => {
-  const time = date.toLocaleTimeString(["de"], {
-    hour: "2-digit",
-    minute: "2-digit",
-  });
-  const dateString = date.toLocaleDateString(["de"], {
-    day: "2-digit",
-    month: useShortMonth ? "short" : "long",
-    // weekday: "short",
-    year: showYear ? "numeric" : undefined,
-  });
-
-  return `${dateString}${showTime && !!time ? ` ${time}` : ""}`.replace(
-    ",",
-    "",
-  );
-};
-
-const emptyArray: string[] = [];
-
-function SituationDetails({
-  canToggle = false,
-  fallbackLangs = emptyArray,
-  headerClassName,
-  iconClassName,
-  publicationClassName,
-  reasonClassName,
-  situation,
-  timeIntervalClassName,
-  useShortMonth = true,
-}: {
-  canToggle?: boolean;
-  fallbackLangs?: string[];
-  headerClassName?: string;
-  iconClassName?: string;
-  publicationClassName?: string;
-  reasonClassName?: string;
-  situation?: Partial<SituationType>;
-  timeIntervalClassName?: string;
-  useShortMonth?: boolean;
-}) {
-  const { locale, t } = useI18n();
-  const [openByPublicationId, setOpenByPublicationId] = useState<
-    Record<string, boolean>
-  >({});
-
-  if (!situation) {
-    return null;
-  }
-
-  // moco export v2
-  let textualContentMultilingual: Partial<MultilingualTextualContentType> = {};
-  let textualContent: Partial<TextualContentType> = {};
-  let timeIntervalsToDisplay = [];
-  let publicationsToDisplay: PublicationType[] = [];
-  let reasonsToDisplay: string[] = [];
-
-  const publicationsArr: PublicationType[] = situation?.publications || [];
-
-  // Find the current publication(s) at the current date
-  publicationsToDisplay =
-    publicationsArr?.filter(({ publicationWindows }) => {
-      // In some cases publicationWindows can be undefined here but defined at the
-      // root of the object so we apply the root publicationWindows to all publications with empty one
-      if (
-        !publicationWindows?.length &&
-        situation?.publicationWindows?.length
-      ) {
-        // @ts-expect-error we should not set this value directly
-        // eslint-disable-next-line no-param-reassign
-        publicationWindows = situation?.publicationWindows;
-      }
-      return publicationWindows.find(({ endTime, startTime }) => {
-        const now = new Date();
-        const startT = new Date(startTime);
-        const endT = new Date(endTime);
-        return startT <= now && now <= endT;
-      });
-    }) || [];
-
-  publicationsToDisplay = mergePublications(publicationsToDisplay);
-
-  // Display the current and next affected time intervals not the one in the past
-  timeIntervalsToDisplay =
-    (situation?.affectedTimeIntervals || []).filter(
-      ({ endTime, startTime }) => {
-        const now = new Date();
-        const startT = new Date(startTime);
-        const endT = new Date(endTime);
-        return (startT <= now && now <= endT) || now < startT;
-      },
-    ) || [];
-
-  // Display the reasons
-  reasonsToDisplay = (situation?.reasons || []).map(({ name }) => {
-    return name && t(name.replace(".", ""));
-  });
-
-  return (
-    <>
-      {publicationsToDisplay?.map(
-        ({
-          id,
-          infoLinks,
-          publicationLines,
-          publicationStops,
-          textualContentLarge,
-          textualContentMedium,
-          textualContentSmall,
-        }) => {
-          let localeToUse = locale();
-
-          // Get the textual content in German
-          textualContentMultilingual =
-            textualContentLarge || textualContentMedium || textualContentSmall;
-
-          textualContent = textualContentMultilingual?.[localeToUse];
-
-          // Fallback to default language if there is not title in the current language
-          if (!textualContent?.summary) {
-            // Try to find textualContent with a title using fallback languages
-            // If we do notfind a fallback we stick to the current language.
-            for (const fallbackLang of fallbackLangs) {
-              const goodTextualContent =
-                textualContentMultilingual?.[fallbackLang];
-              if (goodTextualContent?.summary) {
-                localeToUse = fallbackLang;
-                textualContent = goodTextualContent;
-                break;
-              }
-            }
-          }
-
-          const pubLines = [
-            ...new Set(
-              publicationLines?.flatMap((publication) => {
-                return (
-                  publication.lines?.map(({ name }) => {
-                    return name;
-                  }) || []
-                );
-              }) || [],
-            ),
-          ];
-
-          const stations = [
-            ...new Set(
-              publicationStops.map((publication) => {
-                return publication?.name || "";
-              }),
-            ),
-          ];
-
-          return (
-            <div
-              className={twMerge("text-base", publicationClassName)}
-              key={id}
-            >
-              <div className={twMerge("text-xs uppercase", reasonClassName)}>
-                {reasonsToDisplay}
-              </div>
-              <h3
-                className={twMerge(
-                  "space-x-2 text-xl leading-[1.3] font-bold text-balance",
-                  headerClassName,
-                )}
-              >
-                <span className={"inline-block align-middle"}>
-                  <Warning className={twMerge(iconClassName)} />
-                </span>
-                <span
-                  className={"align-middle *:inline"}
-                  dangerouslySetInnerHTML={{
-                    __html: textualContent?.summary,
-                  }}
-                ></span>
-              </h3>
-              <hr className="my-1" />
-
-              {timeIntervalsToDisplay?.map(
-                (
-                  {
-                    dailyEndTime,
-                    dailyStartTime,
-                    endTime,
-                    startTime,
-                  }: AffectedTimeIntervalType,
-                  index,
-                ) => {
-                  const hasDailyTime = dailyEndTime && dailyStartTime;
-                  // const isStartCurrentYear =
-                  //   new Date().getFullYear() ===
-                  //   new Date(startTime).getFullYear();
-                  // const isEndCurrentYear =
-                  //   new Date().getFullYear() ===
-                  //   new Date(endTime).getFullYear();
-                  const isEndInfinite = endTime.includes("2500");
-
-                  const from = toShortDate(
-                    new Date(startTime),
-                    false,
-                    true,
-                    useShortMonth,
-                  );
-                  const to = !isEndInfinite
-                    ? toShortDate(new Date(endTime), false, true, useShortMonth)
-                    : undefined;
-
-                  const renderTimeInterval = (
-                    <div
-                      className={twMerge(
-                        "flex-1 text-left text-sm font-bold text-balance",
-                        timeIntervalClassName,
-                      )}
-                      key={startTime}
-                    >
-                      <span>
-                        {from && to ? `${from} – ${to}` : null}
-                        {from && !to ? t("from", { from }) : null}
-                      </span>
-                      {hasDailyTime && (
-                        <span>{` (${t("daily_from_to", {
-                          from: dailyStartTime,
-                          to: dailyEndTime,
-                        })})`}</span>
-                      )}
-                    </div>
-                  );
-
-                  if (canToggle) {
-                    return (
-                      <button
-                        className={"flex w-full cursor-pointer items-center"}
-                        key={startTime}
-                        onClick={() => {
-                          if (canToggle) {
-                            setOpenByPublicationId({
-                              ...openByPublicationId,
-                              [id]: !openByPublicationId[id],
-                            });
-                          }
-                        }}
-                      >
-                        {renderTimeInterval}
-                        {index == 0 && (
-                          <>
-                            {openByPublicationId[id] ? (
-                              <ArrowUp className="text-red" />
-                            ) : (
-                              <ArrowDown className="text-red" />
-                            )}
-                          </>
-                        )}
-                      </button>
-                    );
-                  } else {
-                    return (
-                      <div
-                        className={"flex w-full items-center"}
-                        key={startTime}
-                      >
-                        {renderTimeInterval}
-                      </div>
-                    );
-                  }
-                },
-              )}
-              <div
-                className={
-                  !canToggle || openByPublicationId[id]
-                    ? "my-4 flex flex-col gap-4"
-                    : "hidden"
-                }
-              >
-                {textualContent?.description && (
-                  <div
-                    dangerouslySetInnerHTML={{
-                      __html: textualContent?.description,
-                    }}
-                  />
-                )}
-                {!!infoLinks?.length && (
-                  <div>
-                    {infoLinks.map(({ label, uri }) => {
-                      const title = label?.[localeToUse] || uri || "";
-                      return (
-                        <Link href={uri} key={uri} title={title}>
-                          {title}
-                        </Link>
-                      );
-                    })}
-                  </div>
-                )}
-
-                {!!pubLines?.length && (
-                  <div>
-                    <div className={"font-bold"}>{t("affected_lines")}:</div>
-                    <div className={"flex flex-wrap gap-1 text-sm"}>
-                      {pubLines?.map((name) => {
-                        return (
-                          // px-[8px] py-[4px] are important for bermekt
-                          <div
-                            className={
-                              "bg-red rounded-sm px-[2px] py-[0px] font-semibold text-white"
-                            }
-                            key={name}
-                          >
-                            {name}
-                          </div>
-                        );
-                      })}
-                    </div>
-                  </div>
-                )}
-
-                {!!stations?.length && (
-                  <div>
-                    <div className={"font-bold"}>{t("affected_stops")}:</div>
-                    <div className={"flex flex-wrap gap-1 text-sm"}>
-                      {stations.map((name) => {
-                        return (
-                          <div
-                            // px-[8px] py-[4px] are important for bermekt
-                            className={
-                              "bg-red rounded-sm px-[2px] py-[0px] font-semibold text-white"
-                            }
-                            key={name}
-                          >
-                            {name}
-                          </div>
-                        );
-                      })}
-                    </div>
-                  </div>
-                )}
-              </div>
-              {canToggle && <hr className="my-1" />}
-            </div>
-          );
-        },
-      )}
-    </>
-  );
-}
-
-export default memo(SituationDetails);

package/src/SituationDetails/index.ts

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

package/src/Station/Station.tsx

@@ -1,50 +0,0 @@
-import { memo } from "preact/compat";
-import { twMerge } from "tailwind-merge";
-
-import Departure from "../Departure";
-import ShadowOverflow from "../ShadowOverflow";
-import StationHeader from "../StationHeader";
-import useMapContext from "../utils/hooks/useMapContext";
-import useRealtimeDepartures from "../utils/hooks/useRealtimeDepartures";
-import useRealtimeStation from "../utils/hooks/useRealtimeStation";
-
-import type { RealtimeDeparture } from "mobility-toolbox-js/types";
-import type { HTMLAttributes, PreactDOMAttributes } from "preact";
-
-export type StationProps = {
-  className?: string;
-} & HTMLAttributes<HTMLDivElement> &
-  PreactDOMAttributes;
-
-function Station({ className, ...props }: StationProps) {
-  const { stationId } = useMapContext();
-  const station = useRealtimeStation(stationId);
-  const departures = useRealtimeDepartures(stationId);
-
-  if (!station) {
-    return null;
-  }
-
-  return (
-    <>
-      <StationHeader station={station} />
-      <ShadowOverflow>
-        <div className={twMerge("flex flex-col p-2", className)} {...props}>
-          {(departures || [])
-            // .filter(hideDepartures)
-            .map((departure: RealtimeDeparture, index: number) => {
-              return (
-                <Departure
-                  departure={departure}
-                  index={index}
-                  key={departure.call_id}
-                />
-              );
-            })}
-        </div>
-      </ShadowOverflow>
-    </>
-  );
-}
-
-export default memo(Station);

package/src/Station/index.tsx

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

package/src/StationHeader/StationHeader.tsx

@@ -1,32 +0,0 @@
-import { memo } from "preact/compat";
-
-import StationName from "../StationName";
-import StationServices from "../StationServices";
-
-import type { RealtimeStation } from "mobility-toolbox-js/types";
-
-function StationHeader({ station }: { station: RealtimeStation }) {
-  return (
-    <div className="flex items-center gap-x-4 bg-slate-100 p-4">
-      <div className="flex grow flex-col">
-        <span className="font-bold">
-          <StationName station={station} />
-        </span>
-        <StationServices
-          accessibility
-          airport
-          barAndRestaurants
-          bathroom
-          bikeStorage
-          className="flex gap-2"
-          elevator
-          police
-          station={station}
-          waitingAreas
-        />
-      </div>
-    </div>
-  );
-}
-
-export default memo(StationHeader);

package/src/StationHeader/index.tsx

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

package/src/StationName/StationName.tsx

@@ -1,21 +0,0 @@
-import { memo } from "preact/compat";
-
-import type { RealtimeStation } from "mobility-toolbox-js/types";
-import type { JSX, PreactDOMAttributes } from "preact";
-
-export type StationNameProps = {
-  station: RealtimeStation;
-} & JSX.HTMLAttributes<HTMLDivElement> &
-  PreactDOMAttributes;
-
-function StationName({ children, station, ...props }: StationNameProps) {
-  const { name } = station?.properties || {};
-  return (
-    <div {...props}>
-      {name}
-      {children}
-    </div>
-  );
-}
-
-export default memo(StationName);

package/src/StationName/index.tsx

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