@geops/rvf-mobility-web-component 0.1.46 → 0.1.47-beta.0

package/src/utils/hooks/useInitialLayersVisiblity.tsx

@@ -1,10 +1,11 @@
-import { Map } from "ol";
 import { unByKey } from "ol/Observable";
 import { useEffect } from "preact/hooks";
 
 import applyInitialLayerVisibility from "../applyInitialLayerVisibility";
 import getLayersAsFlatArray from "../getLayersAsFlatArray";
 
+import type { Map } from "ol";
+
 const useInitialLayersVisiblity = (map: Map, layers: string) => {
   // Apply initial visibility of layers from layers attribute
   useEffect(() => {

package/src/utils/hooks/useLayerConfig.tsx

@@ -0,0 +1,39 @@
+import { useEffect, useState } from "preact/hooks";
+
+import { RVF_LAYERS_TITLES } from "../constants";
+
+import useMapContext from "./useMapContext";
+
+export interface LayerConfig {
+  link?: {
+    href?: string;
+    text?: string;
+  };
+  title?: string;
+}
+export type LayersConfig = Record<string, LayerConfig>;
+
+function useLayerConfig(layerName) {
+  const { layersconfig } = useMapContext();
+  const [layersConfig, setLayersConfig] = useState<LayersConfig>({});
+
+  useEffect(() => {
+    try {
+      const config = JSON.parse(layersconfig || "{}");
+      setLayersConfig(config);
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error("Error parsing layersconfig:", error);
+    }
+  }, [layersconfig]);
+
+  // Set defaultstyle if not present in layersconfig
+  const layerConfig = layersConfig[layerName] || ({} as LayerConfig);
+  if (!layerConfig.title) {
+    layerConfig.title = RVF_LAYERS_TITLES[layerName];
+  }
+
+  return layerConfig;
+}
+
+export default useLayerConfig;

package/src/utils/hooks/useMapContext.tsx

@@ -1,37 +1,47 @@
-/* eslint-disable @typescript-eslint/no-empty-function */
-import {
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { createContext } from "preact";
+import { useContext } from "preact/hooks";
+
+import type {
   MaplibreLayer,
   MaplibreStyleLayer,
   RealtimeLayer,
 } from "mobility-toolbox-js/ol";
-import {
-  MocoNotification,
+import type {
   RealtimeStation,
   RealtimeStationId,
   RealtimeStopSequence,
   RealtimeTrainId,
+  SituationType,
 } from "mobility-toolbox-js/types";
-import { Map } from "ol";
-import { createContext } from "preact";
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { useContext } from "preact/hooks";
+import type { Feature, Map } from "ol";
 
 import type { MobilityMapProps } from "../../MobilityMap/MobilityMap";
 
 export type MapContextType = {
   baseLayer: MaplibreLayer;
+  isEmbed: boolean;
   isFollowing: boolean;
   isTracking: boolean;
   layers: string;
   map: Map;
-  previewNotification?: MocoNotification;
+  permalinkUrlSearchParams: URLSearchParams;
+  previewNotifications?: SituationType[];
+  queryablelayers: string;
   realtimeLayer: RealtimeLayer;
+  selectedFeature: Feature;
+  selectedFeatures: Feature[];
   setBaseLayer: (baseLayer: MaplibreLayer) => void;
   setIsFollowing: (isFollowing: boolean) => void;
   setIsTracking: (isTracking: boolean) => void;
   setMap: (map?: Map) => void;
-  setPreviewNotification: (previewNotification?: MocoNotification) => void;
+  setPermalinkUrlSearchParams: (
+    permalinkUrlSearchParams: URLSearchParams,
+  ) => void;
+  setPreviewNotifications: (setPreviewNotifications?: SituationType[]) => void;
   setRealtimeLayer: (realtimeLayer?: RealtimeLayer) => void;
+  setSelectedFeature: (feature: Feature) => void;
+  setSelectedFeatures: (features: Feature[]) => void;
   setStation: (station?: RealtimeStation) => void;
   setStationId: (stationId?: RealtimeStationId) => void;
   setStationsLayer: (stationsLayer?: MaplibreStyleLayer) => void;
@@ -45,29 +55,31 @@ export type MapContextType = {
 } & MobilityMapProps;
 
 export const MapContext = createContext<MapContextType>({
-  baseLayer: null,
+  isEmbed: false,
   isFollowing: false,
   isTracking: false,
   layers: null,
   map: null,
-  previewNotification: null,
+  previewNotifications: null,
+  queryablelayers: null,
   realtimeLayer: null,
+  selectedFeatures: [],
   setBaseLayer: (baseLayer?: MaplibreLayer) => {},
   setIsFollowing: (isFollowing: boolean) => {},
   setIsTracking: (isTracking: boolean) => {},
   setMap: (map?: Map) => {},
-  setPreviewNotification: (previewNotification?: MocoNotification) => {},
+  setPermalinkUrlSearchParams: (
+    permalinkUrlSearchParams: URLSearchParams,
+  ) => {},
+  setPreviewNotifications: (previewNotifications?: SituationType[]) => {},
   setRealtimeLayer: (realtimeLayer?: RealtimeLayer) => {},
+  setSelectedFeature: (feature: Feature) => {},
+  setSelectedFeatures: (features: Feature[]) => {},
   setStation: (station?: RealtimeStation) => {},
   setStationId: (stationId?: RealtimeStationId) => {},
   setStationsLayer: (stationsLayer?: MaplibreStyleLayer) => {},
   setStopSequence: (stopSequence?: RealtimeStopSequence) => {},
   setTrainId: (trainId?: RealtimeTrainId) => {},
-  station: null,
-  stationId: null,
-  stationsLayer: null,
-  stopSequence: null,
-  trainId: null,
 } as MapContextType);
 
 const useMapContext = (): MapContextType => {

package/src/utils/hooks/useRouteStop.tsx

@@ -1,8 +1,9 @@
-import { RealtimeStation, RealtimeStop } from "mobility-toolbox-js/types";
 import { createContext } from "preact";
 import { useContext } from "preact/hooks";
 
-import { StopStatus } from "../getStopStatus";
+import type { RealtimeStation, RealtimeStop } from "mobility-toolbox-js/types";
+
+import type { StopStatus } from "../getStopStatus";
 
 export interface RouteStopContextType {
   index?: number;

package/src/utils/hooks/useRvfContext.tsx

@@ -1,12 +1,15 @@
-import { MaplibreStyleLayer } from "mobility-toolbox-js/ol";
-import { Feature } from "ol";
-import { Group } from "ol/layer";
+/* eslint-disable no-console */
 import { createContext } from "preact";
 import { useContext } from "preact/hooks";
 
+import type { MaplibreStyleLayer } from "mobility-toolbox-js/ol";
+import type { Feature } from "ol";
+import type { Group } from "ol/layer";
+
 export interface RvfContextType {
   isExportMenuOpen: boolean;
   isLayerTreeOpen: boolean;
+  isSearchOpen: boolean;
   isShareMenuOpen: boolean;
   lineNetworkPlanLayer: MaplibreStyleLayer;
   poisLayer: MaplibreStyleLayer;
@@ -15,6 +18,7 @@ export interface RvfContextType {
   sellingPointsLayer: MaplibreStyleLayer;
   setIsExportMenuOpen: (isOpen: boolean) => void;
   setIsLayerTreeOpen: (isOpen: boolean) => void;
+  setIsSearchOpen: (isOpen: boolean) => void;
   setIsShareMenuOpen: (isOpen: boolean) => void;
   setLineNetworkPlanLayer: (layer: MaplibreStyleLayer) => void;
   setPoisLayer: (layer: MaplibreStyleLayer) => void;
@@ -30,6 +34,7 @@ export interface RvfContextType {
 export const RvfContext = createContext<RvfContextType>({
   isExportMenuOpen: false,
   isLayerTreeOpen: false,
+  isSearchOpen: false,
   isShareMenuOpen: false,
   lineNetworkPlanLayer: null,
   poisLayer: null,
@@ -42,6 +47,9 @@ export const RvfContext = createContext<RvfContextType>({
   setIsLayerTreeOpen: () => {
     console.warn("setIsLayerTreeOpen is not implemented");
   },
+  setIsSearchOpen: () => {
+    console.warn("setIsSearchOpen is not implemented");
+  },
   setIsShareMenuOpen: () => {
     console.warn("setIsShareMenuOpen is not implemented");
   },

package/src/utils/hooks/useStation.tsx

@@ -1,7 +1,8 @@
-import { RealtimeStation } from "mobility-toolbox-js/types";
 import { createContext } from "preact";
 import { useContext } from "preact/hooks";
 
+import type { RealtimeStation } from "mobility-toolbox-js/types";
+
 export interface StationContextType {
   station?: RealtimeStation;
 }

package/src/utils/hooks/useUpdatePermalink.tsx

@@ -1,18 +1,38 @@
 import debounce from "lodash.debounce";
-import { Map } from "ol";
-import { EventsKey } from "ol/events";
+import { getLayersAsFlatArray } from "mobility-toolbox-js/ol";
 import { unByKey } from "ol/Observable";
-import { MutableRef, useEffect } from "preact/hooks";
+import { useEffect } from "preact/hooks";
 
 import { LAYER_PROP_IS_EXPORTING } from "../constants";
-import getLayersAsFlatArray from "../getLayersAsFlatArray";
 import getPermalinkParameters from "../getPermalinkParameters";
 import MobilityEvent from "../MobilityEvent";
 
+import type { Map } from "ol";
+import type { EventsKey } from "ol/events";
+import type { MutableRef } from "preact/hooks";
+
+const updatePermalink = (
+  map: Map,
+  eventNodeRef: MutableRef<HTMLDivElement>,
+) => {
+  // No update when exporting
+  if (map.get(LAYER_PROP_IS_EXPORTING)) {
+    return;
+  }
+  const currentUrlParams = new URLSearchParams(window.location.search);
+  const urlParams = getPermalinkParameters(map, currentUrlParams);
+  urlParams.set("permalink", "true");
+  window.history.replaceState(null, null, `?${urlParams.toString()}`);
+  eventNodeRef?.current?.dispatchEvent(
+    new MobilityEvent<string>("mwc:permalink", window.location.href),
+  );
+};
+
+const updatePermalinkDebounced = debounce(updatePermalink, 1000);
+
 /**
  * This hook only update parameters in the url, it does not apply the url parameters.
  */
-
 const useUpdatePermalink = (
   map: Map,
   permalink: boolean,
@@ -53,23 +73,4 @@ const useUpdatePermalink = (
   return null;
 };
 
-const updatePermalink = (
-  map: Map,
-  eventNodeRef: MutableRef<HTMLDivElement>,
-) => {
-  // No update when exporting
-  if (map.get(LAYER_PROP_IS_EXPORTING)) {
-    return;
-  }
-  const currentUrlParams = new URLSearchParams(window.location.search);
-  const urlParams = getPermalinkParameters(map, currentUrlParams);
-  urlParams.set("permalink", "true");
-  window.history.replaceState(null, null, `?${urlParams.toString()}`);
-  eventNodeRef?.current?.dispatchEvent(
-    new MobilityEvent<string>("mwc:permalink", window.location.href),
-  );
-};
-
-const updatePermalinkDebounced = debounce(updatePermalink, 1000);
-
 export default useUpdatePermalink;

package/src/utils/hooks/useZoom.tsx

@@ -24,12 +24,12 @@ const useZoom = () => {
     let zoomListener = view.on("change:resolution", onZoomChange);
 
     const key = map.on("change:view", () => {
-      const view = map.getView();
+      const vieww = map.getView();
       unByKey(zoomListener);
-      if (view) {
-        setZoom(view.getZoom());
+      if (vieww) {
+        setZoom(vieww.getZoom());
       }
-      zoomListener = view.on("change:resolution", onZoomChange);
+      zoomListener = vieww.on("change:resolution", onZoomChange);
     });
 
     return () => {

package/src/utils/realtimeRVFStyle.ts

@@ -1,5 +1,9 @@
 import { createCanvas } from "mobility-toolbox-js/ol";
-import {
+
+// @ts-expect-error - svg loaded as dataurl
+import noRealtime from "../icons/NoRealtime/norealtime.svg";
+
+import type {
   AnyCanvasContext,
   RealtimeStyleFunction,
   RealtimeStyleOptions,
@@ -7,9 +11,6 @@ import {
   StyleCache,
   ViewState,
 } from "mobility-toolbox-js/types";
-
-// @ts-expect-error - svg loaded as dataurl
-import noRealtime from "../icons/NoRealtime/norealtime.svg";
 const cacheNoRealtime: StyleCache = {};
 
 const image = new Image(42, 42); // Using optional size for image

package/src/utils/sharingGraphqlUtils.ts

@@ -1,9 +1,10 @@
-import { FeatureCollection, Point } from "geojson";
 import { gql, GraphQLClient } from "graphql-request";
-import { Extent } from "ol/extent";
 
 import { RVF_EXTENT_4326 } from "./constants";
 
+import type { FeatureCollection, Point } from "geojson";
+import type { Extent } from "ol/extent";
+
 const GQL_URL = "https://api.mobidata-bw.de/sharing/graphql";
 
 export interface SharingStation {

package/src/utils/sharingStylesUtils.ts

@@ -4,7 +4,7 @@ export const getSharingStyleLayers = (
 ) => {
   return [
     {
-      id: sourceId + "_circle",
+      id: `${sourceId}_circle`,
       maxZoom: 16,
       minzoom: 14,
       paint: {
@@ -17,7 +17,7 @@ export const getSharingStyleLayers = (
       type: "circle",
     },
     {
-      id: sourceId + "_image_text",
+      id: `${sourceId}_image_text`,
       layout: {
         "icon-image": image,
         "icon-size": 1,
@@ -51,7 +51,7 @@ export const getSharingStyleLayers = (
     },
     {
       filter: ["==", "is_free_float", false],
-      id: sourceId + "_availability",
+      id: `${sourceId}_availability`,
       layout: {
         "icon-allow-overlap": true,
         "icon-anchor": "center",
@@ -86,7 +86,7 @@ export const getSharingStyleLayers = (
     // freefloat style
     {
       filter: ["==", "is_free_float", true],
-      id: sourceId + "_availability_freefloat",
+      id: `${sourceId}_availability_freefloat`,
       layout: {
         "icon-allow-overlap": true,
         "icon-anchor": "center",
@@ -122,7 +122,7 @@ export const getSharingClusterStyleLayers = (
 ) => {
   return [
     {
-      id: sourceId + "_image_text",
+      id: `${sourceId}_image_text`,
       layout: {
         "icon-allow-overlap": true,
         "icon-ignore-placement": true,
@@ -161,7 +161,7 @@ export const getSharingClusterStyleLayers = (
     // cluster style
     {
       filter: ["has", "point_count"],
-      id: sourceId + "_availability2",
+      id: `${sourceId}_availability2`,
       layout: {
         "icon-allow-overlap": true,
         "icon-anchor": "center",
@@ -191,7 +191,7 @@ export const getSharingClusterStyleLayers = (
     // non cluster style
     {
       filter: ["!", ["has", "point_count"]],
-      id: sourceId + "_availability3",
+      id: `${sourceId}_availability3`,
       layout: {
         "icon-allow-overlap": true,
         "icon-anchor": "center",

package/src/utils/sharingWFSUtils.ts

@@ -1,8 +1,8 @@
-import { Feature, FeatureCollection, Point } from "geojson";
-import { Extent } from "ol/extent";
-
 import { PROVIDER_BY_FEED_ID, RVF_EXTENT_4326 } from "./constants";
 
+import type { Feature, FeatureCollection, Point } from "geojson";
+import type { Extent } from "ol/extent";
+
 // This info are added on each request
 export interface SharingDynamicInfo {
   display_num_vehicles_available: boolean; // added dynamically, used to avoid display this info when printing
@@ -51,18 +51,12 @@ export const getSharingWFSUrl = (
   extent4326: Extent = RVF_EXTENT_4326,
 ) => {
   return (
-    "https://api.mobidata-bw.de/geoserver/MobiData-BW/" +
-    wfsTypeName +
-    "/ows" +
-    "?service=WFS&" +
-    "version=1.1.0&request=GetFeature&typename=" +
-    "MobiData-BW:" +
-    wfsTypeName +
-    "&" +
-    "outputFormat=application/json&" +
-    "bbox=" +
-    extent4326.toString() +
-    ",EPSG:4326"
+    `https://api.mobidata-bw.de/geoserver/MobiData-BW/${wfsTypeName}/ows` +
+    `?service=WFS&` +
+    `version=1.1.0&request=GetFeature&typename=` +
+    `MobiData-BW:${wfsTypeName}&` +
+    `outputFormat=application/json&` +
+    `bbox=${extent4326.toString()},EPSG:4326`
   );
 };
 

package/tailwind.config.mjs

@@ -62,6 +62,7 @@ export default {
         ultralightgrey: "#F5F5F5", // ultralight grey
       },
       rounded: {
+        "2xl": "16px",
         xl: "12px",
       },
       width: {

package/tsconfig.json

@@ -6,7 +6,7 @@
     "resolveJsonModule": true,
     "downlevelIteration": true,
     "lib": ["ES2015"],
-  },
+  },  
   "exclude": ["node_modules", "**/*.png"],
   "types": ["esbuild-style-plugin"]
 }

package/doc/tailwind.config.ts

@@ -1,20 +0,0 @@
-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/src/utils/getFeatureInformationTitle.tsx

@@ -1,54 +0,0 @@
-import { Feature } from "ol";
-
-import { icons } from "./addSourceAndLayers";
-import {
-  RVF_LAYERS_TITLES,
-  TITLE_BY_CATEGORY,
-  TITLE_BY_FEED_ID,
-} from "./constants";
-
-const defaultTitle = "Informations";
-
-const getFeatureInformationTitle = (feature: Feature) => {
-  const features = feature.get("features");
-  const selectedFeature = features?.[0] || feature;
-  const {
-    category,
-    disruption_type: disruptionType,
-    feed_id: feedId,
-    line_id: lineId,
-    tickets,
-    title,
-  } = selectedFeature.getProperties();
-
-  if (disruptionType) {
-    return (
-      <div className={"flex items-center gap-2 text-sm"}>
-        <div className="min-w-8 shrink-0 grow-0">
-          <img
-            alt={disruptionType}
-            className={"w-8"}
-            src={icons[disruptionType]}
-          ></img>
-        </div>
-        <div className={"flex flex-col gap-2 text-base font-bold"}>{title}</div>
-      </div>
-    );
-  }
-  if (category) {
-    return TITLE_BY_CATEGORY[category] || defaultTitle;
-  }
-  if (feedId) {
-    return TITLE_BY_FEED_ID[feedId] || defaultTitle;
-  }
-
-  if (lineId) {
-    return RVF_LAYERS_TITLES.liniennetz;
-  }
-  if (tickets) {
-    return RVF_LAYERS_TITLES.verkaufsstellen;
-  }
-  return defaultTitle;
-};
-
-export default getFeatureInformationTitle;