Support Floating Vehicle Bunching

i18n/en-US.yml

@@ -355,7 +355,6 @@ components:
     itinerariesFound: >-
       {itineraryNum, plural, one {# itinerary found} other {# itineraries found}
       }
-    numIssues: "{issueNum, plural, one {# issue} other {# issues} }"
     resultsSortedBy: >-
       Trip results currently sorted by {sortSelected}. To change the way results
       are sorted, use the "Sort Results" button below.
@@ -374,6 +373,7 @@ components:
     signIn: Log in
     signOut: Log out
   NearbyView:
+    additionalVehicles: +{count} more nearby
     bikeRentalStation: Bike Rental Station
     bikesAvailable: "{bikesAvailable, plural, one {# bike} other {# bikes}} available"
     companyBicycle: "{company} Bike"

i18n/fr.yml

@@ -370,7 +370,6 @@ components:
     changeSortDir: Changer l'ordre de tri
     howToFindResults: Pour afficher les résultats, utilisez l'en-tête Trajets trouvés plus bas.
     itinerariesFound: "{itineraryNum, plural, one {# trajet trouvé} other {# trajets trouvés} }"
-    numIssues: "{issueNum, plural, one {# problème} other {# problèmes} }"
     resultsSortedBy: >-
       Résultats triés par {sortSelected}. Pour modifier l'ordre, utilisez le
       bouton "Trier les résultats" plus bas.
@@ -389,6 +388,7 @@ components:
     signIn: Se connecter
     signOut: Déconnexion
   NearbyView:
+    additionalVehicles: +{count} autres à proximité
     bikeRentalStation: Borne de location de vélos
     bikesAvailable: >-
       {bikesAvailable, plural, one {# vélo disponible} other {# vélos

lib/actions/apiV2.js

@@ -395,7 +395,7 @@ export const fetchNearby = (position, radius, currentServiceWeek) => {
       $radius: Int
       $currentServiceWeek: LocalDateRangeInput
     ) {
-      nearest(lat:$lat, lon:$lon, maxDistance: $radius, first: 100, filterByPlaceTypes: [STOP, VEHICLE_RENT, BIKE_PARK, CAR_PARK]) {
+      nearest(lat:$lat, lon:$lon, maxDistance: $radius, first: 100, filterByPlaceTypes: [STOP, VEHICLE_RENT, BIKE_PARK, CAR_PARK], maxResults: 100) {
         edges {
           node {
             id

lib/components/viewers/nearby/nearby-view.tsx

@@ -14,7 +14,7 @@ import * as locationActions from '../../../actions/location'
 import * as mapActions from '../../../actions/map'
 import * as uiActions from '../../../actions/ui'
 import { AppReduxState } from '../../../util/state-types'
-import { GeocoderConfig } from '../../../util/config-types'
+import { GeocoderConfig, NearbyViewConfig } from '../../../util/config-types'
 import { getCurrentServiceWeek } from '../../../util/current-service-week'
 import {
   PatternStopTime,
@@ -54,13 +54,15 @@ type Props = {
     currentServiceWeek?: ServiceWeek
   ) => void
   geocoderConfig: GeocoderConfig
-  getCurrentPosition: any // TODO
+  getCurrentPosition: any
+  // TODO
   hideBackButton?: boolean
   hideEmptyStops?: boolean
   location: string
   mobile?: boolean
   // Todo: type nearby results
   nearby: any
+  nearbyViewConfig?: NearbyViewConfig
   nearbyViewCoords?: LatLonObj
   radius?: number
   routeSortComparator: (a: PatternStopTime, b: PatternStopTime) => number
@@ -133,6 +135,7 @@ function NearbyView({
   location,
   mobile,
   nearby,
+  nearbyViewConfig,
   nearbyViewCoords,
   radius,
   routeSortComparator,
@@ -253,14 +256,39 @@ function NearbyView({
     )
   )
 
-  // If configured, filter out stops that don't have any patterns
-  const filteredNearby = nearby?.filter((n: any) => {
-    if (n.place.__typename === 'Stop' && hideEmptyStops) {
-      const patternArray = patternArrayforStops(n.place, routeSortComparator)
-      return !(patternArray?.length === 0)
+  const scooterGroups = nearby?.reduce((acc: any, item: any) => {
+    if (item.place.__typename === 'RentalVehicle') {
+      const network = item.place.network
+      if (!acc[network]) {
+        acc[network] = {
+          count: 1,
+          nearest: item
+        }
+      } else {
+        acc[network].count++
+      }
     }
-    return true
-  })
+    return acc
+  }, {})
+
+  // If configured, filter out stops that don't have any patterns
+  const filteredNearby = nearby
+    ?.filter((n: any) => {
+      if (n.place.__typename === 'Stop' && nearbyViewConfig?.hideEmptyStops) {
+        const patternArray = patternArrayforStops(n.place, routeSortComparator)
+        return !(patternArray?.length === 0)
+      }
+      return true
+    })
+    .filter((n: any) => {
+      if (
+        Object.keys(scooterGroups).length > 0 &&
+        n.place.__typename === 'RentalVehicle'
+      ) {
+        return scooterGroups[n.place?.network].nearest.id === n.id
+      }
+      return true
+    })
 
   const nearbyItemList =
     filteredNearby?.map &&
@@ -281,7 +309,12 @@ function NearbyView({
           /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
           tabIndex={0}
         >
-          {getNearbyItem({ ...n.place, distance: n.distance, nearbyRoutes })}
+          {getNearbyItem({
+            ...n.place,
+            additionalCount: scooterGroups?.[n.place?.network]?.count,
+            distance: n.distance,
+            nearbyRoutes
+          })}
         </div>
       </li>
     ))
@@ -420,6 +453,7 @@ const mapStateToProps = (state: AppReduxState) => {
     homeTimezone: config.homeTimezone,
     location: state.router.location.hash,
     nearby: nearby?.data,
+    nearbyViewConfig,
     nearbyViewCoords,
     radius: config.nearbyView?.radius,
     routeSortComparator

lib/components/viewers/nearby/styled.tsx

@@ -1,6 +1,7 @@
-import { DARK_TEXT_GREY, grey } from '../../util/colors'
 import styled from 'styled-components'
 
+import { DARK_TEXT_GREY, grey } from '../../util/colors'
+
 export const FloatingLoadingIndicator = styled.div`
   aspect-ratio: 1;
   background: white;
@@ -108,3 +109,30 @@ export const Scrollable = styled.div`
   height: 100%;
   overflow-y: scroll;
 `
+
+export const CardFooter = styled.div`
+  background: rgba(0, 0, 0, 0.2);
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+  color: ${grey[700]};
+  font-size: 15px;
+  padding: 5px 12px;
+  margin-top: -6px;
+
+  span {
+    padding-top: 5px;
+    display: block;
+  }
+
+  &::before {
+    background: white;
+    border-radius: 10px;
+    content: '';
+    display: block;
+    height: 12px;
+    margin-left: -12px;
+    margin-top: -12px;
+    padding: 0;
+    width: calc(100% + 24px);
+  }
+`

lib/components/viewers/nearby/vehicle-rent.tsx

@@ -1,7 +1,7 @@
 import { Bicycle } from '@styled-icons/fa-solid/Bicycle'
 import { Company } from '@opentripplanner/types'
 import { connect } from 'react-redux'
-import { IntlShape, useIntl } from 'react-intl'
+import { FormattedMessage, IntlShape, useIntl } from 'react-intl'
 // @ts-expect-error icons doesn't have typescript?
 import { Micromobility } from '@opentripplanner/icons'
 import React, { ReactElement } from 'react'
@@ -10,7 +10,7 @@ import { AppReduxState } from '../../../util/state-types'
 import { IconWithText } from '../../util/styledIcon'
 import CompanyIcon from '../../util/company-icon'
 
-import { Card, CardBody, CardHeader, CardTitle } from './styled'
+import { Card, CardBody, CardFooter, CardHeader, CardTitle } from './styled'
 import DistanceDisplay from './distance-display'
 
 type VehicleFormFactor =
@@ -74,6 +74,7 @@ const Vehicle = ({
   companies?: Company[]
   fromToSlot: JSX.Element
   vehicle: {
+    additionalCount: number
     distance: number
     name: string
     network: string
@@ -90,6 +91,7 @@ const Vehicle = ({
     vehicle.name === 'Default vehicle type'
       ? getVehicleText(formFactor, companyLabel, intl)
       : vehicle.name
+
   return (
     <Card>
       <CardHeader>
@@ -116,6 +118,18 @@ const Vehicle = ({
         )}
         {fromToSlot}
       </CardBody>
+      {vehicle.additionalCount > 0 && (
+        <CardFooter>
+          <span>
+            <FormattedMessage
+              id="components.NearbyView.additionalVehicles"
+              values={{
+                count: vehicle.additionalCount
+              }}
+            />
+          </span>
+        </CardFooter>
+      )}
     </Card>
   )
 }