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

package/src/LayoutState/LayoutState.tsx

@@ -1,380 +0,0 @@
-import { useCallback, useEffect } from "preact/hooks";
-
-import useFit from "../utils/hooks/useFit";
-import useI18n from "../utils/hooks/useI18n";
-import useLnpLineInfo, { useLnpStopInfo } from "../utils/hooks/useLnp";
-import useMapContext from "../utils/hooks/useMapContext";
-import useRealtimeTrainByRouteIdentifier from "../utils/hooks/useRealtimeTrainsByRouteIdentifier";
-
-/**
- * This component is responsible for updating the layout state in the context.
- */
-function LayoutState() {
-  const {
-    details,
-    embed,
-    geolocation,
-    hasDetails,
-    hasLayerTree,
-    hasLnp,
-    hasNotification,
-    hasPrint,
-    hasRealtime,
-    hasShare,
-    isExportMenuOpen,
-    isLayerTreeOpen,
-    isSearchOpen,
-    isShareMenuOpen,
-    layertree,
-    lineid,
-    linesIds,
-    lnp,
-    mapset,
-    notification,
-    notificationid,
-    notificationId,
-    notificationlang,
-    permalink,
-    previewNotifications,
-    print,
-    realtime,
-    search,
-    selectedFeature,
-    setFeaturesInfos,
-    setHasDetails,
-    setHasGeolocation,
-    setHasLayerTree,
-    setHasLnp,
-    setHasMapset,
-    setHasNotification,
-    setHasPermalink,
-    setHasPrint,
-    setHasRealtime,
-    setHasSearch,
-    setHasShare,
-    setHasStations,
-    setHasToolbar,
-    setIsEmbed,
-    setIsExportMenuOpen,
-    setIsLayerTreeOpen,
-    setIsOverlayOpen,
-    setIsSearchOpen,
-    setIsShareMenuOpen,
-    setLinesIds,
-    setNotificationId,
-    setNotificationSupportedLanguages,
-    setStationId,
-    setTrainId,
-    share,
-    stationId,
-    stationid,
-    tenant,
-    toolbar,
-    trainid,
-    trainId,
-  } = useMapContext();
-
-  const lineInfo = useLnpLineInfo(lineid);
-  const stopInfo = useLnpStopInfo(stationid);
-  const trainInfo = useRealtimeTrainByRouteIdentifier(trainid);
-  const fit = useFit();
-  const { locale } = useI18n();
-
-  // Define fallback languages from the notifications details
-  useEffect(() => {
-    const fallbackLangs =
-      notificationlang
-        ?.split(",")
-        .map((lang) => {
-          return lang.trim();
-        })
-        .filter((lang) => {
-          return lang !== locale();
-        }) || [];
-    setNotificationSupportedLanguages(fallbackLangs);
-  }, [notificationlang, setNotificationSupportedLanguages, locale]);
-
-  useEffect(() => {
-    setHasStations(!!tenant);
-  }, [setHasStations, tenant]);
-
-  useEffect(() => {
-    setHasRealtime(realtime === "true");
-  }, [realtime, setHasRealtime]);
-
-  useEffect(() => {
-    setHasNotification(notification === "true" || !!previewNotifications);
-  }, [notification, previewNotifications, setHasNotification]);
-
-  useEffect(() => {
-    setHasMapset(mapset === "true");
-  }, [mapset, setHasMapset]);
-
-  useEffect(() => {
-    setHasGeolocation(geolocation === "true");
-  }, [geolocation, setHasGeolocation]);
-
-  useEffect(() => {
-    setHasPermalink(permalink === "true");
-  }, [permalink, setHasPermalink]);
-
-  useEffect(() => {
-    setHasSearch(search === "true");
-  }, [search, setHasSearch]);
-
-  useEffect(() => {
-    setIsEmbed(embed === "true");
-  }, [embed, setIsEmbed]);
-
-  useEffect(() => {
-    setHasLnp(lnp === "true");
-  }, [lnp, setHasLnp]);
-
-  useEffect(() => {
-    setHasShare(share === "true");
-  }, [share, setHasShare]);
-
-  useEffect(() => {
-    setHasPrint(print === "true");
-  }, [print, setHasPrint]);
-
-  useEffect(() => {
-    setHasDetails(details === "true");
-  }, [details, setHasDetails]);
-
-  useEffect(() => {
-    setHasToolbar(toolbar === "true");
-  }, [toolbar, setHasToolbar]);
-
-  useEffect(() => {
-    setHasLayerTree(layertree === "true");
-  }, [layertree, setHasLayerTree]);
-
-  useEffect(() => {
-    setLinesIds(lineInfo?.external_id ? [lineInfo.external_id] : null);
-  }, [lineInfo, setLinesIds]);
-
-  // Zoom when linesids attribute changes
-  useEffect(() => {
-    fit.current(lineInfo, true);
-  }, [lineInfo, fit]);
-
-  useEffect(() => {
-    setStationId(stopInfo?.external_id);
-  }, [stopInfo, setStationId]);
-
-  // Center and zoom when stationid attribute changes
-  useEffect(() => {
-    fit.current(stopInfo, true);
-  }, [stopInfo, fit]);
-
-  useEffect(() => {
-    setNotificationId(notificationid);
-  }, [notificationid, setNotificationId]);
-
-  useEffect(() => {
-    setTrainId(trainInfo?.train_id);
-  }, [setTrainId, trainInfo]);
-
-  // Center and zoom when trainid attribute changes
-  useEffect(() => {
-    fit.current(trainInfo, true);
-  }, [trainInfo, fit]);
-
-  // Close all menus
-  const closeMenus = useCallback(() => {
-    setIsLayerTreeOpen(false);
-    setIsExportMenuOpen(false);
-    setIsSearchOpen(false);
-    setIsShareMenuOpen(false);
-  }, [
-    setIsExportMenuOpen,
-    setIsLayerTreeOpen,
-    setIsSearchOpen,
-    setIsShareMenuOpen,
-  ]);
-
-  // Close all features details
-  const closeFeatureDetails = useCallback(() => {
-    setStationId(null);
-    setTrainId(null);
-    setNotificationId(null);
-    setLinesIds(null);
-    setFeaturesInfos(null);
-  }, [
-    setStationId,
-    setTrainId,
-    setNotificationId,
-    setLinesIds,
-    setFeaturesInfos,
-  ]);
-
-  useEffect(() => {
-    if (isSearchOpen) {
-      setIsLayerTreeOpen(false);
-      setIsExportMenuOpen(false);
-      setIsShareMenuOpen(false);
-      setStationId(null);
-
-      closeFeatureDetails();
-    }
-  }, [
-    closeFeatureDetails,
-    isSearchOpen,
-    setIsExportMenuOpen,
-    setIsLayerTreeOpen,
-    setIsShareMenuOpen,
-    setStationId,
-  ]);
-
-  useEffect(() => {
-    if (isShareMenuOpen) {
-      setIsLayerTreeOpen(false);
-      setIsExportMenuOpen(false);
-      setIsSearchOpen(false);
-
-      closeFeatureDetails();
-    }
-  }, [
-    isShareMenuOpen,
-    closeFeatureDetails,
-    setIsExportMenuOpen,
-    setIsLayerTreeOpen,
-    setIsSearchOpen,
-  ]);
-
-  useEffect(() => {
-    if (isLayerTreeOpen) {
-      setIsExportMenuOpen(false);
-      setIsLayerTreeOpen(isLayerTreeOpen);
-      setIsSearchOpen(false);
-      setIsShareMenuOpen(false);
-
-      closeFeatureDetails();
-    }
-  }, [
-    isLayerTreeOpen,
-    closeFeatureDetails,
-    setIsExportMenuOpen,
-    setIsLayerTreeOpen,
-    setIsSearchOpen,
-    setIsShareMenuOpen,
-  ]);
-
-  useEffect(() => {
-    if (isExportMenuOpen) {
-      setIsLayerTreeOpen(false);
-      setIsExportMenuOpen(isExportMenuOpen);
-      setIsSearchOpen(false);
-      setIsShareMenuOpen(false);
-
-      closeFeatureDetails();
-    }
-  }, [
-    closeFeatureDetails,
-    isExportMenuOpen,
-    setIsExportMenuOpen,
-    setIsLayerTreeOpen,
-    setIsSearchOpen,
-    setIsShareMenuOpen,
-  ]);
-
-  useEffect(() => {
-    if (selectedFeature) {
-      closeMenus();
-      setTrainId(selectedFeature?.get("train_id") || null);
-      setStationId(selectedFeature?.get("uid") || null);
-      setNotificationId(selectedFeature?.get("situationId") || null);
-    }
-  }, [
-    selectedFeature,
-    closeMenus,
-    setStationId,
-    setTrainId,
-    setNotificationId,
-  ]);
-
-  useEffect(() => {
-    if (stationId) {
-      closeMenus();
-
-      setTrainId(null);
-      setLinesIds(null);
-      setNotificationId(null);
-    }
-  }, [closeMenus, setLinesIds, setNotificationId, setTrainId, stationId]);
-
-  useEffect(() => {
-    if (trainId) {
-      closeMenus();
-
-      // Close overlay details
-      setStationId(null);
-      setLinesIds(null);
-      setNotificationId(null);
-    }
-  }, [closeMenus, setLinesIds, setNotificationId, setStationId, trainId]);
-
-  useEffect(() => {
-    if (notificationId) {
-      closeMenus();
-
-      // Close overlay details
-      setStationId(null);
-      setLinesIds(null);
-      setTrainId(null);
-    }
-  }, [closeMenus, notificationId, setLinesIds, setStationId, setTrainId]);
-
-  useEffect(() => {
-    if (linesIds?.length) {
-      closeMenus();
-
-      // Close overlay details
-      setStationId(null);
-      setNotificationId(null);
-      setTrainId(null);
-    }
-  }, [
-    closeMenus,
-    linesIds?.length,
-    setNotificationId,
-    setStationId,
-    setTrainId,
-  ]);
-
-  useEffect(() => {
-    setIsOverlayOpen(
-      (hasPrint && isExportMenuOpen) ||
-        (hasLayerTree && isLayerTreeOpen) ||
-        (hasShare && isShareMenuOpen) ||
-        (hasDetails && !!selectedFeature) || // For custom layers details.
-        (hasDetails && hasRealtime && !!trainId) ||
-        (hasDetails && tenant && !!stationId) ||
-        (hasDetails && hasLnp && !!linesIds) ||
-        (hasDetails && hasNotification && !!notificationId),
-    );
-  }, [
-    hasDetails,
-    selectedFeature,
-    hasPrint,
-    isExportMenuOpen,
-    hasLayerTree,
-    isLayerTreeOpen,
-    hasShare,
-    isShareMenuOpen,
-    hasRealtime,
-    trainId,
-    tenant,
-    stationId,
-    setIsOverlayOpen,
-    hasLnp,
-    linesIds,
-    hasNotification,
-    notificationId,
-  ]);
-
-  return null;
-}
-
-export default LayoutState;

package/src/LayoutState/index.tsx

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

package/src/LinesNetworkPlanDetails/LinesNetworkPlanDetails.tsx

@@ -1,274 +0,0 @@
-import { useCallback, useMemo, useState } from "preact/hooks";
-import { twMerge } from "tailwind-merge";
-
-import RouteIcon from "../RouteIcon";
-import ShadowOverflow from "../ShadowOverflow";
-import { LAYERS_NAMES, LNP_LINE_ID_PROP } from "../utils/constants";
-import useLayerConfig from "../utils/hooks/useLayerConfig";
-import { useLnpLinesInfos, useLnpStopsInfos } from "../utils/hooks/useLnp";
-import useMapContext from "../utils/hooks/useMapContext";
-
-import type { RealtimeLine } from "mobility-toolbox-js/types";
-import type { Feature } from "ol";
-import type { PreactDOMAttributes } from "preact";
-
-import type { LnpLineInfo } from "../utils/hooks/useLnp";
-
-const RUNS_PROP = "runs";
-
-function LinesNetworkPlanDetails({
-  className,
-  features,
-  ...props
-}: { className?: string; features: Feature[] } & PreactDOMAttributes) {
-  const { linesIds } = useMapContext();
-  const lineInfos = useLnpLinesInfos();
-  const stopInfos = useLnpStopsInfos();
-  const layerConfig = useLayerConfig(LAYERS_NAMES.linesnetworkplan);
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [stopInfosOpenId, setStopInfosOpenId] = useState<string>(null);
-
-  const isRunsDisplay = useMemo(() => {
-    return (
-      new URLSearchParams(window.location.search).get(RUNS_PROP) === "true"
-    );
-  }, []);
-
-  const getLink = useCallback(
-    (id: string) => {
-      const href = layerConfig?.link?.href;
-      if (href) {
-        return href.replace(`{{id}}`, id);
-      }
-      return null;
-    },
-    [layerConfig],
-  );
-
-  const lineInfosByOperator: Record<string, LnpLineInfo[]> = useMemo(() => {
-    const byOperators = {};
-
-    [
-      ...new Set([
-        ...(linesIds || []),
-        ...features.map((f) => {
-          return f.get(LNP_LINE_ID_PROP);
-        }),
-      ]),
-    ]
-      .filter((id) => {
-        return !!id && !!lineInfos?.[id];
-      })
-      .forEach((id) => {
-        const { operator_name: operatorName } = lineInfos[id];
-        if (!byOperators[operatorName]) {
-          byOperators[operatorName] = [];
-          byOperators[operatorName].runs = 0;
-        }
-        lineInfos[id].id = id;
-
-        const runs = features
-          ?.filter((f) => {
-            return f.get(LNP_LINE_ID_PROP) === id;
-          })
-          .reduce((acc, featuree) => {
-            return acc + featuree.get(RUNS_PROP);
-          }, 0);
-        lineInfos[id].id = id;
-        lineInfos[id].runs = runs;
-        byOperators[operatorName].runs += runs;
-        byOperators[operatorName].push(lineInfos[id]);
-      });
-
-    return byOperators;
-  }, [features, lineInfos, linesIds]);
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const stopInfoIdsByLineId: Record<string, string[]> = useMemo(() => {
-    const byLineId = {};
-    features.forEach((f) => {
-      const lineId = f.get(LNP_LINE_ID_PROP);
-      if (lineId && !byLineId[lineId] && f.get("stop_ids")) {
-        try {
-          byLineId[lineId] = JSON.parse(f.get("stop_ids"));
-        } catch (e) {
-          // eslint-disable-next-line no-console
-          console.warn("Impossible to parse stop_ids", e);
-        }
-      }
-    });
-
-    return byLineId;
-  }, [features]);
-
-  if (!features?.length && !linesIds?.length) {
-    return null;
-  }
-
-  return (
-    <ShadowOverflow {...props} className={twMerge("px-4 text-base", className)}>
-      <div className="space-y-4">
-        {Object.entries(lineInfosByOperator)
-          .sort(([operatorNameA], [operatorNameB]) => {
-            return lineInfosByOperator[operatorNameA][RUNS_PROP] <
-              lineInfosByOperator[operatorNameB][RUNS_PROP]
-              ? 1
-              : -1;
-          })
-          .map(([operatorName, linesInfos]) => {
-            return (
-              <div className={"flex flex-col gap-2"} key={operatorName}>
-                <div>{operatorName}</div>
-                <div className="flex flex-wrap gap-2">
-                  {linesInfos
-                    .sort((a, b) => {
-                      return a.runs < b.runs ? 1 : -1;
-                    })
-                    .map((lineInfo) => {
-                      const {
-                        color: backgroundColor,
-                        // color,
-                        // external_id,
-                        long_name,
-                        mot,
-                        runs,
-                        short_name: shortName,
-                        text_color: textColor,
-                      } = lineInfo;
-                      let longName = long_name || shortName;
-
-                      let stops = null;
-                      //stopInfoIdsByLineId?.[id] || null;
-                      if (!stops?.length) {
-                        stops = null;
-                      }
-
-                      if (!longName && stops) {
-                        const names = stops.map((stopId) => {
-                          return stopInfos[stopId].short_name;
-                        });
-
-                        longName = [
-                          ...new Set([names[0], names[names.length - 1]]),
-                        ].join(" - ");
-                      }
-
-                      // Build a line object
-                      const line: { type: string } & RealtimeLine = {
-                        color: null,
-                        id: null,
-                        name: shortName,
-                        stroke: null,
-                        text_color: null,
-                        type: mot,
-                      };
-
-                      if (textColor) {
-                        line.text_color = textColor.startsWith("#")
-                          ? textColor
-                          : `#${textColor}`;
-                      }
-
-                      if (backgroundColor) {
-                        line.color = backgroundColor.startsWith("#")
-                          ? backgroundColor
-                          : `#${backgroundColor}`;
-                      }
-
-                      return (
-                        <div
-                          className={longName ? "w-full" : ""}
-                          key={shortName}
-                        >
-                          <div
-                            className={
-                              "flex items-center justify-between gap-2"
-                            }
-                            // onClick={() => {
-                            //   setStopInfosOpenId(stopInfosOpenId === id ? null : id);
-                            // }}
-                          >
-                            <div>
-                              {getLink(lineInfo.id) ? (
-                                <a
-                                  href={getLink(lineInfo.id)}
-                                  rel="noreferrer"
-                                  target="_blank"
-                                >
-                                  <RouteIcon line={line}></RouteIcon>
-                                </a>
-                              ) : (
-                                <RouteIcon line={line}></RouteIcon>
-                              )}
-                            </div>
-                            {!!longName && (
-                              <div className={"flex-1 text-left"}>
-                                {longName.split("-").map((name) => {
-                                  return <div key={name}>{name}</div>;
-                                })}
-                              </div>
-                            )}
-                            {isRunsDisplay && (
-                              <div className={"text-xs"}>{runs}</div>
-                            )}
-
-                            {/* We deactivate the list of stopsfor now */}
-                            {/* {!!stops && (
-                              <button className={"shrink-0"}>
-                                {stopInfosOpenId === id ? (
-                                  <ArrowUp />
-                                ) : (
-                                  <ArrowDown />
-                                )}
-                              </button>
-                            )} */}
-                          </div>
-                          {/* {!!stops && (
-                            <div
-                              className={`${stopInfosOpenId === id ? "" : "hidden"}`}
-                            >
-                              {stops?.map((stopId, index, arr) => {
-                                const stop = stopInfos[stopId];
-                                return (
-                                  <div
-                                    className={"flex items-center gap-2"}
-                                    key={stopId}
-                                  >
-                                    <RouteStopContext.Provider
-                                      value={{
-                                        index,
-                                        status: {
-                                          isFirst: !index,
-                                          isLast: index === arr.length - 1,
-                                          isLeft: false,
-                                          isPassed: false,
-                                          progress: !index ? 50 : 0,
-                                        },
-                                        stop,
-                                      }}
-                                    >
-                                      <RouteStopProgress
-                                        className="relative flex size-8 shrink-0 items-center justify-center"
-                                        lineColor={line.color}
-                                      />
-                                      <div>{stop.short_name}</div>
-                                    </RouteStopContext.Provider>
-                                  </div>
-                                );
-                              })}
-                            </div>
-                          )} */}
-                        </div>
-                      );
-                    })}
-                </div>
-              </div>
-            );
-          })}
-      </div>
-    </ShadowOverflow>
-  );
-}
-
-export default LinesNetworkPlanDetails;

package/src/LinesNetworkPlanDetails/index.tsx

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

package/src/LinesNetworkPlanLayer/LinesNetworkPlanLayer.tsx

@@ -1,51 +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 type { MaplibreStyleLayerOptions } from "mobility-toolbox-js/ol/layers/MaplibreStyleLayer";
-
-function LinesNetworkPlanLayer(props: MaplibreStyleLayerOptions) {
-  const { baseLayer, map, setLinesNetworkPlanLayer } = useMapContext();
-
-  const layer = useMemo(() => {
-    if (!baseLayer) {
-      return null;
-    }
-    return new MaplibreStyleLayer({
-      layersFilter: ({ metadata }) => {
-        return (
-          metadata?.["rvf.filter"]?.startsWith("netzplan") &&
-          !metadata?.["rvf.filter"]?.startsWith("netzplan_call")
-        );
-      },
-      maplibreLayer: baseLayer,
-      name: LAYERS_NAMES.linesnetworkplan,
-      queryRenderedLayersFilter: ({ metadata }) => {
-        return metadata?.["rvf.filter"] === "netzplan_trips_info";
-      },
-      ...(props || {}),
-    });
-  }, [baseLayer, props]);
-
-  useEffect(() => {
-    setLinesNetworkPlanLayer?.(layer);
-  }, [layer, setLinesNetworkPlanLayer]);
-
-  useEffect(() => {
-    if (!map || !layer) {
-      return;
-    }
-
-    map.addLayer(layer);
-    return () => {
-      map.removeLayer(layer);
-    };
-  }, [map, layer]);
-
-  return null; // <RegisterForSelectFeaturesOnClick />;
-}
-
-export default memo(LinesNetworkPlanLayer);

package/src/LinesNetworkPlanLayer/index.tsx

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