feat(route-viewer): show realtime vehicle positions

relies on ibi-group/OpenTripPlanner#63

closes #440

Author: miles-grant-ibigroup

lib/actions/api.js

@@ -704,6 +704,27 @@ export function findStopsWithinBBox (params) {
 
 export const clearStops = createAction('CLEAR_STOPS_OVERLAY')
 
+// Realtime Vehcile positions query
+
+const receivedVehiclePositions = createAction('REALTIME_VEHICLE_POSITIONS_RESPONSE')
+const receivedVehiclePositionsError = createAction('REALTIME_VEHICLE_POSITIONS_ERROR')
+
+export function getVehiclePositionsForRoute (routeId) {
+  return createQueryAction(
+    `index/routes/${routeId}/vehicles`,
+    receivedVehiclePositions,
+    receivedVehiclePositionsError,
+    {
+      rewritePayload: (payload) => {
+        return {
+          routeId: routeId,
+          vehicles: payload
+        }
+      }
+    }
+  )
+}
+
 const throttledUrls = {}
 
 function now () {

lib/components/map/connected-transit-vehicle-overlay.js

@@ -0,0 +1,24 @@
+import TransitVehicleOverlay from '@opentripplanner/transit-vehicle-overlay'
+import { connect } from 'react-redux'
+
+// connect to the redux store
+
+const mapStateToProps = (state, ownProps) => {
+  const viewedRoute = state.otp.ui.viewedRoute
+
+  let vehicleList = []
+
+  if (viewedRoute?.routeId) {
+    vehicleList = state.otp.transitIndex?.routes?.[viewedRoute.routeId].vehicles
+    if (viewedRoute.patternId) {
+      vehicleList = vehicleList.filter(
+        (vehicle) => vehicle.patternId === viewedRoute.patternId
+      )
+    }
+  }
+  return { vehicleList }
+}
+
+const mapDispatchToProps = {}
+
+export default connect(mapStateToProps, mapDispatchToProps)(TransitVehicleOverlay)

lib/components/map/default-map.js

@@ -20,6 +20,7 @@ import BoundsUpdatingOverlay from './bounds-updating-overlay'
 import EndpointsOverlay from './connected-endpoints-overlay'
 import ParkAndRideOverlay from './connected-park-and-ride-overlay'
 import RouteViewerOverlay from './connected-route-viewer-overlay'
+import TransitVehicleOverlay from './connected-transit-vehicle-overlay'
 import StopViewerOverlay from './connected-stop-viewer-overlay'
 import StopsOverlay from './connected-stops-overlay'
 import TransitiveOverlay from './connected-transitive-overlay'
@@ -159,6 +160,7 @@ class DefaultMap extends Component {
           <BoundsUpdatingOverlay />
           <EndpointsOverlay />
           <RouteViewerOverlay />
+          <TransitVehicleOverlay />
           <StopViewerOverlay />
           <TransitiveOverlay getTransitiveRouteLabel={getTransitiveRouteLabel} />
           <TripViewerOverlay />

lib/components/viewers/route-viewer.js

@@ -9,7 +9,7 @@ import tinycolor from 'tinycolor2'
 
 import Icon from '../narrative/icon'
 import { setMainPanelContent, setViewedRoute } from '../../actions/ui'
-import { findRoutes, findRoute } from '../../actions/api'
+import { getVehiclePositionsForRoute, findRoutes, findRoute } from '../../actions/api'
 import { ComponentContext } from '../../util/contexts'
 import { getColorAndNameFromRoute, getModeFromRoute } from '../../util/viewer'
 
@@ -33,6 +33,7 @@ class RouteViewer extends Component {
   render () {
     const {
       findRoute,
+      getVehiclePositionsForRoute,
       hideBackButton,
       languageConfig,
       routes,
@@ -116,6 +117,7 @@ class RouteViewer extends Component {
               return (
                 <RouteRow
                   findRoute={findRoute}
+                  getVehiclePositionsForRoute={getVehiclePositionsForRoute}
                   isActive={viewedRoute && viewedRoute.routeId === route.id}
                   key={route.id}
                   operator={operator}
@@ -195,15 +197,22 @@ const RouteNameElement = styled(Label)`
 class RouteRow extends PureComponent {
   static contextType = ComponentContext
 
+  componentDidMount = () => {
+    const {getVehiclePositionsForRoute, isActive, route} = this.props
+    if (isActive && route?.id) {
+      getVehiclePositionsForRoute(route.id)
+    }
+  }
   _onClick = () => {
-    const { findRoute, isActive, route, setViewedRoute } = this.props
+    const { findRoute, getVehiclePositionsForRoute, isActive, route, setViewedRoute } = this.props
     if (isActive) {
       // Deselect current route if active.
       setViewedRoute({ patternId: null, routeId: null })
     } else {
       // Otherwise, set active and fetch route patterns.
       findRoute({ routeId: route.id })
       setViewedRoute({ routeId: route.id })
+      getVehiclePositionsForRoute(route.id)
     }
   }
 
@@ -266,6 +275,7 @@ const mapStateToProps = (state, ownProps) => {
 const mapDispatchToProps = {
   findRoute,
   findRoutes,
+  getVehiclePositionsForRoute,
   setMainPanelContent,
   setViewedRoute
 }

lib/reducers/create-otp-reducer.js

@@ -752,6 +752,16 @@ function createOtpReducer (config) {
             }
           }
         })
+      case 'REALTIME_VEHICLE_POSITIONS_RESPONSE':
+        return update(state, {
+          transitIndex: {
+            routes: {
+              [action.payload.routeId]: {
+                vehicles: { $set: action.payload.vehicles }
+              }
+            }
+          }
+        })
       case 'CLEAR_STOPS_OVERLAY':
         return update(state, {
           overlay: {
@@ -914,7 +924,7 @@ function createOtpReducer (config) {
         // Otherwise, overwrite only this route
         return update(state, {
           transitIndex: {
-            routes: { [action.payload.id]: { $set: action.payload } }
+            routes: { [action.payload.id]: { $merge: action.payload } }
           }
         })
       case 'FIND_PATTERNS_FOR_ROUTE_RESPONSE':