@geops/rvf-mobility-web-component 0.1.51 → 0.1.53

package/package.json

@@ -2,7 +2,7 @@
   "name": "@geops/rvf-mobility-web-component",
   "license": "UNLICENSED",
   "description": "Web components for rvf in the domains of mobility and logistics.",
-  "version": "0.1.51",
+  "version": "0.1.53",
   "homepage": "https://rvf-mobility-web-component-geops.vercel.app/",
   "type": "module",
   "main": "index.js",

package/src/RouteScheduleHeader/RouteScheduleHeader.tsx

@@ -4,14 +4,10 @@ import Tracking from "../icons/Tracking";
 import RouteIcon from "../RouteIcon";
 import RouteInfos from "../RouteInfos";
 import IconButton from "../ui/IconButton";
-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 py-2">
       <RouteIcon stopSequence={stopSequence} />
@@ -21,11 +17,7 @@ function RouteScheduleHeader() {
         onClick={() => {
           setIsFollowing(!isFollowing);
         }}
-        style={{
-          /* stylelint-disable-next-line value-keyword-case */
-          backgroundColor: isFollowing ? backgroundColor : "white",
-          color: isFollowing ? color : "black",
-        }}
+        selected={isFollowing}
       >
         <Tracking />
       </IconButton>

package/src/RvfFeatureDetails/RvfSharedMobilityDetail/RvfSharedMobilityDetails.tsx

@@ -45,7 +45,7 @@ function RvfSharedMobilityDetails({
   }, [features, isStationDetails]);
 
   return (
-    <>
+    <div className={"space-y-4"}>
       {isStationDetails && (
         <>
           <img
@@ -72,7 +72,7 @@ function RvfSharedMobilityDetails({
             </Fragment>
           );
         })}
-    </>
+    </div>
   );
 }
 

package/src/RvfLayerTree/TreeItem/TreeItem.tsx

@@ -2,10 +2,8 @@ import { useContext, useEffect, useId, useState } from "preact/compat";
 
 import ArrowDown from "../../icons/ArrowDown";
 import ArrowUp from "../../icons/ArrowUp";
-import minusGrey from "../../icons/Minus/minus-grey.svg";
 import RvfCheckbox from "../../RvfCheckbox";
 import RvfRadioButton from "../../RvfRadioButton";
-import useLayerConfig from "../../utils/hooks/useLayerConfig";
 import { LayersTreeDispatchContext } from "../layersTreeContext";
 
 import type BaseLayer from "ol/layer/Base";
@@ -42,7 +40,6 @@ function TreeItem({
   const dispatch = useContext(LayersTreeDispatchContext);
   const inputId = useId();
   const buttonId = useId();
-  const layerConfig = useLayerConfig(layer.get("name"));
 
   useEffect(() => {
     if (isCollapsedOnControlClick) {
@@ -82,7 +79,7 @@ function TreeItem({
       return <TreeItem key={idx} {...item} />;
     });
 
-  if (!title && !layerConfig.title) {
+  if (!title) {
     return null;
   }
 
@@ -125,7 +122,7 @@ function TreeItem({
           className={`flex-1 cursor-pointer`}
           htmlFor={renderedLayers.length > 0 ? buttonId : inputId}
         >
-          {layerConfig.title || title}
+          {title}
         </label>
         {renderedLayers.length > 0 && (
           <button

package/src/RvfSharedMobilityLayerGroup/RvfSharedMobilityLayerGroup.tsx

@@ -17,7 +17,6 @@ import {
   LAYER_PROP_IS_EXPORTING,
   RVF_EXTENT_4326,
   RVF_LAYERS_NAMES,
-  RVF_LAYERS_TITLES,
   SCOOTER_FORM_FACTOR,
   SOURCE_FREE_FLOAT_BIKE,
   SOURCE_FREE_FLOAT_CAR,
@@ -29,6 +28,7 @@ import {
   WFS_FREE_FLOAT_TYPE,
   WFS_STATIONS_TYPE,
 } from "../utils/constants";
+import useLayersConfig from "../utils/hooks/useLayersConfig";
 import useMapContext from "../utils/hooks/useMapContext";
 import useRvfContext from "../utils/hooks/useRvfContext";
 import { fetchSharingWFS } from "../utils/sharingWFSUtils";
@@ -67,6 +67,7 @@ const fetchStations = async (
 function RvfSharedMobilityLayerGroup(props: GroupOptions) {
   const { baseLayer, map } = useMapContext();
   const { setSharedMobilityLayerGroup } = useRvfContext();
+  const layersConfig = useLayersConfig();
 
   // Layers
   // const [bikeFreloLayer, setBikeFreloLayer] = useState<MaplibreStyleLayer>();
@@ -313,7 +314,7 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
       },
       title: (
         <div className="flex items-center justify-between gap-2">
-          {"Fahrrad, andere Anbieter"}
+          {layersConfig[RVF_LAYERS_NAMES.bikeOthers]?.title}
           <Bicycle />
         </div>
       ),
@@ -329,7 +330,7 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
       name: RVF_LAYERS_NAMES.cargobikeFrelo,
       title: (
         <div className="flex items-center justify-between gap-2">
-          {"Lastenfrelo"}
+          {layersConfig[RVF_LAYERS_NAMES.cargobikeFrelo]?.title}
           <CargoBike />
         </div>
       ),
@@ -345,7 +346,7 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
       name: RVF_LAYERS_NAMES.cargobikeOthers,
       title: (
         <div className="flex items-center justify-between gap-2">
-          {"Lastenrad, andere Anbieter"}
+          {layersConfig[RVF_LAYERS_NAMES.cargobikeOthers]?.title}
           <CargoBike />
         </div>
       ),
@@ -361,7 +362,7 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
       name: RVF_LAYERS_NAMES.carGrf,
       title: (
         <div className="flex items-center justify-between gap-2">
-          {"Grüne Flotte"}
+          {layersConfig[RVF_LAYERS_NAMES.carGrf]?.title}
           <Car />
         </div>
       ),
@@ -377,7 +378,7 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
       name: RVF_LAYERS_NAMES.carNatur,
       title: (
         <div className="flex items-center justify-between gap-2">
-          {"Naturenergie-Sharing"}
+          {layersConfig[RVF_LAYERS_NAMES.carNatur]?.title}
           <Car />
         </div>
       ),
@@ -390,11 +391,10 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
         return metadata?.["rvf.filter"] === "car.other";
       },
       maplibreLayer: baseLayer,
-
       name: RVF_LAYERS_NAMES.carOthers,
       title: (
         <div className="flex items-center justify-between gap-2">
-          {"Auto, andere Anbieter"}
+          {layersConfig[RVF_LAYERS_NAMES.carOthers]?.title}
           <Car />
         </div>
       ),
@@ -410,7 +410,7 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
       name: RVF_LAYERS_NAMES.eroller,
       title: (
         <div className="flex items-center justify-between gap-2">
-          {RVF_LAYERS_TITLES.eroller}
+          {layersConfig[RVF_LAYERS_NAMES.eroller]?.title}
           <Scooter />
         </div>
       ),
@@ -426,7 +426,7 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
       name: RVF_LAYERS_NAMES.mitfahrpunkte,
       title: (
         <div className="flex items-center justify-between gap-2">
-          {RVF_LAYERS_TITLES.mitfahrpunkte}
+          {layersConfig[RVF_LAYERS_NAMES.mitfahrpunkte]?.title}
           <Ride />
         </div>
       ),
@@ -446,7 +446,7 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
       ],
       ...props,
     } as GroupOptions);
-  }, [baseLayer, props]);
+  }, [baseLayer, layersConfig, props]);
 
   // Reload features every minute
   useEffect(() => {

package/src/icons/Ride/Ride.tsx

@@ -2,7 +2,7 @@
 import src from "./rvf_shared_ride.svg";
 
 function Ride({ ...props }) {
-  return <img alt="Ride" src={src} title="Mitfahrpunkte" {...props} />;
+  return <img alt="Ride" src={src} {...props} />;
 }
 
 export default Ride;

package/src/utils/constants.ts

@@ -31,14 +31,21 @@ export const LAYER_PROP_IS_EXPORTING = "isExporting";
 
 export const RVF_LAYERS_TITLES = {
   auto: "Auto",
+  autoandere: "Auto, andere Anbieter",
   cargobike: "Cargobike",
+  cargobikeandere: "Lastenrad, andere Anbieter",
+  cargobikefrelo: "Lastenfrelo",
+  "e-roller": "E-Roller",
   echtzeit: "Echtzeit",
   eroller: "E-Roller",
   fahrrad: "Fahrrad",
+  fahrradandere: "Fahrrad, andere Anbieter",
+  grueneflotte: "Grüne Flotte",
   haltestellen: "Haltestellen",
   liniennetz: "Liniennetz",
   meldungen: "Meldungen",
   mitfahrpunkte: "Mitfahrpunkte",
+  naturenergie: "Naturenergie-Sharing",
   pois: "POIs",
   sharedMobility: "Shared Mobility",
   tarifzonen: "Tarifzonen",
@@ -64,15 +71,18 @@ export const RVF_LAYERS_NAMES = {
   verkaufsstellen: "verkaufsstellen",
 };
 
-export const DEFAULT_QUERYABLE_LAYERS = Object.keys(RVF_LAYERS_NAMES)
+export const DEFAULT_QUERYABLE_LAYERS = Object.values(RVF_LAYERS_NAMES)
   .filter((name) => {
-    return (
-      name !== RVF_LAYERS_NAMES.tarifzonen && name !== RVF_LAYERS_NAMES.pois
-    );
+    return ![
+      RVF_LAYERS_NAMES.haltestellen,
+      RVF_LAYERS_NAMES.mitfahrpunkte,
+      RVF_LAYERS_NAMES.pois,
+      RVF_LAYERS_NAMES.tarifzonen,
+    ].includes(name);
   })
   .toString();
 
-export const LAYERS_WITH_LINK = Object.keys(RVF_LAYERS_NAMES)
+export const LAYERS_WITH_LINK = Object.values(RVF_LAYERS_NAMES)
   .filter((name) => {
     return (
       name !== RVF_LAYERS_NAMES.tarifzonen &&

package/src/utils/hooks/useLayerConfig.tsx

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

package/src/utils/hooks/useLayersConfig.tsx

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