npm - @geops/rvf-mobility-web-component - Versions diffs - 0.1.8 - Mend

@geops/rvf-mobility-web-component 0.1.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (212) hide show

package/.fixpackrc +21 -0
package/.husky/commit-msg +1 -0
package/.husky/post-checkout +1 -0
package/.husky/post-merge +1 -0
package/.husky/post-rebase +1 -0
package/.husky/pre-commit +1 -0
package/.lintstagedrc.js +12 -0
package/.nvmrc +1 -0
package/.prettierrc.js +1 -0
package/CHANGELOG.md +183 -0
package/Logo.svg +10 -0
package/README.md +179 -0
package/__mocks__/dataurl.js +11 -0
package/__mocks__/mapbox-gl.js +19 -0
package/commitlint.config.cjs +1 -0
package/doc/.eslintrc.json +3 -0
package/doc/.fixpackrc +21 -0
package/doc/.prettierrc +1 -0
package/doc/README.md +14 -0
package/doc/declarations.d.ts +6 -0
package/doc/next.config.mjs +4 -0
package/doc/package.json +43 -0
package/doc/postcss.config.mjs +8 -0
package/doc/public/README.md +1 -0
package/doc/src/app/components/GeopsAPIKeyLink.tsx +6 -0
package/doc/src/app/components/GeopsAPIsLink.tsx +6 -0
package/doc/src/app/components/GeopsMapsAPILink.tsx +8 -0
package/doc/src/app/components/GeopsMobility.tsx +9 -0
package/doc/src/app/components/GeopsMobilityDoc.tsx +231 -0
package/doc/src/app/components/GeopsMobilitySearch.tsx +10 -0
package/doc/src/app/components/GeopsMobilitySearchDoc.tsx +129 -0
package/doc/src/app/components/GeopsRealtimeAPILink.tsx +10 -0
package/doc/src/app/components/GeopsStopsAPILink.tsx +8 -0
package/doc/src/app/components/Link.tsx +9 -0
package/doc/src/app/components/WebComponentDoc.tsx +296 -0
package/doc/src/app/favicon.ico +0 -0
package/doc/src/app/geops-mobility/page.tsx +6 -0
package/doc/src/app/geops-mobility-search/page.tsx +7 -0
package/doc/src/app/globals.css +38 -0
package/doc/src/app/hooks/useAttrFromUrlParams.ts +21 -0
package/doc/src/app/hooks/useIsFullScreen.ts +14 -0
package/doc/src/app/hooks/usePublicKey.ts +21 -0
package/doc/src/app/layout.tsx +51 -0
package/doc/src/app/page.tsx +86 -0
package/doc/src/geops-ui.ts +3 -0
package/doc/tailwind.config.ts +20 -0
package/doc/tsconfig.json +40 -0
package/eslint.config.mjs +40 -0
package/favicon.ico +0 -0
package/global.d.ts +4 -0
package/iframe.html +34 -0
package/index.html +276 -0
package/index.js +2162 -0
package/input.css +34 -0
package/jest-setup.js +4 -0
package/jest.config.js +17 -0
package/package.json +80 -0
package/scripts/build.mjs +16 -0
package/scripts/dev.mjs +26 -0
package/search.html +144 -0
package/src/BaseLayer/BaseLayer.tsx +36 -0
package/src/BaseLayer/index.tsx +1 -0
package/src/Copyright/Copyright.tsx +54 -0
package/src/Copyright/index.css +3 -0
package/src/Copyright/index.tsx +1 -0
package/src/DebugDeparture/DebugDeparture.tsx +116 -0
package/src/DebugDeparture/index.tsx +1 -0
package/src/DebugStop/DebugStop.tsx +47 -0
package/src/DebugStop/index.tsx +1 -0
package/src/Departure/Departure.tsx +55 -0
package/src/Departure/index.tsx +1 -0
package/src/GeolocationButton/GeolocationButton.tsx +81 -0
package/src/GeolocationButton/index.tsx +1 -0
package/src/Map/Map.tsx +89 -0
package/src/Map/index.tsx +1 -0
package/src/MobilityMap/MobilityMap.tsx +259 -0
package/src/MobilityMap/index.css +13 -0
package/src/MobilityMap/index.tsx +1 -0
package/src/NotificationLayer/NotificationLayer.tsx +156 -0
package/src/NotificationLayer/index.tsx +1 -0
package/src/NotificationLayer/notificationUtils.ts +191 -0
package/src/Overlay/Overlay.tsx +57 -0
package/src/Overlay/index.tsx +1 -0
package/src/RealtimeLayer/RealtimeLayer.tsx +230 -0
package/src/RealtimeLayer/index.tsx +1 -0
package/src/RouteDestination/RouteDestination.test.tsx +13 -0
package/src/RouteDestination/RouteDestination.tsx +15 -0
package/src/RouteDestination/index.tsx +1 -0
package/src/RouteIcon/RouteIcon.tsx +66 -0
package/src/RouteIcon/index.tsx +1 -0
package/src/RouteIdentifier/RouteIdentifer.tsx +35 -0
package/src/RouteIdentifier/index.tsx +1 -0
package/src/RouteInfos/RouteInfos.tsx +22 -0
package/src/RouteInfos/index.tsx +1 -0
package/src/RouteSchedule/RouteSchedule.tsx +69 -0
package/src/RouteSchedule/firstStation.png +0 -0
package/src/RouteSchedule/index.tsx +1 -0
package/src/RouteSchedule/lastStation.png +0 -0
package/src/RouteSchedule/line.png +0 -0
package/src/RouteSchedule/station.png +0 -0
package/src/RouteScheduleFooter/RouteScheduleFooter.tsx +44 -0
package/src/RouteScheduleFooter/index.tsx +1 -0
package/src/RouteScheduleHeader/RouteScheduleHeader.tsx +58 -0
package/src/RouteScheduleHeader/index.tsx +1 -0
package/src/RouteStop/RouteStop.tsx +121 -0
package/src/RouteStop/index.tsx +1 -0
package/src/RouteStopDelay/RouteStopDelay.tsx +36 -0
package/src/RouteStopDelay/index.tsx +1 -0
package/src/RouteStopName/RouteStopName.tsx +24 -0
package/src/RouteStopName/index.tsx +1 -0
package/src/RouteStopPlatform/RouteStopPlatform.tsx +29 -0
package/src/RouteStopPlatform/index.tsx +1 -0
package/src/RouteStopProgress/RouteStopProgress.tsx +101 -0
package/src/RouteStopProgress/index.tsx +1 -0
package/src/RouteStopServices/RouteStopServices.tsx +26 -0
package/src/RouteStopServices/index.tsx +1 -0
package/src/RouteStopStation/RouteStopStation.tsx +32 -0
package/src/RouteStopStation/index.tsx +1 -0
package/src/RouteStopTime/RouteStopTime.tsx +34 -0
package/src/RouteStopTime/index.tsx +1 -0
package/src/RvfMobilityMap/RvfMobilityMap.tsx +245 -0
package/src/RvfMobilityMap/index.css +13 -0
package/src/RvfMobilityMap/index.tsx +1 -0
package/src/ScaleLine/ScaleLine.tsx +51 -0
package/src/ScaleLine/index.css +6 -0
package/src/ScaleLine/index.tsx +1 -0
package/src/ScrollableHandler/ScrollableHandler.tsx +65 -0
package/src/ScrollableHandler/index.tsx +1 -0
package/src/Search/Search.tsx +18 -0
package/src/Search/index.tsx +1 -0
package/src/SingleClickListener/SingleClickListener.tsx +103 -0
package/src/SingleClickListener/index.tsx +1 -0
package/src/Station/Station.tsx +68 -0
package/src/Station/index.tsx +1 -0
package/src/StationHeader/StationHeader.tsx +32 -0
package/src/StationHeader/index.tsx +1 -0
package/src/StationName/StationName.tsx +21 -0
package/src/StationName/index.tsx +1 -0
package/src/StationServices/StationServices.tsx +80 -0
package/src/StationServices/index.tsx +1 -0
package/src/StationsLayer/StationsLayer.tsx +41 -0
package/src/StationsLayer/index.tsx +1 -0
package/src/StopsSearch/StopsSearch.tsx +254 -0
package/src/StopsSearch/index.tsx +1 -0
package/src/icons/Airport/Airport.tsx +17 -0
package/src/icons/Airport/airport-14-svgrepo-com.svg +41 -0
package/src/icons/Airport/index.tsx +1 -0
package/src/icons/BarAndRestaurants/BarAndRestaurants.tsx +17 -0
package/src/icons/BarAndRestaurants/food-restaurant-svgrepo-com.svg +12 -0
package/src/icons/BarAndRestaurants/index.tsx +1 -0
package/src/icons/Bathroom/Bathroom.tsx +59 -0
package/src/icons/Bathroom/bathroom-restroom-svgrepo-com.svg +38 -0
package/src/icons/Bathroom/index.tsx +1 -0
package/src/icons/BikeStorage/BikeStorage.tsx +17 -0
package/src/icons/BikeStorage/index.tsx +1 -0
package/src/icons/BikeStorage/parking-bicycle-14-svgrepo-com.svg +41 -0
package/src/icons/Elevator/Elevator.tsx +16 -0
package/src/icons/Elevator/elevator-svgrepo-com.svg +2 -0
package/src/icons/Elevator/index.tsx +1 -0
package/src/icons/Police/Police.tsx +20 -0
package/src/icons/Police/index.tsx +1 -0
package/src/icons/Police/polizia.png +0 -0
package/src/icons/README.md +52 -0
package/src/icons/WaitingAreas/WaitingAreas.tsx +16 -0
package/src/icons/WaitingAreas/highway-rest-area-svgrepo-com.svg +5 -0
package/src/icons/WaitingAreas/index.tsx +1 -0
package/src/icons/WaitingAreas/wheelchair-svgrepo-com.svg +2 -0
package/src/icons/WheelChair/WheelChair.tsx +16 -0
package/src/icons/WheelChair/disabili.png +0 -0
package/src/icons/WheelChair/index.tsx +1 -0
package/src/icons/WheelChair/wheelchair-svgrepo-com.svg +2 -0
package/src/index.tsx +50 -0
package/src/utils/MobilityEvent.ts +21 -0
package/src/utils/addSourceAndLayers.ts +62 -0
package/src/utils/centerOnStation.ts +17 -0
package/src/utils/centerOnVehicle.ts +50 -0
package/src/utils/getBgColor.ts +3 -0
package/src/utils/getDelayColor.test.ts +20 -0
package/src/utils/getDelayColor.ts +23 -0
package/src/utils/getDelayColorForVehicle.test.ts +28 -0
package/src/utils/getDelayColorForVehicle.ts +25 -0
package/src/utils/getDelayFontForVehicle.test.ts +7 -0
package/src/utils/getDelayFontForVehicle.tsx +8 -0
package/src/utils/getDelayString.test.ts +22 -0
package/src/utils/getDelayString.ts +28 -0
package/src/utils/getDelayTextForVehicle.test.ts +28 -0
package/src/utils/getDelayTextForVehicle.ts +21 -0
package/src/utils/getFullTrajectoryAndFit.ts +40 -0
package/src/utils/getHoursAndMinutes.test.ts +14 -0
package/src/utils/getHoursAndMinutes.ts +22 -0
package/src/utils/getMainColorForVehicle.test.ts +27 -0
package/src/utils/getMainColorForVehicle.ts +46 -0
package/src/utils/getStopStatus.test.ts +104 -0
package/src/utils/getStopStatus.ts +171 -0
package/src/utils/getTextFontForVehicle.test.ts +7 -0
package/src/utils/getTextFontForVehicle.tsx +9 -0
package/src/utils/getTextForVehicle.test.ts +17 -0
package/src/utils/getTextForVehicle.ts +19 -0
package/src/utils/hooks/useDebug.tsx +11 -0
package/src/utils/hooks/useDeparture.tsx +23 -0
package/src/utils/hooks/useI18n.tsx +20 -0
package/src/utils/hooks/useMapContext.tsx +74 -0
package/src/utils/hooks/useParams.ts +5 -0
package/src/utils/hooks/useRouteStop.tsx +33 -0
package/src/utils/hooks/useStation.tsx +21 -0
package/src/utils/hooks/useUpdatePermalink.tsx +33 -0
package/src/utils/hooks/useZoom.tsx +32 -0
package/src/utils/i18n.ts +16 -0
package/src/utils/translations.ts +31 -0
package/tailwind.config.mjs +56 -0
package/testNotification.json +50653 -0
package/tsconfig.json +12 -0

package/doc/src/app/geops-mobility/page.tsx ADDED Viewed

@@ -0,0 +1,6 @@
+"use client";
+import GeopsMobilityDoc from "../components/GeopsMobilityDoc";
+export default function GeopsMobility() {
+  return <GeopsMobilityDoc />;
+}

package/doc/src/app/geops-mobility-search/page.tsx ADDED Viewed

@@ -0,0 +1,7 @@
+"use client";
+import GeopsMobilitySearchDoc from "../components/GeopsMobilitySearchDoc";
+export default function GeopsMobilitySearch() {
+  return <GeopsMobilitySearchDoc />;
+}

package/doc/src/app/globals.css ADDED Viewed

@@ -0,0 +1,38 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-family: Arial, Helvetica, sans-serif;
+  margin: 0;
+  font-family: Lato, Arial, sans-serif;
+  color: #353535;
+  position: relative;
+  min-height: 100%;
+  overflow-y: scroll;
+  font-size: 18px;
+}
+a {
+  text-decoration: none;
+  color: #76b833;
+}
+a:focus-visible {
+  outline: 2px solid black;
+  outline-offset: 2px;
+}
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}

package/doc/src/app/hooks/useAttrFromUrlParams.ts ADDED Viewed

@@ -0,0 +1,21 @@
+import { useSearchParams } from "next/navigation";
+import { useMemo } from "react";
+const useAttrFromUrlParams = (attributes: string[]) => {
+  const searchParams = useSearchParams();
+  const attrs = useMemo(() => {
+    const values: Record<string, string> = {};
+    attributes.forEach((key) => {
+      const value = searchParams.get(key);
+      if (key && value !== undefined && value !== null) {
+        values[key] = value;
+      }
+    });
+    return values;
+  }, [attributes, searchParams]);
+  return attrs;
+};
+export default useAttrFromUrlParams;

package/doc/src/app/hooks/useIsFullScreen.ts ADDED Viewed

@@ -0,0 +1,14 @@
+import { useSearchParams } from "next/navigation";
+import { useMemo } from "react";
+const useIsFullScreen = () => {
+  const searchParams = useSearchParams();
+  const isFullScreen = useMemo(() => {
+    return searchParams.get("fullscreen") === "true";
+  }, [searchParams]);
+  return isFullScreen;
+};
+export default useIsFullScreen;

package/doc/src/app/hooks/usePublicKey.ts ADDED Viewed

@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react";
+const usePublicKey = () => {
+  const [publicKey, setPublicKey] = useState<null | string>(null);
+  useEffect(() => {
+    const fetchPublicKey = async () => {
+      const response = await fetch(
+        "https://backend.developer.geops.io/publickey",
+      );
+      const data = await response.json();
+      setPublicKey(data?.key);
+    };
+    fetchPublicKey();
+  }, []);
+  return publicKey;
+};
+export default usePublicKey;

package/doc/src/app/layout.tsx ADDED Viewed

@@ -0,0 +1,51 @@
+import type { Metadata } from "next";
+import { Container } from "@mui/material";
+import { AppRouterCacheProvider } from "@mui/material-nextjs/v14-appRouter";
+import { ThemeProvider } from "@mui/material/styles";
+import Script from "next/script";
+import { Suspense } from "react";
+import { Footer, geopsTheme, Header } from "../geops-ui";
+import "./globals.css";
+const tabs = [
+  {
+    component: "a",
+    href: "/",
+    label: "Home",
+  },
+  {
+    component: "a",
+    href: "https://github.com/geops/mobility-web-component",
+    label: "Code",
+  },
+];
+export const metadata: Metadata = {
+  description: "A set of we component for geOps Mobility APIs",
+  title: "geOps Mobility Web Component",
+};
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={`antialiased`}>
+        <AppRouterCacheProvider>
+          <ThemeProvider theme={geopsTheme}>
+            <Header tabs={tabs} title="mobility-web-component" />
+            <Container className="my-12" maxWidth="md">
+              <Suspense fallback={null}>{children}</Suspense>
+            </Container>
+            <Footer />
+          </ThemeProvider>
+        </AppRouterCacheProvider>
+        <Script src="index.js" />
+      </body>
+    </html>
+  );
+}

package/doc/src/app/page.tsx ADDED Viewed

@@ -0,0 +1,86 @@
+"use client";
+import {
+  Button,
+  Card,
+  CardActions,
+  CardContent,
+  CardMedia,
+  Typography,
+} from "@mui/material";
+import Link from "next/link";
+import GeopsAPIsLink from "./components/GeopsAPIsLink";
+import GeopsMobility from "./components/GeopsMobility";
+import GeopsMobilitySearch from "./components/GeopsMobilitySearch";
+import GeopsStopsAPILink from "./components/GeopsStopsAPILink";
+import usePublicKey from "./hooks/usePublicKey";
+export default function Home() {
+  const apiKey = usePublicKey();
+  return (
+    <>
+      <Typography variant="h1">Mobility Web Component</Typography>
+      <br />
+      <p className="my-4">
+        This project contains a set of web components allowing to use easily the{" "}
+        <GeopsAPIsLink />:
+      </p>
+      <div className="my-8 flex flex-wrap gap-4">
+        <Card className="w-[345px] min-w-[320px] shrink-0">
+          <CardMedia sx={{ height: 160, padding: 0, pointerEvents: "none" }}>
+            <GeopsMobility
+              apikey={apiKey}
+              class="size-full"
+              geolocation="false"
+              search="false"
+            />
+          </CardMedia>
+          <CardContent>
+            <Link href={`/geops-mobility`}>
+              <Typography variant="h3">{"<geops-mobility />"}</Typography>
+            </Link>
+            <Typography>
+              A web component used to display a map using different{" "}
+              <GeopsAPIsLink />.
+            </Typography>
+          </CardContent>
+          <CardActions sx={{ display: "flex", justifyContent: "end" }}>
+            <Button
+              href={`/geops-mobility`}
+              sx={{ borderRadius: 0, borderTopLeftRadius: 4 }}
+            >
+              More
+            </Button>
+          </CardActions>
+        </Card>
+        <Card className="w-[345px] min-w-[320px] shrink-0">
+          <CardMedia sx={{ height: 160, padding: 2, pointerEvents: "none" }}>
+            <GeopsMobilitySearch
+              apikey={apiKey}
+              class="m-4 size-full border-0 border-b"
+            />
+          </CardMedia>
+          <CardContent>
+            <Link href={`/geops-mobility-search`}>
+              <Typography variant="h3">
+                {"<geops-mobility-search />"}
+              </Typography>
+            </Link>
+            <Typography>
+              A search input to search stops using the <GeopsStopsAPILink />.
+            </Typography>
+          </CardContent>
+          <CardActions sx={{ display: "flex", justifyContent: "end" }}>
+            <Button
+              href={`/geops-mobility-search`}
+              sx={{ borderRadius: 0, borderTopLeftRadius: 4 }}
+            >
+              More
+            </Button>
+          </CardActions>
+        </Card>
+      </div>
+    </>
+  );
+}

package/doc/src/geops-ui.ts ADDED Viewed

@@ -0,0 +1,3 @@
+"use client";
+// @ts-expect-error - required for module declaration
+export { Footer, geopsTheme, Header } from "@geops/geops-ui";

package/doc/tailwind.config.ts ADDED Viewed

@@ -0,0 +1,20 @@
+import type { Config } from "tailwindcss";
+const config: Config = {
+  content: [
+    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  plugins: [],
+  theme: {
+    extend: {
+      colors: {},
+      fontFamily: {
+        sans: ["Lato", "sans-serif"],
+        serif: ["Merriweather", "serif"],
+      },
+    },
+  },
+};
+export default config;

package/doc/tsconfig.json ADDED Viewed

@@ -0,0 +1,40 @@
+{
+  "compilerOptions": {
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    },
+    "target": "ES2017"
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

package/eslint.config.mjs ADDED Viewed

@@ -0,0 +1,40 @@
+import { FlatCompat } from "@eslint/eslintrc";
+import eslint from "@eslint/js";
+import jsxA11y from "eslint-plugin-jsx-a11y";
+import perfectionist from "eslint-plugin-perfectionist";
+import prettier from "eslint-plugin-prettier/recommended";
+import react from "eslint-plugin-react";
+import tailwind from "eslint-plugin-tailwindcss";
+import ts from "typescript-eslint";
+// FlatCompat convert old definition to the new ones
+const compat = new FlatCompat();
+export default [
+  {
+    ignores: ["build/*", "node_modules/*"],
+  },
+  ...ts.config(
+    eslint.configs.recommended,
+    ...ts.configs.strict,
+    ...ts.configs.stylistic,
+    react.configs.flat.recommended,
+    react.configs.flat["jsx-runtime"], // Avoid having the React-in-jsx-scope rule activated
+    ...compat.config({
+      extends: ["plugin:react-hooks/recommended"],
+      rules: {
+        "react-hooks/exhaustive-deps": "error",
+      },
+    }),
+    jsxA11y.flatConfigs.recommended,
+    perfectionist.configs["recommended-alphabetical"],
+    prettier,
+    ...tailwind.configs["flat/recommended"],
+    {
+      rules: {
+        "arrow-body-style": ["error", "always"],
+        curly: "error",
+      },
+    },
+  ),
+];

package/favicon.ico ADDED Viewed

Binary file

package/global.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+declare module "*.png" {
+  const src: string;
+  export default src;
+}

package/iframe.html ADDED Viewed

@@ -0,0 +1,34 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title></title>
+    <meta name="description" content="" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" type="text/css" href="./output.css" />
+    <script type="module" src="./bundle.js"></script>
+    <style>
+      iframe {
+        width: 100vw;
+        height: 100vh;
+      }
+    </style>
+  </head>
+  <body>
+    <iframe
+      id="iframe"
+      src="/?realtime=false&baselayer=travic_v2_network_plans&type=notification&notificationurl=https%3A%2F%2Fmoco.dev.geops.io%2Fapi%2Fv1%2Fexport%2Fnotification%2F%3Fsso_config%3Dsob&notificationbeforelayerid=netzplan_line_lable&maxzoom=12&center=955768,5922646"
+      frameborder="0"
+    ></iframe>
+  </body>
+  <script type="module">
+    import testNotification from "./testNotification.json" assert { type: "json" };
+    const iframe = document.getElementById("iframe");
+    iframe.addEventListener("load", function () {
+      setTimeout(() => {
+        this.contentWindow.postMessage({ notification: testNotification }, "*");
+      }, 500);
+    });
+  </script>
+</html>

package/index.html ADDED Viewed

@@ -0,0 +1,276 @@
+<!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"
+    />
+    <link rel="stylesheet" href="https://use.typekit.net/orf1mlq.css">
+    <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: 3px;
+      }
+      a {
+        text-decoration: underline;
+      }
+    </style>
+  </head>
+  <body class="p-8">
+    <div id="doc" style="display: none" class="mx-auto max-w-5xl space-y-4">
+      <h1 class="flex gap-4"><img src="./Logo.svg">Mobility Web Component</h1>
+      <p>This is a demo of the Mobility Web Component.</p>
+      <h2>Usage example</h2>
+      <pre id="code" class="bg-slate-800 text-slate-200 p-4 rounded"></pre>
+      <!-- Default -->
+      <geops-mobility
+        class="h-96 block resize overflow-auto w-full"
+      ></geops-mobility>
+      <br />
+      <!-- <h2 class="text-xl font-bold">Attributes</h2> -->
+      <!-- <button
+        class="border rounded p-2 hover:bg-slate-200"
+        onclick="toggleBooleanAttribute('search')"
+      >
+        Toggle search
+      </button> -->
+      <!-- <table class="table-auto w-full" >
+        <thead>
+          <tr>
+            <th class="border px-4 py-2">Name</th>
+            <th class="border px-4 py-2">Default</th>
+            <th class="border px-4 py-2">Description</th>
+            <th class="border px-4 py-2">Selected</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td class="border px-4 py-2">apikey</td>
+            <td class="border px-4 py-2"></td>
+            <td class="border px-4 py-2"></td>
+            <td class="border px-4 py-2">
+              <input
+                type="text"
+                class="border"
+                value=""
+                onchange="map.setAttribute('apikey', this.value)"/>
+            </td>
+          </tr>
+          <tr>
+            <td class="border px-4 py-2">search</td>
+            <td class="border px-4 py-2">true</td>
+            <td class="border px-4 py-2"></td>
+            <td class="border px-4 py-2">
+              <select
+              class="border px-4 py-2"
+                name="baselayer"
+                onchange="map.setAttribute(this.name, this.value)">
+                <option value="travic_v2">travic_v2</option>
+                <option value="base_dark_v2">base_dark_v2</option>
+              </select>
+            </td>
+          </tr>
+          <tr>
+            <td class="border px-4 py-2">realtime</td>
+            <td class="border px-4 py-2">true</td>
+            <td class="border px-4 py-2"></td>
+            <td class="border px-4 py-2">
+              <input
+                name="realtime"
+                type="checkbox"
+                checked
+                onchange="toggleBooleanAttribute(this.name)"/>
+            </td>
+          </tr>
+          <tr>
+            <td class="border px-4 py-2">search</td>
+            <td class="border px-4 py-2">true</td>
+            <td class="border px-4 py-2"></td>
+            <td class="border px-4 py-2">
+              <input
+                name="search"
+                type="checkbox"
+                checked
+                onchange="toggleBooleanAttribute(this.name)"/>
+            </td>
+          </tr>
+        </tbody>
+      </table> -->
+      <!-- <br />
+      <br />
+      <h1 class="text-xl font-bold">More mobility web components</h1>
+      <p>
+        <a href="search.html" target="_blank"
+          >&gt;&gt; Usage example Search Component</a
+        >
+      </p> -->
+    </div>
+    <br />
+    <br />
+    <script type="text/javascript">
+      params = new URLSearchParams(window.location.search);
+      // There should be only on map on the html page at this point
+      const doc = document.querySelectorAll("#doc");
+      const map = document.querySelector("geops-mobility");
+      if (params.get("fullscreen") === "true") {
+        map.parentElement.removeChild(map);
+        map.className = "absolute w-full h-full inset-0";
+        document.body.appendChild(map);
+        document.body.style = "padding:0;";
+      } else {
+        doc.forEach((d) => (d.style.display = "block"));
+      }
+      params.delete("fullscreen");
+      if (
+        params.get("permalink") !== "false" &&
+        params.get("x") &&
+        params.get("y")
+      ) {
+        map.setAttribute("center", `${params.get("x")},${params.get("y")}`);
+        params.delete("x");
+        params.delete("y");
+      }
+      if (params.get("permalink") !== "false" && params.get("z")) {
+        map.setAttribute("zoom", params.get("z"));
+        params.delete("z");
+      }
+      // Apply all url parameters as attribute of the web component
+      params.forEach((value, key) => {
+        map.setAttribute(key, value);
+        const input = document.querySelector(`input[name=${key}]`);
+        if (input) {
+          if (input.type === "checkbox") {
+            input.checked = value !== "false";
+          } else {
+           input.value = value;
+          }
+        }
+      });
+      // if (!map.getAttribute("apikey")) {
+      //   fetch("https://backend.developer.geops.io/publickey")
+      //     .then((response) => response.json())
+      //     .then((data) => {
+      //       if (data && data.success) {
+      //         map.setAttribute("apikey", data.key);
+      //       }
+      //     });
+      // }
+      // Listen StopsSearch event
+      window.addEventListener("mwc:stopssearchselect", (event) => {
+        console.log("mwc:stopssearchselect event: ", event.data);
+        // window.top.postMessage(event.data, "*");
+      });
+      // Send url search params to parent window
+      window.addEventListener("mwc:attribute", (event) => {
+        console.log("mwc:attribute event: ", event.data);
+        window.top.postMessage(new URLSearchParams(event.data).toString(), "*");
+      });
+      // Listen window event
+      window.addEventListener("message", (event) => {
+        console.log("message event: ", event);
+      });
+      function toggleBooleanAttribute(name) {
+        const value = map.getAttribute(name);
+        map.setAttribute(name, value === "false" ? "true" : "false");
+        const urlParams = new URLSearchParams(window.location.search);
+        urlParams.set(name, map.getAttribute(name));
+        window.history.replaceState(
+          {},
+          "",
+          `${window.location.pathname}?${urlParams}`,
+        );
+        generateCodeText();
+      }
+      const attrs = [
+          "apikey",
+          "baselayer",
+          "center",
+          "geolocation",
+          "mapsurl",
+          "mots",
+          "notification",
+          "notificationat",
+          "notificationurl",
+          "notificationbeforelayerid",
+          "realtime",
+          "realtimeUrl",
+          "search",
+          "tenant",
+          "zoom",
+          "permalink",
+        ];
+      function generateCodeText() {
+        const codeElt = document.querySelector("#code");
+        let codeText = "";
+        codeText = `&lt;script\n\ttype="module"\n\tsrc="https://www.unpkg.com/@geops/mobility-web-component"&gt;
+&lt;/script&gt;
+&lt;geops-mobility style="height:600px;width:100%;" `;
+        attrs.forEach((key) => {
+          if (key == "apikey") {
+            // codeText += `\n\tapikey="YOUR_GEOPS_API_KEY"`;
+          } else if (map.getAttribute(key) !== null) {
+            codeText += `\n\t${[key, '"' + map.getAttribute(key) + '"'].join("=")}`;
+          } else if (key == "center") {
+            // codeText += `\n\tcenter="831634,5933959"`;
+          } else if (key == "zoom") {
+            // codeText += `\n\tzoom="13"`;
+          } else if (key == "baselayer") {
+            // codeText += `\n\tbaselayer="travic_v2"`;
+          }
+        });
+        code.innerHTML = codeText + `&gt;\n&lt;/geops-mobility&gt;`;
+      }
+      // Initialize value of inputs fields
+      function initInputs() {
+        attrs.forEach((key) => {
+          const input = document.querySelector(`input[name=${key}]`);
+          if (input) {
+            input.value = map.getAttribute(key) || "";
+          }
+        });
+        const inputs = document.querySelectorAll("input");
+        inputs.forEach((input) => {
+          input.addEventListener("change", () => {
+            generateCodeText();
+          });
+        });
+      }
+      initInputs();
+      generateCodeText();
+    </script>
+  </body>
+</html>