@geops/rvf-mobility-web-component 0.1.8

package/src/NotificationLayer/notificationUtils.ts

@@ -0,0 +1,191 @@
+import { FeatureCollection } from "geojson";
+import { Feature } from "ol";
+import { getCenter } from "ol/extent";
+import GeoJSON from "ol/format/GeoJSON";
+
+import addSourceAndLayers from "../utils/addSourceAndLayers";
+
+const format = new GeoJSON();
+
+export const getTime = (str) => {
+  return parseInt(str?.substr(0, 8).replace(/:/g, ""), 10);
+};
+
+/**
+ *
+ * @param {Array.<Object>} notifications Raw notifications
+ * @param {Date} now The date to compare with the affected_time_intervals
+ * @returns {Array.<Object>}
+ */
+const getNotificationsWithStatus = (notifications, now) => {
+  return notifications
+    .filter((n) => {
+      // TODO: The backend should be responsible to returns only good notifications.
+      const notOutOfDate = n.properties.affected_time_intervals.some((ati) => {
+        return now < new Date(ati.end);
+      });
+      return notOutOfDate;
+    })
+    .map((n) => {
+      const isActive = n.properties.affected_time_intervals.some((ati) => {
+        const {
+          end,
+          start,
+          time_of_day_end: dayTimeEnd,
+          time_of_day_start: dayTimeStart,
+        } = ati;
+        const nowTime = getTime(now.toTimeString());
+        const startTime = getTime(dayTimeStart);
+        const endTime = getTime(dayTimeEnd);
+        const inRange = new Date(start) <= now && now <= new Date(end);
+        return startTime && endTime
+          ? inRange && startTime <= nowTime && nowTime <= endTime
+          : inRange;
+      });
+
+      const next = n.properties.affected_time_intervals.reduce((a, b) => {
+        const aEnd = new Date(a.end);
+        const aStart = new Date(a.start);
+        const bStart = new Date(b.start);
+        return now < aEnd && aStart < bStart ? a : b;
+      }, []);
+      const nextStartDate = new Date(next.start);
+      let starts;
+      if (
+        now.toDateString() === nextStartDate.toDateString() ||
+        now.getTime() - nextStartDate.getTime() > 0
+      ) {
+        if (next.time_of_day_start) {
+          starts = `ab ${next.time_of_day_start.substr(0, 5)}`;
+        } else {
+          starts = `ab ${nextStartDate.toLocaleTimeString(["de"], {
+            hour: "2-digit",
+            hour12: false,
+            minute: "2-digit",
+          })}`;
+        }
+      } else {
+        starts = `ab ${nextStartDate.toLocaleDateString(["de-DE"], {
+          day: "numeric",
+          month: "short",
+        })}`;
+      }
+
+      let iconRefPoint;
+      const iconRef = n.features.find((f) => {
+        return f.properties.is_icon_ref;
+      });
+      if (iconRef) {
+        const iconRefFeature = format.readFeature(iconRef, {
+          dataProjection: "EPSG:4326",
+          featureProjection: "EPSG:3857",
+        }) as Feature;
+        const center = getCenter(iconRefFeature.getGeometry().getExtent());
+        iconRefPoint = iconRefFeature.getGeometry().getClosestPoint(center);
+      }
+
+      const properties = {
+        ...n.properties,
+        iconRefPoint,
+        isActive,
+        starts,
+      };
+
+      const features = n.features.map((f) => {
+        return {
+          ...f,
+          properties: { ...f.properties, ...properties },
+        };
+      });
+
+      return {
+        ...n,
+        features,
+        properties,
+      };
+    });
+};
+
+const getCurrentGraph = (mapping: object, zoom: number) => {
+  const breakPoints = Object.keys(mapping).map((k) => {
+    return parseFloat(k);
+  });
+  const closest = breakPoints.reverse().find((bp) => {
+    return bp <= Math.floor(zoom) - 1;
+  }); // - 1 due to ol zoom !== mapbox zoom
+  return mapping[closest || Math.min(...breakPoints)];
+};
+
+/**
+ * This function add layers in the mapbox style to show notifications lines.
+ */
+const addNotificationsLayers = (
+  mapboxLayer: object,
+  notifications: FeatureCollection[],
+  beforeLayerId: string,
+  zoom: number,
+  graphMapping: object,
+) => {
+  if (!mapboxLayer) {
+    return;
+  }
+  const features = notifications
+    .map((n) => {
+      return n.features;
+    })
+    .flat();
+  addSourceAndLayers(
+    mapboxLayer,
+    "notifications",
+    {
+      data: {
+        features,
+        type: "FeatureCollection",
+      },
+      type: "geojson",
+    },
+    [
+      {
+        filter: [
+          "all",
+          ["==", ["get", "isActive"], true],
+          ["==", ["get", "graph"], getCurrentGraph(graphMapping, zoom)],
+          ["==", ["get", "disruption_type"], "DISRUPTION"],
+        ],
+        id: "notificationsActive",
+        layout: { visibility: "visible" },
+        paint: {
+          "line-color": "rgba(255,0,0,1)",
+          "line-dasharray": [2, 2],
+          "line-width": 5,
+        },
+        source: "notifications",
+        type: "line",
+      },
+    ],
+    beforeLayerId,
+  );
+};
+
+const parsePreviewNotification = (mocoPreviewObject: {
+  graphs: object;
+  id: number;
+}) => {
+  let properties = {};
+  const features = Object.keys(mocoPreviewObject.graphs).map((graph) => {
+    const feature = mocoPreviewObject.graphs[graph].features[0];
+    properties = mocoPreviewObject.graphs[graph].properties;
+    return { ...feature, properties: { ...feature.properties, graph } };
+  });
+  return {
+    features,
+    properties,
+    type: "FeatureCollection",
+  };
+};
+
+export {
+  addNotificationsLayers,
+  getNotificationsWithStatus,
+  parsePreviewNotification,
+};

package/src/Overlay/Overlay.tsx

@@ -0,0 +1,57 @@
+import { JSX, PreactDOMAttributes } from "preact";
+
+import type { ScrollableHandlerProps } from "../ScrollableHandler";
+
+import ScrollableHandler from "../ScrollableHandler";
+
+export type OverlayProps = {
+  ScrollableHandlerProps?: ScrollableHandlerProps;
+} & JSX.HTMLAttributes<HTMLDivElement> &
+  PreactDOMAttributes;
+
+function Overlay({ children, ScrollableHandlerProps = {} }: OverlayProps) {
+  let hasChildren = !!children;
+  if (Array.isArray(children)) {
+    hasChildren =
+      children?.length &&
+      (children || []).find((c) => {
+        return !!c;
+      });
+  }
+
+  if (!hasChildren) {
+    return null;
+  }
+
+  return (
+    <div
+      className={`relative z-50 flex flex-col overflow-hidden transition-[min-height,max-height] @lg:transition-[width]  ${
+        children
+          ? "max-h-[70%] min-h-[75px] w-full border-t @lg:h-[100%!important] @lg:max-h-full @lg:w-[350px] @lg:border-r @lg:border-t-0"
+          : "max-h-0 min-h-0 @lg:w-0"
+      }`}
+    >
+      {hasChildren && (
+        <>
+          <ScrollableHandler
+            className="absolute inset-0 flex h-[65px] touch-none justify-center @lg:hidden"
+            style={{ width: "100%" }}
+            {...ScrollableHandlerProps}
+          >
+            <div
+              className="m-2 mr-[-60px] bg-gray-300"
+              style={{
+                borderRadius: 2,
+                height: 4,
+                width: 32,
+              }}
+            />
+          </ScrollableHandler>
+          {children}
+        </>
+      )}
+    </div>
+  );
+}
+
+export default Overlay;

package/src/Overlay/index.tsx

@@ -0,0 +1 @@
+export { default } from "./Overlay";

package/src/RealtimeLayer/RealtimeLayer.tsx

@@ -0,0 +1,230 @@
+import type { RealtimeMot, RealtimeTrainId } from "mobility-toolbox-js/types";
+
+import { RealtimeLayer as MtbRealtimeLayer } from "mobility-toolbox-js/ol";
+import { RealtimeLayerOptions } from "mobility-toolbox-js/ol/layers/RealtimeLayer";
+import { unByKey } from "ol/Observable";
+import { memo } from "preact/compat";
+import { useEffect, useMemo } from "preact/hooks";
+
+import centerOnVehicle from "../utils/centerOnVehicle";
+import getDelayColorForVehicle from "../utils/getDelayColorForVehicle";
+import getDelayFontForVehicle from "../utils/getDelayFontForVehicle";
+import getDelayTextForVehicle from "../utils/getDelayTextForVehicle";
+import getTextFontForVehicle from "../utils/getTextFontForVehicle";
+import getTextForVehicle from "../utils/getTextForVehicle";
+import useMapContext from "../utils/hooks/useMapContext";
+
+const TRACKING_ZOOM = 16;
+
+export type RealtimeLayerProps = RealtimeLayerOptions;
+
+function RealtimeLayer(props: RealtimeLayerProps) {
+  const {
+    apikey,
+    isFollowing,
+    isTracking,
+    map,
+    mots,
+    realtimeurl,
+    setIsFollowing,
+    setIsTracking,
+    setRealtimeLayer,
+    setStation,
+    setStopSequence,
+    stationId,
+    stopSequence,
+    tenant,
+    trainId,
+  } = useMapContext();
+
+  const layer = useMemo(() => {
+    if (!apikey || !realtimeurl) {
+      return null;
+    }
+    const layer = new MtbRealtimeLayer({
+      apiKey: apikey,
+      getMotsByZoom: mots
+        ? () => {
+            return mots.split(",") as RealtimeMot[];
+          }
+        : undefined,
+      tenant,
+      url: realtimeurl,
+      ...props,
+      styleOptions: {
+        getDelayColor: getDelayColorForVehicle,
+        getDelayFont: getDelayFontForVehicle,
+        getDelayText: getDelayTextForVehicle,
+        getText: getTextForVehicle,
+        getTextFont: getTextFontForVehicle,
+        ...(props?.styleOptions || {}),
+      },
+    });
+
+    layer.setZIndex(1);
+
+    return layer;
+  }, [apikey, mots, realtimeurl, tenant, props]);
+
+  useEffect(() => {
+    if (!map || !layer) {
+      return;
+    }
+    if (map.getView()?.getCenter()) {
+      map.addLayer(layer);
+    } else {
+      map.once("moveend", () => {
+        map.addLayer(layer);
+      });
+    }
+
+    setRealtimeLayer(layer);
+
+    return () => {
+      map.removeLayer(layer);
+      setRealtimeLayer(null);
+    };
+  }, [map, setRealtimeLayer, layer]);
+
+  // Behavior when vehicle is selected or not.
+  useEffect(() => {
+    if (!stopSequence) {
+      setIsFollowing(false);
+    }
+  }, [stopSequence, setIsFollowing]);
+
+  // Behavior when user tracking is activated or not.
+  useEffect(() => {
+    const olKeys = [];
+    if (isTracking) {
+      setIsFollowing(false);
+    }
+    return () => {
+      unByKey(olKeys);
+    };
+  }, [isTracking, setIsFollowing]);
+
+  // Deactive auto zooming when the user pans the map
+  useEffect(() => {
+    if (!map) {
+      return;
+    }
+    let onMovestartKey = null;
+    onMovestartKey = map.getView().on("change:center", (evt) => {
+      if (evt.target.getInteracting()) {
+        setIsFollowing(false);
+        setIsTracking(false);
+      }
+    });
+    return () => {
+      unByKey(onMovestartKey);
+    };
+  }, [map, setIsFollowing, setIsTracking]);
+
+  useEffect(() => {
+    let interval = null;
+
+    if (layer) {
+      layer.engine.useThrottle = !isFollowing;
+      layer.engine.isUpdateBboxOnMoveEnd = !isFollowing;
+      // layer.useRequestAnimationFrame = isFollowing;
+      layer.allowRenderWhenAnimating = !!isFollowing;
+    }
+    if (!isFollowing || !stopSequence || !map || !layer) {
+      return;
+    }
+
+    setIsTracking(false);
+
+    const followVehicle = async (id: RealtimeTrainId) => {
+      let vehicle = id && layer?.trajectories?.[id];
+
+      if (!vehicle) {
+        const message = await layer.api.getTrajectory(
+          stopSequence.id,
+          layer.mode,
+        );
+        vehicle = message?.content;
+      }
+
+      const success = await centerOnVehicle(vehicle, map, TRACKING_ZOOM);
+
+      // Once the map is zoomed on the vehicle we follow him, only recenter , no zoom changes.
+      if (success === true) {
+        interval = setInterval(() => {
+          centerOnVehicle(layer?.trajectories?.[stopSequence.id], map);
+        }, 1000);
+      }
+    };
+    followVehicle(stopSequence.id);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [isFollowing, map, layer, stopSequence, setIsTracking]);
+
+  useEffect(() => {
+    if (trainId) {
+      // No animation, it's nicer for the user.
+      const center = layer?.trajectories?.[trainId]?.properties?.coordinate;
+      if (center) {
+        map.getView().setCenter(center);
+      }
+    }
+  }, [map, trainId, layer]);
+
+  // Ask the station using the stationId to the Realtime API.
+  useEffect(() => {
+    if (!stationId || !layer?.api) {
+      return;
+    }
+    const subscribe = async () => {
+      layer?.api?.subscribe(`station ${stationId}`, ({ content }) => {
+        if (content) {
+          setStation(content);
+        }
+      });
+    };
+    subscribe();
+
+    return () => {
+      setStation(null);
+      if (stationId) {
+        layer?.api?.unsubscribe(`station ${stationId}`);
+      }
+    };
+  }, [stationId, layer?.api, setStation]);
+
+  // Subscribe to the stop sequence of the selected vehicle.
+  useEffect(() => {
+    if (!trainId || !layer?.api) {
+      return;
+    }
+    layer.selectedVehicleId = trainId;
+    layer.highlightTrajectory(trainId);
+    const subscribe = async () => {
+      layer?.api?.subscribeStopSequence(trainId, ({ content }) => {
+        if (content) {
+          const [firstStopSequence] = content;
+          if (firstStopSequence) {
+            setStopSequence(firstStopSequence);
+          }
+        }
+      });
+    };
+    subscribe();
+
+    return () => {
+      setStopSequence(null);
+      if (trainId && layer) {
+        layer.api?.unsubscribeStopSequence(trainId);
+        layer.selectedVehicleId = null;
+        layer.vectorLayer.getSource().clear();
+      }
+    };
+  }, [trainId, layer, layer?.api, setStopSequence]);
+
+  return null;
+}
+
+export default memo(RealtimeLayer);

package/src/RealtimeLayer/index.tsx

@@ -0,0 +1 @@
+export { default } from "./RealtimeLayer";

package/src/RouteDestination/RouteDestination.test.tsx

@@ -0,0 +1,13 @@
+import { render } from "@testing-library/preact";
+
+import RouteDestination from "./RouteDestination";
+
+describe("RouteDestination", () => {
+  test("should display destination", () => {
+    const { container } = render(
+      // @ts-expect-error bad type definition
+      <RouteDestination stopSequence={{ destination: "foo" }} />,
+    );
+    expect(container.textContent).toMatch("foo");
+  });
+});

package/src/RouteDestination/RouteDestination.tsx

@@ -0,0 +1,15 @@
+import type { RealtimeStopSequence } from "mobility-toolbox-js/types";
+
+import { JSX, PreactDOMAttributes } from "preact";
+import { memo } from "preact/compat";
+
+export type RouteDestinationProps = {
+  stopSequence?: RealtimeStopSequence;
+} & JSX.HTMLAttributes<HTMLSpanElement> &
+  PreactDOMAttributes;
+
+function RouteDestination({ stopSequence, ...props }: RouteDestinationProps) {
+  const { destination } = stopSequence || {};
+  return <span {...props}>{destination}</span>;
+}
+export default memo(RouteDestination);

package/src/RouteDestination/index.tsx

@@ -0,0 +1 @@
+export { default } from "./RouteDestination";

package/src/RouteIcon/RouteIcon.tsx

@@ -0,0 +1,66 @@
+import {
+  RealtimeDeparture,
+  RealtimeLine,
+  RealtimeStopSequence,
+  RealtimeTrajectory,
+} from "mobility-toolbox-js/types";
+import { JSX, PreactDOMAttributes } from "preact";
+
+import getMainColorForVehicle from "../utils/getMainColorForVehicle";
+import getTextFontForVehicle from "../utils/getTextFontForVehicle";
+import getTextForVehicle from "../utils/getTextForVehicle";
+
+export type RouteIconProps = {
+  departure?: RealtimeDeparture;
+  line?: RealtimeLine;
+  stopSequence?: RealtimeStopSequence;
+  trajectory?: RealtimeTrajectory;
+} & JSX.HTMLAttributes<HTMLSpanElement> &
+  PreactDOMAttributes;
+const fontSizesByNbLetters = [16, 16, 16, 14, 12];
+
+function RouteIcon({
+  children,
+  departure,
+  line,
+  stopSequence,
+  trajectory,
+  ...props
+}: RouteIconProps) {
+  const lineToUse =
+    line ||
+    departure?.line ||
+    stopSequence?.line ||
+    trajectory?.properties?.line;
+  const backgroundColor = getMainColorForVehicle(
+    line || departure || stopSequence || trajectory,
+  );
+  const color = lineToUse?.text_color || "black";
+  let borderColor = lineToUse?.stroke || "black";
+  const text = getTextForVehicle(
+    line || departure || stopSequence || trajectory,
+  );
+
+  const fontSize = fontSizesByNbLetters[text.length] || 12;
+  const font = getTextFontForVehicle(fontSize, text);
+
+  if (borderColor === backgroundColor) {
+    borderColor = "black";
+  }
+
+  return (
+    <span
+      className="flex h-[40px] min-w-[40px] items-center justify-center rounded-full border-2 px-1"
+      style={{
+        backgroundColor,
+        borderColor,
+        color,
+        font,
+      }}
+      {...props}
+    >
+      {children || text}
+    </span>
+  );
+}
+export default RouteIcon;

package/src/RouteIcon/index.tsx

@@ -0,0 +1 @@
+export { default } from "./RouteIcon";

package/src/RouteIdentifier/RouteIdentifer.tsx

@@ -0,0 +1,35 @@
+import { RealtimeStopSequence } from "mobility-toolbox-js/types";
+import { JSX, PreactDOMAttributes } from "preact";
+import { memo } from "preact/compat";
+
+export type RouteIdentifierProps = {
+  stopSequence?: RealtimeStopSequence;
+} & JSX.HTMLAttributes<HTMLSpanElement> &
+  PreactDOMAttributes;
+
+function RouteIdentifier({ stopSequence, ...props }: RouteIdentifierProps) {
+  const { longName, routeIdentifier } = stopSequence || {};
+  let text = longName;
+  if (routeIdentifier) {
+    // first part of the id, without leading zeros.
+    let id = routeIdentifier;
+
+    if (/\./.test(routeIdentifier)) {
+      [id] = routeIdentifier.split(".");
+    } else if (/_/.test(routeIdentifier)) {
+      [id] = routeIdentifier.split("_");
+    } else if (/:/.test(routeIdentifier)) {
+      [id] = routeIdentifier.split(":");
+    }
+
+    if (/^\d*$/.test(id)) {
+      id = `${parseInt(id, 10)}`;
+    }
+
+    if (!longName.includes(id)) {
+      text = `${longName} (${id})`;
+    }
+  }
+  return <span {...props}>{text}</span>;
+}
+export default memo(RouteIdentifier);

package/src/RouteIdentifier/index.tsx

@@ -0,0 +1 @@
+export { default } from "./RouteIdentifer";

package/src/RouteInfos/RouteInfos.tsx

@@ -0,0 +1,22 @@
+import { RealtimeStopSequence } from "mobility-toolbox-js/types";
+import { JSX, PreactDOMAttributes } from "preact";
+import { memo } from "preact/compat";
+
+import RouteDestination from "../RouteDestination";
+import RouteIdentifier from "../RouteIdentifier";
+
+export type RouteInfosProps = {
+  stopSequence?: RealtimeStopSequence;
+} & JSX.HTMLAttributes<HTMLDivElement> &
+  PreactDOMAttributes;
+
+function RouteInfos({ stopSequence, ...props }: RouteInfosProps) {
+  return (
+    <div {...props}>
+      <RouteDestination className="font-bold" stopSequence={stopSequence} />
+      <RouteIdentifier className="text-sm" stopSequence={stopSequence} />
+    </div>
+  );
+}
+
+export default memo(RouteInfos);

package/src/RouteInfos/index.tsx

@@ -0,0 +1 @@
+export { default } from "./RouteInfos";