Route Viewer Details Pane and Realtime Vehicle Position Viewer

example.css

@@ -38,7 +38,7 @@
 
 .sidebar {
   height: 100%;
-  padding: 10px;
+  padding: 0;
   box-shadow: 3px 0px 12px #00000052;
   z-index: 1000;
 }

i18n/en-US.yml

@@ -36,6 +36,11 @@ components:
     tripDurationFormatZeroHours: "{minutes, number} min"
     # TODO: Distinguish between one hour (singular) and 2 hours or more?
     tripDurationFormat: "{hours, number} hr {minutes, number} min"
+  RouteDetails:
+    operatedBy: "Operated by {agencyName}"
+    moreDetails: "More Details"
+    stopsTo: "Towards"
+    selectADirection: "Select a direction..."
   RouteViewer:
     allAgencies: All Agencies
     allModes: All Modes # Note to translator: This text is width-constrained.
@@ -47,6 +52,17 @@ components:
     agencyFilter: Agency Filter
     modeFilter: Mode Filter
     details: " " # If the string is left blank, React-Intl renders the id
+  RouteRow:
+    operatorLogoAltText: '{operatorName} logo'
+  TransitVehicleOverlay:
+    # keys designed to match API output
+    incoming_at: "approaching {stop}"
+    stopped_at: "doors open at {stop}"
+    in_transit_to: "next stop {stop}"
+
+    vehicleName: "Vehicle {vehicleNumber}: "
+    realtimeVehicleInfo: "<b>{vehicleNameOrBlank}</b>{relativeTime}"
+    travelingAt: "traveling at {milesPerHour}"
   ItinerarySummary:
     fareCost: "{useMaxFare, select, 
       true {{minTotalFare} - {maxTotalFare}}

i18n/fr-FR.yml

@@ -11,6 +11,11 @@ components:
     tripDurationFormatZeroHours: "{minutes, number} mn"
     # TODO: Distinguish between one hour (singular) and 2 hours or more?
     tripDurationFormat: "{hours, number} h {minutes, number} mn"
+  RouteDetails:
+    operatedBy: "Exploité par {agencyName}"
+    moreDetails: "Plus d'infos"
+    stopsTo: "Direction"
+    selectADirection: "Choisissez une direction..."
   RouteViewer:
     allAgencies: Tous exploitants
     allModes: Tous modes # Note to translator: This text is width-constrained.
@@ -22,6 +27,17 @@ components:
     agencyFilter: Filtre pour les exploitants
     modeFilter: Filtre pour les modes
     details: " " # If the string is left blank, React-Intl renders the id
+  RouteRow:
+    operatorLogoAltText: "Logo de {operatorName}"
+  TransitVehicleOverlay:
+    # keys designed to match API output
+    incoming_at: "Approchant {stop}"
+    stopped_at: "À quai à {stop}"
+    in_transit_to: "Prochain arrêt : {stop}"
+
+    vehicleName: "Véhicule {vehicleNumber}: "
+    realtimeVehicleInfo: "<b>{vehicleNameOrBlank}</b>{relativeTime}"
+    travelingAt: "Vitesse : {milesPerHour}"
   ItinerarySummary:
     fareCost: "{useMaxFare, select, 
       true {{minTotalFare} - {maxTotalFare}}

lib/actions/api.js

@@ -507,19 +507,25 @@ export function findRoute (params) {
 
 export function findPatternsForRoute (params) {
   return createQueryAction(
-    `index/routes/${params.routeId}/patterns`,
+    `index/routes/${params.routeId}/patterns?includeGeometry=true`,
     findPatternsForRouteResponse,
     findPatternsForRouteError,
     {
+      noThrottle: true,
       postprocess: (payload, dispatch) => {
         // load geometry for each pattern
         payload.forEach(ptn => {
-          dispatch(findGeometryForPattern({
-            patternId: ptn.id,
-            routeId: params.routeId
-          }))
+          // Some OTP instances don't support includeGeometry.
+          // We need to manually fetch geometry in these cases.
+          if (!ptn.geometry) {
+            dispatch(findGeometryForPattern({
+              patternId: ptn.id,
+              routeId: params.routeId
+            }))
+          }
         })
       },
+
       rewritePayload: (payload) => {
         // convert pattern array to ID-mapped object
         const patterns = {}
@@ -556,6 +562,29 @@ export function findGeometryForPattern (params) {
   )
 }
 
+// Stops for pattern query
+
+export const findStopsForPatternResponse = createAction('FIND_STOPS_FOR_PATTERN_RESPONSE')
+export const findStopsForPatternError = createAction('FIND_STOPS_FOR_PATTERN_ERROR')
+
+export function findStopsForPattern (params) {
+  return createQueryAction(
+    `index/patterns/${params.patternId}/stops`,
+    findStopsForPatternResponse,
+    findStopsForPatternError,
+    {
+      noThrottle: true,
+      rewritePayload: (payload) => {
+        return {
+          patternId: params.patternId,
+          routeId: params.routeId,
+          stops: payload
+        }
+      }
+    }
+  )
+}
+
 // TNC ETA estimate lookup query
 
 export const transportationNetworkCompanyEtaResponse = createAction('TNC_ETA_RESPONSE')
@@ -682,6 +711,27 @@ export function findStopsWithinBBox (params) {
 
 export const clearStops = createAction('CLEAR_STOPS_OVERLAY')
 
+// Realtime Vehicle 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 () {
@@ -720,6 +770,7 @@ window.setInterval(() => {
  */
 
 function createQueryAction (endpoint, responseAction, errorAction, options = {}) {
+  /* eslint-disable-next-line complexity */
   return async function (dispatch, getState) {
     const state = getState()
     const { config } = state.otp

lib/actions/ui.js

@@ -5,6 +5,7 @@ import { matchPath } from 'react-router'
 
 import { getUiUrlParams, getModesForActiveAgencyFilter } from '../util/state'
 import { getDefaultLocale, loadLocaleData } from '../util/i18n'
+import { getPathFromParts } from '../util/ui'
 
 import { findRoute, setUrlSearch } from './api'
 import { setMapCenter, setMapZoom, setRouterId } from './config'
@@ -47,22 +48,31 @@ export function routeTo (url, replaceSearch, routingMethod = push) {
  * route or stop).
  */
 export function matchContentToUrl (location) {
+  // eslint-disable-next-line complexity
   return function (dispatch, getState) {
     // This is a bit of a hack to make up for the fact that react-router does
     // not always provide the match params as expected.
     // https://github.com/ReactTraining/react-router/issues/5870#issuecomment-394194338
     const root = location.pathname.split('/')[1]
     const match = matchPath(location.pathname, {
-      exact: true,
+      exact: false,
       path: `/${root}/:id`,
       strict: false
     })
-    const id = match && match.params && match.params.id
+    const id = match?.params?.id
     switch (root) {
       case 'route':
         if (id) {
           dispatch(findRoute({ routeId: id }))
-          dispatch(setViewedRoute({ routeId: id }))
+          // Check for pattern "submatch"
+          const subMatch = matchPath(location.pathname, {
+            exact: true,
+            path: `/${root}/:id/pattern/:patternId`,
+            strict: false
+          })
+          const patternId = subMatch?.params?.patternId
+          // patternId may be undefined, which is OK as the route will still be routed
+          dispatch(setViewedRoute({ patternId, routeId: id }))
         } else {
           dispatch(setViewedRoute(null))
           dispatch(setMainPanelContent(MainPanelContent.ROUTE_VIEWER))
@@ -196,23 +206,29 @@ export const clearPanel = createAction('CLEAR_MAIN_PANEL')
 export function setViewedStop (payload) {
   return function (dispatch, getState) {
     dispatch(viewStop(payload))
-    const path = payload && payload.stopId
-      ? `/stop/${payload.stopId}`
-      : '/stop'
+    // payload.stopId may be undefined, which is ok as will be ignored by getPathFromParts
+    const path = getPathFromParts('stop', payload?.stopId)
     dispatch(routeTo(path))
   }
 }
 
 const viewStop = createAction('SET_VIEWED_STOP')
 
+export const setHoveredStop = createAction('SET_HOVERED_STOP')
+
 export const setViewedTrip = createAction('SET_VIEWED_TRIP')
 
 export function setViewedRoute (payload) {
   return function (dispatch, getState) {
     dispatch(viewRoute(payload))
-    const path = payload && payload.routeId
-      ? `/route/${payload.routeId}`
-      : '/route'
+
+    const path = getPathFromParts(
+      'route',
+      payload?.routeId,
+      // If a pattern is supplied, include pattern in path
+      payload?.patternId && 'pattern',
+      payload?.patternId
+    )
     dispatch(routeTo(path))
   }
 }

lib/components/app/app.css

@@ -62,6 +62,10 @@
   box-sizing: border-box;
 }
 
+/* Batch routing panel requires padding removed from sidebar */
+.batch-routing-panel {
+  padding: 10px;
+}
 /* View Switcher Styling */
 .view-switcher {
   align-items: center;

lib/components/map/connected-route-viewer-overlay.js

@@ -5,10 +5,20 @@ import { connect } from 'react-redux'
 
 const mapStateToProps = (state, ownProps) => {
   const viewedRoute = state.otp.ui.viewedRoute
-  return {
-    routeData: viewedRoute && state.otp.transitIndex.routes
+
+  const routeData =
+    viewedRoute && state.otp.transitIndex.routes
       ? state.otp.transitIndex.routes[viewedRoute.routeId]
       : null
+  let filteredPatterns = routeData?.patterns
+
+  // If a pattern is selected, hide all other patterns
+  if (viewedRoute?.patternId && routeData?.patterns) {
+    filteredPatterns = {[viewedRoute.patternId]: routeData.patterns[viewedRoute.patternId]}
+  }
+
+  return {
+    routeData: { ...routeData, patterns: filteredPatterns }
   }
 }
 

lib/components/map/connected-stop-marker.js

@@ -7,8 +7,18 @@ import { setViewedStop } from '../../actions/ui'
 // connect to the redux store
 
 const mapStateToProps = (state, ownProps) => {
+  const { highlightedStop, viewedRoute } = state.otp.ui
+  const routeData = viewedRoute && state.otp.transitIndex.routes?.[viewedRoute.routeId]
+  const hoverColor = routeData?.routeColor || '#333'
+
   return {
     languageConfig: state.otp.config.language,
+    leafletPath: {
+      color: '#000',
+      fillColor: highlightedStop === ownProps.entity.id ? hoverColor : '#FFF',
+      fillOpacity: 1,
+      weight: 1
+    },
     stop: ownProps.entity
   }
 }

lib/components/map/connected-stops-overlay.js

@@ -1,17 +1,29 @@
 import StopsOverlay from '@opentripplanner/stops-overlay'
-import StopMarker from './connected-stop-marker'
 import { connect } from 'react-redux'
 
 import { findStopsWithinBBox } from '../../actions/api'
 
+import StopMarker from './connected-stop-marker'
+
 // connect to the redux store
 
 const mapStateToProps = (state, ownProps) => {
+  const { viewedRoute } = state.otp.ui
+
+  let { stops } = state.otp.overlay.transit
+  let minZoom = 15
+
+  // If a pattern is being shown, show only the pattern's stops and show them large
+  if (viewedRoute?.patternId && state.otp.transitIndex.routes) {
+    stops = state.otp.transitIndex.routes[viewedRoute.routeId]?.patterns?.[viewedRoute.patternId].stops
+    minZoom = 2
+  }
+
   return {
-    stops: state.otp.overlay.transit.stops,
+    stops: stops || [],
     symbols: [
       {
-        minZoom: 15,
+        minZoom,
         symbol: StopMarker
       }
     ]