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

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/RvfMobilityMap/RvfMobilityMap.tsx

@@ -246,7 +246,7 @@ function RvfMobilityMap({
 
   // TODO: this should be removed. The parent application should be responsible to do this
   // or we should find something that fit more usecases
-  useUpdatePermalink(map, permalink === "true");
+  useUpdatePermalink(map, permalink === "true", eventNodeRef);
 
   const mapContextValue = useMemo(() => {
     return {

package/src/utils/addSourceAndLayers.ts

@@ -1,3 +1,11 @@
+import warningbanner from "../icons/warning-banner.png";
+import warning from "../icons/warning.png";
+
+const icons = {
+  warning: warning,
+  warningbanner: warningbanner,
+};
+
 // Add a source and styleLayer using the id in parameter.
 const addSourceAndLayers = (
   mapboxLayer,
@@ -20,13 +28,27 @@ const addSourceAndLayers = (
   }
   const { mbMap } = mapboxLayer;
 
+  Object.keys(icons).forEach((icon) => {
+    if (!mbMap.getImage(icon)) {
+      mbMap.loadImage(icons[icon]).then((image) => {
+        if (!mbMap.getImage(icon)) {
+          mbMap.addImage(icon, image.data);
+        }
+      });
+    }
+  });
+
   // Update source
   if (sourceId && sourceData) {
     const source = mbMap.getSource(sourceId);
     if (source) {
-      source.setData(sourceData.data);
+      source.setData(sourceData);
     } else {
-      mbMap.addSource(sourceId, sourceData);
+      mbMap.addSource(sourceId, {
+        data: sourceData,
+        generateId: true,
+        type: "geojson",
+      });
     }
   }
 

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) {

package/src/utils/hooks/useUpdatePermalink.tsx

@@ -2,17 +2,22 @@ import debounce from "lodash.debounce";
 import { Map } from "ol";
 import { EventsKey } from "ol/events";
 import { unByKey } from "ol/Observable";
-import { useEffect } from "preact/hooks";
+import { MutableRef, useEffect } from "preact/hooks";
 
 import { LAYER_PROP_IS_EXPORTING } from "../constants";
 import getLayersAsFlatArray from "../getLayersAsFlatArray";
 import getPermalinkParameters from "../getPermalinkParameters";
+import MobilityEvent from "../MobilityEvent";
 
 /**
  * This hook only update parameters in the url, it does not apply the url parameters.
  */
 
-const useUpdatePermalink = (map: Map, permalink: boolean) => {
+const useUpdatePermalink = (
+  map: Map,
+  permalink: boolean,
+  eventNodeRef: MutableRef<HTMLDivElement>,
+) => {
   useEffect(() => {
     let moveEndKey: EventsKey;
     let loadEndKey: EventsKey;
@@ -23,17 +28,17 @@ const useUpdatePermalink = (map: Map, permalink: boolean) => {
 
       // Update x,y,z in URL on moveend
       moveEndKey = map?.on("moveend", (evt) => {
-        updatePermalinkDebounced(evt.map);
+        updatePermalinkDebounced(evt.map, eventNodeRef);
       });
 
       // Update layers in URL on change:visible event
       loadEndKey = map.once("loadend", (evt) => {
-        updatePermalinkDebounced(evt.map);
+        updatePermalinkDebounced(evt.map, eventNodeRef);
         changeVisibleKeys = getLayersAsFlatArray(
           evt.map.getLayers().getArray(),
         ).map((layer) => {
           return layer.on("change:visible", () => {
-            updatePermalinkDebounced(evt.map);
+            updatePermalinkDebounced(evt.map, eventNodeRef);
           });
         });
       });
@@ -44,11 +49,14 @@ const useUpdatePermalink = (map: Map, permalink: boolean) => {
       unByKey(loadEndKey);
       unByKey(changeVisibleKeys);
     };
-  }, [map, permalink]);
+  }, [map, permalink, eventNodeRef]);
   return null;
 };
 
-const updatePermalink = (map: Map) => {
+const updatePermalink = (
+  map: Map,
+  eventNodeRef: MutableRef<HTMLDivElement>,
+) => {
   // No update when exporting
   if (map.get(LAYER_PROP_IS_EXPORTING)) {
     return;
@@ -57,6 +65,9 @@ const updatePermalink = (map: Map) => {
   const urlParams = getPermalinkParameters(map, currentUrlParams);
   urlParams.set("permalink", "true");
   window.history.replaceState(null, null, `?${urlParams.toString()}`);
+  eventNodeRef?.current?.dispatchEvent(
+    new MobilityEvent<string>("mwc:permalink", window.location.href),
+  );
 };
 
 const updatePermalinkDebounced = debounce(updatePermalink, 1000);

package/src/utils/hooks/useZoom.tsx

@@ -15,15 +15,27 @@ const useZoom = () => {
     if (view) {
       setZoom(view.getZoom());
     }
-    const zoomListener = view.on("change:resolution", () => {
+    const onZoomChange = (evt) => {
       clearTimeout(timeout);
       timeout = setTimeout(() => {
-        return setZoom(view.getZoom());
+        return setZoom(evt.target.getZoom());
       }, 150);
+    };
+    let zoomListener = view.on("change:resolution", onZoomChange);
+
+    const key = map.on("change:view", () => {
+      const view = map.getView();
+      unByKey(zoomListener);
+      if (view) {
+        setZoom(view.getZoom());
+      }
+      zoomListener = view.on("change:resolution", onZoomChange);
     });
+
     return () => {
       clearTimeout(timeout);
       unByKey(zoomListener);
+      unByKey(key);
     };
   }, [map]);
   return zoom;