@geops/rvf-mobility-web-component 0.1.8

package/src/RouteSchedule/RouteSchedule.tsx

@@ -0,0 +1,69 @@
+import type { RealtimeStop } from "mobility-toolbox-js/types";
+import type { JSX, PreactDOMAttributes } from "preact";
+
+import { memo } from "preact/compat";
+import { useEffect, useRef } from "preact/hooks";
+
+import RouteScheduleFooter from "../RouteScheduleFooter";
+import RouteScheduleHeader from "../RouteScheduleHeader";
+import RouteStop from "../RouteStop";
+import useMapContext from "../utils/hooks/useMapContext";
+
+export type RouteScheduleProps = JSX.HTMLAttributes<HTMLDivElement> &
+  PreactDOMAttributes;
+
+function RouteSchedule(props: RouteScheduleProps) {
+  const { stopSequence } = useMapContext();
+  const ref = useRef();
+
+  useEffect(() => {
+    const interval = window.setInterval(() => {
+      const elt = ref.current as HTMLDivElement;
+      if (!elt) {
+        return;
+      }
+      const nextStation = elt.querySelector("[data-station-passed=false]");
+      if (nextStation) {
+        nextStation.scrollIntoView({
+          behavior: "smooth",
+        });
+      }
+      clearInterval(interval);
+    }, 300);
+    return () => {
+      clearTimeout(interval);
+    };
+    // Scroll automatically when a new scroll infos is set.
+  }, [stopSequence]);
+
+  if (!stopSequence) {
+    return null;
+  }
+
+  const { className } = props;
+
+  return (
+    <>
+      <RouteScheduleHeader />
+      <div className={className} ref={ref}>
+        {stopSequence.stations.map((stop: RealtimeStop, index: number) => {
+          const { arrivalTime, departureTime, stationId, stationName } = stop;
+          return (
+            <RouteStop
+              // Train line can go in circle so begin and end have the same id,
+              index={index}
+              // using the time in the key should fix the issue.
+              key={
+                (`${stationId}` || stationName) + arrivalTime + departureTime
+              }
+              stop={stop}
+            />
+          );
+        })}
+        <RouteScheduleFooter />
+      </div>
+    </>
+  );
+}
+
+export default memo(RouteSchedule);

package/src/RouteSchedule/index.tsx

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

package/src/RouteScheduleFooter/RouteScheduleFooter.tsx

@@ -0,0 +1,44 @@
+import { memo } from "preact/compat";
+
+import useMapContext from "../utils/hooks/useMapContext";
+
+const defaultRenderLink = (text: string, url: string) => {
+  return url ? (
+    <a
+      className="whitespace-normal underline"
+      href={url}
+      rel="noreferrer"
+      target="_blank"
+    >
+      {text}
+    </a>
+  ) : (
+    text
+  );
+};
+
+function RouteScheduleFooter() {
+  const { stopSequence } = useMapContext();
+  if (!stopSequence.operator && !stopSequence.publisher) {
+    return null;
+  }
+
+  return (
+    <>
+      <div className="m-4 mb-0 flex flex-wrap  text-sm text-gray-500 ">
+        {stopSequence.operator &&
+          defaultRenderLink(stopSequence.operator, stopSequence.operatorUrl)}
+        {stopSequence.operator && stopSequence.publisher && <span> - </span>}
+        {stopSequence.publisher &&
+          defaultRenderLink(stopSequence.publisher, stopSequence.publisherUrl)}
+        {stopSequence.license && <span>&nbsp;(</span>}
+        {stopSequence.license &&
+          defaultRenderLink(stopSequence.license, stopSequence.licenseUrl)}
+        {stopSequence.license && ")"}
+      </div>
+      <div className="pointer-events-none sticky bottom-0 h-8 w-full bg-gradient-to-b from-transparent to-white" />
+    </>
+  );
+}
+
+export default memo(RouteScheduleFooter);

package/src/RouteScheduleFooter/index.tsx

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

package/src/RouteScheduleHeader/RouteScheduleHeader.tsx

@@ -0,0 +1,58 @@
+import { memo } from "preact/compat";
+
+import RouteIcon from "../RouteIcon";
+import RouteInfos from "../RouteInfos";
+import getBgColor from "../utils/getBgColor";
+import useMapContext from "../utils/hooks/useMapContext";
+
+function RouteScheduleHeader() {
+  const { isFollowing, setIsFollowing, stopSequence } = useMapContext();
+  const { stroke, text_color: textColor, type, vehicleType } = stopSequence;
+  const backgroundColor = stroke || getBgColor(type || vehicleType);
+  const color = textColor || "black";
+  return (
+    <div className="flex items-center gap-x-4 bg-slate-100 p-4">
+      <RouteIcon stopSequence={stopSequence} />
+      <RouteInfos className="flex grow flex-col" stopSequence={stopSequence} />
+      <button
+        className={`flex size-[38px] flex-none items-center justify-center rounded-full bg-white p-1.5 shadow-lg ${
+          isFollowing ? "animate-pulse" : ""
+        }`}
+        onClick={() => {
+          setIsFollowing(!isFollowing);
+        }}
+        style={{
+          /* stylelint-disable-next-line value-keyword-case */
+          backgroundColor: isFollowing ? backgroundColor : "white",
+          color: isFollowing ? color : "black",
+        }}
+        type="button"
+      >
+        <svg
+          fill="none"
+          height="24"
+          part="svg"
+          viewBox="0 0 14 14"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clipRule="evenodd"
+            d="M7 0.333344C7.375 0.333344 7.66667 0.62501 7.66667 0.97921V2.35414C9.7292 2.66668 11.3333 4.27081 11.625 6.33334H13C13.375 6.33334 13.6667 6.62501 13.6667 7.00001C13.6667 7.37501 13.375 7.66668 13 7.66668H11.625C11.3333 9.70834 9.70833 11.3333 7.66667 11.625V13C7.66667 13.375 7.375 13.6667 7 13.6667C6.64587 13.6667 6.33333 13.375 6.33333 13V11.625C4.29167 11.3333 2.68747 9.70834 2.39587 7.66668H1C0.625 7.66668 0.333333 7.37501 0.333333 7.00001C0.333333 6.62501 0.625 6.33334 1 6.33334H2.39587C2.68747 4.27081 4.29167 2.66668 6.33333 2.35414V0.97921C6.33333 0.62501 6.64587 0.333344 7 0.333344ZM7 3.66668C5.16667 3.66668 3.66667 5.16668 3.66667 7.00001C3.66667 8.79168 5.08333 10.3125 7 10.3125C8.89587 10.3125 10.3333 8.81254 10.3333 7.00001C10.3333 5.16668 8.83333 3.66668 7 3.66668Z"
+            fill="currentColor"
+            fillRule="evenodd"
+          />
+          <path
+            clipRule="evenodd"
+            d="M5.66667 7.00001C5.66667 6.27081 6.2708 5.66668 7 5.66668C7.7292 5.66668 8.33333 6.27081 8.33333 7.00001C8.33333 7.72921 7.7292 8.33334 7 8.33334C6.2708 8.33334 5.66667 7.72921 5.66667 7.00001Z"
+            fill="currentColor"
+            fillRule="evenodd"
+            part="circle"
+          />
+        </svg>
+      </button>
+    </div>
+  );
+}
+
+export default memo(RouteScheduleHeader);

package/src/RouteScheduleHeader/index.tsx

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

package/src/RouteStop/RouteStop.tsx

@@ -0,0 +1,121 @@
+import type { RealtimeStation, RealtimeStop } from "mobility-toolbox-js/types";
+
+import { JSX, PreactDOMAttributes } from "preact";
+import { memo } from "preact/compat";
+import { useEffect, useMemo, useState } from "preact/hooks";
+
+import DebugStop from "../DebugStop/DebugStop";
+import RouteStopDelay from "../RouteStopDelay";
+import RouteStopProgress from "../RouteStopProgress";
+import RouteStopStation from "../RouteStopStation";
+import RouteStopTime from "../RouteStopTime";
+import getStopStatus from "../utils/getStopStatus";
+import useMapContext from "../utils/hooks/useMapContext";
+import { RouteStopContext } from "../utils/hooks/useRouteStop";
+
+export type RouteScheduleStopProps = {
+  classNameGreyOut?: string;
+  index?: number;
+  invertColor?: boolean;
+  stop?: {
+    platform?: string;
+  } & RealtimeStop;
+} & JSX.HTMLAttributes<HTMLButtonElement> &
+  PreactDOMAttributes;
+
+function RouteStop({
+  children,
+  classNameGreyOut = "text-gray-600",
+  index,
+  invertColor = false,
+  stop,
+  ...props
+}: RouteScheduleStopProps) {
+  const { map, realtimeLayer, stopSequence } = useMapContext();
+  const {
+    // @ts-expect-error bad type definition
+    stopUID,
+  } = stop;
+  const [station, setStation] = useState<RealtimeStation>();
+  const [status, setStatus] = useState(getStopStatus(stopSequence, index));
+
+  useEffect(() => {
+    let interval = null;
+    setStatus(getStopStatus(stopSequence, index));
+
+    // To see the progress bar we have to update the status of the  vehicle until we get the new stopSeqeunce.
+    if (status.isInBetween) {
+      interval = setInterval(() => {
+        setStatus(getStopStatus(stopSequence, index));
+      }, 1000);
+    }
+    return () => {
+      clearInterval(interval);
+    };
+  }, [index, status.isInBetween, stopSequence]);
+
+  useEffect(() => {
+    if (!stopUID || !realtimeLayer?.api) {
+      return;
+    }
+    const subscribe = async () => {
+      realtimeLayer?.api?.subscribe(`station ${stopUID}`, ({ content }) => {
+        if (content) {
+          setStation(content);
+        }
+      });
+    };
+    subscribe();
+
+    return () => {
+      setStation(null);
+      if (stopUID) {
+        realtimeLayer?.api?.unsubscribe(`station ${stopUID}`);
+      }
+    };
+  }, [stopUID, realtimeLayer?.api]);
+
+  const routeStopState = useMemo(() => {
+    return { index, invertColor, station, status, stop };
+  }, [stop, status, index, invertColor, station]);
+
+  let colorScheme = status.isPassed || status.isLeft ? classNameGreyOut : "";
+
+  if (invertColor) {
+    colorScheme =
+      status.isPassed || status.isLeft || status.isBoarding
+        ? ""
+        : classNameGreyOut;
+  }
+
+  return (
+    <RouteStopContext.Provider value={routeStopState}>
+      <button
+        // max-h-[58px] because the svg showing the progress is 58px height.
+        className={`flex max-h-[58px] w-full scroll-mt-[50px] items-stretch rounded text-left hover:bg-slate-100 ${colorScheme}`}
+        data-station-passed={status.isPassed} // Use for auto scroll
+        onClick={() => {
+          if (stop.coordinate) {
+            map.getView().animate({
+              center: [stop.coordinate[0], stop.coordinate[1]],
+              zoom: map.getView().getZoom(),
+            });
+          }
+        }}
+        type="button"
+        {...props}
+      >
+        {children || (
+          <>
+            <RouteStopTime className="ml-4 flex w-10 shrink-0 flex-col justify-center text-xs" />
+            <RouteStopDelay className="flex w-8 shrink-0 flex-col justify-center text-[0.6rem]" />
+            <RouteStopProgress className="relative flex w-8 shrink-0 items-center" />
+            <RouteStopStation className="flex grow flex-col items-start justify-center pr-2 text-sm font-medium" />
+          </>
+        )}
+      </button>
+      <DebugStop />
+    </RouteStopContext.Provider>
+  );
+}
+export default memo(RouteStop);

package/src/RouteStop/index.tsx

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

package/src/RouteStopDelay/RouteStopDelay.tsx

@@ -0,0 +1,36 @@
+import { JSX, PreactDOMAttributes } from "preact";
+import { memo } from "preact/compat";
+
+import getDelayColor from "../utils/getDelayColor";
+import getDelayString from "../utils/getDelayString";
+import useRouteStop from "../utils/hooks/useRouteStop";
+
+export type RouteStopDelayProps = JSX.HTMLAttributes<HTMLDivElement> &
+  PreactDOMAttributes;
+
+function RouteStopDelay(props: RouteStopDelayProps) {
+  const { status, stop } = useRouteStop();
+  const { arrivalDelay, departureDelay } = stop;
+
+  const hideDelay =
+    status.isNotRealtime ||
+    status.isCancelled ||
+    status.isNotStop ||
+    status.isPassed;
+
+  return (
+    <div {...props}>
+      {hideDelay || arrivalDelay === null || status.isFirst ? null : (
+        <span style={{ color: getDelayColor(arrivalDelay) }}>
+          {`+${getDelayString(arrivalDelay)}`}
+        </span>
+      )}
+      {hideDelay || departureDelay === null || status.isLast ? null : (
+        <span style={{ color: getDelayColor(arrivalDelay) }}>
+          {`+${getDelayString(departureDelay)}`}
+        </span>
+      )}
+    </div>
+  );
+}
+export default memo(RouteStopDelay);

package/src/RouteStopDelay/index.tsx

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

package/src/RouteStopName/RouteStopName.tsx

@@ -0,0 +1,24 @@
+import type { JSX, PreactDOMAttributes } from "preact";
+
+import { memo } from "preact/compat";
+
+import RouteStopPlatform from "../RouteStopPlatform";
+import useRouteStop from "../utils/hooks/useRouteStop";
+
+export type RouteStopNameProps = JSX.HTMLAttributes<HTMLDivElement> &
+  PreactDOMAttributes;
+
+function RouteStopName({ children, ...props }: RouteStopNameProps) {
+  const { stop } = useRouteStop();
+  const { stationName } = stop || {};
+  return (
+    <div {...props}>
+      {stationName}
+      <br />
+      <RouteStopPlatform className="rounded-sm bg-slate-100 px-0.5 py-px text-xs group-hover:bg-slate-50" />
+      {children}
+    </div>
+  );
+}
+
+export default memo(RouteStopName);

package/src/RouteStopName/index.tsx

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

package/src/RouteStopPlatform/RouteStopPlatform.tsx

@@ -0,0 +1,29 @@
+import type { JSX, PreactDOMAttributes } from "preact";
+
+import { memo } from "preact/compat";
+
+import useI18n from "../utils/hooks/useI18n";
+import useMapContext from "../utils/hooks/useMapContext";
+import useRouteStop from "../utils/hooks/useRouteStop";
+
+export type RouteStopPlatformProps = JSX.HTMLAttributes<HTMLSpanElement> &
+  PreactDOMAttributes;
+
+function RouteStopPlatform({ ...props }: RouteStopPlatformProps) {
+  const { stop } = useRouteStop();
+  const { stopSequence } = useMapContext();
+  const { type } = stopSequence;
+  const { t } = useI18n();
+  const { platform } = stop || {};
+  if (!platform) {
+    return null;
+  }
+  const translated = t(`platform_${type || "rail"}`);
+  return (
+    <span {...props}>
+      {translated || t(`platform_rail`)} {platform}
+    </span>
+  );
+}
+
+export default memo(RouteStopPlatform);

package/src/RouteStopPlatform/index.tsx

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

package/src/RouteStopProgress/RouteStopProgress.tsx

@@ -0,0 +1,101 @@
+import { JSX, PreactDOMAttributes } from "preact";
+import { memo } from "preact/compat";
+
+import getMainColorForVehicle from "../utils/getMainColorForVehicle";
+import useMapContext from "../utils/hooks/useMapContext";
+import useRouteStop from "../utils/hooks/useRouteStop";
+
+export type RouteStopProgressProps = {
+  svgProps?: JSX.HTMLAttributes<SVGElement> & PreactDOMAttributes;
+} & JSX.HTMLAttributes<HTMLDivElement> &
+  PreactDOMAttributes;
+
+function RouteStopProgress({ svgProps, ...props }: RouteStopProgressProps) {
+  const { stopSequence } = useMapContext();
+  const { invertColor, status } = useRouteStop();
+  const { isBoarding, isFirst, isLast, isLeft, isPassed, progress } = status;
+  const y1 = isFirst ? "50%" : "-100%";
+  const y2 = isLast ? "50%" : "100%";
+  const yDone = `${progress}%`;
+
+  const greyColor = "rgb(156, 163, 175)";
+  const lineColor = getMainColorForVehicle(stopSequence);
+
+  let colorScheme = isPassed ? greyColor : lineColor;
+  let invertColorScheme = isPassed ? lineColor : greyColor;
+  let progressDoneColor = greyColor;
+
+  if (invertColor) {
+    colorScheme = isPassed ? lineColor : greyColor;
+    invertColorScheme = isPassed ? greyColor : lineColor;
+    progressDoneColor = lineColor;
+  }
+
+  const circleColor =
+    !isPassed && (isLeft || isBoarding) ? invertColorScheme : colorScheme;
+
+  return (
+    <div {...props}>
+      <svg
+        fill="none"
+        height="100%"
+        stroke={colorScheme}
+        width="16"
+        xmlns="http://www.w3.org/2000/svg"
+        {...svgProps}
+      >
+        {/* Circle used to display a black border */}
+        <circle cx="50%" cy="50%" r="5" stroke="black" strokeWidth="6" />
+
+        {/* Black line used to display a black border */}
+        <line
+          stroke="black"
+          strokeWidth="6"
+          x1="50%"
+          x2="50%"
+          y1={y1}
+          y2={y2}
+        />
+
+        {/* Colored line (grey or color) */}
+        <line
+          stroke={progressDoneColor}
+          strokeWidth="4"
+          x1="50%"
+          x2="50%"
+          y1={y1}
+          y2={yDone}
+        />
+        <line
+          strokeWidth="4"
+          x1="50%"
+          x2="50%"
+          y1={`${progress - 2}%`} // we use -2 because sometimes it could be a small gap between the previousline and this one
+          y2={y2}
+        />
+
+        {/* Colored circle (grey or color) */}
+        <circle cx="50%" cy="50%" r="5" strokeWidth="4" />
+        <circle
+          className={isBoarding ? "animate-pulse" : ""}
+          cx="50%"
+          cy="50%"
+          r="5"
+          stroke={circleColor}
+          strokeWidth="4"
+        />
+
+        {/* white circle with black border */}
+        <circle
+          cx="50%"
+          cy="50%"
+          fill="white"
+          r="3"
+          stroke="black"
+          strokeWidth="1"
+        />
+      </svg>
+    </div>
+  );
+}
+export default memo(RouteStopProgress);

package/src/RouteStopProgress/index.tsx

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

package/src/RouteStopServices/RouteStopServices.tsx

@@ -0,0 +1,26 @@
+import type { JSX, PreactDOMAttributes } from "preact";
+
+import { memo } from "preact/compat";
+
+import StationServices from "../StationServices";
+import useRouteStop from "../utils/hooks/useRouteStop";
+
+export type RouteStopNameProps = JSX.HTMLAttributes<HTMLDivElement> &
+  PreactDOMAttributes;
+
+function RouteStopServices(props: RouteStopNameProps) {
+  const { station } = useRouteStop();
+  if (!station) {
+    return null;
+  }
+  return (
+    <StationServices
+      accessibility
+      station={station}
+      {...props}
+      iconProps={{ width: 20 }}
+    />
+  );
+}
+
+export default memo(RouteStopServices);

package/src/RouteStopServices/index.tsx

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

package/src/RouteStopStation/RouteStopStation.tsx

@@ -0,0 +1,32 @@
+import { JSX, PreactDOMAttributes } from "preact";
+import { memo } from "preact/compat";
+
+import RouteStopName from "../RouteStopName";
+import RouteStopServices from "../RouteStopServices";
+import useRouteStop from "../utils/hooks/useRouteStop";
+
+export type RouteStopStationProps = {
+  classNameCancelled?: string;
+} & JSX.HTMLAttributes<HTMLDivElement> &
+  PreactDOMAttributes;
+
+function RouteStopStation({
+  children,
+  className = "flex items-center gap-2",
+  classNameCancelled = "text-red-600 line-through",
+  ...props
+}: RouteStopStationProps) {
+  const { status } = useRouteStop();
+
+  return (
+    <div
+      {...props}
+      className={`${className} ${status.isCancelled ? classNameCancelled : ""}`}
+    >
+      <RouteStopName />
+      <RouteStopServices className="flex flex-wrap gap-1" />
+      {children}
+    </div>
+  );
+}
+export default memo(RouteStopStation);

package/src/RouteStopStation/index.tsx

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

package/src/RouteStopTime/RouteStopTime.tsx

@@ -0,0 +1,34 @@
+import { JSX, PreactDOMAttributes } from "preact";
+import { memo } from "preact/compat";
+
+import getHoursAndMinutes from "../utils/getHoursAndMinutes";
+import useRouteStop from "../utils/hooks/useRouteStop";
+
+export type RouteStopTimeProps = JSX.HTMLAttributes<HTMLDivElement> &
+  PreactDOMAttributes;
+
+function RouteStopTime(props: RouteStopTimeProps) {
+  const { status, stop } = useRouteStop();
+  const { isCancelled, isFirst, isLast } = status;
+  const { aimedArrivalTime, aimedDepartureTime } = stop;
+
+  return (
+    <div {...props}>
+      <span
+        className={`${isCancelled ? "text-red-600 line-through" : ""} ${
+          isFirst ? "hidden" : ""
+        }`}
+      >
+        {getHoursAndMinutes(aimedArrivalTime)}
+      </span>
+      <span
+        className={`${status.isCancelled ? "text-red-600 line-through" : ""} ${
+          isLast ? "hidden" : ""
+        }`}
+      >
+        {getHoursAndMinutes(aimedDepartureTime)}
+      </span>
+    </div>
+  );
+}
+export default memo(RouteStopTime);

package/src/RouteStopTime/index.tsx

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