npm - @geops/rvf-mobility-web-component - Versions diffs - 0.1.20 → 0.1.22 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/CHANGELOG.md +16 -0
package/index.js +315 -112
package/package.json +3 -1
package/src/Overlay/Overlay.tsx +1 -1
package/src/RvfFeatureDetails/RvfSharedMobilityDetail/FloatingVehiclesDetails/FloatingVehiclesDetails.tsx +9 -10
package/src/RvfFeatureDetails/RvfSharedMobilityDetail/RvfSharedMobilityDetails.tsx +43 -11
package/src/RvfFeatureDetails/RvfSharedMobilityDetail/StationDetails/StationDetails.tsx +220 -13
package/src/RvfLink/RvfLink.tsx +5 -2
package/src/icons/ArrowUpRight/ArrowUpRight.tsx +35 -0
package/src/icons/ArrowUpRight/index.tsx +1 -0
package/src/icons/ArrowUpRight/up-open.svg +7 -0

package/package.json CHANGED Viewed

@@ -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.20",
+  "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/Overlay/Overlay.tsx CHANGED Viewed

@@ -25,7 +25,7 @@ function Overlay({ children, ScrollableHandlerProps = {} }: OverlayProps) {
   return (
     <div
-      className={`relative z-50 flex flex-col overflow-hidden transition-[min-height,max-height] @lg:transition-[width]  ${
+      className={`relative z-50 flex flex-col overflow-hidden bg-white transition-[min-height,max-height] @lg:transition-[width]  ${
         children
           ? "max-h-[70%] min-h-[75px] w-full border-t @lg:h-[100%!important] @lg:max-h-full @lg:w-[350px] @lg:border-r @lg:border-t-0"
           : "max-h-0 min-h-0 @lg:w-0"

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

@@ -38,11 +38,12 @@ function FloatingVehiclesDetails({ features }: FloatingVehiclesDetailsProps) {
       return null;
     }
     return (
-      <li className="p-1" key={idx}>
-        <a href={scooterLink} key={idx} rel="noreferrer" target="_blank">
+      <li key={idx}>
+        <div className={"flex items-center gap-2"}>
           {`${vehicleNumber}`}
           {distance}
-        </a>
+          <RvfLink href={scooterLink}>{` jetzt buchen`}</RvfLink>
+        </div>
       </li>
     );
   });
@@ -51,18 +52,16 @@ function FloatingVehiclesDetails({ features }: FloatingVehiclesDetailsProps) {
   const link = getLinkByDevice(features?.[0]);
   return (
-    <div className="flex flex-1 flex-col gap-2 overflow-scroll">
-      <div className="flex flex-1 flex-col gap-2 overflow-scroll">
+    <div className="flex flex-1 flex-col gap-2">
+      <div className="flex flex-1 flex-col gap-2 ">
         <div>{features.length} Fahrzeuge</div>
-        <div className="flex flex-1 flex-col overflow-scroll">
+        <div className="flex flex-1 flex-col">
           <div className="text-grey">Fahrzeug mieten</div>
-          <ul className="list-disc overflow-scroll pl-4 underline underline-offset-2">
-            {renderedDetails}
-          </ul>
+          <ul className="list-disc pl-4">{renderedDetails}</ul>
         </div>
       </div>
       {feedId && link && (
-        <div className="flex justify-center">
+        <div>
           <RvfLink href={link}>Über {PROVIDER_BY_FEED_ID[feedId]}</RvfLink>
         </div>
       )}

package/src/RvfFeatureDetails/RvfSharedMobilityDetail/RvfSharedMobilityDetails.tsx CHANGED Viewed

@@ -1,5 +1,6 @@
 import { Feature } from "ol";
-import { useEffect, useState } from "preact/hooks";
+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";
@@ -101,19 +102,50 @@ function RvfSharedMobilityDetails({
     );
   };
+  const featuresByFeedId: Record<string, Feature[]> = useMemo(() => {
+    const featuresByFeedId = {};
+    if (isStationDetails) {
+      return null;
+    }
+    features.forEach((feature) => {
+      const feedId = feature.get("feed_id");
+      if (featuresByFeedId[feedId]) {
+        featuresByFeedId[feedId].push(feature);
+      } else {
+        featuresByFeedId[feedId] = [feature];
+      }
+    });
+    return featuresByFeedId;
+  }, [features, isStationDetails]);
   return (
     <>
-      <img
-        alt="logo"
-        className="max-w-24"
-        src={logos[features[0]?.get("feed_id")]}
-      />
-      {features.length && isStationDetails && (
-        <StationDetails feature={features[0]} />
-      )}
-      {!!features[0]?.get("form_factor") && isFloatingVehicle && (
-        <FloatingVehiclesDetails features={features} />
+      {isStationDetails && (
+        <>
+          <img
+            alt="logo"
+            className="max-w-24"
+            src={logos[features[0]?.get("feed_id")]}
+          />
+          {features.length && isStationDetails && (
+            <StationDetails feature={features[0]} />
+          )}
+        </>
       )}
+      {isFloatingVehicle &&
+        featuresByFeedId &&
+        Object.entries(featuresByFeedId).map(([key, feats]) => {
+          return (
+            <Fragment key={key}>
+              <img
+                alt="logo"
+                className="max-w-24"
+                src={logos[feats[0]?.get("feed_id")]}
+              />
+              <FloatingVehiclesDetails features={feats} />
+            </Fragment>
+          );
+        })}
     </>
   );
 }

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

@@ -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>
   );

package/src/RvfLink/RvfLink.tsx CHANGED Viewed

@@ -3,13 +3,15 @@ import type { JSX, PreactDOMAttributes } from "preact";
 import { memo, useMemo } from "preact/compat";
 import { twMerge } from "tailwind-merge";
+import ArrowUpRight from "../icons/ArrowUpRight";
 export type RvfLinkProps = {
   theme?: "primary" | "secondary";
 } & JSX.AnchorHTMLAttributes<HTMLAnchorElement> &
   PreactDOMAttributes;
 const baseClasses =
-  "my-1 flex gap-2 text-[14px] @sm/main:text-[16px] @md/main:text-[18px] items-center justify-left font-semibold text-button";
+  "my-1 flex items-center leading-[1.1] underline text-[14px] @sm/main:text-[16px] @md/main:text-[18px] items-center justify-left font-semibold";
 export const themes = {
   primary: {
@@ -18,7 +20,7 @@ export const themes = {
     selectedClasses: "bg-darkred border-darkred",
   },
   secondary: {
-    classes: "bg-white text-grey hover:text-red active:text-lightred",
+    classes: "bg-white text-black hover:text-red active:text-lightred",
     selectedClasses: "text-red",
   },
 };
@@ -38,6 +40,7 @@ function RvfLink({
   return (
     <a className={classes} rel="noreferrer" target="_blank" {...props}>
       {children}
+      <ArrowUpRight />
     </a>
   );
 }

package/src/icons/ArrowUpRight/ArrowUpRight.tsx ADDED Viewed

@@ -0,0 +1,35 @@
+import { SVGProps } from "preact/compat";
+function ArrowUpRight(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      height="24px"
+      style="transform: rotate(-45deg);"
+      version="1.1"
+      viewBox="0 0 24 24"
+      width="24px"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <title>iconfont/right</title>
+      <g
+        fill="none"
+        fillRule="evenodd"
+        id="iconfont/right"
+        stroke="none"
+        strokeWidth="1"
+        style="&#10;    /* transform: rotate(-45deg); */&#10;"
+      >
+        <path
+          d="M13.2928932,5.29289322 C13.6834175,4.90236893 14.3165825,4.90236893 14.7071068,5.29289322 L20.7071068,11.2928932 C20.7355731,11.3213595 20.7623312,11.3515341 20.787214,11.3832499 C20.7927155,11.3901576 20.7982466,11.397397 20.8036654,11.4046934 C20.8215099,11.4288693 20.8382813,11.453725 20.8539326,11.4793398 C20.8613931,11.4913869 20.8685012,11.5036056 20.8753288,11.5159379 C20.8862061,11.5357061 20.8966234,11.5561086 20.9063462,11.5769009 C20.914321,11.5939015 20.9218036,11.6112044 20.9287745,11.628664 C20.9366843,11.6484208 20.9438775,11.6682023 20.9504533,11.6882636 C20.9552713,11.7031487 20.9599023,11.7185367 20.9641549,11.734007 C20.9701664,11.7555635 20.9753602,11.7772539 20.9798348,11.7992059 C20.9832978,11.8166247 20.9863719,11.834051 20.9889822,11.8515331 C20.9962388,11.8996379 21,11.9493797 21,12 L20.9962979,11.9137692 C20.9978436,11.9317345 20.9989053,11.9497336 20.9994829,11.9677454 L21,12 C21,12.0112225 20.9998151,12.0224019 20.9994483,12.0335352 C20.9988772,12.050591 20.997855,12.0679231 20.996384,12.0852242 C20.994564,12.1070574 20.9920941,12.1281144 20.9889807,12.1489612 C20.9863719,12.165949 20.9832978,12.1833753 20.9797599,12.2007258 C20.9753602,12.2227461 20.9701664,12.2444365 20.964279,12.2658396 C20.9599023,12.2814633 20.9552713,12.2968513 20.9502619,12.3121425 C20.9438775,12.3317977 20.9366843,12.3515792 20.928896,12.3710585 C20.9218036,12.3887956 20.914321,12.4060985 20.9063266,12.4232215 C20.8966234,12.4438914 20.8862061,12.4642939 20.8751242,12.484277 C20.8685012,12.4963944 20.8613931,12.5086131 20.8540045,12.5207088 C20.8382813,12.546275 20.8215099,12.5711307 20.8036865,12.5951593 C20.774687,12.6343256 20.7425008,12.6717127 20.7071068,12.7071068 L20.787214,12.6167501 C20.7849289,12.6196628 20.7826279,12.6225624 20.7803112,12.625449 L20.7071068,12.7071068 L14.7071068,18.7071068 C14.3165825,19.0976311 13.6834175,19.0976311 13.2928932,18.7071068 C12.9023689,18.3165825 12.9023689,17.6834175 13.2928932,17.2928932 L17.585,13 L4,13 C3.48716416,13 3.06449284,12.6139598 3.00672773,12.1166211 L3,12 C3,11.4477153 3.44771525,11 4,11 L17.585,11 L13.2928932,6.70710678 C12.9324093,6.34662282 12.9046797,5.77939176 13.2097046,5.38710056 Z"
+          fill="currentColor"
+          fillRule="nonzero"
+          id="Combined-Shape"
+          style="&#10;    /* transform: rotate(-45deg); */&#10;"
+        />
+      </g>
+    </svg>
+  );
+}
+export default ArrowUpRight;

package/src/icons/ArrowUpRight/index.tsx ADDED Viewed

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

package/src/icons/ArrowUpRight/up-open.svg ADDED Viewed

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>iconfont/up-open</title>
+    <g id="iconfont/up-open" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M15.7389427,5.27697525 C16.129467,5.66749954 16.129467,6.30066452 15.7389427,6.69118881 L10.414,12.015082 L15.7389427,17.3406471 C16.0994267,17.7011311 16.1271562,18.2683621 15.8221313,18.6606533 L15.7389427,18.7548607 C15.3484184,19.145385 14.7152534,19.145385 14.3247292,18.7548607 L8.29289322,12.7230247 C7.90236893,12.3325005 7.90236893,11.6993355 8.29289322,11.3088112 L14.3247292,5.27697525 C14.7152534,4.88645096 15.3484184,4.88645096 15.7389427,5.27697525 Z" id="Combined-Shape-Copy" fill="#000000" fill-rule="nonzero" transform="translate(12.0159, 12.0159) rotate(450) translate(-12.0159, -12.0159)"></path>
+    </g>
+</svg>