feat(form): New mobile form layout, including date/time preview & modal components

Author: David Emory

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

@@ -0,0 +1,72 @@
+// import necessary React/Redux libraries
+import React, { Component, PropTypes } from 'react'
+import { connect } from 'react-redux'
+import {DateTimeSelector, setDepart, setDate, setTime} from 'otp-react-redux'
+import { Button, ButtonGroup } from 'react-bootstrap'
+
+class DateTimeModal extends Component {
+  static propTypes = {
+    setDepart: PropTypes.func
+  }
+
+  constructor (props) {
+    super(props)
+    this.state = { activePanel: 'ITIN' }
+  }
+
+  render () {
+    const { activePanel } = this.state
+
+    const panels = [
+      {
+        key: 'ITIN',
+        text: 'Exact Time',
+        component: <DateTimeSelector />
+      }, {
+        key: 'PROFILE',
+        text: 'Time Window',
+        component: <DateTimeSelector profile />
+      }
+    ]
+
+    return (
+      <div className='date-time-modal'>
+        <div className='button-row'>
+          <ButtonGroup justified>
+            {panels.map(panel => {
+              return (
+                <ButtonGroup key={panel.key}>
+                  <Button
+                    className={panel.key === activePanel ? 'selected' : ''}
+                    onClick={() => this.setState({ activePanel: panel.key })}
+                  >{panel.text}</Button>
+                </ButtonGroup>
+              )
+            })}
+          </ButtonGroup>
+        </div>
+        <div className='main-panel'>
+          {panels.find(p => p.key === activePanel).component}
+        </div>
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = (state, ownProps) => {
+  const {departArrive, date, time} = state.otp.currentQuery
+  return {
+    config: state.otp.config,
+    departArrive,
+    date,
+    time
+  }
+}
+
+const mapDispatchToProps = {
+  setDepart,
+  setDate,
+  setTime
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(DateTimeModal)

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

@@ -0,0 +1,51 @@
+import React, { Component, PropTypes } from 'react'
+import { connect } from 'react-redux'
+import { Button } from 'react-bootstrap'
+
+class DateTimePreview extends Component {
+  static propTypes = {
+    date: PropTypes.string,
+    departArrive: PropTypes.string,
+    time: PropTypes.string,
+    onClick: PropTypes.func
+  }
+
+  render () {
+    const { date, time, departArrive } = this.props
+
+    let timeStr
+    if (departArrive === 'NOW') timeStr = 'Leave now'
+    else if (departArrive === 'ARRIVE') timeStr = 'Arrive ' + time
+    else if (departArrive === 'DEPART') timeStr = 'Depart ' + time
+
+    return (
+      <div className='date-time-preview'>
+        <div className='details'>
+          <i className='fa fa-calendar' /> {date}
+          <br />
+          <i className='fa fa-clock-o' /> {timeStr}
+        </div>
+        <div>
+          <Button className='change-button' onClick={this.props.onClick}>
+            Change
+          </Button>
+        </div>
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = (state, ownProps) => {
+  const {departArrive, date, time} = state.otp.currentQuery
+  return {
+    config: state.otp.config,
+    departArrive,
+    date,
+    time
+  }
+}
+
+const mapDispatchToProps = {
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(DateTimePreview)

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

@@ -13,39 +13,87 @@ class DateTimeSelector extends Component {
     time: PropTypes.string,
     location: PropTypes.object,
     label: PropTypes.string,
+    profile: PropTypes.bool,
     setDate: PropTypes.func,
     setDepart: PropTypes.func,
     setLocation: PropTypes.func,
     setTime: PropTypes.func,
     type: PropTypes.string // replace with locationType?
   }
+
   constructor (props) {
     super(props)
     this.state = {
       dateFocused: false
     }
   }
+
   _onDepartChange = (evt) => {
     console.log(evt.target.value)
     this.props.setDepart(evt.target.value)
   }
+
   _onDateChange = (evt) => {
     console.log(evt.target.value)
     this.props.setDate(evt.target.value)
   }
+
   _onTimeChange = (evt) => {
     console.log(evt.target.value)
     this.props.setTime(evt.target.value)
   }
+
   render () {
     const { departArrive, date, time } = this.props
     const options = ['NOW', 'DEPART', 'ARRIVE']
     // TODO: choose date / time selectors (currently Chrome optimized)
+
+    if (this.props.profile) {
+      const dowOptions = ['WEEKDAY', 'SATURDAY', 'SUNDAY']
+      return (
+        <Form>
+          <FormGroup style={{marginBottom: '15px'}} className='date-time-selector'>
+            <Row>
+              <Col xs={12}>
+                <FormControl
+                  componentClass='select'
+                  style={{width: '100%'}}
+                >
+                  {dowOptions.map((o, i) => (
+                    <option key={i} value={o}>{o}</option>
+                  ))}
+                </FormControl>
+              </Col>
+            </Row>
+            <Row style={{ marginTop: 20 }}>
+              <Col xs={5}>
+                <FormControl
+                  className='time-selector'
+                  type='time'
+                  value='07:00'
+                  style={{width: '100%'}}
+                />
+              </Col>
+              <Col xs={2}>TO</Col>
+              <Col xs={5}>
+                <FormControl
+                  className='time-selector'
+                  type='time'
+                  value='09:00'
+                  style={{width: '100%'}}
+                />
+              </Col>
+            </Row>
+          </FormGroup>
+        </Form>
+      )
+    }
+
     return (
       <Form>
         <FormGroup style={{marginBottom: '15px'}} className='date-time-selector'>
           <Row>
-            <Col xs={6}>
+            <Col xs={12}>
               <FormControl
                 componentClass='select'
                 value={departArrive}
@@ -57,9 +105,8 @@ class DateTimeSelector extends Component {
                 ))}
               </FormControl>
             </Col>
-            <Col>{ }</Col>
           </Row>
-          <Row style={{ marginTop: 10 }}>
+          <Row style={{ marginTop: 20 }}>
             <Col xs={6}>
               <FormControl
                 className='date-selector'

lib/components/form/form.css

@@ -20,6 +20,13 @@
   box-shadow: none;
 }
 
+.otp .location-field .location-option .route {
+  background-color: gray;
+  color: white;
+  padding: 2px 3px 0px;
+  margin-right: 5px;
+}
+
 /* Settings Bar */
 
 .otp .settings-bar {
@@ -30,15 +37,19 @@
   font-size: 14px;
 }
 
+.otp .settings-bar.compressed .selected-modes {
+  text-align: center;
+}
+
 .otp .settings-bar .selected-modes .some-selected .mode-icon {
   display: inline-block;
   margin-right: 5px;
   width: 16px;
   height: 16px;
-  fill: white;
+  fill: black;
 }
 
-.otp .settings-bar .button-container {
+.otp .settings-bar.wide .button-container {
   float: right;
 }