Merge pull request #27 from opentripplanner/mobile-support

Mobile support

Author: David Emory

lib/actions/config.js

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

lib/components/form/date-time-selector.js

@@ -1,16 +1,22 @@
 // import moment from 'moment'
 import React, {PropTypes, Component} from 'react'
-import { Form, FormGroup, FormControl } from 'react-bootstrap'
+import { Form, FormGroup, FormControl, Row, Col } from 'react-bootstrap'
 // import { SingleDatePicker } from 'react-dates'
 import { connect } from 'react-redux'
 
 import { setDepart, setDate, setTime } from '../../actions/form'
 
 class DateTimeSelector extends Component {
   static propTypes = {
+    date: PropTypes.string,
+    departArrive: PropTypes.string,
+    time: PropTypes.string,
     location: PropTypes.object,
     label: PropTypes.string,
+    setDate: PropTypes.func,
+    setDepart: PropTypes.func,
     setLocation: PropTypes.func,
+    setTime: PropTypes.func,
     type: PropTypes.string // replace with locationType?
   }
   constructor (props) {
@@ -36,32 +42,43 @@ class DateTimeSelector extends Component {
     const options = ['NOW', 'DEPART', 'ARRIVE']
     // TODO: choose date / time selectors (currently Chrome optimized)
     return (
-      <Form inline>
-        <FormGroup style={{marginBottom: '15px'}}>
-          <FormControl
-            componentClass='select'
-            value={departArrive}
-            onChange={this._onDepartChange}
-            style={{width: '100px'}}
-          >
-            {options.map((o, i) => (
-              <option key={i} value={o}>{o}</option>
-            ))}
-          </FormControl>
-          {' '}
-          <FormControl
-            type='date'
-            value={date}
-            onChange={this._onDateChange}
-            style={{width: '160px', display: departArrive === 'NOW' && 'none'}}
-          />
-          {' '}
-          <FormControl
-            type='time'
-            value={time}
-            onChange={this._onTimeChange}
-            style={{width: '123px', display: departArrive === 'NOW' && 'none'}}
-          />
+      <Form>
+        <FormGroup style={{marginBottom: '15px'}} className='date-time-selector'>
+          <Row>
+            <Col xs={6}>
+              <FormControl
+                componentClass='select'
+                value={departArrive}
+                onChange={this._onDepartChange}
+                style={{width: '100%'}}
+              >
+                {options.map((o, i) => (
+                  <option key={i} value={o}>{o}</option>
+                ))}
+              </FormControl>
+            </Col>
+            <Col>{ }</Col>
+          </Row>
+          <Row style={{ marginTop: 10 }}>
+            <Col xs={6}>
+              <FormControl
+                className='date-selector'
+                type='date'
+                value={date}
+                onChange={this._onDateChange}
+                style={{width: '100%', display: departArrive === 'NOW' && 'none'}}
+              />
+            </Col>
+            <Col xs={6}>
+              <FormControl
+                className='time-selector'
+                type='time'
+                value={time}
+                onChange={this._onTimeChange}
+                style={{width: '100%', display: departArrive === 'NOW' && 'none'}}
+              />
+            </Col>
+          </Row>
         </FormGroup>
       </Form>
     )

lib/components/form/mode-selector.js

@@ -6,28 +6,50 @@ import { setMode } from '../../actions/form'
 
 class ModeSelector extends Component {
   static propTypes = {
-    location: PropTypes.object,
+    config: PropTypes.object,
     label: PropTypes.string,
-    setLocation: PropTypes.func,
-    type: PropTypes.string // replace with locationType?
+    mode: PropTypes.string,
+    setMode: PropTypes.func,
+    showLabel: PropTypes.boolean
   }
+
+  static defaultProps = {
+    label: 'Mode',
+    showLabel: true
+  }
+
   _onChange = (evt) => {
     console.log(evt.target.value)
     this.props.setMode(evt.target.value)
   }
+
+  _getDisplayText (mode) {
+    switch (mode) {
+      case 'TRANSIT,WALK': return 'Walk to Transit'
+      case 'TRANSIT,BICYCLE': return 'Bike to Transit'
+      case 'WALK': return 'Walk Only'
+      case 'BICYCLE': return 'Bike Only'
+    }
+    return mode
+  }
+
   render () {
-    const { config, mode } = this.props
+    const { config, mode, label, showLabel } = this.props
+
     return (
       <form>
-        <FormGroup>
-          <ControlLabel>Mode:</ControlLabel>
+        <FormGroup className='mode-selector'>
+          {showLabel
+            ? <ControlLabel>{label}</ControlLabel>
+            : null
+          }
           <FormControl
             componentClass='select'
             value={mode}
             onChange={this._onChange}
           >
             {config.modes.map((m, i) => (
-              <option key={i} value={m}>{m}</option>
+              <option key={i} value={m}>{this._getDisplayText(m)}</option>
             ))}
           </FormControl>
         </FormGroup>

lib/components/form/plan-trip-button.js

@@ -6,16 +6,18 @@ import { planTrip } from '../../actions/api'
 
 class PlanTripButton extends Component {
   static propTypes = {
-    onClick: PropTypes.func
+    onClick: PropTypes.func,
+    text: PropTypes.string
   }
   _onClick = () => {
     this.props.planTrip()
   }
   render () {
     return (
       <Button
+        className='plan-trip-button'
         onClick={this._onClick || this.props.onClick}
-        >Plan Trip</Button>
+      >{this.props.text || 'Plan Trip'}</Button>
     )
   }
 }

lib/components/narrative/itinerary-carousel.js

@@ -16,13 +16,16 @@ class ItineraryCarousel extends Component {
     pending: PropTypes.bool,
     activeItinerary: PropTypes.number,
     hideHeader: PropTypes.bool,
+    onExpand: PropTypes.func,
     setActiveItinerary: PropTypes.func,
     setActiveLeg: PropTypes.func,
     setActiveStep: PropTypes.func
   }
 
   _onItineraryClick = () => {
-    this.setState({expanded: !this.state.expanded})
+    const expanded = !this.state.expanded
+    this.setState({expanded})
+    if (this.props.onExpand) this.props.onExpand(expanded)
   }
 
   _onLeftClick = () => {

lib/index.js

@@ -15,6 +15,8 @@ import ItineraryCarousel from './components/narrative/itinerary-carousel'
 import NarrativeItineraries from './components/narrative/narrative-itineraries'
 import NarrativeItinerary from './components/narrative/narrative-itinerary'
 
+import { setAutoPlan } from './actions/config'
+
 import createOtpReducer from './reducers/create-otp-reducer'
 
 export {
@@ -38,6 +40,9 @@ export {
   NarrativeItineraries,
   NarrativeItinerary,
 
+  // actions
+  setAutoPlan,
+
   // redux utilities
   createOtpReducer
 }

lib/reducers/create-otp-reducer.js

@@ -4,6 +4,11 @@ import update from 'immutability-helper'
 // import { getDefaultQuery } from '../util/state'
 import { getCurrentDate, getCurrentTime } from '../util/time'
 
+const defaultConfig = {
+  autoPlan: true,
+  debouncePlanTimeMs: 0
+}
+
 // TODO: parse query params
 const defaultQuery = {
   type: 'ITINERARY',
@@ -23,10 +28,7 @@ function createOtpReducer (config, initialQuery) {
   // populate query by merging any provided query params w/ the default params
   const currentQuery = Object.assign(defaultQuery, initialQuery)
   const initialState = {
-    config: Object.assign({
-      autoPlan: true,
-      debouncePlanTimeMs: 0
-    }, config),
+    config: Object.assign(defaultConfig, config),
     currentQuery,
     searches: [],
     activeSearch: 0
@@ -102,6 +104,10 @@ function createOtpReducer (config, initialQuery) {
         return update(state, { currentQuery: { time: { $set: action.payload.time } } })
       case 'FORM_CHANGED':
         return update(state, { activeSearch: { $set: null } })
+
+      case 'SET_AUTOPLAN':
+        return update(state, { config: { autoPlan: { $set: action.payload.autoPlan } } })
+
       default:
         return state
     }