@geops/rvf-mobility-web-component 0.1.61 → 0.1.63

package/src/NotificationDetails/NotificationDetails.tsx

@@ -4,16 +4,18 @@ import {
   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 Link from "../ui/Link";
 import useI18n from "../utils/hooks/useI18n";
-import useMapContext from "../utils/hooks/useMapContext";
 
-import type { RealtimeLine, RealtimeMot } from "mobility-toolbox-js/types";
+import type {
+  MultilingualTextualContentType,
+  RealtimeLine,
+  RealtimeMot,
+} from "mobility-toolbox-js/types";
 import type { Feature } from "ol";
 
 const toShortDate = (date: Date, showTime, showYear?: boolean) => {
@@ -34,17 +36,17 @@ const toShortDate = (date: Date, showTime, showYear?: boolean) => {
     .replace(/\.$/, "");
 };
 
-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 } as NotificationLine;
-};
+// 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 } as NotificationLine;
+// };
 
 export type NotificationLine = {
   mot?: RealtimeMot;
@@ -61,223 +63,34 @@ function NotificationDetails({
   className?: string;
   feature: Feature;
 }) {
-  const { t } = useI18n();
-  const { notificationtenant } = useMapContext();
-  const [lines, setLines] = useState<NotificationLine[]>([]);
-  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,
-  } = 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": "",
-  //           "title_en": "",
-  //           "summary_de": "",
-  //           "summary_fr": "",
-  //           "summary_it": "",
-  //           "summary_en": "",
-  //           "reason_de": "Baustelle",
-  //           "reason_fr": "",
-  //           "reason_it": "",
-  //           "reason_en": "",
-  //           "description_de": "",
-  //           "description_fr": "",
-  //           "description_it": "",
-  //           "description_en": "",
-  //           "consequence_de": "Umleitung",
-  //           "consequence_fr": "",
-  //           "consequence_it": "",
-  //           "consequence_en": "",
-  //           "duration_text_de": "",
-  //           "duration_text_fr": "",
-  //           "duration_text_it": "",
-  //           "duration_text_en": "",
-  //           "recommendation_de": "",
-  //           "recommendation_fr": "",
-  //           "recommendation_it": "",
-  //           "recommendation_en": "",
-  //           "reasons": [
-  //               "Ausfall des Aufzuges"
-  //           ]
-
-  let end = "",
-    start = "";
-  let products = [];
-  // let externalLinks = [];
-
-  try {
-    const timeInterval = JSON.parse(timeIntervals)?.[0] || {};
-    start = timeInterval.start;
-    end = timeInterval.end;
-    // const dateStart = new Date(timeInterval.start);
-    // start =
-    //   dateStart.toLocaleDateString() + " " + dateStart.toLocaleTimeString();
-    // const dateEnd = new Date(timeInterval.end);
-    // console.log("dateEnd", dateEnd);
-    // end = dateEnd.toLocaleDateString() + " " + dateEnd.toLocaleTimeString();
-
-    products = JSON.parse(affectedProducts);
-    products?.sort((a, b) => {
-      return a.name.localeCompare(b.name);
-    });
-    // externalLinks = JSON.parse(links);
-  } catch (e) {
-    console.error(e);
-  }
-
-  // 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, lines);
-              return (
-                <>
-                  <div
-                    className={
-                      "w-fit rounded-md bg-black 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>
+  const { locale, t } = useI18n();
+  const { situation } = feature.getProperties();
 
-          {[
-            {
-              content: recommendation,
-              label: "recommendation",
-            },
-            {
-              content: reason,
-              label: "reason",
-            },
-            {
-              content: consequence,
-              label: "consequence",
-            },
-          ].map((item) => {
-            if (!item.content) {
-              return null;
-            }
-            return (
-              <div key={item.content}>
-                {!!item.label && <p className="font-bold">{t(item.label)}:</p>}
-                <p>{item.content}</p>
-              </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>
-    );
-  }
+  // 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]);
 
   // moco export v2
+  let textualContentMultilingual: Partial<MultilingualTextualContentType> = {};
   let textualContent: Partial<TextualContentType> = {};
   let timeIntervalsToDisplay = [];
   let publicationsToDisplay: PublicationType[] = [];
@@ -332,11 +145,17 @@ function NotificationDetails({
             textualContentSmall,
           }) => {
             // Get the textual content in German
-            textualContent = (
+            textualContentMultilingual =
               textualContentLarge ||
               textualContentMedium ||
-              textualContentSmall
-            )?.de;
+              textualContentSmall;
+
+            textualContent = textualContentMultilingual?.[locale()];
+
+            // Fallback to default language if there is not title in the current language
+            if (!textualContent?.summary) {
+              textualContent = textualContentMultilingual?.de;
+            }
 
             const pubLines =
               publicationLines?.flatMap((publication) => {
@@ -423,9 +242,22 @@ function NotificationDetails({
                       textualContent?.description || t("no_details_available"),
                   }}
                 />
+                {!!textualContentMultilingual?.infoLinks?.length && (
+                  <div className="mt-4">
+                    {textualContentMultilingual.infoLinks.map(
+                      ({ label, uri }) => {
+                        const title = label[locale()] || label.de || uri;
+                        return (
+                          <Link href={uri} key={uri} title={title}>
+                            {title}
+                          </Link>
+                        );
+                      },
+                    )}
+                  </div>
+                )}
                 {!!pubLines?.length && (
-                  <div>
-                    <br />
+                  <div className="mt-4">
                     <div className={"font-bold"}>{t("affected_lines")}:</div>
                     <div className={"flex flex-wrap gap-1 text-sm"}>
                       {pubLines?.map((name) => {
@@ -443,12 +275,11 @@ function NotificationDetails({
                     </div>
                   </div>
                 )}
-                <div>
-                  <br />
-                  <div className={"font-bold"}>{t("affected_stops")}:</div>
-                  <div className={"flex flex-wrap gap-1 text-sm"}>
-                    {stations?.length ? (
-                      stations.map((name) => {
+                {!!stations?.length && (
+                  <div className="mt-4">
+                    <div className={"font-bold"}>{t("affected_stops")}:</div>
+                    <div className={"flex flex-wrap gap-1 text-sm"}>
+                      {stations.map((name) => {
                         return (
                           <div
                             className={
@@ -459,18 +290,10 @@ function NotificationDetails({
                             {name}
                           </div>
                         );
-                      })
-                    ) : (
-                      <div
-                        className={
-                          "rounded-md bg-black px-2 py-1 font-bold text-white"
-                        }
-                      >
-                        {t("all_line_stops")}
-                      </div>
-                    )}
+                      })}
+                    </div>
                   </div>
-                </div>
+                )}
               </div>
             );
           },

package/src/OverlayContent/OverlayContent.tsx

@@ -62,7 +62,7 @@ function OverlayContent({
             title={t("layertree_menu_title")}
           ></OverlayHeader>
           <LayerTreeMenu
-            className="relative flex h-full flex-col overflow-x-hidden overflow-y-auto p-2 text-base *:not-last:border-b"
+            className="relative flex h-full flex-col overflow-x-hidden overflow-y-auto px-4 py-2 text-base *:not-last:border-b"
             treeItemProps={{ childContainerClassName: "*:not-last:border-b" }}
           />
         </>

package/src/OverlayDetails/OverlayDetails.tsx

@@ -15,7 +15,8 @@ function OverlayDetails() {
     featuresInfos,
     realtimeLayer,
     selectedFeature,
-    setSelectedFeature,
+    setFeaturesInfos,
+    setLinesIds,
     setStationId,
     setTrainId,
     stationId,
@@ -48,9 +49,10 @@ function OverlayDetails() {
         feature={selectedFeature}
         layer={layer}
         onClose={() => {
-          setSelectedFeature(null);
+          setFeaturesInfos(null);
           setTrainId(null);
           setStationId(null);
+          setLinesIds(null);
         }}
       />
       <FeatureDetails

package/src/OverlayFooter/OverlayFooter.tsx

@@ -6,7 +6,8 @@ import IconButton from "../ui/IconButton";
 
 import type { HTMLAttributes, PreactDOMAttributes } from "preact";
 
-export type RvfOverlayHeaderProps = {
+export type OverlayFooterProps = {
+  className?: string;
   onClose?: () => void;
   title?: React.ReactNode;
 } & HTMLAttributes<HTMLDivElement> &
@@ -18,7 +19,7 @@ function OverlayFooter({
   onClose,
   title,
   ...props
-}: RvfOverlayHeaderProps) {
+}: OverlayFooterProps) {
   return (
     <div
       {...props}

package/src/RealtimeLayer/RealtimeLayer.tsx

@@ -4,7 +4,7 @@ import {
 } from "mobility-toolbox-js/ol";
 import { unByKey } from "ol/Observable";
 import { memo } from "preact/compat";
-import { useEffect, useMemo } from "preact/hooks";
+import { useEffect, useMemo, useState } from "preact/hooks";
 
 import centerOnVehicle from "../utils/centerOnVehicle";
 import { LAYER_NAME_REALTIME } from "../utils/constants";
@@ -24,7 +24,8 @@ import type {
 } from "mobility-toolbox-js/types";
 
 const TRACKING_ZOOM = 16;
-const useGraphs = false;
+
+const useGraphs = window.location?.href?.includes("graphs=true");
 
 function RealtimeLayer(props: Partial<RealtimeLayerOptions>) {
   const {
@@ -32,6 +33,7 @@ function RealtimeLayer(props: Partial<RealtimeLayerOptions>) {
     baseLayer,
     isFollowing,
     isTracking,
+    linesNetworkPlanLayer,
     map,
     mots,
     realtimebboxparameters,
@@ -47,6 +49,9 @@ function RealtimeLayer(props: Partial<RealtimeLayerOptions>) {
     trainId,
   } = useMapContext();
 
+  const [graphByZoom, setGraphByZoom] = useState<(null | string)[]>([]);
+  const [isLnpVisible, setIsLnpVisible] = useState(false);
+
   const layer = useMemo(() => {
     if (!apikey || !realtimeurl) {
       return null;
@@ -246,25 +251,49 @@ function RealtimeLayer(props: Partial<RealtimeLayerOptions>) {
 
   // Get graphs value
   useEffect(() => {
-    if (!map || !baseLayer || !useGraphs) {
+    if (!map || !baseLayer) {
       return;
     }
     const key = map.once("rendercomplete", () => {
       const metadata = baseLayer.mapLibreMap?.getStyle()?.metadata as {
         graphs: StyleMetadataGraphs;
       };
-      const graphByZoom = [];
+      const tmpGraphByZoom = [];
       for (let i = 0; i < 26; i++) {
-        graphByZoom.push(getGraphByZoom(i, metadata?.graphs));
+        tmpGraphByZoom.push(getGraphByZoom(i, metadata?.graphs));
       }
-      layer.engine.graphByZoom = graphByZoom;
-      layer.engine.setBbox();
+      setGraphByZoom(tmpGraphByZoom);
     });
     return () => {
       unByKey(key);
     };
   }, [map, baseLayer, layer]);
 
+  // Watch lnp visibility
+  useEffect(() => {
+    const key = linesNetworkPlanLayer?.on("change:visible", () => {
+      const visible = linesNetworkPlanLayer.getVisible();
+      setIsLnpVisible(visible);
+    });
+    setIsLnpVisible(linesNetworkPlanLayer?.getVisible() || false);
+    return () => {
+      unByKey(key);
+    };
+  }, [linesNetworkPlanLayer]);
+
+  // Apply graphByZoom only when lnp layer is there and visible
+  useEffect(() => {
+    if (!layer || !graphByZoom?.length) {
+      return;
+    }
+    if (useGraphs && isLnpVisible) {
+      layer.engine.graphByZoom = graphByZoom;
+    } else {
+      layer.engine.graphByZoom = [];
+    }
+    layer.engine.setBbox();
+  }, [isLnpVisible, layer, graphByZoom, linesNetworkPlanLayer]);
+
   return null;
 }
 

package/src/RouteScheduleFooter/RouteScheduleFooter.tsx

@@ -25,7 +25,7 @@ function RouteScheduleFooter() {
 
   return (
     <>
-      <div className="m-4 mb-0 flex flex-wrap text-xs text-gray-500">
+      <div className="m-4 mb-0 flex flex-wrap text-[10px] text-gray-500">
         {stopSequence.operator &&
           defaultRenderLink(stopSequence.operator, stopSequence.operatorUrl)}
         {stopSequence.operator && stopSequence.publisher && <span> - </span>}
@@ -36,7 +36,6 @@ function RouteScheduleFooter() {
           defaultRenderLink(stopSequence.license, stopSequence.licenseUrl)}
         {stopSequence.license && ")"}
       </div>
-      <div className="pointer-events-none sticky bottom-0 h-8 w-full bg-gradient-to-b from-transparent to-white" />
     </>
   );
 }

package/src/RvfFeatureDetails/RvfFeatureDetails.tsx

@@ -33,10 +33,10 @@ function RvfFeatureDetails({
         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

@@ -85,6 +85,7 @@ function LinesNetworkPlanDetails({
       ),
     ]
       .filter((id) => {
+        // console.log("ID", id, lineInfos);
         return !!id && !!lineInfos?.[id];
       })
       .forEach((id) => {
@@ -128,6 +129,7 @@ function LinesNetworkPlanDetails({
     return byLineId;
   }, [features]);
 
+  // console.log("ICI", features, lineInfos, lineInfosByOperator);
   if (!features?.length || !lineInfos) {
     return null;
   }