Merge pull request #69 from opentripplanner/user-settings-configurable

landonreed · web-flow · commit 3c217e043f72 · 2019-07-03T09:23:28.000-04:00
Make user settings configurable, fix print layout
diff --git a/example-config.yml b/example-config.yml
@@ -2,6 +2,27 @@ api:
   host: http://localhost
   path: /otp/routers/default
   port: 8001
+# Add suggested locations to be shown as options in the form view.
+# locations:
+#   - id: 'airport'
+#     icon: 'plane'
+#     name: 'Portland International Airport (PDX)'
+#     lat: 45.587579
+#     lon: -122.593084
+#   - id: 'zoo'
+#     icon: building
+#     lat: 45.51010444232195
+#     lon: -122.71607145667079
+#     name: Oregon Zoo, Portland, OR
+
+### The persistence setting is used to enable the storage of places (home, work),
+### recent searches/places, user overrides, and favorite stops. Currently the
+### only strategy is localStorage (which is used by default). It also must be
+### enabled to show the stored locations (see above).
+### TODO: add another server-based strategy
+persistence:
+  enabled: true
+  strategy: localStorage
 
 map:
   initLat: 45.52
diff --git a/lib/components/app/default-main-panel.js b/lib/components/app/default-main-panel.js
@@ -7,17 +7,18 @@ import DefaultSearchForm from '../form/default-search-form'
 import PlanTripButton from '../form/plan-trip-button'
 import UserSettings from '../form/user-settings'
 import NarrativeRoutingResults from '../narrative/narrative-routing-results'
-import { getActiveSearch } from '../../util/state'
+import { getActiveSearch, getShowUserSettings } from '../../util/state'
 
 class DefaultMainPanel extends Component {
   render () {
     const {
+      activeSearch,
+      currentQuery,
       customIcons,
       itineraryClass,
       itineraryFooter,
       mainPanelContent,
-      currentQuery,
-      activeSearch
+      showUserSettings
     } = this.props
     const showPlanTripButton = mainPanelContent === 'EDIT_DATETIME' ||
       mainPanelContent === 'EDIT_SETTINGS'
@@ -35,7 +36,9 @@ class DefaultMainPanel extends Component {
           overflow: 'auto'
         }}>
           <DefaultSearchForm icons={customIcons} />
-          {!activeSearch && !showPlanTripButton && <UserSettings />}
+          {!activeSearch && !showPlanTripButton && showUserSettings &&
+            <UserSettings />
+          }
           <div className='desktop-narrative-container'>
             <NarrativeRoutingResults
               itineraryClass={itineraryClass}
@@ -66,10 +69,12 @@ class DefaultMainPanel extends Component {
 
 // connect to the redux store
 const mapStateToProps = (state, ownProps) => {
+  const showUserSettings = getShowUserSettings(state.otp)
   return {
-    mainPanelContent: state.otp.ui.mainPanelContent,
+    activeSearch: getActiveSearch(state.otp),
     currentQuery: state.otp.currentQuery,
-    activeSearch: getActiveSearch(state.otp)
+    mainPanelContent: state.otp.ui.mainPanelContent,
+    showUserSettings
   }
 }
 
diff --git a/lib/components/app/print-layout.js b/lib/components/app/print-layout.js
@@ -37,8 +37,7 @@ class PrintLayout extends Component {
     const { location } = this.props
     // Parse the URL query parameters, if present
     if (location && location.search) {
-      this.props.parseUrlQueryString(location.search)
-      this.props.routingQuery()
+      this.props.parseUrlQueryString()
     }
   }
 
diff --git a/lib/components/form/location-field.js b/lib/components/form/location-field.js
@@ -19,7 +19,7 @@ import { addLocationSearch, getCurrentPosition } from '../../actions/location'
 import { findNearbyStops } from '../../actions/api'
 import { distanceStringImperial } from '../../util/distance'
 import { formatStoredPlaceName } from '../../util/map'
-import { getActiveSearch } from '../../util/state'
+import { getActiveSearch, getShowUserSettings } from '../../util/state'
 
 class LocationField extends Component {
   static propTypes = {
@@ -283,6 +283,7 @@ class LocationField extends Component {
       location,
       user,
       showClearButton,
+      showUserSettings,
       static: isStatic,
       suppressNearby,
       type,
@@ -381,7 +382,7 @@ class LocationField extends Component {
     }
 
     /* 3b) Process stored user locations */
-    if (locations.length > 0) {
+    if (locations.length > 0 && showUserSettings) {
       // Add the menu sub-heading (not a selectable item)
       menuItems.push(<MenuItem header key='mp-header'>My Places</MenuItem>)
 
@@ -569,13 +570,15 @@ const mapStateToProps = (state, ownProps) => {
   const activeSearch = getActiveSearch(state.otp)
   const query = activeSearch ? activeSearch.query : state.otp.currentQuery
   const location = query[ownProps.type]
+  const showUserSettings = getShowUserSettings(state.otp)
   return {
     config: state.otp.config,
     location,
     user: state.otp.user,
     currentPosition: state.otp.location.currentPosition,
     sessionSearches: state.otp.location.sessionSearches,
     nearbyStops: state.otp.location.nearbyStops,
+    showUserSettings,
     stopsIndex: state.otp.transitIndex.stops
   }
 }
diff --git a/lib/components/form/settings-selector-panel.js b/lib/components/form/settings-selector-panel.js
@@ -23,6 +23,7 @@ import {
   getTransitModes
 } from '../../util/itinerary'
 import { getTripOptionsFromQuery, isNotDefaultQuery } from '../../util/query'
+import { getShowUserSettings } from '../../util/state'
 
 class SettingsSelectorPanel extends Component {
   static propTypes = {
@@ -345,8 +346,15 @@ class SettingsSelectorPanel extends Component {
   }
 
   render () {
-    const { config, defaults, mode, icons, query, queryModes } = this.props
-
+    const {
+      config,
+      defaults,
+      mode,
+      icons,
+      query,
+      queryModes,
+      showUserSettings
+    } = this.props
     const modeHasTransit = hasTransit(mode)
     const { transitModes, accessModes, bicycleModes, micromobilityModes } = config.modes
 
@@ -358,26 +366,28 @@ class SettingsSelectorPanel extends Component {
     return (
       <div className='settings-selector-panel'>
         <div className='modes-panel'>
-          <div style={{ marginBottom: '5px' }} className='pull-right'>
-            <Button
-              bsStyle='link'
-              bsSize='xsmall'
-              disabled={rememberIsDisabled}
-              onClick={this._toggleStoredSettings}
-            >{defaults
-                ? <span><Icon type='times' /> Forget my options</span>
-                : <span><Icon type='lock' /> Remember trip options</span>
-              }</Button>
-            <Button
-              bsStyle='link'
-              bsSize='xsmall'
-              disabled={queryIsDefault && !defaults}
-              onClick={this._resetForm}
-            >
-              <Icon type='undo' />{' '}
-              Restore{defaults ? ' my' : ''} defaults
-            </Button>
-          </div>
+          {showUserSettings &&
+            <div style={{ marginBottom: '5px' }} className='store-settings pull-right'>
+              <Button
+                bsStyle='link'
+                bsSize='xsmall'
+                disabled={rememberIsDisabled}
+                onClick={this._toggleStoredSettings}
+              >{defaults
+                  ? <span><Icon type='times' /> Forget my options</span>
+                  : <span><Icon type='lock' /> Remember trip options</span>
+                }</Button>
+              <Button
+                bsStyle='link'
+                bsSize='xsmall'
+                disabled={queryIsDefault && !defaults}
+                onClick={this._resetForm}
+              >
+                <Icon type='undo' />{' '}
+                Restore{defaults ? ' my' : ''} defaults
+              </Button>
+            </div>
+          }
           {/* Take Transit button */}
           <Row className='mode-group-row'>
             <Col xs={12}>
@@ -548,6 +558,7 @@ class SettingsSelectorPanel extends Component {
 const mapStateToProps = (state, ownProps) => {
   const { config, currentQuery, user } = state.otp
   const { defaults } = user
+  const showUserSettings = getShowUserSettings(state.otp)
   const { companies, mode, routingType } = currentQuery
   return {
     defaults,
@@ -557,7 +568,8 @@ const mapStateToProps = (state, ownProps) => {
     companies,
     modeGroups: config.modeGroups,
     queryModes: !mode || mode.length === 0 ? [] : mode.split(','),
-    routingType
+    routingType,
+    showUserSettings
   }
 }
 
diff --git a/lib/components/map/endpoint.js b/lib/components/map/endpoint.js
@@ -51,7 +51,7 @@ export default class Endpoint extends Component {
   }
 
   render () {
-    const { type, location, locations } = this.props
+    const { type, location, locations, showPopup } = this.props
     const position = location && location.lat && location.lon ? [location.lat, location.lon] : null
     if (!position) return null
     const fgStyle = { fontSize: 24, width: 32, height: 32 }
@@ -91,57 +91,59 @@ export default class Endpoint extends Component {
         icon={divIcon({ html: iconHtml, className: '' })}
         position={position}
         onDragEnd={this._onDragEnd}>
-        <Popup>
-          <div>
-            <strong>
-              <Icon type={icon} /> {location.name}
-            </strong>
+        {showPopup &&
+          <Popup>
             <div>
-              <Button
-                bsStyle='link'
-                bsSize='small'
-                disabled={isWork}
-                style={{ padding: 0 }}
-                onClick={isHome ? this._forgetHome : this._rememberAsHome}>
-                {isHome
-                  ? <span><Icon type='times' /> Forget home</span>
-                  : <span><Icon type='home' /> Save as home</span>
-                }
-              </Button>
+              <strong>
+                <Icon type={icon} /> {location.name}
+              </strong>
+              <div>
+                <Button
+                  bsStyle='link'
+                  bsSize='small'
+                  disabled={isWork}
+                  style={{ padding: 0 }}
+                  onClick={isHome ? this._forgetHome : this._rememberAsHome}>
+                  {isHome
+                    ? <span><Icon type='times' /> Forget home</span>
+                    : <span><Icon type='home' /> Save as home</span>
+                  }
+                </Button>
+              </div>
+              <div>
+                <Button
+                  bsStyle='link'
+                  bsSize='small'
+                  disabled={isHome}
+                  style={{ padding: 0 }}
+                  onClick={isWork ? this._forgetWork : this._rememberAsWork}>
+                  {isWork
+                    ? <span><Icon type='times' /> Forget work</span>
+                    : <span><Icon type='briefcase' /> Save as work</span>
+                  }
+                </Button>
+              </div>
+              <div>
+                <Button
+                  bsStyle='link'
+                  bsSize='small'
+                  style={{ padding: 0 }}
+                  onClick={this._clearLocation}>
+                  <Icon type='times' /> Remove as {type} location
+                </Button>
+              </div>
+              <div>
+                <Button
+                  bsStyle='link'
+                  bsSize='small'
+                  style={{ padding: 0 }}
+                  onClick={this._swapLocation}>
+                  <Icon type='refresh' /> Change to {otherType} location
+                </Button>
+              </div>
             </div>
-            <div>
-              <Button
-                bsStyle='link'
-                bsSize='small'
-                disabled={isHome}
-                style={{ padding: 0 }}
-                onClick={isWork ? this._forgetWork : this._rememberAsWork}>
-                {isWork
-                  ? <span><Icon type='times' /> Forget work</span>
-                  : <span><Icon type='briefcase' /> Save as work</span>
-                }
-              </Button>
-            </div>
-            <div>
-              <Button
-                bsStyle='link'
-                bsSize='small'
-                style={{ padding: 0 }}
-                onClick={this._clearLocation}>
-                <Icon type='times' /> Remove as {type} location
-              </Button>
-            </div>
-            <div>
-              <Button
-                bsStyle='link'
-                bsSize='small'
-                style={{ padding: 0 }}
-                onClick={this._swapLocation}>
-                <Icon type='refresh' /> Change to {otherType} location
-              </Button>
-            </div>
-          </div>
-        </Popup>
+          </Popup>
+        }
       </Marker>
     )
   }
diff --git a/lib/components/map/endpoints-overlay.js b/lib/components/map/endpoints-overlay.js
@@ -3,18 +3,27 @@ import { connect } from 'react-redux'
 
 import Endpoint from './endpoint'
 import { clearLocation, forgetPlace, rememberPlace, setLocation } from '../../actions/map'
-import { getActiveSearch } from '../../util/state'
+import { getActiveSearch, getShowUserSettings } from '../../util/state'
 
 class EndpointsOverlay extends Component {
   static propTypes = {
     query: PropTypes.object
   }
   render () {
-    const { from, to } = this.props.query
+    const { query, showUserSettings } = this.props
+    const { from, to } = query
     return (
       <div>
-        <Endpoint type='from' location={from} {...this.props} />
-        <Endpoint type='to' location={to} {...this.props} />
+        <Endpoint
+          type='from'
+          showPopup={showUserSettings}
+          location={from}
+          {...this.props} />
+        <Endpoint
+          type='to'
+          showPopup={showUserSettings}
+          location={to}
+          {...this.props} />
       </div>
     )
   }
@@ -27,9 +36,11 @@ const mapStateToProps = (state, ownProps) => {
   // current query is no search is available.
   const activeSearch = getActiveSearch(state.otp)
   const query = activeSearch ? activeSearch.query : state.otp.currentQuery
+  const showUserSettings = getShowUserSettings(state.otp)
   return {
+    locations: state.otp.user.locations,
     query,
-    locations: state.otp.user.locations
+    showUserSettings
   }
 }
 
diff --git a/lib/components/mobile/welcome-screen.js b/lib/components/mobile/welcome-screen.js
diff --git a/lib/util/state.js b/lib/util/state.js

Original file line number	Diff line number	Diff line change
`@@ -37,8 +37,7 @@ class PrintLayout extends Component {`
`37`	`37`	`const { location } = this.props`
`38`	`38`	`// Parse the URL query parameters, if present`
`39`	`39`	`if (location && location.search) {`
`40`		`- this.props.parseUrlQueryString(location.search)`
`41`		`- this.props.routingQuery()`
	`40`	`+ this.props.parseUrlQueryString()`
`42`	`41`	`}`
`43`	`42`	`}`
`44`	`43`