Mobile batch results

example.js

@@ -13,13 +13,15 @@ import createLogger from 'redux-logger'
 
 // import OTP-RR components
 import {
+  BatchResultsScreen,
   BatchRoutingPanel,
   BatchSearchScreen,
   CallTakerControls,
   CallTakerPanel,
   CallTakerWindows,
   DefaultItinerary,
   DefaultMainPanel,
+  MobileResultsScreen,
   MobileSearchScreen,
   ResponsiveWebapp,
   createCallTakerReducer,
@@ -58,6 +60,7 @@ if (useCustomIcons) {
 // - MainControls (optional)
 // - MainPanel (required)
 // - MapWindows (optional)
+// - MobileResultsScreen (required)
 // - MobileSearchScreen (required)
 // - ModeIcon (required)
 const components = {
@@ -71,6 +74,9 @@ const components = {
       ? BatchRoutingPanel
       : DefaultMainPanel,
   MapWindows: isCallTakerModuleEnabled ? CallTakerWindows : null,
+  MobileResultsScreen: isBatchRoutingEnabled
+    ? BatchResultsScreen
+    : MobileResultsScreen,
   MobileSearchScreen: isBatchRoutingEnabled
     ? BatchSearchScreen
     : MobileSearchScreen,

lib/components/mobile/batch-results-screen.js

@@ -0,0 +1,123 @@
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
+import { Button } from 'react-bootstrap'
+import { connect } from 'react-redux'
+import styled from 'styled-components'
+
+import Map from '../map/map'
+import Icon from '../narrative/icon'
+import NarrativeItineraries from '../narrative/narrative-itineraries'
+import { getActiveError } from '../../util/state'
+
+import MobileContainer from './container'
+import ResultsHeaderAndError from './results-header-and-error'
+
+const StyledMobileContainer = styled(MobileContainer)`
+  .options > .header {
+    margin: 10px;
+  }
+
+  &.otp.mobile .mobile-narrative-container {
+    bottom: 0;
+    left: 0;
+    overflow-y: auto;
+    padding: 0;
+    position: fixed;
+    right: 0;
+  }
+`
+
+const ExpandMapButton = styled(Button)`
+  bottom: 25px;
+  position: absolute;
+  right: 10px;
+  z-index: 999999;
+`
+
+class BatchMobileResultsScreen extends Component {
+  static propTypes = {
+    error: PropTypes.object
+  }
+
+  constructor () {
+    super()
+    this.state = {
+      itineraryExpanded: false,
+      mapExpanded: false
+    }
+  }
+
+  componentDidUpdate (prevProps) {
+    // Check if the active leg changed
+    if (this.props.activeLeg !== prevProps.activeLeg) {
+      this._setItineraryExpanded(false)
+    }
+  }
+
+  _setItineraryExpanded = itineraryExpanded => {
+    this.setState({ itineraryExpanded })
+  }
+
+  _toggleMapExpanded = () => {
+    this.setState({ mapExpanded: !this.state.mapExpanded })
+  }
+
+  renderMap () {
+    const { mapExpanded } = this.state
+    return (
+      <div className='results-map' style={{bottom: mapExpanded ? 0 : '60%'}}>
+        <Map />
+        <ExpandMapButton
+          bsSize='small'
+          onClick={this._toggleMapExpanded}
+        >
+          <Icon name={mapExpanded ? 'list-ul' : 'arrows-alt'} />
+          {mapExpanded ? 'Show results' : 'Expand map'}
+        </ExpandMapButton>
+      </div>
+    )
+  }
+
+  render () {
+    const { error } = this.props
+    const { itineraryExpanded, mapExpanded } = this.state
+
+    return (
+      <StyledMobileContainer>
+        <ResultsHeaderAndError />
+        {!error && (mapExpanded
+          // Set up two separate renderings of the map according to mapExpanded,
+          // so that the map is properly sized and itineraries fit under either conditions.
+          // (Otherwise, if just the narrative is added/removed, the map doesn't resize properly.)
+          ? this.renderMap()
+          : (
+            <>
+              {!itineraryExpanded && this.renderMap()}
+              <div className='mobile-narrative-container' style={{top: itineraryExpanded ? '100px' : '40%'}}>
+                <NarrativeItineraries
+                  containerStyle={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    width: '100%'
+                  }}
+                  onToggleDetailedItinerary={this._setItineraryExpanded}
+                />
+              </div>
+            </>
+          ))
+        }
+      </StyledMobileContainer>
+    )
+  }
+}
+
+// connect to the redux store
+
+const mapStateToProps = (state, ownProps) => {
+  return {
+    error: getActiveError(state.otp)
+  }
+}
+
+export default connect(mapStateToProps)(BatchMobileResultsScreen)

lib/components/mobile/container.js

@@ -2,9 +2,10 @@ import React, { Component } from 'react'
 
 export default class MobileContainer extends Component {
   render () {
+    const { children, className } = this.props
     return (
-      <div className='otp mobile'>
-        {this.props.children}
+      <div className={`otp mobile${className ? ` ${className}` : ''}`}>
+        {children}
       </div>
     )
   }

lib/components/mobile/main.js

@@ -6,7 +6,6 @@ import MobileDateTimeScreen from './date-time-screen'
 import MobileOptionsScreen from './options-screen'
 import MobileLocationSearch from './location-search'
 import MobileWelcomeScreen from './welcome-screen'
-import MobileResultsScreen from './results-screen'
 import MobileStopViewer from './stop-viewer'
 import MobileTripViewer from './trip-viewer'
 import MobileRouteViewer from './route-viewer'
@@ -45,7 +44,7 @@ class MobileMain extends Component {
   }
 
   render () {
-    const { MobileSearchScreen } = this.context
+    const { MobileResultsScreen, MobileSearchScreen } = this.context
     const { uiState } = this.props
 
     // check for route viewer

lib/components/mobile/results-header-and-error.js

@@ -0,0 +1,142 @@
+import LocationIcon from '@opentripplanner/location-icon'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
+import { Button, Col, Row } from 'react-bootstrap'
+import { connect } from 'react-redux'
+import styled from 'styled-components'
+
+import * as formActions from '../../actions/form'
+import * as uiActions from '../../actions/ui'
+import ErrorMessage from '../form/error-message'
+import Map from '../map/map'
+import {
+  getActiveError,
+  getActiveItineraries,
+  getActiveSearch
+} from '../../util/state'
+
+import MobileNavigationBar from './navigation-bar'
+
+const LocationContainer = styled.div`
+  font-weight: 300;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`
+
+const LocationSummaryContainer = styled.div`
+  height: 50px;
+  left: 0;
+  padding-right: 10px;
+  position: fixed;
+  right: 0;
+  top: 50px;
+`
+
+const LocationsSummaryColFromTo = styled(Col)`
+  font-size: 1.1em;
+  line-height: 1.2em;
+`
+
+const LocationsSummaryRow = styled(Row)`
+  padding: 4px 8px;
+`
+
+const StyledLocationIcon = styled(LocationIcon)`
+  margin: 3px;
+`
+
+class ResultsHeaderAndError extends Component {
+  static propTypes = {
+    query: PropTypes.object,
+    resultCount: PropTypes.number,
+    setMobileScreen: PropTypes.func
+  }
+
+  _editSearchClicked = () => {
+    this.props.clearActiveSearch()
+    this.props.setMobileScreen(uiActions.MobileScreens.SEARCH_FORM)
+  }
+
+  render () {
+    const { error, query, resultCount } = this.props
+    const headerText = error
+      ? 'No Trip Found'
+      : (resultCount
+        ? `We Found ${resultCount} Option${resultCount > 1 ? 's' : ''}`
+        : 'Waiting...'
+      )
+
+    return (
+      <>
+        <MobileNavigationBar headerText={headerText} />
+
+        <LocationSummaryContainer>
+          <LocationsSummaryRow className='locations-summary'>
+            <LocationsSummaryColFromTo sm={11} xs={8}>
+              <LocationContainer>
+                <StyledLocationIcon type='from' /> { query.from ? query.from.name : '' }
+              </LocationContainer>
+              <LocationContainer style={{ marginTop: 2 }}>
+                <StyledLocationIcon type='to' /> { query.to ? query.to.name : '' }
+              </LocationContainer>
+            </LocationsSummaryColFromTo>
+            <Col sm={1} xs={4}>
+              <Button
+                className='edit-search-button pull-right'
+                onClick={this._editSearchClicked}
+              >Edit</Button>
+            </Col>
+          </LocationsSummaryRow>
+        </LocationSummaryContainer>
+
+        {error && (
+          <>
+            <div className='results-error-map'><Map /></div>
+            <div className='results-error-message'>
+              <ErrorMessage error={error} />
+              <div className='options-lower-tray mobile-padding'>
+                <Button
+                  className='back-to-search-button'
+                  onClick={this._editSearchClicked}
+                  style={{ width: '100%' }}
+                >
+                  <i className='fa fa-arrow-left' /> Back to Search
+                </Button>
+              </div>
+            </div>
+          </>
+        )}
+      </>
+    )
+  }
+}
+
+// connect to the redux store
+
+const mapStateToProps = (state, ownProps) => {
+  const activeSearch = getActiveSearch(state.otp)
+  const {useRealtime} = state.otp
+  const response = !activeSearch
+    ? null
+    : useRealtime ? activeSearch.response : activeSearch.nonRealtimeResponse
+
+  const itineraries = getActiveItineraries(state.otp)
+  return {
+    error: getActiveError(state.otp),
+    query: state.otp.currentQuery,
+    resultCount:
+      response
+        ? activeSearch.query.routingType === 'ITINERARY'
+          ? itineraries.length
+          : response.otp.profile.length
+        : null
+  }
+}
+
+const mapDispatchToProps = {
+  clearActiveSearch: formActions.clearActiveSearch,
+  setMobileScreen: uiActions.setMobileScreen
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(ResultsHeaderAndError)