@geops/rvf-mobility-web-component 0.1.8

package/src/GeolocationButton/GeolocationButton.tsx

@@ -0,0 +1,81 @@
+import type { JSX, PreactDOMAttributes } from "preact";
+
+import { Geolocation } from "ol";
+import { unByKey } from "ol/Observable";
+import { fromLonLat } from "ol/proj";
+import { useEffect, useMemo } from "preact/hooks";
+
+import useMapContext from "../utils/hooks/useMapContext";
+
+export type GeolocationButtonProps = JSX.HTMLAttributes<HTMLButtonElement> &
+  PreactDOMAttributes;
+
+const TRACKING_ZOOM = 16;
+
+function GeolocationButton({ ...props }: GeolocationButtonProps) {
+  const mapContext = useMapContext();
+  const { isTracking, map, setIsTracking } = mapContext;
+
+  const geolocation = useMemo(() => {
+    return new Geolocation();
+  }, []);
+
+  useEffect(() => {
+    let keys = [];
+    if (!map || !geolocation) {
+      return;
+    }
+    keys = [
+      // First time we zoom and center on the position
+      geolocation.once("change:position", (evt) => {
+        const position = evt.target.getPosition();
+        if (evt.target.getPosition()) {
+          map.getView().setZoom(TRACKING_ZOOM);
+          map.getView().setCenter(fromLonLat(position, "EPSG:3857"));
+        }
+      }),
+      // then we only center the map.
+      geolocation.on("change:position", (evt) => {
+        const position = evt.target.getPosition();
+        if (evt.target.getPosition()) {
+          map.getView().setCenter(fromLonLat(position, "EPSG:3857"));
+        }
+      }),
+    ];
+
+    return () => {
+      unByKey(keys);
+    };
+  }, [map, geolocation]);
+
+  useEffect(() => {
+    geolocation.setTracking(isTracking);
+  }, [geolocation, isTracking]);
+
+  return (
+    <button
+      className="rounded-full bg-white p-1 shadow-lg"
+      onClick={() => {
+        setIsTracking(!isTracking);
+      }}
+      type="button"
+      {...props}
+    >
+      <svg
+        className={isTracking ? "animate-pulse" : ""}
+        fill="currentColor"
+        focusable="false"
+        height="1.5em"
+        stroke="currentColor"
+        strokeWidth="0"
+        viewBox="0 0 512 512"
+        width="1.5em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path d="M256 56c110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200-110.532 0-200-89.451-200-200 0-110.532 89.451-200 200-200m0-48C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 168c-44.183 0-80 35.817-80 80s35.817 80 80 80 80-35.817 80-80-35.817-80-80-80z" />
+      </svg>
+    </button>
+  );
+}
+
+export default GeolocationButton;

package/src/GeolocationButton/index.tsx

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

package/src/Map/Map.tsx

@@ -0,0 +1,89 @@
+import { Map as OlMap } from "ol";
+// @ts-expect-error bad type definition
+import olStyle from "ol/ol.css";
+import { JSX, PreactDOMAttributes } from "preact";
+import { memo } from "preact/compat";
+import { useEffect, useRef } from "preact/hooks";
+
+import useMapContext from "../utils/hooks/useMapContext";
+
+export type RealtimeMapProps = JSX.HTMLAttributes<HTMLDivElement> &
+  PreactDOMAttributes;
+
+function Map({ children, ...props }: RealtimeMapProps) {
+  const mapRef = useRef();
+  const {
+    center = "831634,5933959",
+    map,
+    maxzoom,
+    minzoom,
+    setMap,
+    zoom = "13",
+  } = useMapContext();
+
+  useEffect(() => {
+    let newMap: OlMap;
+    if (mapRef.current) {
+      newMap = new OlMap({ controls: [], target: mapRef.current });
+      setMap(newMap);
+    }
+
+    return () => {
+      newMap?.setTarget();
+      setMap();
+    };
+  }, [setMap]);
+
+  useEffect(() => {
+    if (!map) {
+      return;
+    }
+    const [x, y] = center.split(",").map((c) => {
+      return parseFloat(c);
+    });
+    if (x && y) {
+      map.getView().setCenter([x, y]);
+    }
+  }, [map, center]);
+
+  useEffect(() => {
+    if (!map) {
+      return;
+    }
+    const number = parseFloat(zoom);
+    if (number) {
+      map.getView().setZoom(number);
+    }
+  }, [map, zoom]);
+
+  useEffect(() => {
+    if (!map) {
+      return;
+    }
+    const number = parseFloat(maxzoom);
+    if (number) {
+      map.getView().setMaxZoom(number);
+    }
+  }, [map, maxzoom]);
+
+  useEffect(() => {
+    if (!map) {
+      return;
+    }
+    const number = parseFloat(minzoom);
+    if (number) {
+      map.getView().setMinZoom(number);
+    }
+  }, [map, minzoom]);
+
+  return (
+    <>
+      <style>{olStyle}</style>
+      <div ref={mapRef} {...props}>
+        {children}
+      </div>
+    </>
+  );
+}
+
+export default memo(Map);

package/src/Map/index.tsx

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

package/src/MobilityMap/MobilityMap.tsx

@@ -0,0 +1,259 @@
+import {
+  MaplibreLayer,
+  MaplibreStyleLayer,
+  RealtimeLayer as MbtRealtimeLayer,
+} from "mobility-toolbox-js/ol";
+import {
+  RealtimeStation,
+  RealtimeStationId,
+  RealtimeStopSequence,
+  RealtimeTrainId,
+} from "mobility-toolbox-js/types";
+import { Map as OlMap } from "ol";
+import { memo } from "preact/compat";
+import { useEffect, useMemo, useState } from "preact/hooks";
+
+import BaseLayer from "../BaseLayer";
+import Copyright from "../Copyright";
+import GeolocationButton from "../GeolocationButton";
+import Map from "../Map";
+import NotificationLayer from "../NotificationLayer";
+import Overlay from "../Overlay";
+import RealtimeLayer from "../RealtimeLayer";
+import RouteSchedule from "../RouteSchedule";
+import ScaleLine from "../ScaleLine";
+import Search from "../Search";
+import SingleClickListener from "../SingleClickListener/SingleClickListener";
+import Station from "../Station";
+import StationsLayer from "../StationsLayer";
+// @ts-expect-error bad type definition
+import tailwind from "../style.css";
+import { I18nContext } from "../utils/hooks/useI18n";
+import { MapContext } from "../utils/hooks/useMapContext";
+import useUpdatePermalink from "../utils/hooks/useUpdatePermalink";
+import i18n from "../utils/i18n";
+import MobilityEvent from "../utils/MobilityEvent";
+// @ts-expect-error bad type definition
+import style from "./index.css";
+// Notificationurl example: https://mobility-web-component-tmp.vercel.app/geops-mobility?notificationurl=https%3A%2F%2Fmoco.geops.io%2Fapi%2Fv1%2Fexport%2Fnotification%2F%3Fsso_config%3Dsob&geolocation=false&realtime=false&search=false&notificationat=2024-01-25T22%3A59%3A00Z
+
+export interface MobilityMapProps {
+  apikey?: string;
+  baselayer?: string;
+  center?: string;
+  geolocation?: string;
+  mapsurl?: string;
+  maxzoom?: string;
+  minzoom?: string;
+  mots?: string;
+  notification?: string;
+  notificationat?: string; // 2024-01-25T22:59:00Z
+  notificationbeforelayerid?: string;
+  notificationurl?: string; // https://moco.geops.io/api/v1/export/notification/?sso_config=sob
+  permalink?: string;
+  realtime?: string;
+  realtimeurl?: string;
+  search?: string;
+  stopsurl?: string;
+  tenant?: string;
+  zoom?: string;
+}
+
+function MobilityMap({
+  apikey = null,
+  baselayer = "travic_v2",
+  center = "831634,5933959",
+  geolocation = "true",
+  mapsurl = "https://maps.geops.io",
+  maxzoom = null,
+  minzoom = null,
+  mots = null,
+  notification = "true",
+  notificationat = null,
+  notificationbeforelayerid = null,
+  notificationurl = null,
+  permalink = "false",
+  realtime = "true",
+  realtimeurl = "wss://api.geops.io/tracker-ws/v1/ws",
+  search = "true",
+  stopsurl = "https://api.geops.io/stops/v1/",
+  tenant = null,
+  zoom = "13",
+}: MobilityMapProps) {
+  const [baseLayer, setBaseLayer] = useState<MaplibreLayer>();
+  const [isFollowing, setIsFollowing] = useState(false);
+  const [isTracking, setIsTracking] = useState(false);
+  const [stopSequence, setStopSequence] = useState<RealtimeStopSequence>();
+  const [stationsLayer, setStationsLayer] = useState<MaplibreStyleLayer>();
+  const [station, setStation] = useState<RealtimeStation>();
+  const [realtimeLayer, setRealtimeLayer] = useState<MbtRealtimeLayer>();
+  const [map, setMap] = useState<OlMap>();
+  const [stationId, setStationId] = useState<RealtimeStationId>();
+  const [trainId, setTrainId] = useState<RealtimeTrainId>();
+
+  // TODO: this should be removed. The parent application should be responsible to do this
+  // or we should find something that fit more usecases
+  const { x, y, z } = useUpdatePermalink(map, permalink === "true");
+
+  const mapContextValue = useMemo(() => {
+    return {
+      // MobilityMapProps && MapContextProps
+      apikey,
+      baselayer,
+      baseLayer,
+      center,
+      geolocation,
+      isFollowing,
+      isTracking,
+      map,
+      mapsurl,
+      maxzoom,
+      minzoom,
+      mots,
+      notification,
+      notificationat,
+      notificationbeforelayerid,
+      notificationurl,
+      permalink,
+      realtimeLayer,
+      realtimeurl,
+      setBaseLayer,
+      setIsFollowing,
+      setIsTracking,
+      setMap,
+      setRealtimeLayer,
+      setStation,
+      setStationId,
+      setStationsLayer,
+      setStopSequence,
+      setTrainId,
+      station,
+      stationId,
+      stationsLayer,
+      stopSequence,
+      stopsurl,
+      tenant,
+      trainId,
+      zoom,
+    };
+  }, [
+    apikey,
+    baselayer,
+    baseLayer,
+    center,
+    geolocation,
+    isFollowing,
+    isTracking,
+    map,
+    mapsurl,
+    maxzoom,
+    minzoom,
+    mots,
+    notification,
+    notificationat,
+    notificationbeforelayerid,
+    notificationurl,
+    permalink,
+    realtimeLayer,
+    realtimeurl,
+    station,
+    stationId,
+    stationsLayer,
+    stopSequence,
+    stopsurl,
+    tenant,
+    trainId,
+    zoom,
+  ]);
+
+  useEffect(() => {
+    dispatchEvent(
+      new MobilityEvent<MobilityMapProps>("mwc:attribute", {
+        baselayer,
+        center: x && y ? `${x},${y}` : center,
+        geolocation,
+        mapsurl,
+        maxzoom,
+        minzoom,
+        mots,
+        notification,
+        notificationat,
+        notificationbeforelayerid,
+        notificationurl,
+        realtime,
+        realtimeurl,
+        search,
+        tenant,
+        zoom: z || zoom,
+      }),
+    );
+  }, [
+    baselayer,
+    center,
+    geolocation,
+    mapsurl,
+    maxzoom,
+    minzoom,
+    mots,
+    notification,
+    notificationat,
+    notificationurl,
+    notificationbeforelayerid,
+    realtime,
+    realtimeurl,
+    search,
+    tenant,
+    zoom,
+    x,
+    y,
+    z,
+  ]);
+
+  return (
+    <I18nContext.Provider value={i18n}>
+      <style>{tailwind}</style>
+      <style>{style}</style>
+      <MapContext.Provider value={mapContextValue}>
+        <div className="relative size-full border font-sans @container/main">
+          <div className="relative flex size-full flex-col @lg/main:flex-row-reverse">
+            <Map className="relative flex-1 overflow-visible ">
+              <BaseLayer />
+              <SingleClickListener />
+              {realtime === "true" && <RealtimeLayer />}
+              {tenant && <StationsLayer />}
+              {notification === "true" && <NotificationLayer />}
+              <div className="absolute inset-x-2 bottom-2 z-10 flex items-end justify-between gap-2 text-[10px]">
+                <ScaleLine className="bg-slate-50/70" />
+                <Copyright className="bg-slate-50/70" />
+              </div>
+              <div className="absolute right-2 top-2 z-10 flex flex-col gap-2">
+                {geolocation === "true" && <GeolocationButton />}
+              </div>
+              {search === "true" && (
+                <div className="absolute left-2 right-12 top-2 z-10 flex max-h-[90%] min-w-64 max-w-96 flex-col">
+                  <Search />
+                </div>
+              )}
+            </Map>
+
+            <Overlay
+              className={"z-50"}
+              ScrollableHandlerProps={{
+                style: { width: "calc(100% - 60px)" },
+              }}
+            >
+              {realtime === "true" && trainId && (
+                <RouteSchedule className="relative overflow-y-auto  overflow-x-hidden" />
+              )}
+              {tenant && stationId && (
+                <Station className="relative overflow-y-auto  overflow-x-hidden" />
+              )}
+            </Overlay>
+          </div>
+        </div>
+      </MapContext.Provider>
+    </I18nContext.Provider>
+  );
+}
+
+export default memo(MobilityMap);

package/src/MobilityMap/index.css

@@ -0,0 +1,13 @@
+::-webkit-scrollbar {
+  width: 3px;
+  height: 3px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: lightgray;
+  z-index: 5;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}

package/src/MobilityMap/index.tsx

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

package/src/NotificationLayer/NotificationLayer.tsx

@@ -0,0 +1,156 @@
+import { useEffect, useMemo, useState } from "preact/hooks";
+
+import useMapContext from "../utils/hooks/useMapContext";
+import useZoom from "../utils/hooks/useZoom";
+import {
+  addNotificationsLayers,
+  getNotificationsWithStatus,
+  parsePreviewNotification,
+} from "./notificationUtils";
+
+type Graphs = Record<string, string>;
+
+interface Metadata {
+  graphs?: Graphs;
+}
+
+const useNotifications = () => {
+  const {
+    baselayer,
+    baseLayer,
+    notificationat,
+    notificationbeforelayerid,
+    notificationurl,
+  } = useMapContext();
+  const zoom = useZoom();
+  const [notifications, setNotifications] = useState([]);
+  const [previewNotification, setPreviewNotification] = useState(null);
+  const [shouldAddPreviewNotifications, setShouldAddPreviewNotifications] =
+    useState<boolean>(true);
+
+  const [style, setStyle] = useState<string>();
+  const [styleMetadata, setStyleMetadata] = useState<Metadata>();
+
+  useEffect(() => {
+    if (!baseLayer) {
+      return;
+    }
+    setStyle(baselayer);
+    if (!baseLayer.loaded) {
+      // @ts-expect-error bad type definition
+      baseLayer.once("load", () => {
+        return setStyleMetadata(baseLayer.mbMap?.getStyle()?.metadata);
+      });
+    } else {
+      setStyleMetadata(baseLayer.mbMap?.getStyle()?.metadata);
+    }
+  }, [baseLayer, baselayer]);
+
+  const now = useMemo(() => {
+    return notificationat ? new Date(notificationat) : new Date();
+  }, [notificationat]);
+
+  const graphMapping = useMemo(() => {
+    return styleMetadata?.graphs || { 1: "osm" };
+  }, [styleMetadata]);
+
+  const graphsString = useMemo(() => {
+    return [
+      ...new Set(
+        Object.keys(graphMapping || []).map((key) => {
+          return graphMapping[key];
+        }),
+      ),
+    ].join(",");
+  }, [graphMapping]);
+
+  useEffect(() => {
+    // Listen for incoming messages through the MOCO iframe
+    window.addEventListener("message", (event) => {
+      if (event.data.notification) {
+        setPreviewNotification(event.data.notification);
+        setShouldAddPreviewNotifications(true);
+      }
+    });
+  }, []);
+
+  useEffect(() => {
+    let abortCtrl: AbortController;
+
+    // Fetch the main MOCO notifications
+    const fetchNotifications = async () => {
+      const suffix = /\?/.test(notificationurl) ? "&" : "?";
+      const url = `${notificationurl}${suffix}graph=${graphsString}`;
+
+      abortCtrl?.abort();
+      abortCtrl = new AbortController();
+      const response = await fetch(url, { signal: abortCtrl.signal });
+      const data = await response.json();
+      setNotifications(getNotificationsWithStatus(data, now));
+      setShouldAddPreviewNotifications(true);
+    };
+
+    if (notificationurl && graphsString) {
+      fetchNotifications();
+    }
+
+    return () => {
+      abortCtrl?.abort();
+    };
+  }, [notificationurl, graphsString, now]);
+
+  useEffect(() => {
+    // Merge notifications with the previewNotification
+    const newNotifications = [...notifications];
+    if (shouldAddPreviewNotifications && previewNotification?.[style]) {
+      const parsedPreviewNotification = parsePreviewNotification(
+        previewNotification?.[style],
+      );
+      const index = newNotifications.findIndex((n) => {
+        return n.properties.id === previewNotification[style].id;
+      });
+
+      if (index > -1) {
+        newNotifications[index] = parsedPreviewNotification;
+      } else {
+        newNotifications.push(parsedPreviewNotification);
+      }
+
+      setNotifications(getNotificationsWithStatus(newNotifications, now));
+      setShouldAddPreviewNotifications(false);
+    }
+  }, [
+    previewNotification,
+    notifications,
+    shouldAddPreviewNotifications,
+    style,
+    now,
+  ]);
+
+  useEffect(() => {
+    // Add the notifications to the map
+    if (styleMetadata && notifications?.length) {
+      addNotificationsLayers(
+        baseLayer,
+        notifications,
+        notificationbeforelayerid,
+        zoom,
+        graphMapping,
+      );
+    }
+  }, [
+    notifications,
+    notificationbeforelayerid,
+    styleMetadata,
+    zoom,
+    graphMapping,
+    baseLayer,
+  ]);
+
+  return notifications;
+};
+
+export default function NotificationLayer() {
+  useNotifications();
+  return null;
+}

package/src/NotificationLayer/index.tsx

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