@geops/rvf-mobility-web-component 0.1.56 → 0.1.58

package/src/RvfFeatureDetails/RvfNotificationDetails/RvfNotificationDetails.tsx

@@ -1,13 +1,19 @@
+import {
+  type AffectedTimeIntervalType,
+  type PublicationType,
+  type SituationType,
+  type TextualContentType,
+} from "mobility-toolbox-js/types";
+import { useEffect, useState } from "preact/hooks";
+import { twMerge } from "tailwind-merge";
+
 import Warning from "../../icons/Warning";
+import ShadowOverflow from "../../ShadowOverflow";
 import getBgColor from "../../utils/getBgColor";
 import useI18n from "../../utils/hooks/useI18n";
+import useMapContext from "../../utils/hooks/useMapContext";
 
-import type {
-  AffectedTimeIntervalType,
-  PublicationType,
-  SituationType,
-  TextualContentType,
-} from "mobility-toolbox-js/types";
+import type { RealtimeLine, RealtimeMot } from "mobility-toolbox-js/types";
 import type { Feature } from "ol";
 
 const toShortDate = (date: Date, showTime, showYear?: boolean) => {
@@ -28,34 +34,36 @@ const toShortDate = (date: Date, showTime, showYear?: boolean) => {
     .replace(/\.$/, "");
 };
 
-let rvfLines = null;
-fetch("https://tralis-tracker-api.geops.io/api/lines/rvf/")
-  .then((res) => {
-    return res.json();
-  })
-  .then((data) => {
-    rvfLines = data;
-  })
-  .catch((err) => {
-    // eslint-disable-next-line no-console
-    console.error("Failed to fetch RVF lines", err);
-  });
-const getLine = (name) => {
-  if (rvfLines) {
-    const line = rvfLines.find((linee) => {
+const getLine = (name: string, lines: NotificationLine[]): NotificationLine => {
+  if (lines?.length) {
+    const line = lines.find((linee) => {
       return linee.name === name;
     });
     if (line) {
       return line;
     }
   }
-  return { mot: "bus", name };
+  return { mot: "bus", name } as NotificationLine;
 };
 
-// text = "# hello, markdown!",
-// html = converter.makeHtml(text);
-function RvfNotificationDetails({ feature }: { feature: Feature }) {
+export type NotificationLine = {
+  mot?: RealtimeMot;
+  operator_name?: string;
+  short_name?: string;
+  tags?: string[];
+} & RealtimeLine;
+
+function NotificationDetails({
+  className,
+  feature,
+  ...props
+}: {
+  className?: string;
+  feature: Feature;
+}) {
   const { t } = useI18n();
+  const { notificationtenant } = useMapContext();
+  const [lines, setLines] = useState<NotificationLine[]>([]);
   const {
     affected_products: affectedProducts,
     affected_time_intervals: timeIntervals,
@@ -73,6 +81,29 @@ function RvfNotificationDetails({ feature }: { feature: Feature }) {
     summary_de: summary,
   } = feature.getProperties();
 
+  useEffect(() => {
+    const abortController = new AbortController();
+    if (!notificationtenant) {
+      setLines([]);
+    }
+    fetch(
+      `https://tralis-tracker-api.geops.io/api/lines/${notificationtenant}/`,
+    )
+      .then((res) => {
+        return res.json();
+      })
+      .then((data) => {
+        setLines(data);
+      })
+      .catch((err) => {
+        // eslint-disable-next-line no-console
+        console.error("Failed to fetch lines", err);
+      });
+    return () => {
+      abortController?.abort();
+    };
+  }, [notificationtenant]);
+
   // "title_de": "",
   //           "title_fr": "",
   //           "title_it": "",
@@ -146,12 +177,12 @@ function RvfNotificationDetails({ feature }: { feature: Feature }) {
         {!!products?.length && (
           <div className="flex flex-wrap gap-2">
             {products?.map(({ name }) => {
-              const line = getLine(name);
+              const line = getLine(name, lines);
               return (
                 <>
                   <div
                     className={
-                      "bg-red w-fit rounded-md px-[12px] py-[9px] leading-none font-bold text-white"
+                      "w-fit rounded-md bg-black px-[12px] py-[9px] leading-none font-bold text-white"
                     }
                     key={name}
                     style={{
@@ -289,145 +320,149 @@ function RvfNotificationDetails({ feature }: { feature: Feature }) {
   }
 
   return (
-    <div className="space-y-6 text-base">
-      {publicationsToDisplay?.map(
-        ({
-          id,
-          publicationLines,
-          publicationStops,
-          textualContentLarge,
-          textualContentMedium,
-          textualContentSmall,
-        }) => {
-          // Get the textual content in German
-          textualContent = (
-            textualContentLarge ||
-            textualContentMedium ||
-            textualContentSmall
-          )?.de;
+    <ShadowOverflow {...props} className={twMerge("px-4 text-base", className)}>
+      <div>
+        {publicationsToDisplay?.map(
+          ({
+            id,
+            publicationLines,
+            publicationStops,
+            textualContentLarge,
+            textualContentMedium,
+            textualContentSmall,
+          }) => {
+            // Get the textual content in German
+            textualContent = (
+              textualContentLarge ||
+              textualContentMedium ||
+              textualContentSmall
+            )?.de;
 
-          const lines =
-            publicationLines?.flatMap((publication) => {
-              return (
-                publication.lines?.map(({ name }) => {
-                  return name;
-                }) || []
-              );
-            }) || [];
+            const pubLines =
+              publicationLines?.flatMap((publication) => {
+                return (
+                  publication.lines?.map(({ name }) => {
+                    return name;
+                  }) || []
+                );
+              }) || [];
 
-          const stations = publicationStops.map((publication) => {
-            return publication?.name || "";
-          });
+            const stations = publicationStops.map((publication) => {
+              return publication?.name || "";
+            });
 
-          return (
-            <div className={"text-base"} key={id}>
-              <div className="text-xs uppercase">{reasonsToDisplay}</div>
-              <h3 className="space-x-2 text-lg font-bold text-balance">
-                <span className={"line-height-[1.3] inline-block align-middle"}>
-                  <Warning />
-                </span>
-                <span
-                  dangerouslySetInnerHTML={{
-                    __html: textualContent?.summary,
-                  }}
-                ></span>
-              </h3>
-              <hr className="my-1" />
+            return (
+              <div className={"text-base"} key={id}>
+                <div className="text-xs uppercase">{reasonsToDisplay}</div>
+                <h3 className="space-x-2 text-lg font-bold text-balance">
+                  <span
+                    className={"line-height-[1.3] inline-block align-middle"}
+                  >
+                    <Warning />
+                  </span>
+                  <span
+                    dangerouslySetInnerHTML={{
+                      __html: textualContent?.summary,
+                    }}
+                  ></span>
+                </h3>
+                <hr className="my-1" />
 
-              {timeIntervalsToDisplay?.map(
-                ({
-                  dailyEndTime,
-                  dailyStartTime,
-                  endTime,
-                  startTime,
-                }: AffectedTimeIntervalType) => {
-                  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");
+                {timeIntervalsToDisplay?.map(
+                  ({
+                    dailyEndTime,
+                    dailyStartTime,
+                    endTime,
+                    startTime,
+                  }: AffectedTimeIntervalType) => {
+                    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");
 
-                  return (
-                    <div
-                      className="text-sm font-bold text-balance"
-                      key={startTime}
-                    >
-                      <span>
-                        {`von ${toShortDate(new Date(startTime), !hasDailyTime, !isStartCurrentYear)}`}
-                        {!isEndInfinite &&
-                          ` bis ${toShortDate(new Date(endTime), !hasDailyTime, !isEndCurrentYear)}`}
-                      </span>
-                      {hasDailyTime && (
-                        <span>{` (täglich von ${dailyStartTime} bis ${dailyEndTime})`}</span>
-                      )}
+                    return (
+                      <div
+                        className="text-sm font-bold text-balance"
+                        key={startTime}
+                      >
+                        <span>
+                          {`von ${toShortDate(new Date(startTime), !hasDailyTime, !isStartCurrentYear)}`}
+                          {!isEndInfinite &&
+                            ` bis ${toShortDate(new Date(endTime), !hasDailyTime, !isEndCurrentYear)}`}
+                        </span>
+                        {hasDailyTime && (
+                          <span>{` (täglich von ${dailyStartTime} bis ${dailyEndTime})`}</span>
+                        )}
+                      </div>
+                    );
+                  },
+                )}
+                <div
+                  className="mt-4"
+                  dangerouslySetInnerHTML={{
+                    __html:
+                      textualContent?.description || "Keine Details verfügbar",
+                  }}
+                />
+                {!!pubLines?.length && (
+                  <div>
+                    <br />
+                    <div className={"font-bold"}>Betroffene Lines:</div>
+                    <div className={"flex flex-wrap gap-1 text-sm"}>
+                      {pubLines?.map((name) => {
+                        return (
+                          <div
+                            className={
+                              "bg-red rounded-md px-2 py-1 font-bold text-white"
+                            }
+                            key={name}
+                          >
+                            {name}
+                          </div>
+                        );
+                      })}
                     </div>
-                  );
-                },
-              )}
-              <div
-                className="mt-4"
-                dangerouslySetInnerHTML={{
-                  __html:
-                    textualContent?.description || "Keine Details verfügbar",
-                }}
-              />
-              {!!lines?.length && (
+                  </div>
+                )}
                 <div>
                   <br />
-                  <div className={"font-bold"}>Betroffene Lines:</div>
+                  <div className={"font-bold"}>Betroffene Haltestellen:</div>
                   <div className={"flex flex-wrap gap-1 text-sm"}>
-                    {lines?.map((name) => {
-                      return (
-                        <div
-                          className={
-                            "bg-red rounded-md px-2 py-1 font-bold text-white"
-                          }
-                          key={name}
-                        >
-                          {name}
-                        </div>
-                      );
-                    })}
+                    {stations?.length ? (
+                      stations.map((name) => {
+                        return (
+                          <div
+                            className={
+                              "bg-red rounded-md px-2 py-1 font-bold text-white"
+                            }
+                            key={name}
+                          >
+                            {name}
+                          </div>
+                        );
+                      })
+                    ) : (
+                      <div
+                        className={
+                          "bg-red rounded-md px-2 py-1 font-bold text-white"
+                        }
+                      >
+                        Alle Bahnhöfe auf dieser Strecke
+                      </div>
+                    )}
                   </div>
                 </div>
-              )}
-              <div>
-                <br />
-                <div className={"font-bold"}>Betroffene Haltestellen:</div>
-                <div className={"flex flex-wrap gap-1 text-sm"}>
-                  {stations?.length ? (
-                    stations.map((name) => {
-                      return (
-                        <div
-                          className={
-                            "bg-red rounded-md px-2 py-1 font-bold text-white"
-                          }
-                          key={name}
-                        >
-                          {name}
-                        </div>
-                      );
-                    })
-                  ) : (
-                    <div
-                      className={
-                        "bg-red rounded-md px-2 py-1 font-bold text-white"
-                      }
-                    >
-                      Alle Bahnhöfe auf dieser Strecke
-                    </div>
-                  )}
-                </div>
               </div>
-            </div>
-          );
-        },
-      )}
-    </div>
+            );
+          },
+        )}
+      </div>
+    </ShadowOverflow>
   );
 }
 
-export default RvfNotificationDetails;
+export default NotificationDetails;

package/src/RvfFeatureDetails/RvfSharedMobilityDetail/RvfSharedMobilityDetails.tsx

@@ -9,36 +9,34 @@ import StationDetails from "./StationDetails";
 import type { Feature } from "ol";
 
 export interface RvfSharedMobilityDetailsProps {
-  selectedFeature: Feature;
+  feature: Feature;
 }
 
-function RvfSharedMobilityDetails({
-  selectedFeature,
-}: RvfSharedMobilityDetailsProps) {
+function RvfSharedMobilityDetails({ feature }: RvfSharedMobilityDetailsProps) {
   const [features, setFeatures] = useState([]);
-  const isStationDetails = !!selectedFeature.get("station_id");
-  const isFloatingVehicle = !!selectedFeature.get("vehicle_id");
-  const isCluster = !!selectedFeature.get("cluster_id");
+  const isStationDetails = !!feature.get("station_id");
+  const isFloatingVehicle = !!feature.get("vehicle_id");
+  const isCluster = !!feature.get("cluster_id");
 
   useEffect(() => {
     if (isCluster) {
-      setFeatures(selectedFeature.get("features"));
+      setFeatures(feature.get("features"));
     } else {
-      setFeatures([selectedFeature]);
+      setFeatures([feature]);
     }
-  }, [selectedFeature, isFloatingVehicle, isCluster]);
+  }, [feature, isFloatingVehicle, isCluster]);
 
   const featuresByFeedId: Record<string, Feature[]> = useMemo(() => {
     const featuresByFeedIdd = {};
     if (isStationDetails) {
       return null;
     }
-    features.forEach((feature) => {
-      const feedId = feature.get("feed_id");
+    features.forEach((featuree) => {
+      const feedId = featuree.get("feed_id");
       if (featuresByFeedIdd[feedId]) {
-        featuresByFeedIdd[feedId].push(feature);
+        featuresByFeedIdd[feedId].push(featuree);
       } else {
-        featuresByFeedIdd[feedId] = [feature];
+        featuresByFeedIdd[feedId] = [featuree];
       }
     });
     return featuresByFeedIdd;

package/src/RvfFeatureDetailsTitle/RvfFeatureDetailsTitle.tsx

@@ -1,7 +1,7 @@
 import { icons } from "../utils/addSourceAndLayers";
 import {
-  RVF_LAYERS_NAMES,
-  RVF_LAYERS_TITLES,
+  LAYERS_NAMES,
+  LAYERS_TITLES,
   TITLE_BY_CATEGORY,
   TITLE_BY_FEED_ID,
 } from "../utils/constants";
@@ -22,8 +22,8 @@ function RvfFeatureDetailsTitle({ feature }: { feature: Feature }) {
     line_id: lineId,
     tickets,
   } = selectedFeature.getProperties();
-  const layerConfigLinienNetz = useLayerConfig(RVF_LAYERS_NAMES.liniennetz);
-  const layerConfigMeldungen = useLayerConfig(RVF_LAYERS_NAMES.meldungen);
+  const layerConfigLinienNetz = useLayerConfig(LAYERS_NAMES.linesnetworkplan);
+  const layerConfigMeldungen = useLayerConfig(LAYERS_NAMES.notifications);
 
   // moco export v1
   if (disruptionType) {
@@ -73,7 +73,7 @@ function RvfFeatureDetailsTitle({ feature }: { feature: Feature }) {
     return layerConfigLinienNetz.title;
   }
   if (tickets) {
-    return RVF_LAYERS_TITLES.verkaufsstellen;
+    return LAYERS_TITLES.verkaufsstellen;
   }
   return defaultTitle;
 }

package/src/RvfMainLinkButton/RvfMainLinkButton.tsx

@@ -0,0 +1,62 @@
+import { unByKey } from "ol/Observable";
+import { useEffect, useMemo, useState } from "preact/hooks";
+import { LiaMapSolid } from "react-icons/lia";
+import { twMerge } from "tailwind-merge";
+
+import IconButton from "../ui/IconButton";
+import useMapContext from "../utils/hooks/useMapContext";
+
+import type { PreactDOMAttributes } from "preact";
+
+function RvfMainLinkButton({
+  className,
+  ...props
+}: { className?: string } & PreactDOMAttributes) {
+  const { mainlink, mainlinktitle, map } = useMapContext();
+  const [x, setX] = useState(0);
+  const [y, setY] = useState(0);
+  const [z, setZ] = useState(0);
+
+  useEffect(() => {
+    const update = (evt) => {
+      const center = evt.map?.getView()?.getCenter();
+      if (center) {
+        setX(center[0]);
+        setY(center[1]);
+      }
+      const zoom = evt.map?.getView()?.getZoom();
+      if (zoom) {
+        setZ(zoom);
+      }
+    };
+    update({ map });
+    const key = map?.on("moveend", update);
+    return () => {
+      unByKey(key);
+    };
+  }, [map]);
+
+  const href = useMemo(() => {
+    return mainlink
+      ? mainlink
+          .replace("{{x}}", x.toFixed(4))
+          .replace("{{y}}", y.toFixed(4))
+          .replace("{{z}}", z.toFixed(2))
+      : "#";
+  }, [mainlink, x, y, z]);
+
+  return (
+    <IconButton
+      className={twMerge("rounded-xl border-3 border-white", className)}
+      href={href}
+      target="_blank"
+      theme="primary"
+      title={mainlinktitle}
+      {...props}
+    >
+      <LiaMapSolid />
+    </IconButton>
+  );
+}
+
+export default RvfMainLinkButton;

package/src/RvfMainLinkButton/index.tsx

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