@geops/rvf-mobility-web-component 0.1.21 → 0.1.22

package/package.json

@@ -2,11 +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.21",
+  "version": "0.1.22",
   "homepage": "https://rvf-mobility-web-component-geops.vercel.app/",
   "type": "module",
   "main": "index.js",
   "dependencies": {
+    "graphql": "^16.10.0",
+    "graphql-request": "^7.1.2",
     "jspdf": "^2.5.2",
     "lodash.debounce": "^4.0.8",
     "maplibre-gl": "^4.7.1",

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

@@ -1,29 +1,236 @@
+import { gql, GraphQLClient } from "graphql-request";
 import { Feature } from "ol";
-import { useMemo } from "preact/hooks";
+import { useEffect, useMemo, useState } from "preact/hooks";
 
-import RvfButton from "../../../RvfButton";
+import RvfLink from "../../../RvfLink";
 import getLinkByDevice from "../../../utils/getLinkByDevice";
 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(() => {
     return getLinkByDevice(feature);
   }, [feature]);
 
+  useEffect(() => {
+    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"),
+          },
+        );
+        setData(station);
+        // console.log(station);
+      };
+      fetchData();
+    }
+  }, [feature]);
+
+  const hasVehicles = feature.get("num_vehicles_available") > 0;
+
   return (
-    <div className="flex flex-col gap-2">
-      {feature.get("num_vehicles_available")} Fahrzeuge
-      {link && (
-        <a
-          className={"my-10 flex items-center justify-center"}
-          href={link}
-          rel="noreferrer"
-          target="_blank"
-        >
-          <RvfButton>Jetzt buchen</RvfButton>
-        </a>
+    // <div className="flex flex-col gap-2">
+    //   {feature.get("num_vehicles_available")} Fahrzeuge
+    //   {link && (
+    //     <a
+    //       className={"my-10 flex items-center justify-center"}
+    //       href={link}
+    //       rel="noreferrer"
+    //       target="_blank"
+    //     >
+    //       <RvfButton>Jetzt buchen</RvfButton>
+    //     </a>
+    //   )}
+    // </div>
+    <div className="flex flex-1 flex-col gap-2">
+      <div className="flex flex-1 flex-col gap-2 ">
+        <div>{feature.get("num_vehicles_available") || 0} Fahrzeuge</div>
+        {hasVehicles && data?.vehicleTypesAvailable?.length && (
+          <div className="flex flex-1 flex-col">
+            <div className="text-grey">Fahrzeug mieten</div>
+            <ul className="list-disc pl-4">
+              {data?.vehicleTypesAvailable?.map(
+                ({ count, vehicleType: { id, name, vehicleImage } }) => {
+                  return (
+                    <li key={id}>
+                      <div className={"flex items-center gap-2"}>
+                        <span>{`${count} x ${name.translation[0].value}`}</span>
+
+                        {vehicleImage && (
+                          <img
+                            alt="vehicle"
+                            className={"w-12"}
+                            src={vehicleImage}
+                          />
+                        )}
+                      </div>
+                    </li>
+                  );
+                },
+              )}
+            </ul>
+          </div>
+        )}
+      </div>
+      {data?.vehicleTypesAvailable?.length > 0 && link && (
+        <div>
+          <RvfLink href={link}>Jetzt Buchen</RvfLink>
+        </div>
       )}
     </div>
   );