@geops/rvf-mobility-web-component 0.1.23 → 0.1.24

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

package/src/RvfFeatureDetails/RvfFeatureDetails.tsx

@@ -9,12 +9,12 @@ 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");
+  if (
+    selectedFeature.get("station_id") ||
+    selectedFeature.get("vehicle_id") ||
+    selectedFeature.get("cluster_id")
+  ) {
+    return true;
   }
 };
 

package/src/RvfFeatureDetails/RvfSharedMobilityDetail/RvfSharedMobilityDetails.tsx

@@ -2,15 +2,7 @@ import { Feature } from "ol";
 import { useEffect, useMemo, useState } from "preact/hooks";
 import { Fragment } from "preact/jsx-runtime";
 
-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 { PROVIDER_LOGOS_BY_FEED_ID } from "../../utils/constants";
 import FloatingVehiclesDetails from "./FloatingVehiclesDetails";
 import StationDetails from "./StationDetails";
 
@@ -18,89 +10,21 @@ 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;
+  const isStationDetails = !!selectedFeature.get("station_id");
+  const isFloatingVehicle = !!selectedFeature.get("vehicle_id");
+  const isCluster = !!selectedFeature.get("cluster_id");
 
   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);
-        });
+    if (isCluster) {
+      setFeatures(selectedFeature.get("features"));
     } else {
-      if (isFloatingVehicle) {
-        setFeatures(selectedFeature.get("features"));
-      } else {
-        setFeatures([selectedFeature]);
-      }
+      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"
-    );
-  };
+  }, [selectedFeature, isFloatingVehicle, isCluster]);
 
   const featuresByFeedId: Record<string, Feature[]> = useMemo(() => {
     const featuresByFeedId = {};
@@ -125,14 +49,14 @@ function RvfSharedMobilityDetails({
           <img
             alt="logo"
             className="max-w-24"
-            src={logos[features[0]?.get("feed_id")]}
+            src={PROVIDER_LOGOS_BY_FEED_ID[features[0]?.get("feed_id")]}
           />
           {features.length && isStationDetails && (
             <StationDetails feature={features[0]} />
           )}
         </>
       )}
-      {isFloatingVehicle &&
+      {(isFloatingVehicle || isCluster) &&
         featuresByFeedId &&
         Object.entries(featuresByFeedId).map(([key, feats]) => {
           return (
@@ -140,7 +64,7 @@ function RvfSharedMobilityDetails({
               <img
                 alt="logo"
                 className="max-w-24"
-                src={logos[feats[0]?.get("feed_id")]}
+                src={PROVIDER_LOGOS_BY_FEED_ID[feats[0]?.get("feed_id")]}
               />
               <FloatingVehiclesDetails features={feats} />
             </Fragment>

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

@@ -1,162 +1,13 @@
-import { gql, GraphQLClient } from "graphql-request";
 import { Feature } from "ol";
 import { useEffect, useMemo, useState } from "preact/hooks";
 
 import RvfLink from "../../../RvfLink";
 import getLinkByDevice from "../../../utils/getLinkByDevice";
+import { fetchSharingStation } from "../../../utils/sharingGraphqlUtils";
 export interface StationDetailsProps {
   feature: Feature;
 }
 
-const document = gql`
-  query station($id: String!) {
-    station(id: $id) {
-      name {
-        translation {
-          language
-          value
-        }
-      }
-      shortName {
-        translation {
-          language
-          value
-        }
-      }
-      lat
-      lon
-      region {
-        id
-      }
-      rentalUris {
-        android
-        ios
-        web
-      }
-      isVirtualStation
-      rentalMethods
-      parkingHoop
-      parkingType
-      contactPhone
-      address
-      rentalMethods
-      capacity
-      vehicleTypesAvailable {
-        count
-        vehicleType {
-          id
-          formFactor
-          riderCapacity
-          cargoVolumeCapacity
-          cargoLoadCapacity
-          propulsionType
-          ecoLabels {
-            countryCode
-            ecoSticker
-          }
-          maxRangeMeters
-          name {
-            translation {
-              language
-              value
-            }
-          }
-          description {
-            translation {
-              language
-              value
-            }
-          }
-          vehicleAccessories
-          gCO2km
-          vehicleImage
-          make
-          model
-          color
-          wheelCount
-          maxPermittedSpeed
-          ratedPower
-          defaultReserveTime
-          returnConstraint
-          vehicleAssets {
-            iconUrl
-            iconUrlDark
-            iconLastModified
-          }
-          defaultReserveTime
-          defaultPricingPlan {
-            id
-            url
-            currency
-            isTaxable
-            description {
-              translation {
-                language
-                value
-              }
-            }
-            perKmPricing {
-              start
-              rate
-              interval
-              end
-            }
-            perMinPricing {
-              start
-              rate
-              interval
-              end
-            }
-            surgePricing
-          }
-        }
-        count
-      }
-      vehicleDocksCapacity {
-        vehicleTypes {
-          id
-        }
-        count
-      }
-      numVehiclesAvailable
-      numDocksDisabled
-      numVehiclesDisabled
-      numDocksAvailable
-      isInstalled
-      isRenting
-      isReturning
-      pricingPlans {
-        id
-        url
-        currency
-        isTaxable
-        description {
-          translation {
-            language
-            value
-          }
-        }
-        perKmPricing {
-          start
-          rate
-          interval
-          end
-        }
-        perMinPricing {
-          start
-          rate
-          interval
-          end
-        }
-        surgePricing
-      }
-    }
-  }
-`;
-const client = new GraphQLClient("https://api.mobidata-bw.de/sharing/graphql", {
-  method: "GET",
-});
-
 function StationDetails({ feature }: StationDetailsProps) {
   const [data, setData] = useState(null);
   const link = useMemo(() => {
@@ -167,15 +18,8 @@ function StationDetails({ feature }: StationDetailsProps) {
     const stationId = feature.get("station_id");
     if (stationId) {
       const fetchData = async () => {
-        const { station }: { station: unknown } = await client.request(
-          document,
-          {
-            __operation: "station",
-            id: feature.get("station_id"),
-          },
-        );
+        const station = await fetchSharingStation(feature.get("station_id"));
         setData(station);
-        // console.log(station);
       };
       fetchData();
     }

package/src/RvfMobilityMap/RvfMobilityMap.tsx

@@ -42,7 +42,7 @@ import RvfPoisLayer from "../RvfPoisLayer";
 import RvfSelectedFeatureHighlightLayer from "../RvfSelectedFeatureHighlightLayer";
 import RvfSellingPointsLayer from "../RvfSellingPointsLayer";
 import RvfShare from "../RvfShare";
-import RvfSharedMobilityLayerGroup from "../RvfSharedMobilityLayerGroup";
+import RvfSharedMobilityLayerGroup2 from "../RvfSharedMobilityLayerGroup2";
 import RvfShareMenuButton from "../RvfShareMenuButton";
 import RvfTarifZonenLayer from "../RvfTarifZonenLayer";
 import Topics from "../RvfTopics";
@@ -55,7 +55,10 @@ import StationsLayer from "../StationsLayer";
 // @ts-expect-error bad type definition
 import tailwind from "../style.css";
 import { RVF_EXTENT_3857, RVF_LAYERS_TITLES } from "../utils/constants";
+import getBgColor from "../utils/getBgColor";
 import getFeatureInformationTitle from "../utils/getFeatureInformationTitle";
+import { getRadius } from "../utils/getRadius";
+import getTextColor from "../utils/getTextColor";
 import { I18nContext } from "../utils/hooks/useI18n";
 import useInitialLayersVisiblity from "../utils/hooks/useInitialLayersVisiblity";
 import { MapContext } from "../utils/hooks/useMapContext";
@@ -63,10 +66,12 @@ import { RvfContext } from "../utils/hooks/useRvfContext";
 import useUpdatePermalink from "../utils/hooks/useUpdatePermalink";
 import i18n from "../utils/i18n";
 import MobilityEvent from "../utils/MobilityEvent";
+import realtimeRVFStyle from "../utils/realtimeRVFStyle";
 // @ts-expect-error bad type definition
 import style from "./index.css";
 
 export type RvfMobilityMapProps = {
+  details: string;
   layers: string; // list of visible layers on load
   layertree: string;
   print: string;
@@ -89,11 +94,23 @@ const styleProps = {
 const scrollableHandlerProps = {
   style: { width: "calc(100% - 60px)" },
 };
+const realtimeLayerProps = {
+  bboxParameters: {
+    line_tags: "RVF",
+  },
+  style: realtimeRVFStyle,
+  styleOptions: {
+    getBgColor: getBgColor,
+    getRadius: getRadius,
+    getTextColor: getTextColor,
+  },
+};
 
 function RvfMobilityMap({
   apikey = "5cc87b12d7c5370001c1d655820abcc37dfd4d968d7bab5b2a74a935",
   baselayer = "de.rvf",
   center = null,
+  details = "true",
   extent = bbox,
   geolocation = "true",
   layers = null,
@@ -114,7 +131,7 @@ function RvfMobilityMap({
   search = "false",
   share = "true",
   stopsurl = "https://api.geops.io/stops/v1/",
-  tenant = null,
+  tenant = "de-gtfs-de",
   toolbar = "true",
   zoom = null,
 }: RvfMobilityMapProps) {
@@ -176,6 +193,10 @@ function RvfMobilityMap({
     return print === "true";
   }, [print]);
 
+  const hasDetails = useMemo(() => {
+    return details === "true";
+  }, [details]);
+
   // Apply initial visibility of layers
   useInitialLayersVisiblity(map, layers);
 
@@ -265,6 +286,7 @@ function RvfMobilityMap({
       new MobilityEvent<RvfMobilityMapProps>("mwc:attribute", {
         baselayer,
         center,
+        details,
         extent,
         geolocation,
         layers,
@@ -312,6 +334,7 @@ function RvfMobilityMap({
     maxextent,
     print,
     share,
+    details,
   ]);
 
   const rvfContextValue = useMemo(() => {
@@ -462,7 +485,10 @@ function RvfMobilityMap({
                 <RvfSelectedFeatureHighlightLayer />
 
                 {hasRealtime && (
-                  <RealtimeLayer title={RVF_LAYERS_TITLES.echtzeit} />
+                  <RealtimeLayer
+                    title={RVF_LAYERS_TITLES.echtzeit}
+                    {...realtimeLayerProps}
+                  />
                 )}
                 {
                   <StationsLayer
@@ -474,16 +500,16 @@ function RvfMobilityMap({
                 {hasNotification && <NotificationLayer />}
                 <RvfTarifZonenLayer title={RVF_LAYERS_TITLES.tarifzonen} />
                 <RvfSellingPointsLayer
-                  isQueryable
+                  isQueryable={false}
                   title={RVF_LAYERS_TITLES.verkaufsstellen}
                 />
                 <RvfLineNetworkPlanLayer
-                  isQueryable
+                  isQueryable={false}
                   minZoom={10}
                   title={RVF_LAYERS_TITLES.liniennetz}
                 />
                 <RvfPoisLayer title={RVF_LAYERS_TITLES.pois} />
-                <RvfSharedMobilityLayerGroup
+                <RvfSharedMobilityLayerGroup2
                   title={RVF_LAYERS_TITLES.sharedMobility}
                 />
 
@@ -546,7 +572,7 @@ function RvfMobilityMap({
                     <Station className="relative flex flex-col overflow-y-auto overflow-x-hidden  p-2" />
                   </>
                 )}
-                {selectedFeature && (
+                {hasDetails && selectedFeature && (
                   <>
                     <RvfOverlayHeader
                       onClose={() => {

package/src/RvfSelectedFeatureHighlightLayer/RvfSelectedFeatureHighlightLayer.tsx

@@ -35,7 +35,6 @@ function SingleClickListener() {
       feature.setStyle(null);
       layer.getSource().addFeature(feature);
       if (vectorTileFeature) {
-        console.log(vectorTileFeature);
         baseLayer?.mapLibreMap.setFeatureState(vectorTileFeature, {
           hover: true,
         });