@geops/rvf-mobility-web-component 0.1.45 → 0.1.47-beta.0

package/src/RvfEmbedNavigation/DragPanWarning.ts

@@ -1,11 +1,11 @@
-import type { Map, MapBrowserEvent } from "ol";
-import type { Options } from "ol/control/Control";
-
 import { Control } from "ol/control";
-import { EventsKey } from "ol/events";
 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";
+
 type DragPanWarningOptions = {
   className?: string;
 } & Options;
@@ -88,7 +88,7 @@ class DragPanWarning extends Control {
         .getArray()
         .find((interaction) => {
           return interaction instanceof DragPan;
-        }) as DragPan;
+        });
 
       if (!this.dragPan) {
         console.error(

package/src/RvfEmbedNavigation/RvfEmbedNavigation.tsx

@@ -2,6 +2,7 @@ import { MouseWheelZoom } from "ol/interaction";
 import { useEffect, useState } from "preact/hooks";
 
 import useMapContext from "../utils/hooks/useMapContext";
+
 import DragPanWarning from "./DragPanWarning";
 
 function RvfEmbedNavigation() {

package/src/RvfExportMenu/RvfExportMenu.tsx

@@ -1,15 +1,15 @@
-import type { JSX, PreactDOMAttributes } from "preact";
-
 import { memo, useId, useState } from "preact/compat";
 
-import RvfButton from "../RvfButton";
 import RvfCheckbox from "../RvfCheckbox";
 import RvfSelect from "../RvfSelect";
+import Button from "../ui/Button";
 import { LAYER_PROP_IS_EXPORTING } from "../utils/constants";
 import exportPdf from "../utils/exportPdf";
 import getAllLayers from "../utils/getAllLayers";
 import useMapContext from "../utils/hooks/useMapContext";
 
+import type { JSX, PreactDOMAttributes } from "preact";
+
 export type RvfExportMenuButtonProps = JSX.HTMLAttributes<HTMLDivElement> &
   PreactDOMAttributes;
 
@@ -28,7 +28,7 @@ function RvfExportMenu({ ...props }: RvfExportMenuButtonProps) {
   return (
     <div {...props}>
       {/* <!-- Content --> */}
-      <div className="flex flex-1 flex-col gap-2">
+      <div className="flex flex-1 flex-col gap-4">
         <div className={"flex flex-wrap items-center gap-2"}>
           <RvfCheckbox
             checked={useMaxExtent}
@@ -48,16 +48,17 @@ function RvfExportMenu({ ...props }: RvfExportMenuButtonProps) {
               setFormat((evt.target as HTMLSelectElement).value);
             }}
           >
-            {formats.map((format) => {
-              return <option key={format}>{format}</option>;
+            {formats.map((formatt) => {
+              return <option key={formatt}>{formatt}</option>;
             })}
           </RvfSelect>
         </div>
       </div>
       {/* <!-- Footer --> */}
       <div>
-        <RvfButton
+        <Button
           disabled={isExporting}
+          // eslint-disable-next-line @typescript-eslint/no-misused-promises
           onClick={async () => {
             setIsExportingError(false);
             setIsExporting(true);
@@ -65,7 +66,7 @@ function RvfExportMenu({ ...props }: RvfExportMenuButtonProps) {
               map,
               { format },
               {
-                onAfter: (map, layers) => {
+                onAfter: (mapp, layers) => {
                   if (
                     realtimeLayer &&
                     prevRealtimeLayerVisibility !== realtimeLayer?.getVisible()
@@ -75,11 +76,11 @@ function RvfExportMenu({ ...props }: RvfExportMenuButtonProps) {
                   getAllLayers(layers).forEach((layer) => {
                     layer.set(LAYER_PROP_IS_EXPORTING, false);
                   });
-                  map.set(LAYER_PROP_IS_EXPORTING, false);
+                  mapp.set(LAYER_PROP_IS_EXPORTING, false);
                 },
 
-                onBefore: (map, layers) => {
-                  map.set(LAYER_PROP_IS_EXPORTING, true);
+                onBefore: (mapp, layers) => {
+                  mapp.set(LAYER_PROP_IS_EXPORTING, true);
                   if (realtimeLayer) {
                     prevRealtimeLayerVisibility = realtimeLayer.getVisible();
                     if (realtimeLayer.getVisible()) {
@@ -99,12 +100,13 @@ function RvfExportMenu({ ...props }: RvfExportMenuButtonProps) {
             }, 1000);
           }}
         >
+          {/* eslint-disable-next-line no-nested-ternary */}
           {isExporting
             ? "Exporting..."
             : isExportingError
               ? "Error"
               : "Download"}
-        </RvfButton>
+        </Button>
       </div>
     </div>
   );

package/src/RvfExportMenuButton/RvfExportMenuButton.tsx

@@ -1,14 +1,13 @@
-import type { JSX, PreactDOMAttributes } from "preact";
-
 import { memo } from "preact/compat";
 import { useCallback } from "preact/hooks";
 
 import Download from "../icons/Download";
-import RvfIconButton from "../RvfIconButton";
+import IconButton from "../ui/IconButton";
 import useRvfContext from "../utils/hooks/useRvfContext";
 
-export type RvfExportMenuButtonProps = JSX.HTMLAttributes<HTMLButtonElement> &
-  PreactDOMAttributes;
+import type { IconButtonProps } from "../ui/IconButton/IconButton";
+
+export type RvfExportMenuButtonProps = IconButtonProps;
 
 function RvfExportMenuButton({ ...props }: RvfExportMenuButtonProps) {
   const { isExportMenuOpen, setIsExportMenuOpen } = useRvfContext();
@@ -18,9 +17,9 @@ function RvfExportMenuButton({ ...props }: RvfExportMenuButtonProps) {
   }, [isExportMenuOpen, setIsExportMenuOpen]);
 
   return (
-    <RvfIconButton {...props} onClick={onClick} selected={isExportMenuOpen}>
+    <IconButton {...props} onClick={onClick} selected={isExportMenuOpen}>
       <Download />
-    </RvfIconButton>
+    </IconButton>
   );
 }
 

package/src/RvfFeatureDetails/RvfFeatureDetails.tsx

@@ -1,13 +1,14 @@
-import type { JSX, PreactDOMAttributes } from "preact";
-
 import { memo } from "preact/compat";
 
 import useRvfContext from "../utils/hooks/useRvfContext";
+
 import RvfLineNetworkDetails from "./RvfLineNetworkDetails/RvfLineNetworkDetails";
-// import RvfNotificationDetails from "./RvfNotificationDetails";
+import RvfNotificationDetails from "./RvfNotificationDetails";
 import RvfSellingPointDetails from "./RvfSellingPointDetails";
 import RvfSharedMobilityDetails from "./RvfSharedMobilityDetail";
 
+import type { JSX, PreactDOMAttributes } from "preact";
+
 export type RvfFeatureDetailsProps = JSX.HTMLAttributes<HTMLDivElement> &
   PreactDOMAttributes;
 
@@ -49,8 +50,7 @@ function RvfFeatureDetails(props: RvfFeatureDetailsProps) {
       {isSharedMobility && (
         <RvfSharedMobilityDetails selectedFeature={selectedFeature} />
       )}
-      {isNotification && null}
-      {/* <RvfNotificationDetails feature={selectedFeature} />} */}
+      {isNotification && <RvfNotificationDetails feature={selectedFeature} />}
       {isLineNetwork && (
         <RvfLineNetworkDetails
           feature={selectedFeature}

package/src/RvfFeatureDetails/RvfLineNetworkDetails/RvfLineNetworkDetails.tsx

@@ -1,14 +1,13 @@
-import { VectorTileSource } from "maplibre-gl";
-import { RealtimeLine } from "mobility-toolbox-js/types";
-import { Feature } from "ol";
 import { useEffect, useMemo, useState } from "preact/hooks";
 
-import ArrowDown from "../../icons/ArrowDown";
-import ArrowUp from "../../icons/ArrowUp";
 import RouteIcon from "../../RouteIcon";
-import RouteStopProgress from "../../RouteStopProgress";
+import Button from "../../ui/Button";
+import { RVF_LAYERS_NAMES } from "../../utils/constants";
+import useLayerConfig from "../../utils/hooks/useLayerConfig";
 import useMapContext from "../../utils/hooks/useMapContext";
-import { RouteStopContext } from "../../utils/hooks/useRouteStop";
+
+import type { RealtimeLine } from "mobility-toolbox-js/types";
+import type { Feature } from "ol";
 
 let cacheLineInfosById = null;
 let cacheStopInfosById = null;
@@ -52,14 +51,14 @@ function RvfLineNetworkDetails({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [stopInfosOpenId, setStopInfosOpenId] = useState<string>(null);
 
+  const layerConfig = useLayerConfig(RVF_LAYERS_NAMES.liniennetz);
+
   const isRunsDisplay = useMemo(() => {
     return new URLSearchParams(window.location.search).get("runs") === "true";
   }, []);
 
   useEffect(() => {
-    const source = baseLayer?.mapLibreMap?.getSource(
-      LNP_SOURCE_ID,
-    ) as VectorTileSource;
+    const source = baseLayer?.mapLibreMap?.getSource(LNP_SOURCE_ID);
     const abortController = new AbortController();
     const fetchInfos = async (url) => {
       if (!cacheLineInfosById) {
@@ -71,8 +70,10 @@ function RvfLineNetworkDetails({
       setLineInfos(cacheLineInfosById);
       setStopInfos(cacheStopInfosById);
     };
+    // @ts-expect-error --- IGNORE ---
     if (source?.url) {
-      fetchInfos(source?.url);
+      // @ts-expect-error --- IGNORE ---git as
+      void fetchInfos(source?.url);
     }
     return () => {
       abortController?.abort();
@@ -104,8 +105,8 @@ function RvfLineNetworkDetails({
           .filter((f) => {
             return f.get(ORIGINAL_LINE_ID_PROP) === id;
           })
-          .reduce((acc, feature) => {
-            return acc + feature.get(RUNS_PROP);
+          .reduce((acc, featuree) => {
+            return acc + featuree.get(RUNS_PROP);
           }, 0);
         lineInfos[id].id = id;
         lineInfos[id].runs = runs;
@@ -139,144 +140,169 @@ function RvfLineNetworkDetails({
 
   return (
     <div className="flex flex-col gap-4">
-      {Object.entries(lineInfosByOperator)
-        .sort(([operatorNameA], [operatorNameB]) => {
-          return lineInfosByOperator[operatorNameA].runs <
-            lineInfosByOperator[operatorNameB].runs
-            ? 1
-            : -1;
-        })
-        .map(([operatorName, linesInfos]) => {
-          return (
-            <div className={"flex flex-col gap-2"} key={operatorName}>
-              <div>{operatorName}</div>
-              {linesInfos
-                .sort((a, b) => {
-                  return a.runs < b.runs ? 1 : -1;
-                })
-                .map((lineInfo) => {
-                  const {
-                    color: backgroundColor,
-                    id,
-                    // color,
-                    // external_id,
-                    long_name,
-                    mot,
-                    runs,
-                    short_name: shortName,
-                    text_color: textColor,
-                  } = lineInfo;
-                  let longName = long_name;
-
-                  let stops = null;
-                  //stopInfoIdsByLineId?.[id] || null;
-                  if (!stops?.length) {
-                    stops = null;
-                  }
+      <div className="flex flex-col gap-4">
+        {Object.entries(lineInfosByOperator)
+          .sort(([operatorNameA], [operatorNameB]) => {
+            return lineInfosByOperator[operatorNameA].runs <
+              lineInfosByOperator[operatorNameB].runs
+              ? 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;
 
-                  if (!longName && stops) {
-                    const names = stops.map((stopId) => {
-                      return stopInfos[stopId].short_name;
-                    });
+                      let stops = null;
+                      //stopInfoIdsByLineId?.[id] || null;
+                      if (!stops?.length) {
+                        stops = null;
+                      }
 
-                    longName = [
-                      ...new Set([names[0], names[names.length - 1]]),
-                    ].join(" - ");
-                  }
+                      if (!longName && stops) {
+                        const names = stops.map((stopId) => {
+                          return stopInfos[stopId].short_name;
+                        });
 
-                  // Build a line object
-                  const line: { type: string } & RealtimeLine = {
-                    color: null,
-                    id: null,
-                    name: shortName,
-                    stroke: null,
-                    text_color: null,
-                    type: mot,
-                  };
+                        longName = [
+                          ...new Set([names[0], names[names.length - 1]]),
+                        ].join(" - ");
+                      }
 
-                  if (textColor) {
-                    line.text_color =
-                      textColor[0] === "#" ? textColor : "#" + textColor;
-                  }
+                      // Build a line object
+                      const line: { type: string } & RealtimeLine = {
+                        color: null,
+                        id: null,
+                        name: shortName,
+                        stroke: null,
+                        text_color: null,
+                        type: mot,
+                      };
 
-                  if (backgroundColor) {
-                    line.color =
-                      backgroundColor[0] === "#"
-                        ? backgroundColor
-                        : "#" + backgroundColor;
-                  }
+                      if (textColor) {
+                        line.text_color = textColor.startsWith("#")
+                          ? textColor
+                          : `#${textColor}`;
+                      }
 
-                  return (
-                    <div key={shortName}>
-                      <div
-                        className={
-                          "flex w-full items-center justify-between gap-2"
-                        }
-                        // onClick={() => {
-                        //   setStopInfosOpenId(stopInfosOpenId === id ? null : id);
-                        // }}
-                      >
-                        <div>
-                          <RouteIcon line={line}></RouteIcon>
-                        </div>
-                        {!!longName && (
-                          <div className={"flex-1 text-left"}>{longName}</div>
-                        )}
-                        {isRunsDisplay && (
-                          <div className={"text-xs"}>{runs}</div>
-                        )}
+                      if (backgroundColor) {
+                        line.color = backgroundColor.startsWith("#")
+                          ? backgroundColor
+                          : `#${backgroundColor}`;
+                      }
 
-                        {!!stops && (
-                          <button className={"shrink-0"}>
-                            {stopInfosOpenId === id ? (
-                              <ArrowUp />
-                            ) : (
-                              <ArrowDown />
-                            )}
-                          </button>
-                        )}
-                      </div>
-                      {!!stops && (
+                      return (
                         <div
-                          className={`${stopInfosOpenId === id ? "" : "hidden"}`}
+                          className={longName ? "w-full" : ""}
+                          key={shortName}
                         >
-                          {stops?.map((stopId, index, arr) => {
-                            const stop = stopInfos[stopId];
-                            return (
+                          <div
+                            className={"flex justify-between gap-2"}
+                            // onClick={() => {
+                            //   setStopInfosOpenId(stopInfosOpenId === id ? null : id);
+                            // }}
+                          >
+                            <div>
+                              <RouteIcon line={line}></RouteIcon>
+                            </div>
+                            {!!longName && (
                               <div
-                                className={"flex items-center gap-2"}
-                                key={stopId}
+                                className={
+                                  "flex-1 text-left *:before:content-['_–'] *:first:font-semibold *:first:before:!content-[_p] *:last:font-semibold *:last:before:!content-[_p]"
+                                }
                               >
-                                <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>
+                                {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>
+              </div>
+            );
+          })}
+      </div>
+      {layerConfig.link && (
+        <div className={"flex"}>
+          <Button
+            className={"text-base"}
+            href={layerConfig.link.href}
+            target="_blank"
+            theme="primary"
+          >
+            {layerConfig.link.text || "Mehr erfahren"}
+          </Button>
+        </div>
+      )}
     </div>
   );
 }