Merge pull request #307 from opentripplanner/dev

Feature release

Author: landonreed

Diff for: example.css

@@ -33,7 +33,7 @@
 .sidebar {
   height: 100%;
   padding: 10px;
-  overflow-y: scroll;
+  overflow-y: auto;
   box-shadow: 3px 0px 12px #00000052;
   z-index: 1000;
 }

Diff for: lib/actions/api.js

@@ -98,8 +98,8 @@ export function routingQuery (searchId = null) {
     // For multiple mode combinations, gather injected params from config/query.
     // Otherwise, inject nothing (rely on what's in current query) and perform
     // one iteration.
-    const iterations = otpState.config.modes && otpState.config.modes.combinations
-      ? otpState.config.modes.combinations.map(({mode, params}) => ({mode, ...params}))
+    const iterations = otpState.currentQuery.combinations
+      ? otpState.currentQuery.combinations.map(({mode, params}) => ({mode, ...params}))
       : [{}]
     dispatch(routingRequest({ activeItinerary, routingType, searchId, pending: iterations.length }))
     iterations.forEach((injectedParams, i) => {

Diff for: lib/components/app/batch-routing-panel.js

@@ -1,22 +1,129 @@
+import coreUtils from '@opentripplanner/core-utils'
 import React, { Component } from 'react'
-import { Button } from 'react-bootstrap'
 import { connect } from 'react-redux'
+import styled from 'styled-components'
 
 import * as apiActions from '../../actions/api'
+import * as formActions from '../../actions/form'
+import BatchSettingsPanel from '../form/batch-settings-panel'
 import LocationField from '../form/connected-location-field'
-import UserSettings from '../form/user-settings'
+import DateTimeModal from '../form/date-time-modal'
+import ModeButtons, {MODE_OPTIONS, StyledModeButton} from '../form/mode-buttons'
+// import UserSettings from '../form/user-settings'
 import Icon from '../narrative/icon'
 import NarrativeItineraries from '../narrative/narrative-itineraries'
+import {
+  BatchSettingsPanelContainer,
+  DateTimeModalContainer,
+  Dot,
+  MainSettingsRow,
+  PlanTripButton,
+  SettingsPreview,
+  StyledDateTimePreview
+} from './styled'
 import { hasValidLocation, getActiveSearch, getShowUserSettings } from '../../util/state'
 import ViewerContainer from '../viewers/viewer-container'
 
+/**
+ * Simple utility to check whether a list of mode strings contains the provided
+ * mode. This handles exact match and prefix/suffix matches (i.e., checking
+ * 'BICYCLE' will return true if 'BICYCLE' or 'BICYCLE_RENT' is in the list).
+ *
+ * FIXME: This might need to be modified to be a bit looser in how it handles
+ * the 'contains' check. E.g., we might not want to remove WALK,TRANSIT if walk
+ * is turned off, but we DO want to remove it if TRANSIT is turned off.
+ */
+function listHasMode (modes, mode) {
+  return modes.some(m => mode.indexOf(m) !== -1)
+}
+
+function combinationHasAnyOfModes (combination, modes) {
+  return combination.mode.split(',').some(m => listHasMode(modes, m))
+}
+
+// List of possible modes that can be selected via mode buttons.
+const POSSIBLE_MODES = MODE_OPTIONS.map(b => b.mode)
+
+const ModeButtonsFullWidthContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 5px;
+`
+
+// Define Mode Button styled components here to avoid circular imports. I.e., we
+// cannot define them in styled.js (because mode-buttons.js imports buttonCss
+// and then we would need to import ModeButtons/StyledModeButton from that file
+// in turn).
+const StyledModeButtonsFullWidth = styled(ModeButtons)`
+  &:last-child {
+    margin-right: 0px;
+  }
+`
+
+const ModeButtonsContainerCompressed = styled.div`
+  display: contents;
+`
+
+const ModeButtonsCompressed = styled(ModeButtons)`
+  ${StyledModeButton} {
+    border-radius: 0px;
+  }
+  &:first-child {
+    border-radius: 5px 0px 0px 5px;
+  }
+  &:last-child {
+    margin-right: 5px;
+    border-radius: 0px 5px 5px 0px;
+  }
+`
+// Style for setting the top of the narrative itineraries based on the width of the window.
+// If the window width is less than 1200px (Bootstrap's "large" size), the
+// mode buttons will be shown on their own row, meaning that the
+// top position of this component needs to be lower (higher value
+// equals lower position on the page).
+// TODO: figure out a better way to use flex rendering for accommodating the mode button overflow.
+const NarrativeContainer = styled.div`
+  & .options.itinerary {
+    @media (min-width: 1200px) {
+      top: 160px;
+    }
+    @media (max-width: 1199px) {
+      top: 210px;
+    }
+  }
+`
+
 /**
  * Main panel for the batch/trip comparison form.
- * @extends Component
  */
 class BatchRoutingPanel extends Component {
+  state = {
+    expanded: null,
+    selectedModes: POSSIBLE_MODES
+  }
+
+  _onClickMode = (mode) => {
+    const {possibleCombinations, setQueryParam} = this.props
+    const {selectedModes} = this.state
+    const index = selectedModes.indexOf(mode)
+    const enableMode = index === -1
+    const newModes = [...selectedModes]
+    if (enableMode) newModes.push(mode)
+    else newModes.splice(index, 1)
+    // Update selected modes for mode buttons.
+    this.setState({selectedModes: newModes})
+    // Update the available mode combinations based on the new modes selection.
+    const disabledModes = POSSIBLE_MODES.filter(m => !newModes.includes(m))
+    // Do not include combination if any of its modes are found in disabled
+    // modes list.
+    const newCombinations = possibleCombinations
+      .filter(c => !combinationHasAnyOfModes(c, disabledModes))
+    setQueryParam({combinations: newCombinations})
+  }
+
   _planTrip = () => {
     const {currentQuery, routingQuery} = this.props
+    // Check for any validation issues in query.
     const issues = []
     if (!hasValidLocation(currentQuery, 'from')) issues.push('from')
     if (!hasValidLocation(currentQuery, 'to')) issues.push('to')
@@ -25,18 +132,24 @@ class BatchRoutingPanel extends Component {
       window.alert(`Please define the following fields to plan a trip: ${issues.join(', ')}`)
       return
     }
+    // Close any expanded panels.
+    this.setState({expanded: null})
+    // Plan trip.
     routingQuery()
   }
 
+  _updateExpanded = (type) => ({expanded: this.state.expanded === type ? null : type})
+
+  _toggleDateTime = () => this.setState(this._updateExpanded('DATE_TIME'))
+
+  _toggleSettings = () => this.setState(this._updateExpanded('SETTINGS'))
+
   render () {
-    const {
-      activeSearch,
-      mobile,
-      showUserSettings
-    } = this.props
+    const {config, currentQuery, mobile} = this.props
+    const {expanded, selectedModes} = this.state
     const actionText = mobile ? 'tap' : 'click'
     return (
-      <ViewerContainer>
+      <ViewerContainer className='batch-routing-panel'>
         <LocationField
           inputPlaceholder={`Enter start location or ${actionText} on map...`}
           locationType='from'
@@ -47,64 +160,70 @@ class BatchRoutingPanel extends Component {
           locationType='to'
           showClearButton={!mobile}
         />
-        <div style={{
-          display: 'flex',
-          justifyContent: 'flex-start',
-          flexDirection: 'row',
-          alignItems: 'center'
-        }} className='comparison-form'>
-          <button
-            style={{
-              height: '50px',
-              width: '50px',
-              margin: '0px',
-              marginRight: '5px'
-            }}
+        <ModeButtonsFullWidthContainer className='hidden-lg'>
+          <StyledModeButtonsFullWidth
+            className='flex'
+            onClick={this._onClickMode}
+            selectedModes={selectedModes}
+          />
+        </ModeButtonsFullWidthContainer>
+        <MainSettingsRow>
+          <SettingsPreview
+            expanded={expanded === 'SETTINGS'}
+            onClick={this._toggleSettings}
           >
+            {coreUtils.query.isNotDefaultQuery(currentQuery, config) &&
+              <Dot className='dot' />
+            }
             <Icon type='cog' className='fa-2x' />
-          </button>
-          <button
-            style={{
-              height: '50px',
-              width: '100px',
-              margin: '0px',
-              fontSize: 'small',
-              textAlign: 'left'
-            }}
-          >
-            <Icon type='calendar' /> Today<br />
-            <Icon type='clock-o' /> Now<br />
-          </button>
-          <Button
-            bsStyle='default'
-            bsSize='small'
+          </SettingsPreview>
+          <StyledDateTimePreview
+            // as='button'
+            expanded={expanded === 'DATE_TIME'}
+            hideButton
+            onClick={this._toggleDateTime} />
+          <ModeButtonsContainerCompressed>
+            <ModeButtonsCompressed
+              className='visible-lg straight-corners'
+              onClick={this._onClickMode}
+              selectedModes={selectedModes}
+            />
+          </ModeButtonsContainerCompressed>
+          <PlanTripButton
             onClick={this._planTrip}
-            style={{
-              height: '50px',
-              width: '50px',
-              margin: '0px',
-              marginLeft: 'auto',
-              backgroundColor: '#F5F5A7'
-            }} >
+            title='Plan trip'
+          >
             <Icon type='search' className='fa-2x' />
-          </Button>
-        </div>
-        {!activeSearch && showUserSettings &&
-          <UserSettings />
+          </PlanTripButton>
+        </MainSettingsRow>
+        {expanded === 'DATE_TIME' &&
+          <DateTimeModalContainer>
+            <DateTimeModal />
+          </DateTimeModalContainer>
         }
-        <div className='desktop-narrative-container'>
+        {expanded === 'SETTINGS' &&
+          <BatchSettingsPanelContainer>
+            <BatchSettingsPanel />
+          </BatchSettingsPanelContainer>
+        }
+        {/* FIXME: Add back user settings (home, work, etc.) once connected to
+            the middleware persistence.
+          !activeSearch && showUserSettings &&
+          <UserSettings />
+        */}
+        {/* TODO: Implement mobile view */}
+        <NarrativeContainer className='desktop-narrative-container'>
           <NarrativeItineraries
             containerStyle={{
               display: 'flex',
               flexDirection: 'column',
               position: 'absolute',
-              top: '218px', // This is variable dependent on height of the form above.
               right: '0',
               left: '0',
               bottom: '0'
             }}
           />
-        </div>
+        </NarrativeContainer>
       </ViewerContainer>
     )
   }
@@ -115,14 +234,17 @@ const mapStateToProps = (state, ownProps) => {
   const showUserSettings = getShowUserSettings(state.otp)
   return {
     activeSearch: getActiveSearch(state.otp),
+    config: state.otp.config,
     currentQuery: state.otp.currentQuery,
     expandAdvanced: state.otp.user.expandAdvanced,
+    possibleCombinations: state.otp.config.modes.combinations,
     showUserSettings
   }
 }
 
 const mapDispatchToProps = {
-  routingQuery: apiActions.routingQuery
+  routingQuery: apiActions.routingQuery,
+  setQueryParam: formActions.setQueryParam
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(BatchRoutingPanel)