@geops/rvf-mobility-web-component 0.1.46 → 0.1.47

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;
 
@@ -25,7 +26,7 @@ function RvfFeatureDetails(props: RvfFeatureDetailsProps) {
   const { selectedFeature, selectedFeatures } = useRvfContext();
   const isSharedMobility = getIsSharedMobility(selectedFeature);
   const isSellingPoint = !!selectedFeature.get("tickets");
-  const isNotification = !!selectedFeature.get("severity");
+  const isNotification = !!selectedFeature.get("situation");
   const isLineNetwork = !!selectedFeature.get("original_line_id");
 
   const showDefaultData = () => {
@@ -45,23 +46,26 @@ function RvfFeatureDetails(props: RvfFeatureDetailsProps) {
 
   return (
     <div {...props}>
-      {isSellingPoint && <RvfSellingPointDetails feature={selectedFeature} />}
-      {isSharedMobility && (
-        <RvfSharedMobilityDetails selectedFeature={selectedFeature} />
-      )}
-      {isNotification && null}
-      {/* <RvfNotificationDetails feature={selectedFeature} />} */}
-      {isLineNetwork && (
-        <RvfLineNetworkDetails
-          feature={selectedFeature}
-          features={selectedFeatures}
-        />
-      )}
-      {!isLineNetwork &&
-        !isNotification &&
-        !isSharedMobility &&
-        !isSellingPoint &&
-        showDefaultData()}
+      <div className="p-4 pb-0">
+        {isSellingPoint && <RvfSellingPointDetails feature={selectedFeature} />}
+        {isSharedMobility && (
+          <RvfSharedMobilityDetails selectedFeature={selectedFeature} />
+        )}
+        {isNotification && <RvfNotificationDetails feature={selectedFeature} />}
+        {isLineNetwork && (
+          <RvfLineNetworkDetails
+            feature={selectedFeature}
+            features={selectedFeatures}
+          />
+        )}
+        {!isLineNetwork &&
+          !isNotification &&
+          !isSharedMobility &&
+          !isSellingPoint &&
+          showDefaultData()}
+      </div>
+      {/* TODO find why -1px is necessary */}
+      <div className="pointer-events-none sticky bottom-[-1px] h-6 w-full bg-gradient-to-b from-transparent to-white" />
     </div>
   );
 }

package/src/RvfFeatureDetails/RvfLineNetworkDetails/RvfLineNetworkDetails.tsx

@@ -1,14 +1,10 @@
-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 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;
@@ -57,9 +53,7 @@ function RvfLineNetworkDetails({
   }, []);
 
   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 +65,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 +100,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;
@@ -138,7 +134,7 @@ function RvfLineNetworkDetails({
   }
 
   return (
-    <div className="flex flex-col gap-4">
+    <div className="space-y-4">
       {Object.entries(lineInfosByOperator)
         .sort(([operatorNameA], [operatorNameB]) => {
           return lineInfosByOperator[operatorNameA].runs <
@@ -150,130 +146,138 @@ function RvfLineNetworkDetails({
           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;
+              <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;
 
-                  let stops = null;
-                  //stopInfoIdsByLineId?.[id] || null;
-                  if (!stops?.length) {
-                    stops = null;
-                  }
+                    let stops = null;
+                    //stopInfoIdsByLineId?.[id] || null;
+                    if (!stops?.length) {
+                      stops = null;
+                    }
 
-                  if (!longName && stops) {
-                    const names = stops.map((stopId) => {
-                      return stopInfos[stopId].short_name;
-                    });
+                    if (!longName && stops) {
+                      const names = stops.map((stopId) => {
+                        return stopInfos[stopId].short_name;
+                      });
 
-                    longName = [
-                      ...new Set([names[0], names[names.length - 1]]),
-                    ].join(" - ");
-                  }
+                      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,
-                  };
+                    // 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[0] === "#" ? textColor : "#" + textColor;
-                  }
+                    if (textColor) {
+                      line.text_color = textColor.startsWith("#")
+                        ? textColor
+                        : `#${textColor}`;
+                    }
 
-                  if (backgroundColor) {
-                    line.color =
-                      backgroundColor[0] === "#"
+                    if (backgroundColor) {
+                      line.color = backgroundColor.startsWith("#")
                         ? backgroundColor
-                        : "#" + backgroundColor;
-                  }
-
-                  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>
-                        )}
+                        : `#${backgroundColor}`;
+                    }
 
-                        {!!stops && (
-                          <button className={"shrink-0"}>
-                            {stopInfosOpenId === id ? (
-                              <ArrowUp />
-                            ) : (
-                              <ArrowDown />
-                            )}
-                          </button>
-                        )}
-                      </div>
-                      {!!stops && (
+                    return (
+                      <div className={longName ? "w-full" : ""} key={shortName}>
                         <div
-                          className={`${stopInfosOpenId === id ? "" : "hidden"}`}
+                          className={"flex justify-between gap-2"}
+                          // onClick={() => {
+                          //   setStopInfosOpenId(stopInfosOpenId === id ? null : id);
+                          // }}
                         >
-                          {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>
+                            <RouteIcon line={line}></RouteIcon>
+                          </div>
+                          {!!longName && (
+                            <div
+                              className={
+                                "flex-1 text-left *:before:content-['_–'] *:first:font-semibold *:first:before:!content-[_p] *:last:font-semibold *:last:before:!content-[_p]"
+                              }
+                            >
+                              {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>
-                      )}
-                    </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>
           );
         })}