fix(print): show custom icons, add distance, improve wording

Author: evansiroky

lib/components/app/print-layout.js

@@ -59,7 +59,7 @@ class PrintLayout extends Component {
   }
 
   render () {
-    const { companies, itinerary, timeFormat } = this.props
+    const { configCompanies, customIcons, itinerary, timeFormat } = this.props
     return (
       <div className='otp print-layout'>
         {/* The header bar, including the Toggle Map and Print buttons */}
@@ -89,8 +89,9 @@ class PrintLayout extends Component {
         {/* The main itinerary body */}
         {itinerary
           ? <PrintableItinerary
+            configCompanies={configCompanies}
+            customIcons={customIcons}
             itinerary={itinerary}
-            companies={companies}
             timeFormat={timeFormat} />
           : null
         }
@@ -104,7 +105,7 @@ class PrintLayout extends Component {
 const mapStateToProps = (state, ownProps) => {
   return {
     itinerary: getActiveItinerary(state.otp),
-    companies: state.otp.config.companies,
+    configCompanies: state.otp.config.companies,
     timeFormat: getTimeFormat(state.otp.config)
   }
 }

lib/components/app/responsive-webapp.js

@@ -193,7 +193,10 @@ class RouterWrapper extends Component {
             />
             <Route
               path='/print'
-              component={PrintLayout}
+              component={(routerProps) => {
+                const props = {...this.props, ...routerProps}
+                return <PrintLayout {...props} />
+              }}
             />
             {/* For any other route, simply return the web app. */}
             <Route

lib/components/narrative/line-itin/place-row.js

@@ -4,7 +4,7 @@ import { connect } from 'react-redux'
 import LocationIcon from '../../icons/location-icon'
 import ViewStopButton from '../../viewers/view-stop-button'
 import {
-  getCompanyForNetwork,
+  getCompaniesLabelFromNetworks,
   getModeForPlace,
   getPlaceName
 } from '../../../util/itinerary'
@@ -187,9 +187,11 @@ class RentedVehicleLeg extends PureComponent {
       // resumes there won't be any network info. In that case we simply return
       // that the rental is continuing.
       if (leg.from.networks) {
-        const companies = leg.from.networks.map(n => getCompanyForNetwork(n, configCompanies))
-        const companyLabel = companies.map(co => co.label).join('/')
-        rentalDescription += ` ${companyLabel}`
+        const companiesLabel = getCompaniesLabelFromNetworks(
+          leg.from.networks,
+          configCompanies
+        )
+        rentalDescription += ` ${companiesLabel}`
         // Only show vehicle name for car rentals. For bikes and eScooters, these
         // IDs/names tend to be less relevant (or entirely useless) in this context.
         if (leg.rentedCar && leg.from.name) {
@@ -200,7 +202,7 @@ class RentedVehicleLeg extends PureComponent {
         rentalDescription = 'Continue using rental'
       }
 
-      rentalDescription += ` ${modeString}${vehicleName}`
+      rentalDescription += ` ${modeString} ${vehicleName}`
     }
     // e.g., Pick up REACHNOW rented car XYZNDB OR
     //       Pick up SPIN eScooter

lib/components/narrative/printable/printable-itinerary.js

@@ -1,10 +1,12 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 
-import ModeIcon from '../../icons/mode-icon'
 import TripDetails from '../trip-details'
+import { distanceString } from '../../../util/distance'
 import { formatTime, formatDuration } from '../../../util/time'
 import {
+  getCompaniesLabelFromNetworks,
+  getLegIcon,
   getLegModeLabel,
   getPlaceName,
   getStepDirection,
@@ -18,7 +20,12 @@ export default class PrintableItinerary extends Component {
   }
 
   render () {
-    const { companies, itinerary, timeFormat } = this.props
+    const {
+      configCompanies,
+      customIcons,
+      itinerary,
+      timeFormat
+    } = this.props
 
     const timeOptions = {
       format: timeFormat,
@@ -39,20 +46,24 @@ export default class PrintableItinerary extends Component {
         {itinerary.legs.map((leg, k) => leg.transitLeg
           ? <TransitLeg
             key={k}
-            leg={leg}
+            customIcons={customIcons}
             interlineFollows={k < itinerary.legs.length - 1 &&
               itinerary.legs[k + 1].interlineWithPreviousLeg
             }
+            leg={leg}
             timeOptions={timeOptions} />
           : leg.hailedCar
             ? <TNCLeg
+              customIcons={customIcons}
               leg={leg}
               timeOptions={timeOptions} />
             : <AccessLeg
               key={k}
+              configCompanies={configCompanies}
+              customIcons={customIcons}
               leg={leg}
               timeOptions={timeOptions}
-              companies={companies} />
+            />
         )}
         <TripDetails itinerary={itinerary} />
       </div>
@@ -66,7 +77,7 @@ class TransitLeg extends Component {
   }
 
   render () {
-    const { leg, interlineFollows, timeOptions } = this.props
+    const { customIcons, leg, interlineFollows, timeOptions } = this.props
 
     // Handle case of transit leg interlined w/ previous
     if (leg.interlineWithPreviousLeg) {
@@ -91,7 +102,7 @@ class TransitLeg extends Component {
 
     return (
       <div className='leg'>
-        <div className='mode-icon'><ModeIcon mode={leg.mode} /></div>
+        <div className='mode-icon'>{getLegIcon(leg, customIcons)}</div>
         <div className='leg-body'>
           <div className='leg-header'>
             <b>{leg.routeShortName} {leg.routeLongName}</b> to <b>{leg.to.name}</b>
@@ -123,14 +134,41 @@ class AccessLeg extends Component {
   }
 
   render () {
-    const { companies, leg } = this.props
+    const { configCompanies, customIcons, leg } = this.props
+
+    // calculate leg mode label in a special way for this component
+    let legModeLabel = getLegModeLabel(leg)
+
+    if (leg.rentedBike) {
+      // FIXME: Special case for TriMet that needs to be refactored to
+      // incorporate actual company.
+      legModeLabel = 'Ride BIKETOWN bike'
+    } else if (leg.rentedCar) {
+      // Add extra information to printview that would otherwise clutter up
+      // other places that use the getLegModeLabel function
+      const companiesLabel = getCompaniesLabelFromNetworks(
+        leg.from.networks,
+        configCompanies
+      )
+      legModeLabel = `Drive ${companiesLabel} ${leg.from.name}`
+    } else if (leg.rentedVehicle) {
+      const companiesLabel = getCompaniesLabelFromNetworks(
+        leg.from.networks,
+        configCompanies
+      )
+      legModeLabel = `Ride ${companiesLabel} eScooter`
+    }
+
     return (
       <div className='leg'>
-        <div className='mode-icon'><ModeIcon mode={leg.mode} /></div>
+        <div className='mode-icon'>{getLegIcon(leg, customIcons)}</div>
         <div className='leg-body'>
           <div className='leg-header'>
-            <b>{getLegModeLabel(leg)}</b>{' '}
-            to <b>{getPlaceName(leg.to, companies)}</b>
+            <b>{legModeLabel}</b>{' '}
+            {!leg.hailedCar &&
+              leg.distance > 0 &&
+              <span> {distanceString(leg.distance)} </span>}
+            to <b>{getPlaceName(leg.to, configCompanies)}</b>
           </div>
           {!leg.hailedCar && (
             <div className='leg-details'>
@@ -155,13 +193,13 @@ class TNCLeg extends Component {
   }
 
   render () {
-    const { leg } = this.props
+    const { customIcons, leg } = this.props
     const { tncData } = leg
     if (!tncData) return null
 
     return (
       <div className='leg'>
-        <div className='mode-icon'><ModeIcon mode={leg.mode} /></div>
+        <div className='mode-icon'>{getLegIcon(leg, customIcons)}</div>
         <div className='leg-body'>
           <div className='leg-header'>
             <b>Take {tncData.displayName}</b> to <b>{leg.to.name}</b>

lib/util/itinerary.js

@@ -402,6 +402,10 @@ export function getLegIcon (leg, customIcons) {
   return getIcon(iconStr, customIcons)
 }
 
+/**
+ * Get the configured company object for the given network string if the company
+ * has been defined in the provided companies array config.
+ */
 export function getCompanyForNetwork (networkString, companies = []) {
   const company = companies.find(co => co.id === networkString)
   if (!company) {
@@ -410,6 +414,19 @@ export function getCompanyForNetwork (networkString, companies = []) {
   return company
 }
 
+/**
+ * Get a string label to display from a list of vehicle rental networks.
+ *
+ * @param  {Array<string>} networks  A list of network ids.
+ * @param  {Array<object>}  [companies=[]] An optional list of the companies config.
+ * @return {string}  A label for use in presentation on a website.
+ */
+export function getCompaniesLabelFromNetworks (networks, companies = []) {
+  return networks.map(network => getCompanyForNetwork(network, companies))
+    .map(co => co.label)
+    .join('/')
+}
+
 /**
  * Returns mode name by checking the vertex type (VertexType class in OTP) for
  * the provided place. NOTE: this is currently only intended for vehicles at