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

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

package/src/RvfFeatureDetails/RvfSharedMobilityDetail/FloatingVehiclesDetails/FloatingVehiclesDetails.tsx

@@ -1,5 +1,7 @@
 import { Feature } from "ol";
 
+import RvfButton from "../../../RvfButton";
+import { PROVIDER_BY_FEED_ID } from "../../../utils/constants";
 import getLinkByDevice from "../../../utils/getLinkByDevice";
 
 export interface FloatingVehiclesDetailsProps {
@@ -9,28 +11,45 @@ export interface FloatingVehiclesDetailsProps {
 function FloatingVehiclesDetails({ features }: FloatingVehiclesDetailsProps) {
   const renderedDetails = features.map((feature, idx) => {
     let vehicleNumber;
-    if (feature.get("feed_id") === "yoio_freiburg") {
-      vehicleNumber = feature.get("rental_uris_android").split("/").pop();
-    } else if (feature.get("feed_id") === "zeus_freiburg") {
+    const { feed_id: feedId, rental_uris_android: androidLink } =
+      feature.getProperties();
+    if (/yoio/.test(feedId)) {
+      vehicleNumber = androidLink.split("/").pop();
+    } else if (/zeus/.test(feedId)) {
       const url = new URL(feature.get("rental_uris_web"));
       vehicleNumber = new URLSearchParams(url.search).get("vehicle");
+    } else if (/nextbike/.test(feedId)) {
+      const url = new URL(androidLink);
+      vehicleNumber = new URLSearchParams(url.search).get("id");
     }
 
     const scooterLink = getLinkByDevice(feature);
     const availableDistanceString = feature
       .get("current_range_meters")
-      .toLocaleString()
+      ?.toLocaleString()
+      ?.replace(".", "'")
       .replace(",", "'");
 
+    const distance = availableDistanceString
+      ? ` (${availableDistanceString} m)`
+      : null;
+
+    if (!vehicleNumber || !scooterLink) {
+      return null;
+    }
     return (
       <li className="p-1" key={idx}>
         <a href={scooterLink} key={idx} rel="noreferrer" target="_blank">
-          {`${vehicleNumber} (${availableDistanceString} m)`}
+          {`${vehicleNumber}`}
+          {distance}
         </a>
       </li>
     );
   });
 
+  const feedId = features?.[0].get("feed_id");
+  const link = getLinkByDevice(features?.[0]);
+
   return (
     <div className="flex flex-col overflow-scroll">
       {features.length} Fahrzeuge
@@ -38,14 +57,18 @@ function FloatingVehiclesDetails({ features }: FloatingVehiclesDetailsProps) {
       <ul className="h-screen list-disc overflow-scroll pl-4 underline underline-offset-2">
         {renderedDetails}
       </ul>
-      <a
-        className="mx-auto text-lg text-grey hover:text-red"
-        href={getLinkByDevice(features[0])}
-        rel="noreferrer"
-        target="_blank"
-      >
-        Über {features[0].get("feed_id").split("_")[0].toUpperCase()}
-      </a>
+      {feedId && link && (
+        <a
+          className="mx-auto  text-grey hover:text-red"
+          href={link}
+          rel="noreferrer"
+          target="_blank"
+        >
+          <RvfButton className={"border-none"}>
+            Über {PROVIDER_BY_FEED_ID[feedId]}
+          </RvfButton>
+        </a>
+      )}
     </div>
   );
 }

package/src/RvfSharedMobilityLayerGroup/RvfSharedMobilityLayerGroup.tsx

@@ -51,7 +51,7 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
         createFreeFloatMobilityLayer(
           API_REQUEST_FEATURE_TYPE.freeFloat.bike,
           "green",
-          "bike",
+          "bicycle",
         ),
       ],
       name: RVF_LAYERS_NAMES.fahrrad,
@@ -109,7 +109,7 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
         createFreeFloatMobilityLayer(
           API_REQUEST_FEATURE_TYPE.freeFloat.cargoBike,
           "green",
-          "cargo_bike",
+          "cargo_bicycle",
         ),
       ],
       name: RVF_LAYERS_NAMES.cargobike,

package/src/utils/constants.ts

@@ -72,3 +72,22 @@ export const TITLE_BY_CATEGORY = {
   "Car Sharing": RVF_LAYERS_TITLES.auto,
   "E-Scooter": RVF_LAYERS_TITLES.eroller,
 };
+
+export const PROVIDER_BY_FEED_ID = {
+  callabike_ice: "Call a Bike",
+  flinkster_carsharing: "Flinkster",
+  gruene_flotte_freiburg: "Die Grüne\nFlotte",
+  lastenvelo_fr: "LastenVelo",
+  naturenergie_sharing: "naturenergie\nsharing",
+  nextbike_df: "Frelo",
+  yoio_freiburg: "Yoio",
+  zeus_freiburg: "ZEUS",
+  // "nextbike",
+  // "EinfachMobil",
+  // "Donkey Republic"
+  // "PubliBike",
+  // "Voi",
+  // "Velospot",
+  // "carvelo",
+  // "CarSharing"
+};

package/src/utils/createFreeFloatMobilityLayer.ts

@@ -79,6 +79,7 @@ function createFreeFloatMobilityLayer(
               }
               return true;
             });
+
           features?.forEach((feature) => {
             // The WFS returns everytime a different id for the same vehicle, so we set the vehicle_id as id.
             // and remove the previous feature with the same id.

package/src/utils/createMobiDataBwWfsLayer.ts

@@ -14,7 +14,7 @@ import car from "../icons/Car/rvf_shared_car.svg";
 import cargo_bicycle from "../icons/CargoBike/rvf_shared_cargo_bike.svg";
 // @ts-expect-error -  load svg as data url
 import scooter from "../icons/Scooter/rvf_shared_scooter.svg";
-import { LAYER_PROP_IS_EXPORTING } from "./constants";
+import { LAYER_PROP_IS_EXPORTING, PROVIDER_BY_FEED_ID } from "./constants";
 
 const iconByFormFactor = {
   bicycle,
@@ -68,29 +68,12 @@ const getCompanyNameTextStyle = (feedId: string) => {
       font: "bold 12px/1.1 source-sans-pro",
       offsetY,
       stroke: new Stroke({ color: "white", width: 4 }),
-      text: companyTextByFeedId[feedId] || feedId,
+      text: PROVIDER_BY_FEED_ID[feedId] || feedId,
       // textBaseline: "middle",
     }),
   });
 };
 
-const companyTextByFeedId = {
-  callabike_ice: "Call a Bike",
-  flinkster_carsharing: "Flinkster",
-  gruene_flotte_freiburg: "Die Grüne\nFlotte",
-  lastenvelo_fr: "LastenVelo",
-  naturenergie_sharing: "naturenergie\nsharing",
-  nextbike_df: "Frelo",
-  // "nextbike",
-  // "EinfachMobil",
-  // "Donkey Republic"
-  // "PubliBike",
-  // "Voi",
-  // "Velospot",
-  // "carvelo",
-  // "CarSharing"
-};
-
 function createMobiDataBwWfsLayer(
   name: string,
   color: string,

package/src/utils/getLinkByDevice.ts

@@ -1,9 +1,9 @@
 import { Feature } from "ol";
 
 function getLinkByDevice(feature: Feature): string {
-  const iosLink = feature.get("rental_uris_ios");
-  const androidLink = feature.get("rental_uris_android");
-  const webLink = feature.get("rental_uris_web");
+  const iosLink = feature?.get("rental_uris_ios");
+  const androidLink = feature?.get("rental_uris_android");
+  const webLink = feature?.get("rental_uris_web");
   if (
     iosLink &&
     (navigator.userAgent.includes("iPhone") ||