@geops/rvf-mobility-web-component 0.1.8

package/src/RvfMobilityMap/RvfMobilityMap.tsx

@@ -0,0 +1,245 @@
+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 { getCenter } from "ol/extent";
+import { fromLonLat } from "ol/proj";
+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 { MobilityMapProps } from "../MobilityMap/MobilityMap";
+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 type RvfMobilityMapProps = {} & MobilityMapProps;
+
+const extent = [7.5, 47.7, 8.45, 48.4];
+const centerRvf = fromLonLat(getCenter(extent)).join(",");
+
+function RvfMobilityMap({
+  apikey = "5cc87b12d7c5370001c1d655820abcc37dfd4d968d7bab5b2a74a935",
+  baselayer = "de.rvf",
+  center = centerRvf,
+  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 = "false",
+  stopsurl = "https://api.geops.io/stops/v1/",
+  tenant = null,
+  zoom = "9.8",
+}: RvfMobilityMapProps) {
+  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<RvfMobilityMapProps>("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(RvfMobilityMap);

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

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

package/src/ScaleLine/ScaleLine.tsx

@@ -0,0 +1,51 @@
+import ScaleLineControl, {
+  Options as ScaleLineOptions,
+} from "ol/control/ScaleLine";
+import { JSX, PreactDOMAttributes } from "preact";
+import { useEffect, useMemo, useState } from "preact/hooks";
+
+import useMapContext from "../utils/hooks/useMapContext";
+// @ts-expect-error bad type definition
+import style from "./index.css";
+
+type ScaleLineProps = {
+  options?: ScaleLineOptions;
+} & JSX.HTMLAttributes<HTMLDivElement> &
+  PreactDOMAttributes;
+
+function ScaleLine({ options, ...props }: ScaleLineProps) {
+  const { map } = useMapContext();
+  const [target, setTarget] = useState<HTMLElement>();
+  const control = useMemo(() => {
+    if (!target) {
+      return null;
+    }
+    return new ScaleLineControl({ target, ...options });
+  }, [options, target]);
+
+  useEffect(() => {
+    if (!map || !control) {
+      return;
+    }
+    map.addControl(control);
+
+    return () => {
+      if (map && control) {
+        map.removeControl(control);
+      }
+    };
+  }, [map, control]);
+
+  return (
+    <div
+      ref={(node) => {
+        setTarget(node);
+      }}
+      {...props}
+    >
+      <style>{style}</style>
+    </div>
+  );
+}
+
+export default ScaleLine;

package/src/ScaleLine/index.css

@@ -0,0 +1,6 @@
+.ol-scale-line  {
+  position:relative;
+  left: unset;
+  bottom: unset;
+  background:unset;
+}

package/src/ScaleLine/index.tsx

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

package/src/ScrollableHandler/ScrollableHandler.tsx

@@ -0,0 +1,65 @@
+import { JSX, PreactDOMAttributes } from "preact";
+import { useEffect, useState } from "preact/hooks";
+
+export type ScrollableHandlerProps = JSX.HTMLAttributes<HTMLDivElement> &
+  PreactDOMAttributes;
+
+function ScrollableHandler(props: ScrollableHandlerProps) {
+  const [elt, setElt] = useState<HTMLElement>();
+  const [overlayElt, setOverlayElt] = useState<HTMLElement>();
+  const { children } = props;
+
+  useEffect(() => {
+    // Clean css added by the scroller
+    return () => {
+      if (overlayElt) {
+        overlayElt.style.height = "";
+        overlayElt.style.maxHeight = "";
+      }
+    };
+  }, [overlayElt]);
+
+  return (
+    <div
+      ref={(node) => {
+        if (node) {
+          setElt(node);
+          setOverlayElt(node.parentElement);
+        }
+      }}
+      {...props}
+      onPointerDown={(evt) => {
+        elt.setPointerCapture(evt.pointerId);
+
+        const mapRect = overlayElt.parentElement.getBoundingClientRect();
+        const eltRect = elt.getBoundingClientRect();
+        const deltaToTop = mapRect.top + (evt.clientY - eltRect.top);
+
+        function onDragg(event: PointerEvent) {
+          overlayElt.style.height = `calc(100% - ${
+            event.clientY - deltaToTop
+          }px)`;
+          overlayElt.style.maxHeight = `100%`;
+        }
+
+        function onDragStop(event: PointerEvent) {
+          (event.target as HTMLElement).releasePointerCapture(evt.pointerId);
+          document.removeEventListener("pointermove", onDragg);
+          document.removeEventListener("pointerup", onDragStop);
+        }
+        document.addEventListener("pointerup", onDragStop);
+        document.addEventListener("pointermove", onDragg);
+        document.addEventListener("pointercancel", (event: PointerEvent) => {
+          document.removeEventListener("pointermove", onDragg);
+          document.removeEventListener("pointerup", onDragStop);
+          event.stopPropagation();
+          event.preventDefault();
+        });
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+export default ScrollableHandler;

package/src/ScrollableHandler/index.tsx

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

package/src/Search/Search.tsx

@@ -0,0 +1,18 @@
+import StopsSearch from "../StopsSearch";
+import centerOnStation from "../utils/centerOnStation";
+import useMapContext from "../utils/hooks/useMapContext";
+
+function Search() {
+  const { apikey, map, stopsurl } = useMapContext();
+
+  return (
+    <StopsSearch
+      apikey={apikey}
+      onselect={(selected) => {
+        return centerOnStation(selected, map);
+      }}
+      url={stopsurl}
+    />
+  );
+}
+export default Search;

package/src/Search/index.tsx

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

package/src/SingleClickListener/SingleClickListener.tsx

@@ -0,0 +1,103 @@
+import { Feature, MapBrowserEvent } from "ol";
+import { unByKey } from "ol/Observable";
+import { useCallback, useEffect } from "preact/hooks";
+
+import useMapContext from "../utils/hooks/useMapContext";
+
+function SingleClickListener() {
+  const {
+    map,
+    realtimeLayer,
+    setStationId,
+    setTrainId,
+    stationId,
+    stationsLayer,
+    tenant,
+    trainId,
+  } = useMapContext();
+
+  const onPointerMove = useCallback(
+    async (evt: MapBrowserEvent<PointerEvent>) => {
+      const [realtimeFeature] = evt.map.getFeaturesAtPixel(evt.pixel, {
+        layerFilter: (l) => {
+          return l === realtimeLayer;
+        },
+      });
+      realtimeLayer?.highlight(realtimeFeature as Feature);
+
+      const stationsFeatures = evt.map.getFeaturesAtPixel(evt.pixel, {
+        layerFilter: (l) => {
+          return l === stationsLayer;
+        },
+      });
+
+      const [stationFeature] = stationsFeatures.filter((feat) => {
+        return feat.get("tralis_network")?.includes(tenant);
+      });
+
+      evt.map.getTargetElement().style.cursor =
+        realtimeFeature || stationFeature ? "pointer" : "default";
+    },
+    [realtimeLayer, stationsLayer, tenant],
+  );
+
+  const onSingleClick = useCallback(
+    async (evt: MapBrowserEvent<PointerEvent>) => {
+      const [realtimeFeature] = evt.map.getFeaturesAtPixel(evt.pixel, {
+        layerFilter: (l) => {
+          return l === realtimeLayer;
+        },
+      });
+
+      const stationsFeatures = evt.map.getFeaturesAtPixel(evt.pixel, {
+        layerFilter: (l) => {
+          return l === stationsLayer;
+        },
+      });
+      const [stationFeature] = stationsFeatures.filter((feat) => {
+        return feat.get("tralis_network")?.includes(tenant);
+      });
+
+      const newStationId = stationFeature?.get("uid");
+
+      const newTrainId = realtimeFeature?.get("train_id");
+
+      if (newStationId && stationId !== newStationId) {
+        setStationId(newStationId);
+        setTrainId(null);
+      } else if (newTrainId && newTrainId !== trainId) {
+        setTrainId(realtimeFeature.get("train_id"));
+        setStationId(null);
+      } else {
+        setTrainId(null);
+        setStationId(null);
+      }
+    },
+    [
+      stationId,
+      trainId,
+      realtimeLayer,
+      stationsLayer,
+      tenant,
+      setStationId,
+      setTrainId,
+    ],
+  );
+
+  useEffect(() => {
+    const key = map?.on("singleclick", onSingleClick);
+    return () => {
+      unByKey(key);
+    };
+  }, [map, onSingleClick]);
+
+  useEffect(() => {
+    const key = map?.on("pointermove", onPointerMove);
+    return () => {
+      unByKey(key);
+    };
+  }, [map, onPointerMove]);
+
+  return null;
+}
+export default SingleClickListener;

package/src/SingleClickListener/index.tsx

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

package/src/Station/Station.tsx

@@ -0,0 +1,68 @@
+import type { JSX, PreactDOMAttributes } from "preact";
+
+import { debounceDeparturesMessages } from "mobility-toolbox-js/ol";
+import { RealtimeDeparture } from "mobility-toolbox-js/types";
+import { memo } from "preact/compat";
+import { useEffect, useRef, useState } from "preact/hooks";
+
+import Departure from "../Departure";
+import StationHeader from "../StationHeader";
+import useMapContext from "../utils/hooks/useMapContext";
+
+export type StationProps = JSX.HTMLAttributes<HTMLDivElement> &
+  PreactDOMAttributes;
+
+function Station(props: StationProps) {
+  const { realtimeLayer, station } = useMapContext();
+  const [departures, setDepartures] = useState<RealtimeDeparture[]>();
+  const ref = useRef();
+  const { className } = props;
+
+  useEffect(() => {
+    if (!station || !realtimeLayer?.api) {
+      return;
+    }
+
+    const onMessage = debounceDeparturesMessages(
+      (departures: RealtimeDeparture[]) => {
+        setDepartures(departures);
+        return null;
+      },
+      false,
+      180,
+    );
+    // @ts-expect-error bad type definition
+    realtimeLayer.api.subscribeDepartures(station?.properties?.uid, onMessage);
+
+    return () => {
+      setDepartures(null);
+      // @ts-expect-error bad type definition
+      realtimeLayer?.api?.unsubscribeDepartures(station?.properties.uid);
+    };
+  }, [station, realtimeLayer?.api]);
+
+  if (!station) {
+    return null;
+  }
+
+  return (
+    <>
+      <StationHeader />
+      <div className={className} ref={ref}>
+        {(departures || [])
+          // .filter(hideDepartures)
+          .map((departure: RealtimeDeparture, index: number) => {
+            return (
+              <Departure
+                departure={departure}
+                index={index}
+                key={departure.call_id}
+              />
+            );
+          })}
+      </div>
+    </>
+  );
+}
+
+export default memo(Station);

package/src/Station/index.tsx

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

package/src/StationHeader/StationHeader.tsx

@@ -0,0 +1,32 @@
+import { memo } from "preact/compat";
+
+import StationName from "../StationName";
+import StationServices from "../StationServices";
+import useMapContext from "../utils/hooks/useMapContext";
+
+function StationHeader() {
+  const { station } = useMapContext();
+  return (
+    <div className="flex items-center gap-x-4 bg-slate-100 p-4">
+      <div className="flex grow flex-col">
+        <span className="font-bold">
+          <StationName station={station} />
+        </span>
+        <StationServices
+          accessibility
+          airport
+          barAndRestaurants
+          bathroom
+          bikeStorage
+          className="flex gap-2"
+          elevator
+          police
+          station={station}
+          waitingAreas
+        />
+      </div>
+    </div>
+  );
+}
+
+export default memo(StationHeader);

package/src/StationHeader/index.tsx

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

package/src/StationName/StationName.tsx

@@ -0,0 +1,21 @@
+import type { JSX, PreactDOMAttributes } from "preact";
+
+import { RealtimeStation } from "mobility-toolbox-js/types";
+import { memo } from "preact/compat";
+
+export type StationNameProps = {
+  station: RealtimeStation;
+} & JSX.HTMLAttributes<HTMLDivElement> &
+  PreactDOMAttributes;
+
+function StationName({ children, station, ...props }: StationNameProps) {
+  const { name } = station?.properties || {};
+  return (
+    <div {...props}>
+      {name}
+      {children}
+    </div>
+  );
+}
+
+export default memo(StationName);

package/src/StationName/index.tsx

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