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

package/package.json

@@ -2,12 +2,13 @@
   "name": "@geops/rvf-mobility-web-component",
   "license": "UNLICENSED",
   "description": "Web components for rvf in the domains of mobility and logistics.",
-  "version": "0.1.15",
+  "version": "0.1.17",
   "homepage": "https://rvf-mobility-web-component-geops.vercel.app/",
   "type": "module",
   "main": "index.js",
   "dependencies": {
     "jspdf": "^2.5.2",
+    "lodash.debounce": "^4.0.8",
     "maplibre-gl": "^4.7.1",
     "mobility-toolbox-js": "3.1.1-beta.0",
     "ol": "^10.3.1",

package/src/RealtimeLayer/RealtimeLayer.tsx

@@ -7,6 +7,7 @@ import { memo } from "preact/compat";
 import { useEffect, useMemo } from "preact/hooks";
 
 import centerOnVehicle from "../utils/centerOnVehicle";
+import { RVF_LAYERS_NAMES } from "../utils/constants";
 import getDelayColorForVehicle from "../utils/getDelayColorForVehicle";
 import getDelayFontForVehicle from "../utils/getDelayFontForVehicle";
 import getDelayTextForVehicle from "../utils/getDelayTextForVehicle";
@@ -48,6 +49,7 @@ function RealtimeLayer(props: RealtimeLayerProps) {
             return mots.split(",") as RealtimeMot[];
           }
         : undefined,
+      name: RVF_LAYERS_NAMES.echtzeit,
       tenant,
       url: realtimeurl,
       zIndex: 1,

package/src/RvfExportMenu/RvfExportMenu.tsx

@@ -15,8 +15,10 @@ export type RvfExportMenuButtonProps = JSX.HTMLAttributes<HTMLDivElement> &
 
 const formats = ["A4", "A3", "A1", "A0"];
 
+let prevRealtimeLayerVisibility = false;
+
 function RvfExportMenu({ ...props }: RvfExportMenuButtonProps) {
-  const { map } = useMapContext();
+  const { map, realtimeLayer } = useMapContext();
   const [useMaxExtent, setUseMaxExtent] = useState(false);
   const [format, setFormat] = useState<string>(formats[0]);
   const checkboxId = useId();
@@ -64,12 +66,21 @@ function RvfExportMenu({ ...props }: RvfExportMenuButtonProps) {
               { format },
               {
                 onAfter: (map, layers) => {
+                  if (
+                    prevRealtimeLayerVisibility !== realtimeLayer.getVisible()
+                  ) {
+                    realtimeLayer.setVisible(prevRealtimeLayerVisibility);
+                  }
                   getAllLayers(layers).forEach((layer) => {
                     layer.set(LAYER_PROP_IS_EXPORTING, false);
                   });
                 },
 
                 onBefore: (map, layers) => {
+                  prevRealtimeLayerVisibility = realtimeLayer.getVisible();
+                  if (realtimeLayer.getVisible()) {
+                    realtimeLayer.setVisible(false);
+                  }
                   getAllLayers(layers).forEach((layer) => {
                     layer.set(LAYER_PROP_IS_EXPORTING, true);
                   });

package/src/RvfFeatureDetails/RvfFeatureDetails.tsx

@@ -3,16 +3,28 @@ import type { JSX, PreactDOMAttributes } from "preact";
 import { memo } from "preact/compat";
 
 import useRvfContext from "../utils/hooks/useRvfContext";
+import RvfSharedMobilityDetails from "./RvfSharedMobilityDetail";
 
 export type RvfFeatureDetailsProps = JSX.HTMLAttributes<HTMLDivElement> &
   PreactDOMAttributes;
 
+const getIsSharedMobility = (selectedFeature): boolean => {
+  const id =
+    selectedFeature.getId() || selectedFeature.get("features")[0].getId();
+  if (typeof id === "number") {
+    return !!selectedFeature.get("category");
+  } else if (typeof id === "string") {
+    return id.includes("sharing_stations") || id.includes("Vehicle");
+  }
+};
+
 function RvfFeatureDetails(props: RvfFeatureDetailsProps) {
   const { selectedFeature } = useRvfContext();
+  const isSharedMobility = getIsSharedMobility(selectedFeature);
 
-  return (
-    <div {...props}>
-      {Object.entries(selectedFeature.getProperties()).map(([key, value]) => {
+  const showDefaultData = () => {
+    return Object.entries(selectedFeature.getProperties()).map(
+      ([key, value]) => {
         return (
           <div className="flex gap-2" key={key}>
             <span>
@@ -21,7 +33,16 @@ function RvfFeatureDetails(props: RvfFeatureDetailsProps) {
             <div>{value}</div>
           </div>
         );
-      })}
+      },
+    );
+  };
+
+  return (
+    <div {...props}>
+      {isSharedMobility && (
+        <RvfSharedMobilityDetails selectedFeature={selectedFeature} />
+      )}
+      {!isSharedMobility && showDefaultData()}
     </div>
   );
 }

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

@@ -0,0 +1,53 @@
+import { Feature } from "ol";
+
+import getLinkByDevice from "../../../utils/getLinkByDevice";
+
+export interface FloatingVehiclesDetailsProps {
+  features: Feature[];
+}
+
+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 url = new URL(feature.get("rental_uris_web"));
+      vehicleNumber = new URLSearchParams(url.search).get("vehicle");
+    }
+
+    const scooterLink = getLinkByDevice(feature);
+    const availableDistanceString = feature
+      .get("current_range_meters")
+      .toLocaleString()
+      .replace(",", "'");
+
+    return (
+      <li className="p-1" key={idx}>
+        <a href={scooterLink} key={idx} rel="noreferrer" target="_blank">
+          {`${vehicleNumber} (${availableDistanceString} m)`}
+        </a>
+      </li>
+    );
+  });
+
+  return (
+    <div className="flex flex-col overflow-scroll">
+      {features.length} Fahrzeuge
+      <span className="text-lg text-grey">Fahrzeug mieten</span>
+      <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>
+    </div>
+  );
+}
+
+export default FloatingVehiclesDetails;

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

@@ -0,0 +1 @@
+export { default } from "./FloatingVehiclesDetails";

package/src/RvfFeatureDetails/RvfSharedMobilityDetail/RvfSharedMobilityDetails.tsx

@@ -0,0 +1,123 @@
+import { Feature } from "ol";
+import { useEffect, useState } from "preact/hooks";
+
+import callBike from "../../logos/callabike_logo.png";
+import flinkster from "../../logos/flinkster_logo.png";
+import grueneFlotteLogo from "../../logos/gruene_flotte_logo.png";
+import lastenVeloLogo from "../../logos/lasten_velo_freiburg.png";
+import freloLogo from "../../logos/logo_frelo_web_rgb.png";
+import naturEnergieLogo from "../../logos/natur_energie_logo.png";
+import yoioLogo from "../../logos/yoio_logo.png";
+import zeusLogo from "../../logos/zeus_logo.png";
+import { API_REQUEST_FEATURE_TYPE } from "../../utils/constants";
+import FloatingVehiclesDetails from "./FloatingVehiclesDetails";
+import StationDetails from "./StationDetails";
+
+export interface RvfSharedMobilityDetailsProps {
+  selectedFeature: Feature;
+}
+
+const logos = {
+  callabike_ice: callBike,
+  flinkster_carsharing: flinkster,
+  "gruene-flotte_freiburg": grueneFlotteLogo,
+  lastenvelo_fr: lastenVeloLogo,
+  naturenergie_sharing: naturEnergieLogo,
+  nextbike_df: freloLogo,
+  yoio_freiburg: yoioLogo,
+  zeus_freiburg: zeusLogo,
+};
+
+function RvfSharedMobilityDetails({
+  selectedFeature,
+}: RvfSharedMobilityDetailsProps) {
+  const [features, setFeatures] = useState([]);
+  const isStationDetails =
+    !!selectedFeature.get("categories") ||
+    !selectedFeature.get("features")?.length;
+  const isFloatingVehicle = !!selectedFeature.get("features")?.length;
+
+  useEffect(() => {
+    const extent = selectedFeature.getGeometry().getExtent();
+    extent[0] = extent[0] - 2;
+    extent[1] = extent[1] - 2;
+    extent[2] = extent[2] + 2;
+    extent[3] = extent[3] + 2;
+    const categoryName = selectedFeature.get("category")?.toLowerCase();
+    let featureType;
+    let abortController;
+
+    if (categoryName) {
+      if (categoryName === "bike sharing") {
+        featureType = API_REQUEST_FEATURE_TYPE.stations.bike;
+      } else if (categoryName === "car sharing") {
+        featureType = API_REQUEST_FEATURE_TYPE.stations.car;
+      } else if (categoryName === "cargo bike sharing") {
+        featureType = API_REQUEST_FEATURE_TYPE.stations.cargoBike;
+      }
+      abortController = new AbortController();
+
+      fetch(createRequestLink(featureType, extent), {
+        signal: new AbortController().signal,
+      })
+        .then((res) => {
+          return res.json();
+        })
+        .then((data) => {
+          if (data.features?.[0].properties) {
+            selectedFeature.setProperties(data.features[0].properties);
+          }
+          setFeatures([selectedFeature]);
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    } else {
+      if (isFloatingVehicle) {
+        setFeatures(selectedFeature.get("features"));
+      } else {
+        setFeatures([selectedFeature]);
+      }
+    }
+    return () => {
+      abortController?.abort();
+    };
+  }, [selectedFeature, isFloatingVehicle]);
+
+  const createRequestLink = (name, extent) => {
+    return (
+      "https://api.mobidata-bw.de/geoserver/MobiData-BW/" +
+      name +
+      "/ows" +
+      "?service=WFS&" +
+      "version=1.1.0&request=GetFeature&typename=" +
+      "MobiData-BW:" +
+      name +
+      "&" +
+      "outputFormat=application/json&srsname=EPSG:3857&" +
+      "bbox=" +
+      extent.join(",") +
+      ",EPSG:3857"
+    );
+  };
+
+  return (
+    <div className="flex flex-col overflow-scroll px-2 pt-2">
+      <div className="flex items-center text-xl text-grey">
+        <img
+          alt="logo"
+          className="max-w-24"
+          src={logos[features[0]?.get("feed_id")]}
+        />
+      </div>
+      {features.length && isStationDetails && (
+        <StationDetails feature={features[0]} />
+      )}
+      {!!features[0]?.get("form_factor") && isFloatingVehicle && (
+        <FloatingVehiclesDetails features={features} />
+      )}
+    </div>
+  );
+}
+
+export default RvfSharedMobilityDetails;

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

@@ -0,0 +1,32 @@
+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
+      {link && (
+        <a
+          className={"my-12 flex items-center justify-center"}
+          href={link}
+          rel="noreferrer"
+          target="_blank"
+        >
+          <RvfButton>Jetzt buchen</RvfButton>
+        </a>
+      )}
+    </div>
+  );
+}
+
+export default StationDetails;

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

@@ -0,0 +1 @@
+export { default } from "./StationDetails";

package/src/RvfFeatureDetails/RvfSharedMobilityDetail/index.tsx

@@ -0,0 +1 @@
+export { default } from "./RvfSharedMobilityDetails";

package/src/RvfLineNetworkPlanLayer/RvfLineNetworkPlanLayer.tsx

@@ -3,6 +3,7 @@ import { MaplibreStyleLayerOptions } from "mobility-toolbox-js/ol/layers/Maplibr
 import { memo } from "preact/compat";
 import { useEffect, useMemo } from "preact/hooks";
 
+import { RVF_LAYERS_NAMES } from "../utils/constants";
 import useMapContext from "../utils/hooks/useMapContext";
 import useRvfContext from "../utils/hooks/useRvfContext";
 
@@ -21,6 +22,7 @@ function RvfLineNetworkPlanLayer(props: MaplibreStyleLayerOptions) {
       },
       maplibreLayer: baseLayer,
       minZoom: 10,
+      name: RVF_LAYERS_NAMES.liniennetz,
       ...(props || {}),
     });
   }, [baseLayer, props]);