Merge pull request #106 from opentripplanner/vehicle-wording-fixes

Vehicle wording fixes

lib/components/form/settings-selector-panel.js

@@ -326,7 +326,7 @@ class SettingsSelectorPanel extends Component {
                 icons={icons}
                 mode={'MICROMOBILITY'}
                 height={36}
-                label={'eScooter Only'}
+                label={'E-scooter Only'}
                 inlineLabel
                 onClick={this._setMicromobilityOnly}
               />

lib/components/map/vehicle-rental-overlay.js

@@ -4,8 +4,9 @@ import { connect } from 'react-redux'
 import { CircleMarker, FeatureGroup, Marker, MapLayer, Popup, withLeaflet } from 'react-leaflet'
 import { divIcon } from 'leaflet'
 
-import SetFromToButtons from './set-from-to'
 import { setLocation } from '../../actions/map'
+import SetFromToButtons from './set-from-to'
+import { getCompaniesLabelFromNetworks } from '../../util/itinerary'
 
 class VehicleRentalOverlay extends MapLayer {
   static propTypes = {
@@ -50,26 +51,52 @@ class VehicleRentalOverlay extends MapLayer {
     }
   }
 
-  _renderPopupForStation = (station) => {
-    const stationName = `${station.networks.join('/')} ${station.name || station.id}`
+  /**
+   * Render some popup html for a station. This contains custom logic for
+   * displaying rental vehicles in the TriMet MOD website that might not be
+   * applicable to other regions.
+   */
+  _renderPopupForStation = (station, stationIsHub = false) => {
+    const {configCompanies, leaflet, setLocation} = this.props
+    const stationNetworks = getCompaniesLabelFromNetworks(
+      station.networks,
+      configCompanies
+    )
+    let stationName = station.name || station.id
+    if (station.isFloatingBike) {
+      stationName = `Free-floating bike: ${stationName}`
+    } else if (station.isFloatingCar) {
+      stationName = `${stationNetworks} ${stationName}`
+    } else if (station.isFloatingVehicle) {
+      // assumes that all floating vehicles are E-scooters
+      stationName = `${stationNetworks} E-scooter`
+    } else {
+      stationIsHub = true
+    }
     return (
       <Popup>
         <div className='map-overlay-popup'>
           {/* Popup title */}
-          <div className='popup-title'>
-            Floating vehicle {stationName}
-          </div>
+          <div className='popup-title'>{stationName}</div>
+
+          {/* render dock info if it is available */}
+          {stationIsHub && (
+            <div className='popup-row'>
+              <div>Available bikes: {station.bikesAvailable}</div>
+              <div>Available docks: {station.spacesAvailable}</div>
+            </div>
+          )}
 
           {/* Set as from/to toolbar */}
           <div className='popup-row'>
             <SetFromToButtons
-              map={this.props.leaflet.map}
+              map={leaflet.map}
               location={{
                 lat: station.y,
                 lon: station.x,
                 name: stationName
               }}
-              setLocation={this.props.setLocation}
+              setLocation={setLocation}
             />
           </div>
         </div>
@@ -124,38 +151,7 @@ class VehicleRentalOverlay extends MapLayer {
         key={station.id}
         position={[station.y, station.x]}
       >
-        <Popup>
-          <div className='map-overlay-popup'>
-            {/* Popup title */}
-            <div className='popup-title'>
-              {station.isFloatingBike
-                ? <span>Floating bike: {station.name}</span>
-                : <span>{station.name}</span>
-              }
-            </div>
-
-            {/* Details */}
-            {!station.isFloatingBike && (
-              <div className='popup-row'>
-                <div>Available bikes: {station.bikesAvailable}</div>
-                <div>Available docks: {station.spacesAvailable}</div>
-              </div>
-            )}
-
-            {/* Set as from/to toolbar */}
-            <div className='popup-row'>
-              <SetFromToButtons
-                map={this.props.leaflet.map}
-                location={{
-                  lat: station.y,
-                  lon: station.x,
-                  name: station.name
-                }}
-                setLocation={this.props.setLocation}
-              />
-            </div>
-          </div>
-        </Popup>
+        {this._renderPopupForStation(station, !station.isFloatingBike)}
       </Marker>
     )
   }
@@ -239,6 +235,7 @@ class VehicleRentalOverlay extends MapLayer {
 
 const mapStateToProps = (state, ownProps) => {
   return {
+    configCompanies: state.otp.config.companies,
     zoom: state.otp.config.map.initZoom
   }
 }

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

@@ -176,7 +176,7 @@ class RentedVehicleLeg extends PureComponent {
       let vehicleName = ''
       // TODO allow more flexibility in customizing these mode strings
       let modeString = leg.rentedVehicle
-        ? 'eScooter'
+        ? 'E-scooter'
         : leg.rentedBike
           ? 'bike'
           : 'car'
@@ -192,7 +192,7 @@ class RentedVehicleLeg extends PureComponent {
           configCompanies
         )
         rentalDescription += ` ${companiesLabel}`
-        // Only show vehicle name for car rentals. For bikes and eScooters, these
+        // Only show vehicle name for car rentals. For bikes and E-scooters, these
         // IDs/names tend to be less relevant (or entirely useless) in this context.
         if (leg.rentedCar && leg.from.name) {
           vehicleName = leg.from.name
@@ -205,7 +205,7 @@ class RentedVehicleLeg extends PureComponent {
       rentalDescription += ` ${modeString} ${vehicleName}`
     }
     // e.g., Pick up REACHNOW rented car XYZNDB OR
-    //       Pick up SPIN eScooter
+    //       Pick up SPIN E-scooter
     //       Pick up shared bike
     return (
       <div className='place-subheader'>

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

@@ -156,7 +156,7 @@ class AccessLeg extends Component {
         leg.from.networks,
         configCompanies
       )
-      legModeLabel = `Ride ${companiesLabel} eScooter`
+      legModeLabel = `Ride ${companiesLabel} E-scooter`
     }
 
     return (

lib/util/itinerary.js

@@ -423,6 +423,7 @@ function getCompanyForNetwork (networkString, companies = []) {
  */
 export function getCompaniesLabelFromNetworks (networks, companies = []) {
   return networks.map(network => getCompanyForNetwork(network, companies))
+    .filter(co => !!co)
     .map(co => co.label)
     .join('/')
 }
@@ -440,7 +441,7 @@ export function getModeForPlace (place) {
     case 'CARSHARE':
       return 'car'
     case 'VEHICLERENTAL':
-      return 'eScooter'
+      return 'E-scooter'
     // TODO: Should the type change depending on bike vertex type?
     case 'BIKESHARE':
     case 'BIKEPARK':
@@ -456,7 +457,7 @@ export function getPlaceName (place, companies) {
   if (place.address) return place.address.split(',')[0]
   if (place.networks && place.vertexType === 'VEHICLERENTAL') {
     // For vehicle rental pick up, do not use the place name. Rather, use
-    // company name + vehicle type (e.g., SPIN eScooter). Place name is often just
+    // company name + vehicle type (e.g., SPIN E-scooter). Place name is often just
     // a UUID that has no relevance to the actual vehicle. For bikeshare, however,
     // there are often hubs or bikes that have relevant names to the user.
     const company = getCompanyForNetwork(place.networks[0], companies)

lib/util/query-params.js

@@ -388,7 +388,7 @@ const queryParams = [
   },
 
   { /* maxEScooterDistance - the maximum distance in meters the user will ride
-     * an eScooter. Not actually an OTP parameter (maxWalkDistance doubles for
+     * an E-scooter. Not actually an OTP parameter (maxWalkDistance doubles for
      * any non-transit mode except for car) but we store it separately
      * internally in order to allow different default values, options, etc.
      * Translated to 'maxWalkDistance' via the rewrite function.
@@ -398,7 +398,7 @@ const queryParams = [
     applicable: query => query.mode && hasTransit(query.mode) && hasMicromobility(query.mode),
     default: 4828, // 3 mi.
     selector: 'DROPDOWN',
-    label: 'Maximum eScooter Distance',
+    label: 'Maximum E-scooter Distance',
     options: [
       {
         text: '1/4 mile',
@@ -444,9 +444,9 @@ const queryParams = [
     routingTypes: [ 'ITINERARY', 'PROFILE' ],
     default: 250,
     selector: 'DROPDOWN',
-    label: 'eScooter Power',
-    // this configuration should only be allowed for personal eScooters as these
-    // settings will be defined by the vehicle type of an eScooter being rented
+    label: 'E-scooter Power',
+    // this configuration should only be allowed for personal E-scooters as these
+    // settings will be defined by the vehicle type of an E-scooter being rented
     applicable: query => (
       query.mode &&
         query.mode.indexOf('MICROMOBILITY') !== -1 &&
@@ -460,10 +460,10 @@ const queryParams = [
         text: 'Entry-level scooter (11mph)',
         value: 250
       }, {
-        text: 'Robust eScooter (18mph)',
+        text: 'Robust E-scooter (18mph)',
         value: 500
       }, {
-        text: 'Powerful eScooter (24mph)',
+        text: 'Powerful E-scooter (24mph)',
         value: 1500
       }
     ],