feat(form): Initial work on detailed, mobile-ready settings panel

Author: David Emory

lib/actions/ui.js

@@ -0,0 +1,3 @@
+import { createAction } from 'redux-actions'
+
+export const setShowExtendedSettings = createAction('SET_SHOW_EXTENDED_SETTINGS')

lib/components/form/form.css

@@ -12,3 +12,44 @@
   text-align: center;
   margin: 8px 0px;
 }
+
+.otp .settings-bar {
+  position: relative;
+}
+
+.otp .settings-bar .button-container {
+  float: right;
+}
+
+.otp .settings-selector-panel {
+  padding: 10px;
+}
+
+.otp .settings-selector-panel .button-row {
+  margin-bottom: 20px;
+}
+
+.otp .settings-selector-panel .button-row .selected {
+  background-color: #ccc;
+}
+
+.otp .modes-panel .mode-group-row {
+  background-color: #ccc;
+  margin-bottom: 10px;
+  padding: 8px;
+}
+
+.otp .modes-panel .mode-group-row .group-name {
+  display: inline-block;
+  vertical-align: top;
+  width: 120px;
+  padding-top: 10px;
+}
+
+.otp .modes-panel .mode-group-row .mode-icon {
+  display: inline-block;
+  vertical-align: top;
+  width: 36px;
+  height: 36px;
+  margin-left: 10px;
+}

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

@@ -0,0 +1,26 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+
+class GeneralSettingsPanel extends Component {
+  render () {
+    return (
+      <div className='modes-panel'>
+        General Settings
+      </div>
+    )
+  }
+}
+
+// connect to redux store
+
+const mapStateToProps = (state, ownProps) => {
+  return {
+  }
+}
+
+const mapDispatchToProps = (dispatch, ownProps) => {
+  return {
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(GeneralSettingsPanel)

lib/components/form/modes-panel.js

@@ -0,0 +1,42 @@
+import React, { Component, PropTypes } from 'react'
+import { connect } from 'react-redux'
+
+class ModesPanel extends Component {
+  static propTypes = {
+    modeGroups: PropTypes.array
+  }
+
+  render () {
+    return (
+      <div className='modes-panel'>
+        {this.props.modeGroups.map((group, k) => {
+          return (
+            <div className='mode-group-row' key={k}>
+              <div className='group-name'>{group.name}</div>
+              {group.modes.map(mode => {
+                return (
+                  <div key={mode} className={`mode-icon icon-mode-${mode.toLowerCase()}`} />
+                )
+              })}
+            </div>
+          )
+        })}
+      </div>
+    )
+  }
+}
+
+// connect to redux store
+
+const mapStateToProps = (state, ownProps) => {
+  return {
+    modeGroups: state.otp.config.modeGroups
+  }
+}
+
+const mapDispatchToProps = (dispatch, ownProps) => {
+  return {
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(ModesPanel)

lib/components/form/settings-bar.js

@@ -0,0 +1,43 @@
+import React, { Component, PropTypes } from 'react'
+import { Button } from 'react-bootstrap'
+import { connect } from 'react-redux'
+
+import { setShowExtendedSettings } from '../../actions/ui'
+
+class SettingsBar extends Component {
+  static propTypes = {
+    setShowExtendedSettings: PropTypes.func,
+    showExtendedSettings: PropTypes.bool
+  }
+
+  render () {
+    return (
+      <div className='settings-bar'>
+        <div className='button-container'>
+          <Button
+            className='settings-button'
+            onClick={() => { this.props.setShowExtendedSettings2(!this.props.showExtendedSettings) }}
+          >Settings</Button>
+        </div>
+        <div className='selected-modes'>All Modes</div>
+        <div style={{ clear: 'both' }} />
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = (state, ownProps) => {
+  return {
+    showExtendedSettings: state.otp.ui.showExtendedSettings
+  }
+}
+
+const mapDispatchToProps = (dispatch, ownProps) => {
+  return {
+    setShowExtendedSettings2: (showExtendedSettings) => {
+      dispatch(setShowExtendedSettings({showExtendedSettings}))
+    }
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(SettingsBar)

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

@@ -0,0 +1,46 @@
+import React, { Component } from 'react'
+import { Button, ButtonGroup } from 'react-bootstrap'
+
+import ModesPanel from './modes-panel'
+import GeneralSettingsPanel from './general-settings-panel'
+
+const panels = [
+  {
+    key: 'MODES',
+    text: 'Modes',
+    component: <ModesPanel />
+  }, {
+    key: 'GENERAL',
+    text: 'General',
+    component: <GeneralSettingsPanel />
+  }
+]
+
+export default class SettingsSelectorPanel extends Component {
+  constructor (props) {
+    super(props)
+    this.state = { activePanel: 'MODES' }
+  }
+
+  render () {
+    return (
+      <div className='settings-selector-panel'>
+        <div className='button-row'>
+          <ButtonGroup justified>
+            {panels.map(panel => {
+              return (
+                <ButtonGroup key={panel.key}>
+                  <Button
+                    className={panel.key === this.state.activePanel ? 'selected' : ''}
+                    onClick={() => this.setState({ activePanel: panel.key })}
+                  >{panel.text}</Button>
+                </ButtonGroup>
+              )
+            })}
+          </ButtonGroup>
+        </div>
+        {panels.find(p => p.key === this.state.activePanel).component}
+      </div>
+    )
+  }
+}

lib/index.js

@@ -1,8 +1,12 @@
 import DateTimeSelector from './components/form/date-time-selector'
 import ErrorMessage from './components/form/error-message'
+import GeneralSettingsPanel from './components/form/general-settings-panel'
 import LocationField from './components/form/location-field'
 import ModeSelector from './components/form/mode-selector'
+import ModesPanel from './components/form/modes-panel'
 import PlanTripButton from './components/form/plan-trip-button'
+import SettingsBar from './components/form/settings-bar'
+import SettingsSelectorPanel from './components/form/settings-selector-panel'
 import SwitchButton from './components/form/switch-button'
 
 import BaseLayers from './components/map/base-layers'
@@ -23,9 +27,13 @@ export {
   // form components
   DateTimeSelector,
   ErrorMessage,
+  GeneralSettingsPanel,
   LocationField,
   ModeSelector,
+  ModesPanel,
   PlanTripButton,
+  SettingsBar,
+  SettingsSelectorPanel,
   SwitchButton,
 
   // map components

lib/reducers/create-otp-reducer.js

@@ -31,7 +31,10 @@ function createOtpReducer (config, initialQuery) {
     config: Object.assign(defaultConfig, config),
     currentQuery,
     searches: [],
-    activeSearch: 0
+    activeSearch: 0,
+    ui: {
+      showExtendedSettings: false
+    }
   }
 
   return (state = initialState, action) => {
@@ -108,6 +111,9 @@ function createOtpReducer (config, initialQuery) {
       case 'SET_AUTOPLAN':
         return update(state, { config: { autoPlan: { $set: action.payload.autoPlan } } })
 
+      case 'SET_SHOW_EXTENDED_SETTINGS':
+        return update(state, { ui: { showExtendedSettings: { $set: action.payload.showExtendedSettings } } })
+
       default:
         return state
     }