@geops/rvf-mobility-web-component 0.1.33 → 0.1.34

package/package.json

@@ -2,7 +2,7 @@
   "name": "@geops/rvf-mobility-web-component",
   "license": "UNLICENSED",
   "description": "Web components for rvf in the domains of mobility and logistics.",
-  "version": "0.1.33",
+  "version": "0.1.34",
   "homepage": "https://rvf-mobility-web-component-geops.vercel.app/",
   "type": "module",
   "main": "index.js",

package/src/RouteIcon/RouteIcon.tsx

@@ -34,7 +34,7 @@ function RouteIcon({
     departure?.line ||
     stopSequence?.line ||
     trajectory?.properties?.line;
-  const type = stopSequence?.type || trajectory?.type;
+  const type = lineToUse?.type || stopSequence?.type || trajectory?.type;
   const backgroundColor = getMainColorForVehicle(
     line || departure || stopSequence || trajectory,
   );
@@ -46,7 +46,10 @@ function RouteIcon({
 
   const fontSize = fontSizesByNbLetters[text.length] || 12;
   const font = getTextFontForVehicle(fontSize, text);
-  const hasRealtime = stopSequence?.has_realtime_journey;
+
+  // RealtimeIcon only for stopsequence for now
+  const hasRealtime = stopSequence?.has_realtime_journey === true;
+  const showNoRealtimeIcon = !!stopSequence;
   const isCancelled = stopSequence?.stations[0]?.state === "JOURNEY_CANCELLED";
 
   if (borderColor === backgroundColor) {
@@ -67,7 +70,7 @@ function RouteIcon({
       >
         {children || text}
 
-        {!isCancelled && !hasRealtime && (
+        {showNoRealtimeIcon && !isCancelled && !hasRealtime && (
           <NoRealtime className={"absolute -left-2 -top-2"} />
         )}
       </span>

package/src/RouteStopProgress/RouteStopProgress.tsx

@@ -6,11 +6,16 @@ import useMapContext from "../utils/hooks/useMapContext";
 import useRouteStop from "../utils/hooks/useRouteStop";
 
 export type RouteStopProgressProps = {
+  lineColor?: string;
   svgProps?: JSX.HTMLAttributes<SVGElement> & PreactDOMAttributes;
 } & JSX.HTMLAttributes<HTMLDivElement> &
   PreactDOMAttributes;
 
-function RouteStopProgress({ svgProps, ...props }: RouteStopProgressProps) {
+function RouteStopProgress({
+  lineColor,
+  svgProps,
+  ...props
+}: RouteStopProgressProps) {
   const { stopSequence } = useMapContext();
   const { invertColor, status } = useRouteStop();
   const { isBoarding, isFirst, isLast, isLeft, isPassed, progress } = status;
@@ -19,16 +24,16 @@ function RouteStopProgress({ svgProps, ...props }: RouteStopProgressProps) {
   const yDone = `${progress}%`;
 
   const greyColor = "rgb(156, 163, 175)";
-  const lineColor = getMainColorForVehicle(stopSequence);
+  const lineColorr = lineColor || getMainColorForVehicle(stopSequence);
 
-  let colorScheme = isPassed ? greyColor : lineColor;
-  let invertColorScheme = isPassed ? lineColor : greyColor;
+  let colorScheme = isPassed ? greyColor : lineColorr;
+  let invertColorScheme = isPassed ? lineColorr : greyColor;
   let progressDoneColor = greyColor;
 
   if (invertColor) {
-    colorScheme = isPassed ? lineColor : greyColor;
-    invertColorScheme = isPassed ? greyColor : lineColor;
-    progressDoneColor = lineColor;
+    colorScheme = isPassed ? lineColorr : greyColor;
+    invertColorScheme = isPassed ? greyColor : lineColorr;
+    progressDoneColor = lineColorr;
   }
 
   const circleColor =

package/src/RvfFeatureDetails/RvfLineNetworkDetails/RvfLineNetworkDetails.tsx

@@ -1,9 +1,35 @@
+import { RealtimeLine } from "mobility-toolbox-js/types";
 import { Feature } from "ol";
 import { useEffect, useMemo, useState } from "preact/hooks";
 
+import ArrowDown from "../../icons/ArrowDown";
+import ArrowUp from "../../icons/ArrowUp";
+import RouteIcon from "../../RouteIcon";
+import RouteStopProgress from "../../RouteStopProgress";
 import useMapContext from "../../utils/hooks/useMapContext";
+import { RouteStopContext } from "../../utils/hooks/useRouteStop";
 
 let cacheLineInfosById = null;
+let cacheStopInfosById = null;
+
+interface LineInfo {
+  color: string;
+  external_id: string;
+  id: string;
+  long_name: string;
+  mot: string;
+  operator_name: string;
+  short_name: string;
+  text_color: string;
+}
+
+interface StopInfo {
+  external_id: string;
+  importance: number;
+  long_name: string;
+  short_name: string;
+  visibility_level: number;
+}
 
 function RvfLineNetworkDetails({
   feature,
@@ -13,7 +39,11 @@ function RvfLineNetworkDetails({
   features: Feature[];
 }) {
   const { apikey, mapsurl } = useMapContext();
-  const [lineInfos, setLineInfos] = useState(null);
+  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 () => {
       if (!cacheLineInfosById) {
@@ -22,15 +52,16 @@ function RvfLineNetworkDetails({
         );
         const data = await response.json();
         cacheLineInfosById = data["geops.lnp.lines"];
+        cacheStopInfosById = data["geops.lnp.stops"];
       }
       setLineInfos(cacheLineInfosById);
+      setStopInfos(cacheStopInfosById);
     };
     fetchInfos();
   }, [apikey, mapsurl]);
 
-  const lineNetworkIdsByOperator = useMemo(() => {
+  const lineInfosByOperator: Record<string, LineInfo[]> = useMemo(() => {
     const byOperators = {};
-
     [
       ...new Set(
         features.map((f) => {
@@ -46,51 +77,155 @@ function RvfLineNetworkDetails({
         if (!byOperators[operatorName]) {
           byOperators[operatorName] = [];
         }
+        lineInfos[id].id = id;
         byOperators[operatorName].push(lineInfos[id]);
       });
 
     return byOperators;
   }, [features, lineInfos]);
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const stopInfoIdsByLineId: Record<string, string[]> = useMemo(() => {
+    const byLineId = {};
+    features.forEach((f) => {
+      const lineId = f.get("original_line_id");
+      if (lineId && !byLineId[lineId]) {
+        try {
+          byLineId[lineId] = JSON.parse(f.get("stop_ids"));
+        } catch (e) {
+          console.log(e);
+        }
+      }
+    });
+
+    return byLineId;
+  }, [features]);
+
   if (!feature || !lineInfos) {
     return null;
   }
 
   return (
     <div className="flex flex-col gap-4">
-      {Object.entries(lineNetworkIdsByOperator).map(
-        ([operatorName, linesInfos]) => {
-          return (
-            <div className={"flex flex-col gap-2"} key={operatorName}>
-              <div>{operatorName}</div>
-              {linesInfos.map((lineInfo) => {
+      {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: longName,
+                  long_name,
+                  mot,
                   short_name: shortName,
-                  // text_color,
+                  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;
+                }
+
+                if (backgroundColor) {
+                  line.color = "#" + backgroundColor;
+                }
 
                 return (
-                  <div className={"flex items-center gap-2"} key={shortName}>
-                    <div>
+                  <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>
+                      )}
+                      {!!stops && (
+                        <button className={"shrink-0"}>
+                          {stopInfosOpenId === id ? <ArrowUp /> : <ArrowDown />}
+                        </button>
+                      )}
+                    </div>
+                    {!!stops && (
                       <div
-                        className={
-                          "rounded-md bg-red px-[12px] py-[9px] font-bold leading-none text-white"
-                        }
+                        className={`${stopInfosOpenId === id ? "" : "hidden"}`}
                       >
-                        {shortName}
+                        {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>{longName}</div>
+                    )}
                   </div>
                 );
               })}
-            </div>
-          );
-        },
-      )}
+          </div>
+        );
+      })}
     </div>
   );
 }

package/src/utils/getFeatureInformationTitle.ts

@@ -15,9 +15,10 @@ const getFeatureInformationTitle = (feature: Feature) => {
     category,
     disruption_type: disruptionType,
     feed_id: feedId,
-    long_name: longName,
+    line_id: lineId,
     tickets,
   } = selectedFeature.getProperties();
+  console.log(selectedFeature.getProperties());
 
   if (disruptionType) {
     return "MOCO Meldung";
@@ -29,7 +30,7 @@ const getFeatureInformationTitle = (feature: Feature) => {
     return TITLE_BY_FEED_ID[feedId] || defaultTitle;
   }
 
-  if (longName) {
+  if (lineId) {
     return RVF_LAYERS_TITLES.liniennetz;
   }
   if (tickets) {