@geops/rvf-mobility-web-component 0.1.8

package/input.css

@@ -0,0 +1,34 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+::-webkit-scrollbar {
+  height: 3px;
+  width: 3px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: gray;
+}
+
+html {
+  @apply text-base;
+}
+
+@layer base {
+  h1 {
+    @apply text-3xl font-bold;
+  }
+
+  h2 {
+    @apply text-2xl;
+  }
+
+  h3 {
+    @apply text-xl;
+  }
+
+  h4 {
+    @apply text-lg;
+  }
+}

package/jest-setup.js

@@ -0,0 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import "jest-canvas-mock";
+
+global.URL.createObjectURL = jest.fn(() => "fooblob");

package/jest.config.js

@@ -0,0 +1,17 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+const config = {
+  moduleNameMapper: {
+    "@geoblocks/ol-maplibre-layer":
+      "<rootDir>/node_modules/@geoblocks/ol-maplibre-layer/lib/index.js",
+    "\\.(css|less)$": "identity-obj-proxy",
+  },
+  preset: "jest-preset-preact",
+  setupFiles: ["./jest-setup.js"],
+  testEnvironment: "jsdom",
+  transform: {
+    "\\.(jpg|ico|jpeg|png|gif|webp)$": "<rootDir>/__mocks__/dataurl.js",
+    "\\.[t]sx?$": "ts-jest",
+  },
+  transformIgnorePatterns: [],
+};
+export default config;

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@geops/rvf-mobility-web-component",
+  "license": "UNLICENSED",
+  "description": "Web components for rvf in the domains of mobility and logistics.",
+  "version": "0.1.8",
+  "homepage": "https://rvf-mobility-web-component-geops.vercel.app/",
+  "type": "module",
+  "main": "index.js",
+  "dependencies": {
+    "maplibre-gl": "^4.7.1",
+    "mobility-toolbox-js": "3.0.0-beta.38",
+    "ol": "^10.3.0",
+    "preact": "^10.25.1",
+    "preact-custom-element": "^4.3.0",
+    "react": "npm:@preact/compat@^18.3.1",
+    "react-dom": "npm:@preact/compat@^18.3.1",
+    "react-icons": "^5.3.0",
+    "rosetta": "^1.1.0"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^19.6.0",
+    "@commitlint/config-conventional": "^19.6.0",
+    "@eslint/js": "^9.16.0",
+    "@tailwindcss/container-queries": "^0.1.1",
+    "@testing-library/preact": "^3.2.4",
+    "@types/geojson": "^7946.0.14",
+    "@types/jest": "^29.5.14",
+    "@types/preact-custom-element": "^4.0.4",
+    "concurrently": "^9.1.0",
+    "esbuild": "^0.24.0",
+    "esbuild-sass-plugin": "^3.3.1",
+    "eslint": "^9.16.0",
+    "eslint-config-prettier": "9.1.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-perfectionist": "^4.1.2",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-tailwindcss": "^3.17.5",
+    "fixpack": "^4.0.0",
+    "generact": "^0.4.0",
+    "husky": "^9.1.7",
+    "jest": "^29.7.0",
+    "jest-canvas-mock": "^2.5.2",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-preset-preact": "^4.1.1",
+    "next": "15.0.3",
+    "preact-render-to-string": "^6.5.11",
+    "prettier": "^3.4.1",
+    "standard-version": "^9.5.0",
+    "tailwindcss": "^3.4.15",
+    "ts-jest": "^29.2.5",
+    "typescript": "^5.7.2",
+    "typescript-eslint": "^8.17.0"
+  },
+  "scripts": {
+    "build": "yarn build:css && yarn build:js",
+    "build:css": "yarn tailwind:component && yarn tailwind:website",
+    "build:js": "node scripts/build.mjs",
+    "cp": "generact --root src",
+    "dev": "node scripts/dev.mjs",
+    "doc": "yarn build && cp index.js doc/public/index.js && cd doc && yarn build",
+    "doc:dev": "yarn build && cp index.js doc/public/index.js && cp index.js.map doc/public/index.js.map && cd doc && yarn dev",
+    "format": "prettier --write 'src/**/*.(tsx|ts)' && eslint src/**/*.tsx src/**/*.ts --fix ",
+    "lint": "eslint src/**/*.tsx",
+    "prepare": "husky",
+    "publish:beta": "HUSKY=0 yarn release -- --prerelease beta --skip.changelog && yarn run build && HUSKY=0 yarn publish --access public --tag beta && git push origin HEAD && git push --tags ",
+    "publish:beta:dryrun": "yarn release -- --prerelease beta --dry-run --skip.changelog",
+    "publish:public": "yarn release && yarn run build && HUSKY=0 yarn publish --access public && git push origin HEAD && git push --tags ",
+    "publish:public:dryrun": "yarn release --dry-run",
+    "release": "standard-version",
+    "start": "concurrently \"yarn tailwind:component --watch\" \"yarn tailwind:website --watch\" \"yarn dev\"",
+    "tailwind:component": "tailwindcss --output=src/style.css --content=src/**/*.tsx",
+    "tailwind:website": "tailwindcss --input=./input.css --output=output.css --content=*.html --minify",
+    "test": "TZ=UTC jest",
+    "up": "yarn upgrade-interactive --latest",
+    "upstream": "git fetch upstream && git merge upstream/main"
+  },
+  "packageManager": "yarn@1.22.22+sha256.c17d3797fb9a9115bf375e31bfd30058cac6bc9c3b8807a3d8cb2094794b51ca"
+}

package/scripts/build.mjs

@@ -0,0 +1,16 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import * as esbuild from "esbuild";
+import { sassPlugin } from "esbuild-sass-plugin";
+
+await esbuild.build({
+  entryPoints: ["./src/index.js"],
+  bundle: true,
+  minify: true,
+  external: ["mapbox-gl"],
+  loader: {
+    ".png": "dataurl",
+  },
+  outfile: "index.js",
+  plugins: [sassPlugin({ type: "css-text" })],
+  sourcemap: false,
+});

package/scripts/dev.mjs

@@ -0,0 +1,26 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import * as esbuild from "esbuild";
+import { sassPlugin } from "esbuild-sass-plugin";
+
+const ctx = await esbuild.context({
+  entryPoints: ["./src/index.js"],
+  bundle: true,
+  external: ["mapbox-gl"],
+  loader: {
+    ".png": "dataurl",
+  },
+  outfile: "index.js",
+  plugins: [sassPlugin({ type: "css-text" })],
+  sourcemap: true,
+});
+
+const { host, port } = await ctx.serve({
+  servedir: ".",
+});
+
+await ctx.watch();
+console.log(
+  `watching... and running at ${
+    host === "0.0.0.0" ? "http://localhost" : host
+  }:${port}`,
+);

package/search.html

@@ -0,0 +1,144 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Mobility Web Component</title>
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <meta
+      name="viewport"
+      content="initial-scale=1,maximum-scale=1,user-scalable=no"
+    />
+    <script type="text/javascript">
+      if (/localhost/.test(window.location.hostname)) {
+        new EventSource("/esbuild").addEventListener("change", () => {
+          location.reload();
+        });
+      }
+    </script>
+    <script type="module" src="./index.js"></script>
+    <link rel="stylesheet" type="text/css" href="./output.css" />
+    <style>
+      ::-webkit-scrollbar {
+        width: 10px;
+      }
+      a {
+        text-decoration: underline;
+      }
+    </style>
+  </head>
+  <body class="p-8">
+    <div
+      id="doc"
+      style="display: none"
+      class="mx-auto h-96 max-w-3xl space-y-4"
+    >
+      <h1 class="text-3xl font-bold">Mobility Search Web Component</h1>
+      <p>This is a demo of the geOps Mobility Search Web Component.</p>
+      <p>This web component launches a search on the <b>geOps Stops API</b></p>
+      <p>Every parameters of the <b>geOps Stops API</b>:</p>
+      <ul class="pl-8">
+        <li class="list-disc">can be passed as a string attribute of the web component.</li>
+        <li class="list-disc">
+          can be passed as an URL parameter of this page, they will be
+          automatically apply to the web component.
+        </li>
+      </ul>
+      <p>
+        The list of parameters of the <b>geOps Stops API</b> can be found
+        <a href="https://developer.geops.io/apis/stops#parameters" target="_blank">here</a>.
+      </p>
+
+      <h2 class="text-xl font-bold">Usage example</h2>
+      <pre class="bg-slate-800 text-slate-200 p-4 rounded">
+&lt;script
+  type=&quot;module&quot;
+  src=&quot;https://www.unpkg.com/@geops/mobility-web-component&quot;&gt;
+&lt;/script&gt;
+&lt;geops-mobility-search
+  apikey=&quot;YOUR_GEOPS_API_KEY&quot;
+  limit=&quot;5&quot;
+  mots=&quot;rail,bus&quot;
+  style=&quot;display: block;width: 800px;height: 800px;&quot;&gt;
+&lt;/geops-mobility&gt;</pre
+      >
+
+      <!-- Default -->
+      <geops-mobility-search
+        class="max-w-3xl block border"
+        limit="5"
+        mots="rail,bus"
+      ></geops-mobility-search>
+
+      <pre id="textarea" class="w-full h-96 p-2"></pre>
+
+      <br />
+      <br />
+      <h1 class="text-xl font-bold">More mobility web components</h1>
+      <p>
+        <a href="index.html" target="_blank"
+          >&gt;&gt; Usage example Map Component</a
+        >
+      </p>
+    </div>
+    <script type="text/javascript">
+      let params = new URLSearchParams(window.location.search);
+      const searchElement = document.querySelector("geops-mobility-search");
+      const eventLog = document.querySelector("#textarea");
+
+
+      // Listen window event
+      window.addEventListener("message", (event) => {
+        const { type } = event.data || {};
+        console.log("message event: " + type, event.data);
+      });
+    </script>
+
+    <script type="text/javascript">
+      params = new URLSearchParams(window.location.search);
+
+      // There should be only one webcompoennt on the html page at this point
+      const doc = document.querySelectorAll("#doc");
+      const wc = document.querySelector("geops-mobility-search");
+      if (params.get("fullscreen") === "true") {
+        wc.parentElement.removeChild(wc);
+        wc.className = "absolute w-full h-full inset-0";
+        document.body.appendChild(wc);
+        document.body.style = "padding:0;";
+      } else {
+        doc.forEach((d) => (d.style.display = "block"));
+      }
+      params.delete("fullscreen");
+
+      // Apply all url parameters as attribute of the web component
+      params.forEach((value, key) => {
+        wc.setAttribute(key, value);
+      });
+
+      if (!wc.getAttribute("apikey")) {
+        fetch("https://backend.developer.geops.io/publickey")
+          .then((response) => response.json())
+          .then((data) => {
+            if (data && data.success) {
+              wc.setAttribute("apikey", data.key);
+            }
+          });
+      }
+
+
+      // Listen to element event
+      searchElement.addEventListener("mwc:stopssearchselect", (event) => {
+        const data = event.data;
+        if (!data) {
+          eventLog.innerText = "";
+        } else {
+          eventLog.innerText =
+            "Event " +
+            event.type +
+            " received :\n " +
+            JSON.stringify(data, undefined, " ");
+          window.top.postMessage(data, "*");
+        }
+      });
+    </script>
+  </body>
+</html>

package/src/BaseLayer/BaseLayer.tsx

@@ -0,0 +1,36 @@
+import { MaplibreLayer } from "mobility-toolbox-js/ol";
+import { MaplibreLayerOptions } from "mobility-toolbox-js/ol/layers/MaplibreLayer";
+import { Layer } from "ol/layer";
+import { memo } from "preact/compat";
+import { useEffect } from "preact/hooks";
+
+import useMapContext from "../utils/hooks/useMapContext";
+
+function BaseLayer(props: MaplibreLayerOptions) {
+  const { apikey, baselayer, map, mapsurl, setBaseLayer } = useMapContext();
+  useEffect(() => {
+    if (!map || !baselayer || !apikey) {
+      return;
+    }
+    const layer = new MaplibreLayer({
+      apiKey: apikey,
+      style: baselayer,
+      url: mapsurl,
+      ...(props || {}),
+    });
+    const baseLayer = layer as unknown as Layer;
+
+    // TODO: find why the setZIndex is not found
+    baseLayer.setZIndex(0);
+    map.addLayer(baseLayer);
+    setBaseLayer(layer);
+
+    return () => {
+      map?.removeLayer(baseLayer);
+    };
+  }, [map, baselayer, apikey, setBaseLayer, props, mapsurl]);
+
+  return null;
+}
+
+export default memo(BaseLayer);

package/src/BaseLayer/index.tsx

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

package/src/Copyright/Copyright.tsx

@@ -0,0 +1,54 @@
+import { CopyrightControl } from "mobility-toolbox-js/ol";
+import { CopyrightControlOptions } from "mobility-toolbox-js/ol/controls/CopyrightControl";
+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";
+
+export type CopyrightProps = {
+  options?: CopyrightControlOptions;
+} & JSX.HTMLAttributes<HTMLDivElement> &
+  PreactDOMAttributes;
+
+function Copyright({ options, ...props }: CopyrightProps) {
+  const { map } = useMapContext();
+  const [target, setTarget] = useState<HTMLElement>();
+  const control = useMemo(() => {
+    if (!target) {
+      return null;
+    }
+    const div = document.createElement("div");
+    div.className = "flex flex-wrap-reverse justify-end";
+
+    return new CopyrightControl({
+      element: div,
+      target,
+      ...options,
+    });
+  }, [options, target]);
+
+  useEffect(() => {
+    if (!map || !control) {
+      return;
+    }
+    map.addControl(control);
+    return () => {
+      map?.removeControl(control);
+    };
+  }, [map, control]);
+
+  return (
+    <div
+      ref={(node) => {
+        setTarget(node);
+      }}
+      {...props}
+    >
+      <style>{style}</style>
+    </div>
+  );
+}
+
+export default Copyright;

package/src/Copyright/index.css

@@ -0,0 +1,3 @@
+a  {
+  white-space: pre;
+}

package/src/Copyright/index.tsx

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

package/src/DebugDeparture/DebugDeparture.tsx

@@ -0,0 +1,116 @@
+import { JSX, PreactDOMAttributes } from "preact";
+
+import useDebug from "../utils/hooks/useDebug";
+import useDeparture from "../utils/hooks/useDeparture";
+
+export type DebugDepartureProps = JSX.HTMLAttributes<HTMLDivElement> &
+  PreactDOMAttributes;
+
+/**
+ * Polyfill for String.prototype.padStart()
+ */
+const pad = (n: number) => {
+  return `0${n}`.slice(-2);
+};
+
+const formatDebugTime = (time, excludeSeconds = false) => {
+  const d = new Date(time);
+
+  return !time || Number.isNaN(d)
+    ? "unknown"
+    : [
+        pad(d.getHours()),
+        pad(d.getMinutes()),
+        excludeSeconds ? null : pad(d.getSeconds()),
+      ]
+        .filter((t) => {
+          return t;
+        })
+        .join(":");
+};
+
+function DebugDeparture(props: DebugDepartureProps) {
+  const debug = useDebug();
+  const { departure } = useDeparture();
+
+  if (!debug) {
+    return null;
+  }
+  const {
+    // @ts-expect-error bad type definition
+    arrivalTime,
+    at_station_ds100: atStationDs100,
+    // @ts-expect-error bad type definition
+    departureTime,
+    fzo_estimated_time: fzoEstimatedTime,
+    has_fzo: hasFzo,
+    // @ts-expect-error bad type definition
+    last_boarding_time: lastBoardingTime,
+    min_arrival_time: minArrivalTime,
+    ris_aimed_time: risAimedTime,
+    ris_estimated_time: risEstimatedTime,
+    state,
+    // @ts-expect-error bad type definition
+    station,
+    // @ts-expect-error bad type definition
+    stations_in_between: stationsInBetween,
+    time,
+    train_number: trainNumber,
+  } = departure;
+
+  const risTime = new Date(risAimedTime);
+  const urlDate = Number.isNaN(risTime)
+    ? ""
+    : [
+        (risTime as Date).getFullYear(),
+        pad((risTime as Date).getMonth() + 1),
+        pad((risTime as Date).getDate()),
+      ].join("-");
+
+  const risLink = [
+    "https://ris-info.bahn.de/rishttp/risinfo.xml?",
+    `action=zuglauf&evanr=${station?.get("uic")}&`,
+    `zugnummer=${trainNumber}&`,
+    `ankunft=${urlDate}T${formatDebugTime(risTime, true)}`,
+  ].join("");
+
+  return (
+    <div className="border-b p-4 text-left text-xs" {...props}>
+      Zugnummer:
+      <a href={risLink} rel="noopener noreferrer" target="_blank">
+        {trainNumber}
+      </a>
+      <div>
+        {`  State: `}
+        <b>{state}</b>
+        <br />
+        {`Has fzo: ${hasFzo};`}
+        <br />
+        {/* @ts-expect-error bad type definition */}
+        {`Has realtime: ${departure.has_realtime_journey};`}
+        <br />
+        {`Time: ${formatDebugTime(time)};`}
+        <br />
+        {`Arrival time: ${formatDebugTime(arrivalTime)};`}
+        <br />
+        {`Departure time: ${formatDebugTime(departureTime)};`}
+        <br />
+        {`FzO-Estimated: ${formatDebugTime(fzoEstimatedTime)};`}
+        <br />
+        {`RIS-Aimed: ${formatDebugTime(risAimedTime)};`}
+        <br />
+        {`RIS-Estimated: ${formatDebugTime(risEstimatedTime)};`}
+        <br />
+        {`Ref-Location: ${atStationDs100};`}
+        <br />
+        {`Normalized Distance: ${formatDebugTime(minArrivalTime)};`}
+        <br />
+        {`Last Boarding: ${formatDebugTime(lastBoardingTime)};`}
+        <br />
+        {`Stationen until arrival: ${stationsInBetween};`}
+      </div>
+    </div>
+  );
+}
+
+export default DebugDeparture;

package/src/DebugDeparture/index.tsx

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

package/src/DebugStop/DebugStop.tsx

@@ -0,0 +1,47 @@
+import { JSX, PreactDOMAttributes } from "preact";
+
+import useDebug from "../utils/hooks/useDebug";
+import useRouteStop from "../utils/hooks/useRouteStop";
+
+export type DebugStopProps = JSX.HTMLAttributes<HTMLDivElement> &
+  PreactDOMAttributes;
+
+function DebugStop(props: DebugStopProps) {
+  const { status, stop } = useRouteStop();
+  const debug = useDebug();
+
+  if (!debug) {
+    return null;
+  }
+
+  return (
+    <div className="p-4 text-left text-xs" {...props}>
+      <div>
+        State: <b>{stop.state}</b> (isPassed: {`${status.isPassed}`})
+        (cancelled: {`${stop.cancelled}`})
+      </div>
+      <div>
+        Arrival time: {stop.arrivalTime} (delay: <b>{`${stop.arrivalDelay}`}</b>
+        ) (aimed: {stop.aimedArrivalTime})
+      </div>
+      <div>
+        Departure time: {stop.arrivalTime} (delay:{" "}
+        <b>{`${stop.departureDelay}`}</b>) (aimed: {stop.aimedArrivalTime})
+      </div>
+      <div>
+        {Object.entries(status).map(([key, value]) => {
+          if (value === false) {
+            return null;
+          }
+          return (
+            <div key={key}>
+              {key}: {`${value}`}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export default DebugStop;

package/src/DebugStop/index.tsx

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

package/src/Departure/Departure.tsx

@@ -0,0 +1,55 @@
+import type { RealtimeDeparture } from "mobility-toolbox-js/types";
+
+import { memo, useMemo } from "preact/compat";
+
+import DebugDeparture from "../DebugDeparture";
+import RouteIcon from "../RouteIcon";
+import getHoursAndMinutes from "../utils/getHoursAndMinutes";
+import { DepartureContext } from "../utils/hooks/useDeparture";
+import useMapContext from "../utils/hooks/useMapContext";
+
+export interface DepartureProps {
+  departure: RealtimeDeparture;
+  index: number;
+}
+
+function Departure({ departure, index, ...props }: DepartureProps) {
+  const { setStationId, setTrainId } = useMapContext();
+
+  const departureState = useMemo(() => {
+    return { departure, index };
+  }, [departure, index]);
+
+  return (
+    <DepartureContext.Provider value={departureState}>
+      <button
+        className="w-full border-b"
+        onClick={() => {
+          setTrainId(departure.train_id);
+          setStationId();
+        }}
+        type="button"
+        {...props}
+      >
+        <div
+          className="gap-4 py-4"
+          style={{
+            alignItems: "center",
+            display: "flex",
+            overflow: "hidden",
+          }}
+        >
+          <div className="pl-4">
+            <RouteIcon departure={departure} />
+          </div>
+          <div className="grow text-left">
+            {[...new Set(departure.to)].join("/")}
+          </div>
+          <div className="pr-4">{getHoursAndMinutes(departure.time)}</div>
+        </div>
+      </button>
+      <DebugDeparture />
+    </DepartureContext.Provider>
+  );
+}
+export default memo(Departure);

package/src/Departure/index.tsx

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