From 016275a627adca26ee07fa9fcc4b51255cdcd826 Mon Sep 17 00:00:00 2001 From: Evan Siroky Date: Fri, 6 Sep 2019 16:18:05 -0700 Subject: [PATCH 1/2] fix(map): update wording for map marker popups Fixes https://github.com/ibi-group/trimet-mod-otp/issues/241 Refs https://github.com/ibi-group/trimet-mod-otp/issues/246 --- lib/components/map/vehicle-rental-overlay.js | 77 ++++++++++---------- lib/util/itinerary.js | 1 + 2 files changed, 38 insertions(+), 40 deletions(-) diff --git a/lib/components/map/vehicle-rental-overlay.js b/lib/components/map/vehicle-rental-overlay.js index 7add43873..68c2d6ed9 100644 --- a/lib/components/map/vehicle-rental-overlay.js +++ b/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 title */} -
- Floating vehicle {stationName} -
+
{stationName}
+ + {/* render dock info if it is available */} + {stationIsHub && ( +
+
Available bikes: {station.bikesAvailable}
+
Available docks: {station.spacesAvailable}
+
+ )} {/* Set as from/to toolbar */}
@@ -124,38 +151,7 @@ class VehicleRentalOverlay extends MapLayer { key={station.id} position={[station.y, station.x]} > - -
- {/* Popup title */} -
- {station.isFloatingBike - ? Floating bike: {station.name} - : {station.name} - } -
- - {/* Details */} - {!station.isFloatingBike && ( -
-
Available bikes: {station.bikesAvailable}
-
Available docks: {station.spacesAvailable}
-
- )} - - {/* Set as from/to toolbar */} -
- -
-
- + {this._renderPopupForStation(station, !station.isFloatingBike)} ) } @@ -239,6 +235,7 @@ class VehicleRentalOverlay extends MapLayer { const mapStateToProps = (state, ownProps) => { return { + configCompanies: state.otp.config.companies, zoom: state.otp.config.map.initZoom } } diff --git a/lib/util/itinerary.js b/lib/util/itinerary.js index 6241d3add..d820944ee 100644 --- a/lib/util/itinerary.js +++ b/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('/') } From 90c2eb9bc93409d1ff8d001a6e56f5d6f1f27ec8 Mon Sep 17 00:00:00 2001 From: Evan Siroky Date: Fri, 6 Sep 2019 16:19:12 -0700 Subject: [PATCH 2/2] fix: change E-scooter wording Fixes https://github.com/ibi-group/trimet-mod-otp/issues/246 --- lib/components/form/settings-selector-panel.js | 2 +- lib/components/map/vehicle-rental-overlay.js | 2 +- lib/components/narrative/line-itin/place-row.js | 6 +++--- .../narrative/printable/printable-itinerary.js | 2 +- lib/util/itinerary.js | 4 ++-- lib/util/query-params.js | 14 +++++++------- 6 files changed, 15 insertions(+), 15 deletions(-) diff --git a/lib/components/form/settings-selector-panel.js b/lib/components/form/settings-selector-panel.js index c07b8952f..9718fcd45 100644 --- a/lib/components/form/settings-selector-panel.js +++ b/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} /> diff --git a/lib/components/map/vehicle-rental-overlay.js b/lib/components/map/vehicle-rental-overlay.js index 68c2d6ed9..89d82dc2a 100644 --- a/lib/components/map/vehicle-rental-overlay.js +++ b/lib/components/map/vehicle-rental-overlay.js @@ -68,7 +68,7 @@ class VehicleRentalOverlay extends MapLayer { } else if (station.isFloatingCar) { stationName = `${stationNetworks} ${stationName}` } else if (station.isFloatingVehicle) { - // assumes that all floating vehicles are eScooters + // assumes that all floating vehicles are E-scooters stationName = `${stationNetworks} E-scooter` } else { stationIsHub = true diff --git a/lib/components/narrative/line-itin/place-row.js b/lib/components/narrative/line-itin/place-row.js index 09337abf4..cdb1526d2 100644 --- a/lib/components/narrative/line-itin/place-row.js +++ b/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 (
diff --git a/lib/components/narrative/printable/printable-itinerary.js b/lib/components/narrative/printable/printable-itinerary.js index 8aa48a5ac..ecb13c545 100644 --- a/lib/components/narrative/printable/printable-itinerary.js +++ b/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 ( diff --git a/lib/util/itinerary.js b/lib/util/itinerary.js index d820944ee..c89e1bcac 100644 --- a/lib/util/itinerary.js +++ b/lib/util/itinerary.js @@ -441,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': @@ -457,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) diff --git a/lib/util/query-params.js b/lib/util/query-params.js index dfcfd7487..94ebf17e2 100644 --- a/lib/util/query-params.js +++ b/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 } ],