@geops/rvf-mobility-web-component 0.1.55 → 0.1.57

package/src/OverlayDetailsFooter/OverlayDetailsFooter.tsx

@@ -0,0 +1,51 @@
+import { memo } from "preact/compat";
+import { twMerge } from "tailwind-merge";
+
+import ArrowRight from "../icons/ArrowRight";
+import Button from "../ui/Button";
+import useLayerConfig from "../utils/hooks/useLayerConfig";
+
+import type { Feature } from "ol";
+import type BaseLayer from "ol/layer/Base";
+import type { HTMLAttributes, PreactDOMAttributes } from "preact";
+
+export type OverlayDetailsFooterProps = {
+  className?: string;
+  feature?: Feature;
+  layer?: BaseLayer;
+} & HTMLAttributes<HTMLDivElement> &
+  PreactDOMAttributes;
+
+function OverlayDetailsFooter({
+  className,
+  feature,
+  layer,
+  ...props
+}: OverlayDetailsFooterProps) {
+  const layerConfig = useLayerConfig(layer?.get("name"));
+
+  if (!layerConfig?.link || layerConfig?.link?.show === false) {
+    return null;
+  }
+
+  let id = feature?.get("id");
+  const situation = feature?.get("situation");
+  if (situation) {
+    const situationParsed = JSON.parse(situation);
+    id = situationParsed?.id || id;
+  }
+  return (
+    <div {...props} className={twMerge("flex flex-row p-4", className)}>
+      <Button
+        href={layerConfig.link.href.replace("{{id}}", id)}
+        target="_blank"
+        theme="primary"
+      >
+        <span>{layerConfig.link.text || "Mehr erfahren"}</span>
+        <ArrowRight />
+      </Button>
+    </div>
+  );
+}
+
+export default memo(OverlayDetailsFooter);

package/src/OverlayDetailsFooter/index.tsx

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

package/src/OverlayDetailsHeader/OverlayDetailsHeader.tsx

@@ -0,0 +1,35 @@
+import { memo, useMemo } from "preact/compat";
+
+import OverlayHeader from "../OverlayHeader";
+import { LAYERS_NAMES, LAYERS_TITLES } from "../utils/constants";
+
+import type { Feature } from "ol";
+import type BaseLayer from "ol/layer/Base";
+
+import type { OverlayHeaderProps } from "../OverlayHeader/OverlayHeader";
+
+export type OverlayDetailsHeaderProps = {
+  feature?: Feature;
+  layer?: BaseLayer;
+} & OverlayHeaderProps;
+
+function OverlayDetailsHeader({
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  feature,
+  layer,
+  ...props
+}: OverlayDetailsHeaderProps) {
+  const title = useMemo(() => {
+    let ttle = layer?.get("title");
+    if (!ttle) {
+      const key = Object.keys(LAYERS_TITLES).find((titleKey) => {
+        return LAYERS_NAMES[titleKey] === layer?.get("name");
+      });
+      ttle = LAYERS_TITLES[key];
+    }
+    return ttle || layer?.get("name") || "Details";
+  }, [layer]);
+
+  return <OverlayHeader title={title} {...props}></OverlayHeader>;
+}
+export default memo(OverlayDetailsHeader);

package/src/OverlayDetailsHeader/index.ts

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

package/src/OverlayFooter/OverlayFooter.tsx

@@ -0,0 +1,41 @@
+import { memo } from "preact/compat";
+import { twMerge } from "tailwind-merge";
+
+import Cancel from "../icons/Cancel";
+import IconButton from "../ui/IconButton";
+
+import type { HTMLAttributes, PreactDOMAttributes } from "preact";
+
+export type RvfOverlayHeaderProps = {
+  onClose?: () => void;
+  title?: React.ReactNode;
+} & HTMLAttributes<HTMLDivElement> &
+  PreactDOMAttributes;
+
+function OverlayFooter({
+  children,
+  className,
+  onClose,
+  title,
+  ...props
+}: RvfOverlayHeaderProps) {
+  return (
+    <div
+      {...props}
+      className={twMerge(
+        `flex flex-row items-center justify-between gap-2 border-b p-2 pl-4`,
+        className,
+      )}
+    >
+      {/* We set text-base so the clamp works on overlay container, not main */}
+      {children || <span className={"text-base font-bold"}>{title}</span>}
+      {onClose && (
+        <IconButton className={"!size-[32px] border-none"} onClick={onClose}>
+          <Cancel />
+        </IconButton>
+      )}
+    </div>
+  );
+}
+
+export default memo(OverlayFooter);

package/src/OverlayFooter/index.tsx

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

package/src/OverlayHeader/OverlayHeader.tsx

@@ -0,0 +1,44 @@
+import { memo } from "preact/compat";
+import { twMerge } from "tailwind-merge";
+
+import Cancel from "../icons/Cancel";
+import IconButton from "../ui/IconButton";
+
+import type { HTMLAttributes, PreactDOMAttributes } from "preact";
+
+export type OverlayHeaderProps = {
+  onClose?: () => void;
+  title?: React.ReactNode;
+} & HTMLAttributes<HTMLDivElement> &
+  PreactDOMAttributes;
+
+function OverlayHeader({
+  children,
+  className,
+  onClose,
+  title,
+  ...props
+}: OverlayHeaderProps) {
+  return (
+    <div
+      {...props}
+      className={twMerge(
+        `flex flex-row items-center justify-between gap-2 border-b p-2 pl-4`,
+        className,
+      )}
+    >
+      {/* We set text-base so the clamp works on overlay container, not main */}
+      {children || <span className={"text-base font-bold"}>{title}</span>}
+      {onClose && (
+        <IconButton
+          className={"!size-[32px] border-none shadow-none"}
+          onClick={onClose}
+        >
+          <Cancel />
+        </IconButton>
+      )}
+    </div>
+  );
+}
+
+export default memo(OverlayHeader);

package/src/OverlayHeader/index.tsx

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

package/src/PermalinkInput/PermalinkInput.tsx

@@ -0,0 +1,28 @@
+import InputCopy from "../ui/InputCopy";
+
+import type { HTMLAttributes, PreactDOMAttributes } from "preact";
+
+import type { InputCopyProps } from "../ui/InputCopy/InputCopy";
+
+export type PermalinkInputProps = {
+  inputProps?: InputCopyProps;
+} & HTMLAttributes<HTMLDivElement> &
+  PreactDOMAttributes;
+
+const emptyProps = {}; // avoid re-rendering
+
+function PermalinkInput({
+  inputProps = emptyProps,
+  ...props
+}: PermalinkInputProps) {
+  return (
+    <div {...props}>
+      <InputCopy value={window?.location.href} {...inputProps} />
+      <p className="py-2">
+        Sie können auch den Link aus der Adresszeile des Browsers kopieren.
+      </p>
+    </div>
+  );
+}
+
+export default PermalinkInput;

package/src/PermalinkInput/index.tsx

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

package/src/RouteSchedule/RouteSchedule.tsx

@@ -1,9 +1,11 @@
 import { memo } from "preact/compat";
 import { useEffect, useRef } from "preact/hooks";
+import { twMerge } from "tailwind-merge";
 
 import RouteScheduleFooter from "../RouteScheduleFooter";
 import RouteScheduleHeader from "../RouteScheduleHeader";
 import RouteStop from "../RouteStop";
+import ShadowOverflow from "../ShadowOverflow";
 import useMapContext from "../utils/hooks/useMapContext";
 
 import type { RealtimeStop } from "mobility-toolbox-js/types";
@@ -25,7 +27,7 @@ function RouteSchedule(props: RouteScheduleProps) {
       const nextStation = elt.querySelector("[data-station-passed=false]");
       if (nextStation) {
         // We use scrollTo avoid scrolling the entire window.
-        (nextStation.parentNode as Element).scrollTo({
+        (nextStation.parentNode.parentNode as Element).scrollTo({
           behavior: "smooth",
           top: (nextStation as HTMLElement).offsetTop || 0,
         });
@@ -47,23 +49,25 @@ function RouteSchedule(props: RouteScheduleProps) {
   return (
     <>
       <RouteScheduleHeader />
-      <div className={className} ref={ref}>
-        {stopSequence.stations.map((stop: RealtimeStop, index: number) => {
-          const { arrivalTime, departureTime, stationId, stationName } = stop;
-          return (
-            <RouteStop
-              // Train line can go in circle so begin and end have the same id,
-              index={index}
-              // using the time in the key should fix the issue.
-              key={
-                (`${stationId}` || stationName) + arrivalTime + departureTime
-              }
-              stop={stop}
-            />
-          );
-        })}
-        <RouteScheduleFooter />
-      </div>
+      <ShadowOverflow>
+        <div className={twMerge("text-base", className)} ref={ref}>
+          {stopSequence.stations.map((stop: RealtimeStop, index: number) => {
+            const { arrivalTime, departureTime, stationId, stationName } = stop;
+            return (
+              <RouteStop
+                // Train line can go in circle so begin and end have the same id,
+                index={index}
+                // using the time in the key should fix the issue.
+                key={
+                  (`${stationId}` || stationName) + arrivalTime + departureTime
+                }
+                stop={stop}
+              />
+            );
+          })}
+          <RouteScheduleFooter />
+        </div>
+      </ShadowOverflow>
     </>
   );
 }

package/src/RvfFeatureDetails/RvfFeatureDetails.tsx

@@ -1,16 +1,11 @@
 import { memo } from "preact/compat";
 
-import useRvfContext from "../utils/hooks/useRvfContext";
+import FeatureDetails from "../FeatureDetails/FeatureDetails";
 
-import RvfLineNetworkDetails from "./RvfLineNetworkDetails/RvfLineNetworkDetails";
-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;
+import type { FeatureDetailsProps } from "../FeatureDetails/FeatureDetails";
 
 const getIsSharedMobility = (selectedFeature): boolean => {
   if (
@@ -22,51 +17,28 @@ const getIsSharedMobility = (selectedFeature): boolean => {
   }
 };
 
-function RvfFeatureDetails(props: RvfFeatureDetailsProps) {
-  const { selectedFeature, selectedFeatures } = useRvfContext();
-  const isSharedMobility = getIsSharedMobility(selectedFeature);
-  const isSellingPoint = !!selectedFeature.get("tickets");
-  const isNotification = !!selectedFeature.get("situation");
-  const isLineNetwork = !!selectedFeature.get("original_line_id");
-
-  const showDefaultData = () => {
-    return Object.entries(selectedFeature.getProperties()).map(
-      ([key, value]) => {
-        return (
-          <div className="flex gap-2" key={key}>
-            <span>
-              <b>{key}:</b>
-            </span>
-            <div>{value}</div>
-          </div>
-        );
-      },
-    );
-  };
+function RvfFeatureDetails({
+  feature,
+  featuresInfo,
+  layer,
+}: FeatureDetailsProps) {
+  const isSharedMobility = getIsSharedMobility(feature);
+  const isSellingPoint = !!feature.get("tickets");
 
   return (
-    <div {...props}>
-      <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>
+    <>
+      <FeatureDetails
+        feature={feature}
+        featuresInfo={featuresInfo}
+        layer={layer}
+      />
+      {(isSellingPoint || isSharedMobility) && (
+        <div className="p-4 text-base">
+          {isSellingPoint && <RvfSellingPointDetails feature={feature} />}
+          {isSharedMobility && <RvfSharedMobilityDetails feature={feature} />}
+        </div>
+      )}
+    </>
   );
 }
 

package/src/RvfFeatureDetails/RvfLineNetworkDetails/RvfLineNetworkDetails.tsx

@@ -1,10 +1,13 @@
 import { useEffect, useMemo, useState } from "preact/hooks";
+import { twMerge } from "tailwind-merge";
 
 import RouteIcon from "../../RouteIcon";
+import ShadowOverflow from "../../ShadowOverflow";
 import useMapContext from "../../utils/hooks/useMapContext";
 
 import type { RealtimeLine } from "mobility-toolbox-js/types";
 import type { Feature } from "ol";
+import type { PreactDOMAttributes } from "preact";
 
 let cacheLineInfosById = null;
 let cacheStopInfosById = null;
@@ -35,13 +38,11 @@ const LNP_MD_STOPS = "geops.lnp.stops";
 const RUNS_PROP = "runs";
 const ORIGINAL_LINE_ID_PROP = "original_line_id";
 
-function RvfLineNetworkDetails({
-  feature,
+function LinesNetworkPlanDetails({
+  className,
   features,
-}: {
-  feature: Feature;
-  features: Feature[];
-}) {
+  ...props
+}: { className?: string; features: Feature[] } & PreactDOMAttributes) {
   const { baseLayer } = useMapContext();
   const [lineInfos, setLineInfos] = useState<LineInfo[]>(null);
   const [stopInfos, setStopInfos] = useState<StopInfo[]>(null);
@@ -65,9 +66,7 @@ function RvfLineNetworkDetails({
       setLineInfos(cacheLineInfosById);
       setStopInfos(cacheStopInfosById);
     };
-    // @ts-expect-error --- IGNORE ---
     if (source?.url) {
-      // @ts-expect-error --- IGNORE ---git as
       void fetchInfos(source?.url);
     }
     return () => {
@@ -129,107 +128,111 @@ function RvfLineNetworkDetails({
     return byLineId;
   }, [features]);
 
-  if (!feature || !lineInfos) {
+  if (!features?.length || !lineInfos) {
     return null;
   }
 
   return (
-    <div className="space-y-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;
+    <ShadowOverflow {...props} className={twMerge("px-4 text-base", className)}>
+      <div className="space-y-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;
 
-                    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.startsWith("#")
-                        ? textColor
-                        : `#${textColor}`;
-                    }
+                      if (textColor) {
+                        line.text_color = textColor.startsWith("#")
+                          ? textColor
+                          : `#${textColor}`;
+                      }
 
-                    if (backgroundColor) {
-                      line.color = backgroundColor.startsWith("#")
-                        ? backgroundColor
-                        : `#${backgroundColor}`;
-                    }
+                      if (backgroundColor) {
+                        line.color = backgroundColor.startsWith("#")
+                          ? backgroundColor
+                          : `#${backgroundColor}`;
+                      }
 
-                    return (
-                      <div className={longName ? "w-full" : ""} key={shortName}>
+                      return (
                         <div
-                          className={"flex justify-between gap-2"}
-                          // onClick={() => {
-                          //   setStopInfosOpenId(stopInfosOpenId === id ? null : id);
-                          // }}
+                          className={longName ? "w-full" : ""}
+                          key={shortName}
                         >
-                          <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
+                            className={"flex justify-between gap-2"}
+                            // onClick={() => {
+                            //   setStopInfosOpenId(stopInfosOpenId === id ? null : id);
+                            // }}
+                          >
+                            <div>
+                              <RouteIcon line={line}></RouteIcon>
                             </div>
-                          )}
-                          {isRunsDisplay && (
-                            <div className={"text-xs"}>{runs}</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 && (
+                            {/* We deactivate the list of stopsfor now */}
+                            {/* {!!stops && (
                               <button className={"shrink-0"}>
                                 {stopInfosOpenId === id ? (
                                   <ArrowUp />
@@ -238,8 +241,8 @@ function RvfLineNetworkDetails({
                                 )}
                               </button>
                             )} */}
-                        </div>
-                        {/* {!!stops && (
+                          </div>
+                          {/* {!!stops && (
                             <div
                               className={`${stopInfosOpenId === id ? "" : "hidden"}`}
                             >
@@ -274,15 +277,16 @@ function RvfLineNetworkDetails({
                               })}
                             </div>
                           )} */}
-                      </div>
-                    );
-                  })}
+                        </div>
+                      );
+                    })}
+                </div>
               </div>
-            </div>
-          );
-        })}
-    </div>
+            );
+          })}
+      </div>
+    </ShadowOverflow>
   );
 }
 
-export default RvfLineNetworkDetails;
+export default LinesNetworkPlanDetails;