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

package/src/RvfFeatureDetails/RvfNotificationDetails/RvfNotificationDetails.tsx

@@ -1,14 +1,16 @@
-// import RvfLink from "../../RvfLink";
-// import { icons } from "../../utils/addSourceAndLayers";
-import Button from "../../ui/Button";
-import { LAYER_NAME_NOTIFICATION } from "../../utils/constants";
+import Warning from "../../icons/Warning";
 import getBgColor from "../../utils/getBgColor";
 import useI18n from "../../utils/hooks/useI18n";
-import useLayerConfig from "../../utils/hooks/useLayerConfig";
 
+import type {
+  AffectedTimeIntervalType,
+  PublicationType,
+  SituationType,
+  TextualContentType,
+} from "mobility-toolbox-js/types";
 import type { Feature } from "ol";
 
-const toShortDate = (date, showTime) => {
+const toShortDate = (date: Date, showTime, showYear?: boolean) => {
   const time = date.toLocaleTimeString(["de"], {
     hour: "2-digit",
     minute: "2-digit",
@@ -17,6 +19,7 @@ const toShortDate = (date, showTime) => {
     day: "2-digit",
     month: "short",
     weekday: "short",
+    year: showYear ? "numeric" : undefined,
   });
 
   return `${dateString}${showTime && showTime !== time ? ` ${time}` : ""}`
@@ -53,8 +56,6 @@ const getLine = (name) => {
 // html = converter.makeHtml(text);
 function RvfNotificationDetails({ feature }: { feature: Feature }) {
   const { t } = useI18n();
-  const layerConfig = useLayerConfig(LAYER_NAME_NOTIFICATION);
-
   const {
     affected_products: affectedProducts,
     affected_time_intervals: timeIntervals,
@@ -62,13 +63,13 @@ function RvfNotificationDetails({ feature }: { feature: Feature }) {
     description_de: descriptionDe,
     // title,
     disruption_type: disruptionType,
-    publications,
     // disruption_type: disruptionType,
     // duration_text_de: durationText,
     // links,
     // long_description: description,
     reason_de: reason,
     recommendation_de: recommendation,
+    situation,
     summary_de: summary,
   } = feature.getProperties();
 
@@ -224,21 +225,21 @@ function RvfNotificationDetails({ feature }: { feature: Feature }) {
       //   })}
       // {!!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 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>
@@ -246,29 +247,184 @@ function RvfNotificationDetails({ feature }: { feature: Feature }) {
   }
 
   // moco export v2
-  // const textuatlContent = {};
+  let textualContent: Partial<TextualContentType> = {};
+  let timeIntervalsToDisplay = [];
+  let publicationsToDisplay: PublicationType[] = [];
+  let reasonsToDisplay: string[] = [];
+
   try {
-    const publicationsObj = JSON.parse(publications);
-    console.log(publicationsObj);
+    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="text-base">
-      <p> Keine Details verfügbar</p>
+    <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;
 
-      {layerConfig.link && (
-        <div className={"flex"}>
-          <Button
-            className={"text-base"}
-            href={layerConfig.link.href.replace("{{id}}", feature.get("id"))}
-            target="_blank"
-            theme="primary"
-          >
-            {layerConfig.link.text || "Mehr erfahren"}
-          </Button>
-        </div>
+          const lines =
+            publicationLines?.flatMap((publication) => {
+              return (
+                publication.lines?.map(({ name }) => {
+                  return 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" />
+
+              {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>
   );

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";

package/src/RvfMobilityMap/RvfMobilityMap.tsx

@@ -181,9 +181,9 @@ function RvfMobilityMap(props: RvfMobilityMapProps) {
     embed,
     geolocation,
     layers,
-    layersconfig,
     layertree,
     mainlink,
+    mainlinktitle,
     notification,
     permalink,
     print,
@@ -193,7 +193,6 @@ function RvfMobilityMap(props: RvfMobilityMapProps) {
     tenant,
     toolbar,
   } = props;
-  console.log("RvfMobilityMap props:", mainlink, layersconfig);
 
   // Convert string boolean to boolean
   const hasToolbar = useMemo(() => {
@@ -527,6 +526,19 @@ function RvfMobilityMap(props: RvfMobilityMapProps) {
                   title={RVF_LAYERS_TITLES.sharedMobility}
                 />
 
+                {mainlink && (
+                  <IconButton
+                    className={
+                      "absolute inset-x-2 bottom-8 z-10 rounded-xl border-3 border-white"
+                    }
+                    href={mainlink}
+                    target="_blank"
+                    theme="primary"
+                    title={mainlinktitle}
+                  >
+                    <LiaMapSolid />
+                  </IconButton>
+                )}
                 <div className="pointer-events-none absolute inset-x-2 bottom-2 z-10 flex items-end justify-between gap-2 text-[10px]">
                   <ScaleLine className="bg-slate-50/70" />
                   <Copyright
@@ -535,6 +547,12 @@ function RvfMobilityMap(props: RvfMobilityMapProps) {
                   />
                 </div>
 
+                <div className="absolute top-2 right-2 z-10 flex">
+                  {hasGeolocation && (
+                    <GeolocationButton title={"Geolokalisierung"} />
+                  )}
+                </div>
+
                 <div className="absolute right-2 bottom-10 z-10 flex flex-col justify-between gap-2">
                   <RvfZoomButtons />
 
@@ -550,35 +568,41 @@ function RvfMobilityMap(props: RvfMobilityMapProps) {
                 </div>
               </Map>
 
-              <div className="pointer-events-none absolute top-2 bottom-8 left-2 z-10 flex flex-col gap-2 *:pointer-events-auto">
-                <div className={"relative z-0"}>
+              <div className="pointer-events-none absolute top-2 bottom-2 left-2 z-10 flex flex-col gap-2 *:pointer-events-auto">
+                <div
+                  className={
+                    "relative z-10 w-fit rounded-2xl bg-black/10 p-0 backdrop-blur-sm"
+                  }
+                  //  className="w-fit rounded-2xl bg-black/10 p-1 backdrop-blur-sm">
+                >
                   <div
                     className={twMerge(
-                      "absolute top-[54px] left-0 h-[40px] w-0 p-0 opacity-0 transition-all @sm/main:top-2 @sm/main:left-[calc(100%-43px)] @md/main:left-[calc(100%-47px)]",
+                      "absolute top-12 left-0 h-[40px] w-0 p-0 opacity-0 transition-all @sm:top-0 @sm:left-[calc(100%-43px)] @md:left-[calc(100%-47px)]",
                       isSearchOpen ? "w-64 opacity-100" : "",
                     )}
                   >
                     <Search
                       className={
-                        "border-grey @container m-0 h-[40px] rounded-2xl border p-2 px-4 text-base @sm/main:h-[44px] @md/main:h-[48px]"
+                        "border-grey @container m-0 h-[40px] rounded-2xl border p-2 px-4 text-base @sm/main:h-[44px] @sm/main:rounded-l-none @sm/main:rounded-r-2xl @md/main:h-[48px]"
                       }
                       inputClassName="h-6 text-base"
+                      inputContainerClassName="border-none"
                       resultClassName="text-base  **:hover:cursor-pointer hover:text-red-500 p-2"
                       resultsContainerClassName="@container rounded-b-2xl max-h-[200px] overflow-y-auto border border-grey border-t-0 "
-                      withResultsClassName="text-base rounded-b-none border-b-lightgrey"
+                      withResultsClassName="text-base !rounded-b-none"
                     />
                   </div>
-                </div>
-                <div
-                  className={
-                    "relative z-10 w-fit rounded-2xl bg-black/10 p-0 backdrop-blur-sm"
-                  }
-                  //  className="w-fit rounded-2xl bg-black/10 p-1 backdrop-blur-sm">
-                >
-                  <div className="border-grey relative flex gap-[1px] overflow-hidden rounded-2xl border *:size-[38px] *:rounded-none *:border-white first:!rounded-l-2xl last:!rounded-r-2xl *:@sm/main:size-[42px] *:@md/main:!size-[46px]">
-                    {hasGeolocation && (
-                      <GeolocationButton title={"Geolokalisierung"} />
+                  <div
+                    className={twMerge(
+                      "border-grey relative flex gap-[1px] overflow-hidden rounded-2xl border",
+                      "*:size-[38px] *:rounded-none *:border-none *:@sm/main:size-[42px] *:@md/main:!size-[46px]",
+                      "*:first:!rounded-l-2xl",
+                      "*:last:!rounded-r-2xl",
+                      isSearchOpen
+                        ? "@sm:rounded-r-none @sm:border-r-0 @sm:*:last:!rounded-r-none @sm:*:last:border-r-0"
+                        : "",
                     )}
+                  >
                     {!hasToolbar && hasPrint && (
                       <RvfExportMenuButton title={"Drucken"} />
                     )}
@@ -596,8 +620,8 @@ function RvfMobilityMap(props: RvfMobilityMapProps) {
 
                 <div
                   className={twMerge(
-                    "flex w-0 flex-1 resize flex-col overflow-hidden rounded-2xl",
-                    isOverlayDisplayed ? "@lg:w-60" : "p-0",
+                    "flex w-0 flex-1 flex-col overflow-hidden rounded-2xl",
+                    isOverlayDisplayed ? "@lg:min-w-60" : "p-0",
                   )}
                   style={{ containerType: "normal" }}
                 >
@@ -617,25 +641,13 @@ function RvfMobilityMap(props: RvfMobilityMapProps) {
                     />
                   </Overlay>
                 </div>
-
-                {mainlink && (
-                  <IconButton
-                    className={"pointer-events-auto"}
-                    href={mainlink}
-                    target="_blank"
-                    theme="primary"
-                    title="Hauptseite"
-                  >
-                    <LiaMapSolid />
-                  </IconButton>
-                )}
               </div>
 
               {/* Mobile */}
               <Overlay
                 className={
                   isOverlayDisplayed
-                    ? "absolute bottom-0 z-20 max-h-[70%] min-h-[75px] w-full border-t bg-white @lg:hidden"
+                    ? "absolute bottom-0 z-20 flex max-h-[70%] min-h-[75px] w-full flex-col border-t bg-white @lg:hidden"
                     : "@lg:hidden"
                 }
                 ScrollableHandlerProps={scrollableHandlerProps}

package/src/RvfOverlayContent/RvfOverlayContent.tsx

@@ -3,6 +3,7 @@ import { twMerge } from "tailwind-merge";
 import RouteSchedule from "../RouteSchedule";
 import RvfExportMenu from "../RvfExportMenu";
 import RvfFeatureDetails from "../RvfFeatureDetails";
+import RvfFeatureDetailsFooter from "../RvfFeatureDetailsFooter";
 import RvfFeatureDetailsTitle from "../RvfFeatureDetailsTitle/RvfFeatureDetailsTitle";
 import RvfOverlayHeader from "../RvfOverlayHeader";
 import RvfShare from "../RvfShare";
@@ -76,8 +77,9 @@ function RvfOverlayContent({
             title={<RvfFeatureDetailsTitle feature={selectedFeature} />}
           ></RvfOverlayHeader>
           <RvfFeatureDetails
-            className={twMerge(contentClassName, "flex flex-col gap-4 p-4")}
+            className={twMerge(contentClassName, "relative")}
           />
+          <RvfFeatureDetailsFooter className={"flex flex-row p-4 pt-2"} />
         </>
       )}
       {hasPrint && isExportMenuOpen && (