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

package/src/utils/sharingGraphqlUtils.ts

@@ -0,0 +1,312 @@
+import { FeatureCollection, Point } from "geojson";
+import { gql, GraphQLClient } from "graphql-request";
+import { Extent } from "ol/extent";
+
+import { RVF_EXTENT_4326 } from "./constants";
+
+const GQL_URL = "https://api.mobidata-bw.de/sharing/graphql";
+
+export interface SharingStation {
+  id: string;
+  lat: number;
+  lon: number;
+  name: {
+    translation: {
+      language: string;
+      value: string;
+    };
+  };
+  numVehiclesAvailable: number;
+  system: {
+    id: string;
+    name: {
+      translation: {
+        language: string;
+        value: string;
+      };
+    };
+    operator: {
+      id: string;
+      name: {
+        translation: {
+          language: string;
+          value: string;
+        };
+      };
+    };
+    shortName: {
+      translation: {
+        language: string;
+        value: string;
+      };
+    };
+  };
+}
+
+const queryStation = 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 queryStations = gql`
+  query stations(
+    $ids: [String!]
+    $minimumLatitude: Float
+    $minimumLongitude: Float
+    $maximumLatitude: Float
+    $maximumLongitude: Float
+    $systems: [System!]
+    $operators: [Operator!]
+    $availableFormFactors: [FormFactor!]
+  ) {
+    stations(
+      ids: $ids
+      minimumLatitude: $minimumLatitude
+      minimumLongitude: $minimumLongitude
+      maximumLatitude: $maximumLatitude
+      maximumLongitude: $maximumLongitude
+      operators: $operators
+      availableFormFactors: $availableFormFactors
+    ) {
+      lon
+      id
+      lat
+      name {
+        translation {
+          language
+          value
+        }
+      }
+      numVehiclesAvailable
+      system {
+        id
+        name {
+          translation {
+            language
+            value
+          }
+        }
+        shortName {
+          translation {
+            language
+            value
+          }
+        }
+        operator {
+          id
+          name {
+            translation {
+              language
+              value
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+
+export const fetchSharingStation = async (id: string) => {
+  const client = new GraphQLClient(GQL_URL, {
+    method: "GET",
+  });
+  const { station }: { station: unknown } = await client.request(queryStation, {
+    __operation: "station",
+    id: id,
+  });
+  return station;
+};
+
+export const fetchSharingStations = async (
+  ids: null | string[],
+  extent: Extent = RVF_EXTENT_4326,
+  operators: null | string[] = null,
+  abortController: AbortController,
+) => {
+  const client = new GraphQLClient(
+    "https://api.mobidata-bw.de/sharing/graphql",
+    {
+      method: "GET",
+      signal: abortController.signal,
+    },
+  );
+  const { stations }: { stations: SharingStation[] } = await client.request(
+    queryStations,
+    {
+      // availableFormFactors: ["BICYCLE"],
+      // id: "NBK:Station:33269707",
+      ids: ids,
+      maximumLatitude: extent?.[3],
+      maximumLongitude: extent?.[2],
+      minimumLatitude: extent?.[1],
+      minimumLongitude: extent?.[0],
+      operators: operators, //["BK:Operator:nextbike"],
+    },
+  );
+  const featureCollection: FeatureCollection<Point, SharingStation> = {
+    features: stations.map((station: SharingStation) => {
+      return {
+        geometry: {
+          coordinates: [station.lon, station.lat],
+          type: "Point",
+        },
+        properties: {
+          ...station,
+          num_vehicles_available: station.numVehiclesAvailable,
+          provider_name: station.system.name.translation[0].value.replace(
+            "Freiburg",
+            "",
+          ),
+          station_id: station.id,
+        },
+        type: "Feature",
+      };
+    }),
+    type: "FeatureCollection",
+  };
+  return featureCollection;
+};
+
+export default {
+  fetchSharingStations,
+};

package/src/utils/sharingStylesUtils.ts

@@ -0,0 +1,222 @@
+export const getSharingStyleLayers = (
+  sourceId: string,
+  image = "rvf_shared_bike",
+) => {
+  return [
+    {
+      id: sourceId + "_circle",
+      maxZoom: 16,
+      minzoom: 11,
+      paint: {
+        "circle-color": "#00973b",
+        "circle-radius": 4,
+        "circle-stroke-color": "rgba(255, 255, 255, 1)",
+        "circle-stroke-width": 0.5,
+      },
+      source: sourceId,
+      type: "circle",
+    },
+    {
+      id: sourceId + "_image_text",
+      layout: {
+        "icon-image": image,
+        "icon-size": 1,
+        "symbol-z-order": "auto",
+        "text-anchor": "top",
+        "text-field": {
+          stops: [
+            [15, ""],
+            [16, "{provider_name}"],
+          ],
+        },
+        "text-font": ["SourceSansPro-Bold"],
+        "text-justify": "center",
+        "text-letter-spacing": 0.04,
+        "text-line-height": 1.1,
+        "text-max-width": 6,
+        "text-optional": true,
+        "text-radial-offset": 1.5,
+        "text-size": 12,
+        visibility: "visible",
+      },
+      minzoom: 14,
+      paint: {
+        "text-color": "rgba(6, 76, 10, 1)",
+        "text-halo-blur": 0.5,
+        "text-halo-color": "rgba(255, 255, 255, 1)",
+        "text-halo-width": 2,
+      },
+      source: sourceId,
+      type: "symbol",
+    },
+    {
+      filter: ["==", "is_free_float", false],
+      id: sourceId + "_availability",
+      layout: {
+        "icon-allow-overlap": true,
+        "icon-anchor": "center",
+        "icon-ignore-placement": true,
+        "icon-image": "10-contour-big-grey",
+        "icon-offset": [20, -18],
+        "icon-overlap": "always",
+        "icon-size": 0.6,
+        "symbol-z-order": "auto",
+        "text-allow-overlap": true,
+        "text-field": {
+          stops: [
+            [15, ""],
+            [16, "{num_vehicles_available}"],
+          ],
+        },
+        "text-font": ["SourceSansPro-Bold"],
+        "text-ignore-placement": true,
+        "text-justify": "center",
+        "text-offset": [1.2, -1],
+        "text-overlap": "always",
+        "text-size": 10,
+        visibility: "visible",
+      },
+      minzoom: 16,
+      paint: {
+        "text-color": "rgba(6, 76, 10, 1)",
+      },
+      source: sourceId,
+      type: "symbol",
+    },
+    // freefloat style
+    {
+      filter: ["==", "is_free_float", true],
+      id: sourceId + "_availability_freefloat",
+      layout: {
+        "icon-allow-overlap": true,
+        "icon-anchor": "center",
+        "icon-ignore-placement": true,
+        "icon-image": "10-contour-big-grey",
+        "icon-offset": [-20, -18],
+        "icon-overlap": "always",
+        "icon-size": 0.6,
+        "symbol-z-order": "auto",
+        "text-allow-overlap": true,
+        "text-field": "1",
+        "text-font": ["SourceSansPro-Bold"],
+        "text-ignore-placement": true,
+        "text-justify": "center",
+        "text-offset": [-1.2, -1],
+        "text-overlap": "always",
+        "text-size": 10,
+        visibility: "visible",
+      },
+      minzoom: 16,
+      paint: {
+        "text-color": "rgba(6, 76, 10, 1)",
+      },
+      source: sourceId,
+      type: "symbol",
+    },
+  ];
+};
+
+export const getSharingClusterStyleLayers = (
+  sourceId: string,
+  image = "rvf_shared_bike",
+) => {
+  return [
+    {
+      id: sourceId + "_image_text",
+      layout: {
+        "icon-allow-overlap": true,
+        "icon-ignore-placement": true,
+        "icon-image": image,
+        "icon-size": 1,
+        "symbol-z-order": "auto",
+        "text-allow-overlap": true,
+        "text-anchor": "top",
+        "text-field": {
+          stops: [
+            [15, ""],
+            [16, "{provider_name}"],
+          ],
+        },
+        "text-font": ["SourceSansPro-Bold"],
+        "text-ignore-placement": true,
+        "text-justify": "center",
+        "text-letter-spacing": 0.04,
+        "text-line-height": 1.1,
+        "text-max-width": 6,
+        "text-optional": true,
+        "text-radial-offset": 1.5,
+        "text-size": 12,
+        visibility: "visible",
+      },
+      minzoom: 14,
+      paint: {
+        "text-color": "rgba(6, 76, 10, 1)",
+        "text-halo-blur": 0.5,
+        "text-halo-color": "rgba(255, 255, 255, 1)",
+        "text-halo-width": 2,
+      },
+      source: sourceId,
+      type: "symbol",
+    },
+    // cluster style
+    {
+      filter: ["has", "point_count"],
+      id: sourceId + "_availability2",
+      layout: {
+        "icon-allow-overlap": true,
+        "icon-anchor": "center",
+        "icon-ignore-placement": true,
+        "icon-image": "10-contour-big-grey",
+        "icon-offset": [-20, -18],
+        "icon-overlap": "always",
+        "icon-size": 0.6,
+        "symbol-z-order": "auto",
+        "text-allow-overlap": true,
+        "text-field": "{point_count}",
+        "text-font": ["SourceSansPro-Bold"],
+        "text-ignore-placement": true,
+        "text-justify": "center",
+        "text-offset": [-1.2, -1],
+        "text-overlap": "always",
+        "text-size": 10,
+        visibility: "visible",
+      },
+      minzoom: 16,
+      paint: {
+        "text-color": "rgba(6, 76, 10, 1)",
+      },
+      source: sourceId,
+      type: "symbol",
+    },
+    // non cluster style
+    {
+      filter: ["!", ["has", "point_count"]],
+      id: sourceId + "_availability3",
+      layout: {
+        "icon-allow-overlap": true,
+        "icon-anchor": "center",
+        "icon-ignore-placement": true,
+        "icon-image": "10-contour-big-grey",
+        "icon-offset": [-20, -18],
+        "icon-overlap": "always",
+        "icon-size": 0.6,
+        "symbol-z-order": "auto",
+        "text-allow-overlap": true,
+        "text-field": "1",
+        "text-font": ["SourceSansPro-Bold"],
+        "text-ignore-placement": true,
+        "text-justify": "center",
+        "text-offset": [-1.2, -1],
+        "text-overlap": "always",
+        "text-size": 10,
+        visibility: "visible",
+      },
+      minzoom: 16,
+      paint: {
+        "text-color": "rgba(6, 76, 10, 1)",
+      },
+      source: sourceId,
+      type: "symbol",
+    },
+  ];
+};

package/src/utils/sharingWFSUtils.ts

@@ -0,0 +1,74 @@
+import { Feature, FeatureCollection, Point } from "geojson";
+import { Extent } from "ol/extent";
+
+import { PROVIDER_BY_FEED_ID, RVF_EXTENT_4326 } from "./constants";
+
+export interface SharingStationWFS {
+  capacity: string;
+  feed_id: string;
+  id: string; // added dynamically same as station_id
+  is_free_float: false; // added dynamically
+  last_reported: string;
+  name: string;
+  num_vehicles_available: number;
+  provider_name: string; // added dynamically
+  rental_uris_android: string;
+  rental_uris_ios: string;
+  rental_uris_web: string;
+  station_id: string;
+}
+export interface SharingVehicleWFS {
+  current_fuel_percent: number;
+  current_range_meters: number;
+  feed_id: string;
+  form_factor: string;
+  id: string; // added dynamically station_id or vehicle_id
+  is_free_float: true; // added dynamically
+  last_reported: string;
+  max_range_meters: number;
+  name: null;
+  propulsion_type: string;
+  provider_name: string; // added dynamically
+  rental_uris_android: null;
+  rental_uris_ios: null;
+  rental_uris_web: null;
+  station_id: string;
+  vehicle_id: string;
+}
+
+export const fetchSharingWFS = async (
+  wfsTypeName: string,
+  abortController: AbortController,
+  extent4326: Extent = RVF_EXTENT_4326,
+) => {
+  // use WFS
+  const url =
+    "https://api.mobidata-bw.de/geoserver/MobiData-BW/" +
+    wfsTypeName +
+    "/ows" +
+    "?service=WFS&" +
+    "version=1.1.0&request=GetFeature&typename=" +
+    "MobiData-BW:" +
+    wfsTypeName +
+    "&" +
+    "outputFormat=application/json&" +
+    "bbox=" +
+    extent4326.toString() +
+    ",EPSG:4326";
+  const response = await fetch(url, { signal: abortController.signal });
+  const data = await response.json();
+
+  data?.features.forEach(
+    (feature: Feature<Point, SharingStationWFS | SharingVehicleWFS>) => {
+      const vehicleId = (feature.properties as SharingVehicleWFS).vehicle_id;
+      feature.properties.id = vehicleId || feature.properties.station_id;
+      feature.properties.is_free_float = !!vehicleId;
+      feature.properties.provider_name =
+        PROVIDER_BY_FEED_ID[feature.properties.feed_id];
+    },
+  );
+  return data as FeatureCollection<
+    Point,
+    SharingStationWFS | SharingVehicleWFS
+  >;
+};