@geops/rvf-mobility-web-component 0.1.16 → 0.1.17

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.16",
+  "version": "0.1.17",
   "homepage": "https://rvf-mobility-web-component-geops.vercel.app/",
   "type": "module",
   "main": "index.js",

package/src/RvfFeatureDetails/RvfSharedMobilityDetail/RvfSharedMobilityDetails.tsx

@@ -28,17 +28,6 @@ const logos = {
   zeus_freiburg: zeusLogo,
 };
 
-const categories = {
-  callabike_ice: "Bike Sharing",
-  flinkster_carsharing: "Car Sharing",
-  "gruene-flotte_freiburg": "Car Sharing",
-  lastenvelo_fr: "Cargo Bike Sharing",
-  naturenergie_sharing: "Car Sharing",
-  nextbike_df: "Bike Sharing",
-  yoio_freiburg: "E-Scooter",
-  zeus_freiburg: "E-Scooter",
-};
-
 function RvfSharedMobilityDetails({
   selectedFeature,
 }: RvfSharedMobilityDetailsProps) {
@@ -56,6 +45,7 @@ function RvfSharedMobilityDetails({
     extent[3] = extent[3] + 2;
     const categoryName = selectedFeature.get("category")?.toLowerCase();
     let featureType;
+    let abortController;
 
     if (categoryName) {
       if (categoryName === "bike sharing") {
@@ -65,13 +55,18 @@ function RvfSharedMobilityDetails({
       } else if (categoryName === "cargo bike sharing") {
         featureType = API_REQUEST_FEATURE_TYPE.stations.cargoBike;
       }
+      abortController = new AbortController();
 
-      fetch(createRequestLink(featureType, extent))
+      fetch(createRequestLink(featureType, extent), {
+        signal: new AbortController().signal,
+      })
         .then((res) => {
           return res.json();
         })
         .then((data) => {
-          selectedFeature.setProperties(data.features[0].properties);
+          if (data.features?.[0].properties) {
+            selectedFeature.setProperties(data.features[0].properties);
+          }
           setFeatures([selectedFeature]);
         })
         .catch((err) => {
@@ -84,6 +79,9 @@ function RvfSharedMobilityDetails({
         setFeatures([selectedFeature]);
       }
     }
+    return () => {
+      abortController?.abort();
+    };
   }, [selectedFeature, isFloatingVehicle]);
 
   const createRequestLink = (name, extent) => {
@@ -111,10 +109,6 @@ function RvfSharedMobilityDetails({
           className="max-w-24"
           src={logos[features[0]?.get("feed_id")]}
         />
-        <span className="ml-4">
-          {selectedFeature.get("category") ||
-            categories[features[0]?.get("feed_id")]}
-        </span>
       </div>
       {features.length && isStationDetails && (
         <StationDetails feature={features[0]} />

package/src/RvfFeatureDetails/RvfSharedMobilityDetail/StationDetails/StationDetails.tsx

@@ -1,22 +1,30 @@
 import { Feature } from "ol";
+import { useMemo } from "preact/hooks";
 
+import RvfButton from "../../../RvfButton";
 import getLinkByDevice from "../../../utils/getLinkByDevice";
 export interface StationDetailsProps {
   feature: Feature;
 }
 
 function StationDetails({ feature }: StationDetailsProps) {
+  const link = useMemo(() => {
+    return getLinkByDevice(feature);
+  }, [feature]);
+
   return (
     <div className="flex flex-col">
       {feature.get("num_vehicles_available")} Fahrzeuge
-      <a
-        className="mx-auto mt-[40%] rounded-xl border border-grey px-2 py-1 text-xl text-grey hover:border-red hover:text-red"
-        href={getLinkByDevice(feature)}
-        rel="noreferrer"
-        target="_blank"
-      >
-        Jetzt buchen
-      </a>
+      {link && (
+        <a
+          className={"my-12 flex items-center justify-center"}
+          href={link}
+          rel="noreferrer"
+          target="_blank"
+        >
+          <RvfButton>Jetzt buchen</RvfButton>
+        </a>
+      )}
     </div>
   );
 }

package/src/RvfMobilityMap/RvfMobilityMap.tsx

@@ -54,7 +54,8 @@ import Station from "../Station";
 import StationsLayer from "../StationsLayer";
 // @ts-expect-error bad type definition
 import tailwind from "../style.css";
-import { RVF_EXTENT_3857 } from "../utils/constants";
+import { RVF_EXTENT_3857, RVF_LAYERS_TITLES } from "../utils/constants";
+import getFeatureInformationTitle from "../utils/getFeatureInformationTitle";
 import { I18nContext } from "../utils/hooks/useI18n";
 import useInitialLayersVisiblity from "../utils/hooks/useInitialLayersVisiblity";
 import { MapContext } from "../utils/hooks/useMapContext";
@@ -460,24 +461,31 @@ function RvfMobilityMap({
                 <SingleClickListener />
                 <RvfSelectedFeatureHighlightLayer />
 
-                {hasRealtime && <RealtimeLayer title="Echtzeit" />}
+                {hasRealtime && (
+                  <RealtimeLayer title={RVF_LAYERS_TITLES.echtzeit} />
+                )}
                 {
                   <StationsLayer
                     minZoom={10}
-                    title="Haltestellen"
+                    title={RVF_LAYERS_TITLES.haltestellen}
                     {...stationsLayerProps}
                   />
                 }
                 {hasNotification && <NotificationLayer />}
-                <RvfTarifZonenLayer title="Tarifzonen" />
-                <RvfSellingPointsLayer isQueryable title="Verkaufsstellen" />
+                <RvfTarifZonenLayer title={RVF_LAYERS_TITLES.tarifzonen} />
+                <RvfSellingPointsLayer
+                  isQueryable
+                  title={RVF_LAYERS_TITLES.verkaufsstellen}
+                />
                 <RvfLineNetworkPlanLayer
                   isQueryable
                   minZoom={10}
-                  title="Liniennetz"
+                  title={RVF_LAYERS_TITLES.liniennetz}
+                />
+                <RvfPoisLayer title={RVF_LAYERS_TITLES.pois} />
+                <RvfSharedMobilityLayerGroup
+                  title={RVF_LAYERS_TITLES.sharedMobility}
                 />
-                <RvfPoisLayer title="POIs" />
-                <RvfSharedMobilityLayerGroup title="Shared Mobility" />
 
                 <div className="absolute inset-x-2 bottom-2 z-10 flex items-end justify-between gap-2 text-[10px]">
                   <ScaleLine className="bg-slate-50/70" />
@@ -522,7 +530,7 @@ function RvfMobilityMap({
                       onClose={() => {
                         setTrainId(null);
                       }}
-                      title="Train"
+                      title={RVF_LAYERS_TITLES.echtzeit}
                     ></RvfOverlayHeader>
                     <RouteSchedule className="relative overflow-y-auto  overflow-x-hidden" />
                   </>
@@ -544,7 +552,7 @@ function RvfMobilityMap({
                       onClose={() => {
                         setSelectedFeature(null);
                       }}
-                      title="Informations"
+                      title={getFeatureInformationTitle(selectedFeature)}
                     ></RvfOverlayHeader>
                     <RvfFeatureDetails className="relative flex flex-col gap-2 overflow-y-auto overflow-x-hidden  px-2 pt-2" />
                   </>

package/src/RvfSharedMobilityLayerGroup/RvfSharedMobilityLayerGroup.tsx

@@ -14,7 +14,11 @@ import Car from "../icons/Car";
 import CargoBike from "../icons/CargoBike";
 import Ride from "../icons/Ride";
 import Scooter from "../icons/Scooter";
-import { API_REQUEST_FEATURE_TYPE, RVF_LAYERS_NAMES } from "../utils/constants";
+import {
+  API_REQUEST_FEATURE_TYPE,
+  RVF_LAYERS_NAMES,
+  RVF_LAYERS_TITLES,
+} from "../utils/constants";
 import createFreeFloatMobilityLayer from "../utils/createFreeFloatMobilityLayer";
 import createMobiDataBwWfsLayer from "../utils/createMobiDataBwWfsLayer";
 import useMapContext from "../utils/hooks/useMapContext";
@@ -53,7 +57,7 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
       name: RVF_LAYERS_NAMES.fahrrad,
       title: (
         <div className="flex items-center justify-between gap-2">
-          Fahrrad
+          {RVF_LAYERS_TITLES.fahrrad}
           <Bicycle />
         </div>
       ),
@@ -82,7 +86,7 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
       name: RVF_LAYERS_NAMES.auto,
       title: (
         <div className="flex items-center justify-between gap-2">
-          Auto
+          {RVF_LAYERS_TITLES.auto}
           <Car />
         </div>
       ),
@@ -111,7 +115,7 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
       name: RVF_LAYERS_NAMES.cargobike,
       title: (
         <div className="flex items-center justify-between gap-2">
-          Cargobike
+          {RVF_LAYERS_TITLES.cargobike}
           <CargoBike />
         </div>
       ),
@@ -142,7 +146,7 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
       name: RVF_LAYERS_NAMES.eroller,
       title: (
         <div className="flex items-center justify-between gap-2">
-          E-Roller
+          {RVF_LAYERS_TITLES.eroller}
           <Scooter />
         </div>
       ),
@@ -157,7 +161,7 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
       name: RVF_LAYERS_NAMES.mitfahrpunkte,
       title: (
         <div className="flex items-center justify-between gap-2">
-          Mitfahrpunkte
+          {RVF_LAYERS_TITLES.mitfahrpunkte}
           <Ride />
         </div>
       ),

package/src/utils/constants.ts

@@ -10,6 +10,21 @@ export const RVF_EXTENT_3857 = transformExtent(
 
 export const LAYER_PROP_IS_EXPORTING = "isExporting";
 
+export const RVF_LAYERS_TITLES = {
+  auto: "Auto",
+  cargobike: "Cargobike",
+  echtzeit: "Echtzeit",
+  eroller: "E-Roller",
+  fahrrad: "Fahrrad",
+  haltestellen: "Haltestellen",
+  liniennetz: "Liniennetz",
+  mitfahrpunkte: "Mitfahrpunkte",
+  pois: "POIs",
+  sharedMobility: "Shared Mobility",
+  tarifzonen: "Tarifzonen",
+  verkaufsstellen: "Verkaufsstellen",
+};
+
 export const RVF_LAYERS_NAMES = {
   auto: "auto",
   cargobike: "cargobike",
@@ -39,3 +54,21 @@ export const API_REQUEST_FEATURE_TYPE = {
     scooter: "sharing_stations_scooters_standing",
   },
 };
+
+export const TITLE_BY_FEED_ID = {
+  callabike_ice: RVF_LAYERS_TITLES.fahrrad,
+  flinkster_carsharing: RVF_LAYERS_TITLES.auto,
+  "gruene-flotte_freiburg": RVF_LAYERS_TITLES.auto,
+  lastenvelo_fr: RVF_LAYERS_TITLES.cargobike,
+  naturenergie_sharing: RVF_LAYERS_TITLES.auto,
+  nextbike_df: RVF_LAYERS_TITLES.fahrrad,
+  yoio_freiburg: RVF_LAYERS_TITLES.eroller,
+  zeus_freiburg: RVF_LAYERS_TITLES.eroller,
+};
+
+export const TITLE_BY_CATEGORY = {
+  "Bike Sharing": RVF_LAYERS_TITLES.fahrrad,
+  "Cargo Bike Sharing": RVF_LAYERS_TITLES.cargobike,
+  "Car Sharing": RVF_LAYERS_TITLES.auto,
+  "E-Scooter": RVF_LAYERS_TITLES.eroller,
+};

package/src/utils/getFeatureInformationTitle.ts

@@ -0,0 +1,37 @@
+import { Feature } from "ol";
+
+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,
+    feed_id: feedId,
+    long_name: longName,
+    tickets,
+  } = selectedFeature.getProperties();
+
+  if (category) {
+    return TITLE_BY_CATEGORY[category] || defaultTitle;
+  }
+  if (feedId) {
+    return TITLE_BY_FEED_ID[feedId] || defaultTitle;
+  }
+
+  if (longName) {
+    return RVF_LAYERS_TITLES.liniennetz;
+  }
+  if (tickets) {
+    return RVF_LAYERS_TITLES.verkaufsstellen;
+  }
+  return defaultTitle;
+};
+
+export default getFeatureInformationTitle;

package/src/utils/getLinkByDevice.ts

@@ -5,21 +5,16 @@ function getLinkByDevice(feature: Feature): string {
   const androidLink = feature.get("rental_uris_android");
   const webLink = feature.get("rental_uris_web");
   if (
-    navigator.userAgent.includes("iPhone") ||
-    navigator.userAgent.includes("iPad") ||
-    navigator.userAgent.includes("iPod")
+    iosLink &&
+    (navigator.userAgent.includes("iPhone") ||
+      navigator.userAgent.includes("iPad") ||
+      navigator.userAgent.includes("iPod"))
   ) {
-    if (iosLink) {
-      return iosLink;
-    } else {
-      return webLink;
-    }
-  } else if (navigator.userAgent.includes("Android")) {
-    if (androidLink) {
-      return androidLink;
-    } else {
-      return webLink;
-    }
+    return iosLink;
+  }
+
+  if (androidLink && navigator.userAgent.includes("Android")) {
+    return androidLink;
   }
 
   return webLink;