fix(map): update wording for map marker popups

Fixes ibi-group/trimet-mod-otp#241
Refs ibi-group/trimet-mod-otp#246

Author: evansiroky

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 eScooters
+      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/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('/')
 }