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

package/src/RvfFeatureDetails/RvfNotificationDetails/RvfNotificationDetails.tsx

@@ -1,11 +1,16 @@
-import { Feature } from "ol";
-
-// import RvfLink from "../../RvfLink";
-// import { icons } from "../../utils/addSourceAndLayers";
+import Warning from "../../icons/Warning";
 import getBgColor from "../../utils/getBgColor";
 import useI18n from "../../utils/hooks/useI18n";
 
-const toShortDate = (date, showTime) => {
+import type {
+  AffectedTimeIntervalType,
+  PublicationType,
+  SituationType,
+  TextualContentType,
+} from "mobility-toolbox-js/types";
+import type { Feature } from "ol";
+
+const toShortDate = (date: Date, showTime, showYear?: boolean) => {
   const time = date.toLocaleTimeString(["de"], {
     hour: "2-digit",
     minute: "2-digit",
@@ -14,6 +19,7 @@ const toShortDate = (date, showTime) => {
     day: "2-digit",
     month: "short",
     weekday: "short",
+    year: showYear ? "numeric" : undefined,
   });
 
   return `${dateString}${showTime && showTime !== time ? ` ${time}` : ""}`
@@ -29,11 +35,15 @@ fetch("https://tralis-tracker-api.geops.io/api/lines/rvf/")
   })
   .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((line) => {
-      return line.name === name;
+    const line = rvfLines.find((linee) => {
+      return linee.name === name;
     });
     if (line) {
       return line;
@@ -46,20 +56,21 @@ const getLine = (name) => {
 // html = converter.makeHtml(text);
 function RvfNotificationDetails({ feature }: { feature: Feature }) {
   const { t } = useI18n();
-
   const {
     affected_products: affectedProducts,
     affected_time_intervals: timeIntervals,
     consequence_de: consequence,
     description_de: descriptionDe,
+    // title,
+    disruption_type: disruptionType,
     // disruption_type: disruptionType,
     // duration_text_de: durationText,
     // links,
     // long_description: description,
     reason_de: reason,
     recommendation_de: recommendation,
+    situation,
     summary_de: summary,
-    // title,
   } = feature.getProperties();
 
   // "title_de": "",
@@ -118,117 +129,304 @@ function RvfNotificationDetails({ feature }: { feature: Feature }) {
   } catch (e) {
     console.error(e);
   }
-  return (
-    // <div className={"flex gap-2 text-sm"}>
-    //   <div className="min-w-8 shrink-0 grow-0">
-    //     <img
-    //       alt={disruptionType}
-    //       className={"w-8"}
-    //       src={icons[disruptionType]}
-    //     ></img>
-    //   </div>
-    <div className={"flex flex-col gap-2 text-sm"}>
-      {/* <div className="text-base font-bold">{title}</div> */}
-      {!!products?.length && (
-        <div className="flex flex-wrap  gap-2">
-          {products?.map(({ name }) => {
-            const line = getLine(name);
+
+  // moco export v1
+  if (disruptionType) {
+    return (
+      // <div className={"flex gap-2 text-sm"}>
+      //   <div className="min-w-8 shrink-0 grow-0">
+      //     <img
+      //       alt={disruptionType}
+      //       className={"w-8"}
+      //       src={icons[disruptionType]}
+      //     ></img>
+      //   </div>
+      <div className={"flex flex-col gap-2 text-sm"}>
+        {/* <div className="text-base font-bold">{title}</div> */}
+        {!!products?.length && (
+          <div className="flex flex-wrap gap-2">
+            {products?.map(({ name }) => {
+              const line = getLine(name);
+              return (
+                <>
+                  <div
+                    className={
+                      "bg-red w-fit rounded-md px-[12px] py-[9px] leading-none font-bold text-white"
+                    }
+                    key={name}
+                    style={{
+                      backgroundColor: getBgColor(line.mot, line),
+                    }}
+                  >
+                    {name}
+                  </div>
+                </>
+              );
+            })}
+          </div>
+        )}
+        <div className="text-base font-bold">
+          {!!start && !end && `ab${toShortDate(new Date(start), true)}`}
+          {!start && !!end && `bis${toShortDate(new Date(end), true)}`}
+          {!!start &&
+            !!end &&
+            `${toShortDate(new Date(start), true)} - ${toShortDate(new Date(end), true)}`}
+        </div>
+        <div className={"flex flex-col gap-2"}>
+          <p className={"text-base"}>{summary}</p>
+          <p className={"text-base"}>{descriptionDe}</p>
+
+          {[
+            {
+              content: recommendation,
+              label: "recommendation",
+            },
+            {
+              content: reason,
+              label: "reason",
+            },
+            {
+              content: consequence,
+              label: "consequence",
+            },
+          ].map((item) => {
+            if (!item.content) {
+              return null;
+            }
             return (
-              <>
-                <div
-                  className={
-                    "w-fit rounded-md bg-red px-[12px] py-[9px] font-bold leading-none text-white"
-                  }
-                  key={name}
-                  style={{
-                    backgroundColor: getBgColor(line.mot, line),
-                  }}
-                >
-                  {name}
-                </div>
-              </>
+              <div key={item.content}>
+                {!!item.label && <p className="font-bold">{t(item.label)}:</p>}
+                <p>{item.content}</p>
+              </div>
             );
           })}
         </div>
-      )}
-      <div className="text-base font-bold">
-        {!!start && !end && "ab" + toShortDate(new Date(start), true)}
-        {!start && !!end && "bis" + toShortDate(new Date(end), true)}
-        {!!start &&
-          !!end &&
-          `${toShortDate(new Date(start), true)} - ${toShortDate(new Date(end), true)}`}
       </div>
-      <div className={"flex flex-col gap-2"}>
-        <p className={"text-base"}>{summary}</p>
-        <p className={"text-base"}>{descriptionDe}</p>
-
-        {[
-          {
-            content: recommendation,
-            label: "recommendation",
-          },
-          {
-            content: reason,
-            label: "reason",
-          },
-          {
-            content: consequence,
-            label: "consequence",
-          },
-        ].map((item) => {
-          if (!item.content) {
-            return null;
-          }
+      // </div>
+      // <div className={"flex flex-col gap-4 text-sm"}>
+      //   <div>
+      //     <div className="text-base font-bold">{title}</div>
+      //     <div className="text-xs">
+      //       {start} - {end}
+      //     </div>
+      //   </div>
+      //   <div
+      //     className={"flex flex-col gap-2"}
+      //     dangerouslySetInnerHTML={{
+      //       __html: converter.makeHtml(description).replace("<hr />", "<br />"),
+      //     }}
+      //   ></div>
+      //   {externalLinks?.map(({ label_de: label, uri }) => {
+      //     return (
+      //       <RvfLink href={uri} key={uri}>
+      //         {label}
+      //       </RvfLink>
+      //     );
+      //   })}
+      // {!!products?.length && (
+      //   <>
+      // <div className={"font-bold"}>Betroffene Lines:</div>
+      // <div className={"flex flex-wrap gap-1"}>
+      //   {products?.map(({ name }) => {
+      //     return (
+      //       <div
+      //         className={
+      //           "rounded-md bg-red px-[12px] py-[9px] font-bold leading-none text-white"
+      //         }
+      //         key={name}
+      //       >
+      //         {name}
+      //       </div>
+      //     );
+      //   })}
+      // </div>
+      //   </>
+      // )}
+      // </div>
+    );
+  }
+
+  // moco export v2
+  let textualContent: Partial<TextualContentType> = {};
+  let timeIntervalsToDisplay = [];
+  let publicationsToDisplay: PublicationType[] = [];
+  let reasonsToDisplay: string[] = [];
+
+  try {
+    const situationParsed: SituationType = JSON.parse(situation) || {};
+    const publicationsArr: PublicationType[] =
+      situationParsed?.publications || [];
+
+    // Find the current publication(s) at the current date
+    publicationsToDisplay =
+      publicationsArr?.filter(({ publicationWindows }) => {
+        return publicationWindows.find(({ endTime, startTime }) => {
+          const now = new Date();
+          const startT = new Date(startTime);
+          const endT = new Date(endTime);
+          return startT <= now && now <= endT;
+        });
+      }) || [];
+
+    // Display the current and next affected time intervals not the one in the past
+    timeIntervalsToDisplay =
+      (situationParsed?.affectedTimeIntervals || []).filter(
+        ({ endTime, startTime }) => {
+          const now = new Date();
+          const startT = new Date(startTime);
+          const endT = new Date(endTime);
+          return (startT <= now && now <= endT) || now < startT;
+        },
+      ) || [];
+
+    // Display the reasons
+    reasonsToDisplay = (situationParsed?.reasons || []).map(({ name }) => {
+      return name;
+    });
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error("Failed to parse publications", e);
+  }
+
+  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;
+
+          const lines =
+            publicationLines?.flatMap((publication) => {
+              return (
+                publication.lines?.map(({ name }) => {
+                  return name;
+                }) || []
+              );
+            }) || [];
+
+          const stations = publicationStops.map((publication) => {
+            return publication?.name || "";
+          });
+
           return (
-            <div key={item.content}>
-              {!!item.label && <p className="font-bold">{t(item.label)}:</p>}
-              <p>{item.content}</p>
+            <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 = "22:00",
+                  dailyStartTime = "08:00",
+                  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>
+                      )}
+                    </div>
+                  );
+                },
+              )}
+              <div
+                className="mt-4"
+                dangerouslySetInnerHTML={{
+                  __html:
+                    textualContent?.description || "Keine Details verfügbar",
+                }}
+              />
+              {!!lines?.length && (
+                <div>
+                  <br />
+                  <div className={"font-bold"}>Betroffene Lines:</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>
+                      );
+                    })}
+                  </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>
-    // </div>
-    // <div className={"flex flex-col gap-4 text-sm"}>
-    //   <div>
-    //     <div className="text-base font-bold">{title}</div>
-    //     <div className="text-xs">
-    //       {start} - {end}
-    //     </div>
-    //   </div>
-    //   <div
-    //     className={"flex flex-col gap-2"}
-    //     dangerouslySetInnerHTML={{
-    //       __html: converter.makeHtml(description).replace("<hr />", "<br />"),
-    //     }}
-    //   ></div>
-    //   {externalLinks?.map(({ label_de: label, uri }) => {
-    //     return (
-    //       <RvfLink href={uri} key={uri}>
-    //         {label}
-    //       </RvfLink>
-    //     );
-    //   })}
-    // {!!products?.length && (
-    //   <>
-    //     <div className={"font-bold"}>Betroffene Lines:</div>
-    //     <div className={"flex flex-wrap gap-1"}>
-    //       {products?.map(({ name }) => {
-    //         return (
-    //           <div
-    //             className={
-    //               "rounded-md bg-red px-[12px] py-[9px] font-bold leading-none text-white"
-    //             }
-    //             key={name}
-    //           >
-    //             {name}
-    //           </div>
-    //         );
-    //       })}
-    //     </div>
-    //   </>
-    // )}
-    // </div>
   );
 }
 

package/src/RvfFeatureDetails/RvfSellingPointDetails/RvfSellingPointDetails.tsx

@@ -1,9 +1,9 @@
-import { Feature } from "ol";
-
 import Automat from "../../icons/Automat";
 import InPerson from "../../icons/InPerson";
 import Video from "../../icons/Video";
 
+import type { Feature } from "ol";
+
 const ICON_BY_OPERATED_BY = {
   Automat: <Automat />,
   Persönlich: <InPerson />,

package/src/RvfFeatureDetails/RvfSharedMobilityDetail/FloatingVehiclesDetails/FloatingVehiclesDetails.tsx

@@ -1,9 +1,9 @@
-import { Feature } from "ol";
-
 import RvfLink from "../../../RvfLink";
 import { PROVIDER_BY_FEED_ID } from "../../../utils/constants";
 import getLinkByDevice from "../../../utils/getLinkByDevice";
 
+import type { Feature } from "ol";
+
 export interface FloatingVehiclesDetailsProps {
   features: Feature[];
 }
@@ -53,7 +53,7 @@ function FloatingVehiclesDetails({ features }: FloatingVehiclesDetailsProps) {
 
   return (
     <div className="flex flex-1 flex-col gap-2">
-      <div className="flex flex-1 flex-col gap-2 ">
+      <div className="flex flex-1 flex-col gap-2">
         <div>{features.length} Fahrzeuge</div>
         <div className="flex flex-1 flex-col">
           <div className="text-grey">Fahrzeug mieten</div>

package/src/RvfFeatureDetails/RvfSharedMobilityDetail/RvfSharedMobilityDetails.tsx

@@ -1,11 +1,13 @@
-import { Feature } from "ol";
 import { useEffect, useMemo, useState } from "preact/hooks";
 import { Fragment } from "preact/jsx-runtime";
 
 import { PROVIDER_LOGOS_BY_FEED_ID } from "../../utils/constants";
+
 import FloatingVehiclesDetails from "./FloatingVehiclesDetails";
 import StationDetails from "./StationDetails";
 
+import type { Feature } from "ol";
+
 export interface RvfSharedMobilityDetailsProps {
   selectedFeature: Feature;
 }
@@ -27,19 +29,19 @@ function RvfSharedMobilityDetails({
   }, [selectedFeature, isFloatingVehicle, isCluster]);
 
   const featuresByFeedId: Record<string, Feature[]> = useMemo(() => {
-    const featuresByFeedId = {};
+    const featuresByFeedIdd = {};
     if (isStationDetails) {
       return null;
     }
     features.forEach((feature) => {
       const feedId = feature.get("feed_id");
-      if (featuresByFeedId[feedId]) {
-        featuresByFeedId[feedId].push(feature);
+      if (featuresByFeedIdd[feedId]) {
+        featuresByFeedIdd[feedId].push(feature);
       } else {
-        featuresByFeedId[feedId] = [feature];
+        featuresByFeedIdd[feedId] = [feature];
       }
     });
-    return featuresByFeedId;
+    return featuresByFeedIdd;
   }, [features, isStationDetails]);
 
   return (

package/src/RvfFeatureDetails/RvfSharedMobilityDetail/StationDetails/StationDetails.tsx

@@ -1,9 +1,10 @@
-import { Feature } from "ol";
 import { useEffect, useMemo, useState } from "preact/hooks";
 
 import RvfLink from "../../../RvfLink";
 import getLinkByDevice from "../../../utils/getLinkByDevice";
 import { fetchSharingStation } from "../../../utils/sharingGraphqlUtils";
+
+import type { Feature } from "ol";
 export interface StationDetailsProps {
   feature: Feature;
 }
@@ -21,7 +22,7 @@ function StationDetails({ feature }: StationDetailsProps) {
         const station = await fetchSharingStation(feature.get("station_id"));
         setData(station);
       };
-      fetchData();
+      void fetchData();
     }
   }, [feature]);
 
@@ -37,12 +38,12 @@ function StationDetails({ feature }: StationDetailsProps) {
     //       rel="noreferrer"
     //       target="_blank"
     //     >
-    //       <RvfButton>Jetzt buchen</RvfButton>
+    //       <Button>Jetzt buchen</Button>
     //     </a>
     //   )}
     // </div>
     <div className="flex flex-1 flex-col gap-2">
-      <div className="flex flex-1 flex-col gap-2 ">
+      <div className="flex flex-1 flex-col gap-2">
         <div>{feature.get("num_vehicles_available") || 0} Fahrzeuge</div>
         {hasVehicles && data?.vehicleTypesAvailable?.length && (
           <div className="flex flex-1 flex-col">

package/src/RvfFeatureDetailsFooter/RvfFeatureDetailsFooter.tsx

@@ -0,0 +1,43 @@
+import { memo } from "preact/compat";
+
+import ArrowRight from "../icons/ArrowRight";
+import Button from "../ui/Button";
+import useLayerConfig from "../utils/hooks/useLayerConfig";
+import useRvfContext from "../utils/hooks/useRvfContext";
+
+import type { HTMLAttributes, PreactDOMAttributes } from "preact";
+
+export type RvfFeatureDetailsFooterProps = {
+  onClose?: () => void;
+  title?: React.ReactNode;
+} & HTMLAttributes<HTMLDivElement> &
+  PreactDOMAttributes;
+
+function RvfFeatureDetailsFooter({ ...props }: RvfFeatureDetailsFooterProps) {
+  const { selectedFeature } = useRvfContext();
+  const layerConfig = useLayerConfig(selectedFeature?.get("layerName"));
+  if (!layerConfig?.link || layerConfig?.link?.show === false) {
+    return null;
+  }
+  let id = selectedFeature?.get("id");
+  const situation = selectedFeature?.get("situation");
+  if (situation) {
+    const situationParsed = JSON.parse(situation);
+    id = situationParsed?.id || id;
+  }
+  return (
+    <div {...props}>
+      <Button
+        className={"text-base"}
+        href={layerConfig.link.href.replace("{{id}}", id)}
+        target="_blank"
+        theme="primary"
+      >
+        <span>{layerConfig.link.text || "Mehr erfahren"}</span>
+        <ArrowRight />
+      </Button>
+    </div>
+  );
+}
+
+export default memo(RvfFeatureDetailsFooter);

package/src/RvfFeatureDetailsFooter/index.tsx

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