@geops/rvf-mobility-web-component 0.1.41 → 0.1.43

package/src/RvfFeatureDetails/RvfLineNetworkDetails/RvfLineNetworkDetails.tsx

@@ -1,3 +1,4 @@
+import { VectorTileSource } from "maplibre-gl";
 import { RealtimeLine } from "mobility-toolbox-js/types";
 import { Feature } from "ol";
 import { useEffect, useMemo, useState } from "preact/hooks";
@@ -19,6 +20,7 @@ interface LineInfo {
   long_name: string;
   mot: string;
   operator_name: string;
+  runs: number;
   short_name: string;
   text_color: string;
 }
@@ -31,6 +33,12 @@ interface StopInfo {
   visibility_level: number;
 }
 
+const LNP_SOURCE_ID = "network_plans";
+const LNP_MD_LINES = "geops.lnp.lines";
+const LNP_MD_STOPS = "geops.lnp.stops";
+const RUNS_PROP = "runs";
+const ORIGINAL_LINE_ID_PROP = "original_line_id";
+
 function RvfLineNetworkDetails({
   feature,
   features,
@@ -38,46 +46,66 @@ function RvfLineNetworkDetails({
   feature: Feature;
   features: Feature[];
 }) {
-  const { apikey, mapsurl } = useMapContext();
+  const { baseLayer } = useMapContext();
   const [lineInfos, setLineInfos] = useState<LineInfo[]>(null);
   const [stopInfos, setStopInfos] = useState<StopInfo[]>(null);
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [stopInfosOpenId, setStopInfosOpenId] = useState<string>(null);
 
   useEffect(() => {
-    const fetchInfos = async () => {
+    const source = baseLayer?.mapLibreMap?.getSource(
+      LNP_SOURCE_ID,
+    ) as VectorTileSource;
+    const abortController = new AbortController();
+    const fetchInfos = async (url) => {
       if (!cacheLineInfosById) {
-        const response = await fetch(
-          `${mapsurl}/data/network_plans_rvf_prototype.json?key=${apikey}`,
-        );
+        const response = await fetch(url, { signal: abortController.signal });
         const data = await response.json();
-        cacheLineInfosById = data["geops.lnp.lines"];
-        cacheStopInfosById = data["geops.lnp.stops"];
+        cacheLineInfosById = data[LNP_MD_LINES];
+        cacheStopInfosById = data[LNP_MD_STOPS];
       }
       setLineInfos(cacheLineInfosById);
       setStopInfos(cacheStopInfosById);
     };
-    fetchInfos();
-  }, [apikey, mapsurl]);
+    if (source?.url) {
+      fetchInfos(source?.url);
+    }
+    return () => {
+      abortController?.abort();
+    };
+  }, [baseLayer?.mapLibreMap]);
 
   const lineInfosByOperator: Record<string, LineInfo[]> = useMemo(() => {
     const byOperators = {};
+
     [
       ...new Set(
         features.map((f) => {
-          return f.get("original_line_id");
+          return f.get(ORIGINAL_LINE_ID_PROP);
         }),
       ),
     ]
       .filter((id) => {
         return !!id && !!lineInfos?.[id];
       })
-      .map((id) => {
+      .forEach((id) => {
         const { operator_name: operatorName } = lineInfos[id];
         if (!byOperators[operatorName]) {
           byOperators[operatorName] = [];
+          byOperators[operatorName].runs = 0;
         }
         lineInfos[id].id = id;
+
+        const runs = features
+          .filter((f) => {
+            return f.get(ORIGINAL_LINE_ID_PROP) === id;
+          })
+          .reduce((acc, feature) => {
+            return acc + feature.get(RUNS_PROP);
+          }, 0);
+        lineInfos[id].id = id;
+        lineInfos[id].runs = runs;
+        byOperators[operatorName].runs += runs;
         byOperators[operatorName].push(lineInfos[id]);
       });
 
@@ -88,7 +116,7 @@ function RvfLineNetworkDetails({
   const stopInfoIdsByLineId: Record<string, string[]> = useMemo(() => {
     const byLineId = {};
     features.forEach((f) => {
-      const lineId = f.get("original_line_id");
+      const lineId = f.get(ORIGINAL_LINE_ID_PROP);
       if (lineId && !byLineId[lineId]) {
         try {
           byLineId[lineId] = JSON.parse(f.get("stop_ids"));
@@ -107,129 +135,142 @@ function RvfLineNetworkDetails({
 
   return (
     <div className="flex flex-col gap-4">
-      {Object.entries(lineInfosByOperator).map(([operatorName, linesInfos]) => {
-        return (
-          <div className={"flex flex-col gap-2"} key={operatorName}>
-            <div>{operatorName}</div>
-            {linesInfos
-              .sort((a, b) => {
-                return a.short_name?.localeCompare(b.short_name);
-              })
-              .map((lineInfo) => {
-                const {
-                  color: backgroundColor,
-                  id,
-                  // color,
-                  // external_id,
-                  long_name,
-                  mot,
-                  short_name: shortName,
-                  text_color: textColor,
-                } = lineInfo;
-                let longName = long_name;
-
-                let stops = null;
-                //stopInfoIdsByLineId?.[id] || null;
-                if (!stops?.length) {
-                  stops = null;
-                }
-                console.log("stops", stops, longName);
-                if (!longName && stops) {
-                  const names = stops.map((stopId) => {
-                    return stopInfos[stopId].short_name;
-                  });
-                  console.log("stops", names);
-
-                  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,
-                };
-
-                if (textColor) {
-                  line.text_color =
-                    textColor[0] === "#" ? textColor : "#" + textColor;
-                }
-
-                if (backgroundColor) {
-                  line.color =
-                    backgroundColor[0] === "#"
-                      ? backgroundColor
-                      : "#" + backgroundColor;
-                }
-
-                return (
-                  <div key={shortName}>
-                    <div
-                      className={
-                        "flex w-full items-center justify-between gap-2"
-                      }
-                      // onClick={() => {
-                      //   setStopInfosOpenId(stopInfosOpenId === id ? null : id);
-                      // }}
-                    >
-                      <div>
-                        <RouteIcon line={line}></RouteIcon>
+      {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>
+              {linesInfos
+                .sort((a, b) => {
+                  return a.runs < b.runs ? 1 : -1;
+                })
+                .map((lineInfo) => {
+                  const {
+                    color: backgroundColor,
+                    id,
+                    // 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;
+                  }
+
+                  if (!longName && stops) {
+                    const names = stops.map((stopId) => {
+                      return stopInfos[stopId].short_name;
+                    });
+
+                    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,
+                  };
+
+                  if (textColor) {
+                    line.text_color =
+                      textColor[0] === "#" ? textColor : "#" + textColor;
+                  }
+
+                  if (backgroundColor) {
+                    line.color =
+                      backgroundColor[0] === "#"
+                        ? backgroundColor
+                        : "#" + backgroundColor;
+                  }
+
+                  return (
+                    <div key={shortName}>
+                      <div
+                        className={
+                          "flex w-full items-center justify-between gap-2"
+                        }
+                        // onClick={() => {
+                        //   setStopInfosOpenId(stopInfosOpenId === id ? null : id);
+                        // }}
+                      >
+                        <div>
+                          <RouteIcon line={line}></RouteIcon>
+                        </div>
+                        {!!longName && (
+                          <div className={"flex-1 text-left"}>{longName}</div>
+                        )}
+                        {/* <div className={"text-xs"}>{runs}</div> */}
+
+                        {!!stops && (
+                          <button className={"shrink-0"}>
+                            {stopInfosOpenId === id ? (
+                              <ArrowUp />
+                            ) : (
+                              <ArrowDown />
+                            )}
+                          </button>
+                        )}
                       </div>
-                      {!!longName && (
-                        <div className={"flex-1 text-left"}>{longName}</div>
-                      )}
                       {!!stops && (
-                        <button className={"shrink-0"}>
-                          {stopInfosOpenId === id ? <ArrowUp /> : <ArrowDown />}
-                        </button>
+                        <div
+                          className={`${stopInfosOpenId === id ? "" : "hidden"}`}
+                        >
+                          {stops?.map((stopId, index, arr) => {
+                            const stop = stopInfos[stopId];
+                            return (
+                              <div
+                                className={"flex items-center gap-2"}
+                                key={stopId}
+                              >
+                                <RouteStopContext.Provider
+                                  value={{
+                                    index,
+                                    status: {
+                                      isFirst: !index,
+                                      isLast: index === arr.length - 1,
+                                      isLeft: false,
+                                      isPassed: false,
+                                      progress: !index ? 50 : 0,
+                                    },
+                                    stop,
+                                  }}
+                                >
+                                  <RouteStopProgress
+                                    className="relative flex size-8 shrink-0 items-center justify-center"
+                                    lineColor={line.color}
+                                  />
+                                  <div>{stop.short_name}</div>
+                                </RouteStopContext.Provider>
+                              </div>
+                            );
+                          })}
+                        </div>
                       )}
                     </div>
-                    {!!stops && (
-                      <div
-                        className={`${stopInfosOpenId === id ? "" : "hidden"}`}
-                      >
-                        {stops?.map((stopId, index, arr) => {
-                          const stop = stopInfos[stopId];
-                          return (
-                            <div
-                              className={"flex items-center gap-2"}
-                              key={stopId}
-                            >
-                              <RouteStopContext.Provider
-                                value={{
-                                  index,
-                                  status: {
-                                    isFirst: !index,
-                                    isLast: index === arr.length - 1,
-                                    isLeft: false,
-                                    isPassed: false,
-                                    progress: !index ? 50 : 0,
-                                  },
-                                  stop,
-                                }}
-                              >
-                                <RouteStopProgress
-                                  className="relative flex size-8 shrink-0 items-center justify-center"
-                                  lineColor={line.color}
-                                />
-                                <div>{stop.short_name}</div>
-                              </RouteStopContext.Provider>
-                            </div>
-                          );
-                        })}
-                      </div>
-                    )}
-                  </div>
-                );
-              })}
-          </div>
-        );
-      })}
+                  );
+                })}
+            </div>
+          );
+        })}
     </div>
   );
 }

package/src/RvfFeatureDetails/RvfNotificationDetails/RvfNotificationDetails.tsx

@@ -1,80 +1,234 @@
 import { Feature } from "ol";
-import showdown from "showdown";
 
-import RvfLink from "../../RvfLink";
-const converter = new showdown.Converter();
+// import RvfLink from "../../RvfLink";
+// import { icons } from "../../utils/addSourceAndLayers";
+import getBgColor from "../../utils/getBgColor";
+import useI18n from "../../utils/hooks/useI18n";
+
+const toShortDate = (date, showTime) => {
+  const time = date.toLocaleTimeString(["de"], {
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+  const dateString = date.toLocaleDateString(["de"], {
+    day: "2-digit",
+    month: "short",
+    weekday: "short",
+  });
+
+  return `${dateString}${showTime && showTime !== time ? ` ${time}` : ""}`
+    .replace(",", "")
+    .replace(/\./, "")
+    .replace(/\.$/, "");
+};
+
+let rvfLines = null;
+fetch("https://tralis-tracker-api.geops.io/api/lines/rvf/")
+  .then((res) => {
+    return res.json();
+  })
+  .then((data) => {
+    rvfLines = data;
+  });
+const getLine = (name) => {
+  if (rvfLines) {
+    const line = rvfLines.find((line) => {
+      return line.name === name;
+    });
+    if (line) {
+      return line;
+    }
+  }
+  return { mot: "bus", name };
+};
+
 // text = "# hello, markdown!",
 // html = converter.makeHtml(text);
 function RvfNotificationDetails({ feature }: { feature: Feature }) {
+  const { t } = useI18n();
+
   const {
     affected_products: affectedProducts,
     affected_time_intervals: timeIntervals,
-    links,
-    long_description: description,
-    title,
+    consequence_de: consequence,
+    description_de: descriptionDe,
+    // disruption_type: disruptionType,
+    // duration_text_de: durationText,
+    // links,
+    // long_description: description,
+    reason_de: reason,
+    recommendation_de: recommendation,
+    summary_de: summary,
+    // title,
   } = feature.getProperties();
 
+  // "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 = [];
+  // let externalLinks = [];
+
   try {
     const timeInterval = JSON.parse(timeIntervals)?.[0] || {};
-    const dateStart = new Date(timeInterval.start);
-    start =
-      dateStart.toLocaleDateString() + " " + dateStart.toLocaleTimeString();
-    const dateEnd = new Date(timeInterval.end);
-    end = dateEnd.toLocaleDateString() + " " + dateEnd.toLocaleTimeString();
+    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) => {
+    products?.sort((a, b) => {
       return a.name.localeCompare(b.name);
     });
-    externalLinks = JSON.parse(links);
+    // externalLinks = JSON.parse(links);
   } catch (e) {
     console.error(e);
   }
   return (
-    <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, uri }) => {
-        return (
-          <RvfLink href={uri} key={uri}>
-            {label}
-          </RvfLink>
-        );
-      })}
+    // <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={"font-bold"}>Betroffene Lines:</div>
-          <div className={"flex flex-wrap gap-1"}>
-            {products?.map(({ name }) => {
-              return (
+        <div className="flex flex-wrap  gap-2">
+          {products?.map(({ name }) => {
+            const line = getLine(name);
+            return (
+              <>
                 <div
                   className={
-                    "rounded-md bg-red px-[12px] py-[9px] font-bold leading-none text-white"
+                    "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>
-        </>
+              </>
+            );
+          })}
+        </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 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>
   );
 }
 

package/src/icons/sbb_add_stop.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <g fill="none" fill-rule="evenodd">
+    <rect width="16" height="16" fill="#EB0000" rx="2"/>
+    <path fill="#FFF" d="M8.559,10.646 C8.331,10.707 8.097,10.75 7.85,10.75 C7.573,10.75 7.311,10.697 7.059,10.62 C5.93,10.278 5.1,9.24 5.1,8 C5.1,6.761 5.93,5.722 7.059,5.38 C7.311,5.304 7.573,5.25 7.85,5.25 C8.097,5.25 8.331,5.293 8.559,5.355 C9.731,5.67 10.6,6.73 10.6,8 C10.6,9.27 9.731,10.331 8.559,10.646 M8.559,3.822 L8.559,0 L7.059,0 L7.059,3.83 C5.093,4.203 3.6,5.928 3.6,8 C3.6,10.073 5.093,11.798 7.059,12.17 L7.059,16 L8.559,16 L8.559,12.179 C10.565,11.839 12.1,10.101 12.1,8 C12.1,5.9 10.565,4.162 8.559,3.822"/>
+  </g>
+</svg>