Merge pull request #367 from opentripplanner/dev

Next release

Author: binh-dam-ibigroup

Diff for: lib/actions/call-taker.js

@@ -3,6 +3,8 @@ import { serialize } from 'object-to-formdata'
 import qs from 'qs'
 import { createAction } from 'redux-actions'
 
+import {toggleFieldTrips} from './field-trip'
+import {resetForm} from './form'
 import {searchToQuery, sessionIsInvalid} from '../util/call-taker'
 import {URL_ROOT} from '../util/constants'
 import {getTimestamp} from '../util/state'
@@ -23,6 +25,17 @@ const storeSession = createAction('STORE_SESSION')
 export const beginCall = createAction('BEGIN_CALL')
 export const toggleCallHistory = createAction('TOGGLE_CALL_HISTORY')
 
+/**
+ * Fully reset form and toggle call history (and close field trips if open).
+ */
+export function resetAndToggleCallHistory () {
+  return function (dispatch, getState) {
+    dispatch(resetForm(true))
+    dispatch(toggleCallHistory())
+    if (getState().callTaker.fieldTrip.visible) dispatch(toggleFieldTrips())
+  }
+}
+
 /**
  * End the active call and store the queries made during the call.
  */

Diff for: lib/actions/field-trip.js

@@ -6,7 +6,8 @@ import qs from 'qs'
 import { createAction } from 'redux-actions'
 
 import {routingQuery} from './api'
-import {setQueryParam} from './form'
+import {toggleCallHistory} from './call-taker'
+import {resetForm, setQueryParam} from './form'
 import {getGroupSize, getTripFromRequest, sessionIsInvalid} from '../util/call-taker'
 
 if (typeof (fetch) === 'undefined') require('isomorphic-fetch')
@@ -25,6 +26,17 @@ export const setActiveFieldTrip = createAction('SET_ACTIVE_FIELD_TRIP')
 export const setGroupSize = createAction('SET_GROUP_SIZE')
 export const toggleFieldTrips = createAction('TOGGLE_FIELD_TRIPS')
 
+/**
+ * Fully reset form and toggle field trips (and close call history if open).
+ */
+export function resetAndToggleFieldTrips () {
+  return async function (dispatch, getState) {
+    dispatch(resetForm(true))
+    dispatch(toggleFieldTrips())
+    if (getState().callTaker.callHistory.visible) dispatch(toggleCallHistory())
+  }
+}
+
 /**
  * Fetch all field trip requests (as summaries).
  */

Diff for: lib/actions/form.js

@@ -1,17 +1,19 @@
+import coreUtils from '@opentripplanner/core-utils'
 import debounce from 'lodash.debounce'
 import isEqual from 'lodash.isequal'
 import moment from 'moment'
-import coreUtils from '@opentripplanner/core-utils'
+import qs from 'qs'
 import { createAction } from 'redux-actions'
 
-import { queryIsValid } from '../util/state'
+import { routingQuery } from './api'
+import { setLocation } from './map'
 import {
   MobileScreens,
+  routeTo,
   setMainPanelContent,
   setMobileScreen
-} from '../actions/ui'
-
-import { routingQuery } from './api'
+} from './ui'
+import { queryIsValid } from '../util/state'
 
 const {
   getDefaultQuery,
@@ -26,7 +28,12 @@ export const setActiveSearch = createAction('SET_ACTIVE_SEARCH')
 export const clearDefaultSettings = createAction('CLEAR_DEFAULT_SETTINGS')
 export const storeDefaultSettings = createAction('STORE_DEFAULT_SETTINGS')
 
-export function resetForm () {
+/**
+ * Reset the trip form parameters to their default values.
+ * @param {Boolean} [full=false] if set to true, the from/to locations and URL
+ *  query parameters will also be reset.
+ */
+export function resetForm (full = false) {
   return function (dispatch, getState) {
     const otpState = getState().otp
     const { transitModes } = otpState.config.modes
@@ -46,6 +53,19 @@ export function resetForm () {
       options.mode = ['WALK', ...transitModes.map(m => m.mode)].join(',')
       dispatch(settingQueryParam(options))
     }
+    if (full) {
+      // If fully resetting form, also clear the active search, from/to
+      // locations, and query params.
+      dispatch(clearActiveSearch())
+      dispatch(setLocation({location: null, locationType: 'from'}))
+      dispatch(setLocation({location: null, locationType: 'to'}))
+      // Get query params. Delete everything except sessionId.
+      const params = getUrlParams()
+      for (const key in params) {
+        if (key !== 'sessionId') delete params[key]
+      }
+      dispatch(routeTo('/', qs.stringify(params, { addQueryPrefix: true })))
+    }
   }
 }
 
@@ -61,14 +81,25 @@ export function setQueryParam (payload, searchId) {
   }
 }
 
-export function parseUrlQueryString (params = getUrlParams()) {
+/**
+ * An action that parses the active URL's query params (or whatever is passed in)
+ * and updates the state with the OTP plan query params. A new search will be
+ * performed according to the behavior of setQueryParam (i.e., if the passed
+ * searchId is not null).
+ * @param  {Object} params an object containing URL query params
+ * @param  {string} source optionally contains the source of the query params
+ *                         (e.g., _CALL indicates that the source is from a past
+ *                         query made during a call taker session)
+ */
+export function parseUrlQueryString (params = getUrlParams(), source) {
   return function (dispatch, getState) {
     // Filter out the OTP (i.e. non-UI) params and set the initial query
     const planParams = {}
     Object.keys(params).forEach(key => {
       if (!key.startsWith('ui_')) planParams[key] = params[key]
     })
-    const searchId = params.ui_activeSearch || coreUtils.storage.randId()
+    let searchId = params.ui_activeSearch || coreUtils.storage.randId()
+    if (source) searchId += source
     // Convert strings to numbers/objects and dispatch
     planParamsToQueryAsync(planParams, getState().otp.config)
       .then(query => dispatch(setQueryParam(query, searchId)))

Diff for: lib/components/admin/call-record.js

@@ -1,9 +1,11 @@
+import humanizeDuration from 'humanize-duration'
 import moment from 'moment'
 import React, { Component } from 'react'
 
 import CallTimeCounter from './call-time-counter'
 import Icon from '../narrative/icon'
 import QueryRecord from './query-record'
+import {CallRecordButton, CallRecordIcon, QueryList} from './styled'
 import {searchToQuery} from '../../util/call-taker'
 
 /**
@@ -14,6 +16,14 @@ export default class CallRecord extends Component {
     expanded: false
   }
 
+  _getCallDuration = () => {
+    const {call} = this.props
+    const start = moment(call.startTime)
+    const end = moment(call.endTime)
+    const millis = moment.duration(end.diff(start)).asMilliseconds()
+    return humanizeDuration(millis)
+  }
+
   _toggleExpanded = () => {
     const {call, fetchQueries} = this.props
     const {expanded} = this.state
@@ -24,7 +34,7 @@ export default class CallRecord extends Component {
   render () {
     // FIXME: consolidate red color with call taker controls
     const RED = '#C35134'
-    const {call, index, inProgress, searches} = this.props
+    const {call, inProgress, searches} = this.props
     const {expanded} = this.state
     if (!call) return null
     if (inProgress) {
@@ -47,36 +57,46 @@ export default class CallRecord extends Component {
             In progress... click <Icon type='stop' /> to save{' '}
             ({call.searches.length} searches)
           </small>
-          <div>
+          <QueryList>
             {activeQueries.length > 0
               ? activeQueries.map((query, i) => (
                 <QueryRecord key={i} query={query} index={i} />
               ))
               : 'No queries recorded.'
             }
-          </div>
+          </QueryList>
         </div>
       )
     }
+    // Default (no active call) view
+    const startTimeMoment = moment(call.startTime)
     return (
-      <div style={{margin: '5px 0'}}>
-        <button
-          style={{width: '100%'}}
+      <div style={{borderBottom: '1px solid grey', margin: '5px 0', paddingBottom: '2px'}}>
+        <CallRecordButton
           className='clear-button-formatting'
           onClick={this._toggleExpanded}
         >
-          <Icon type='phone' className='fa-flip-horizontal' />
-          Call {index} ({moment(call.endTime).fromNow()})
-        </button>
+          <CallRecordIcon className='fa-flip-horizontal' type='phone' />
+          <span style={{flex: '0 0 120px'}}>
+            {startTimeMoment.format('h:mm a, MMM D')}
+          </span>
+          <small
+            className='text-muted'
+            style={{marginLeft: '5px', paddingTop: '2px', width: '60%'}}
+          >
+            <Icon type='clock-o' />{' '}
+            {this._getCallDuration()}
+          </small>
+        </CallRecordButton>
         {expanded
-          ? <ul className='list-unstyled'>
+          ? <QueryList>
             {call.queries && call.queries.length > 0
               ? call.queries.map((query, i) => (
                 <QueryRecord key={i} query={query} index={i} />
               ))
               : 'No queries recorded.'
             }
-          </ul>
+          </QueryList>
           : null
         }
       </div>

Diff for: lib/components/admin/call-taker-controls.js

@@ -64,14 +64,16 @@ class CallTakerControls extends Component {
     )
   }
 
-  _onToggleCallHistory = () => this.props.toggleCallHistory()
-
-  _onToggleFieldTrips = () => this.props.toggleFieldTrips()
-
-  _callInProgress = () => Boolean(this.props.activeCall)
+  _callInProgress = () => Boolean(this.props.callTaker.activeCall)
 
   render () {
-    const {callTakerEnabled, fieldTripEnabled, session} = this.props
+    const {
+      callTakerEnabled,
+      fieldTripEnabled,
+      session,
+      resetAndToggleCallHistory,
+      resetAndToggleFieldTrips
+    } = this.props
     // If no valid session is found, do not show calltaker controls.
     if (!session) return null
     return (
@@ -94,7 +96,7 @@ class CallTakerControls extends Component {
         {callTakerEnabled &&
           <CallHistoryButton
             className='call-taker-button'
-            onClick={this._onToggleCallHistory}
+            onClick={resetAndToggleCallHistory}
           >
             <Icon
               className='fa-2x'
@@ -107,7 +109,7 @@ class CallTakerControls extends Component {
         {fieldTripEnabled &&
           <FieldTripsButton
             className='call-taker-button'
-            onClick={this._onToggleFieldTrips}
+            onClick={resetAndToggleFieldTrips}
           >
             <Icon
               className='fa-2x'
@@ -123,7 +125,7 @@ class CallTakerControls extends Component {
 
 const mapStateToProps = (state, ownProps) => {
   return {
-    activeCall: state.callTaker.activeCall,
+    callTaker: state.callTaker,
     callTakerEnabled: Boolean(state.otp.config.modules.find(m => m.id === 'call')),
     fieldTripEnabled: Boolean(state.otp.config.modules.find(m => m.id === 'ft')),
     session: state.callTaker.session
@@ -137,8 +139,8 @@ const mapDispatchToProps = {
   fetchFieldTrips: fieldTripActions.fetchFieldTrips,
   routingQuery: apiActions.routingQuery,
   setMainPanelContent: uiActions.setMainPanelContent,
-  toggleCallHistory: callTakerActions.toggleCallHistory,
-  toggleFieldTrips: fieldTripActions.toggleFieldTrips
+  resetAndToggleCallHistory: callTakerActions.resetAndToggleCallHistory,
+  resetAndToggleFieldTrips: fieldTripActions.resetAndToggleFieldTrips
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(CallTakerControls)

Diff for: lib/components/admin/call-taker-windows.js

@@ -20,7 +20,7 @@ class CallTakerWindows extends Component {
       <DraggableWindow
         header={<WindowHeader><Icon type='history' /> Call history</WindowHeader>}
         onClickClose={toggleCallHistory}
-        style={{right: '15px', top: '50px'}}
+        style={{right: '15px', top: '50px', width: '450px'}}
       >
         {activeCall
           ? <CallRecord

Diff for: lib/components/admin/query-record.js

@@ -1,37 +1,50 @@
+import { planParamsToQuery } from '@opentripplanner/core-utils/lib/query'
+import { getTimeFormat, OTP_API_TIME_FORMAT } from '@opentripplanner/core-utils/lib/time'
+import moment from 'moment'
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 
 import * as formActions from '../../actions/form'
-import Icon from '../narrative/icon'
+import {CallRecordButton, CallRecordIcon} from './styled'
 
 /**
  * Displays information for a query stored for the Call Taker module.
  */
 class QueryRecordLayout extends Component {
+  _getParams = () => {
+    const {query} = this.props
+    return planParamsToQuery(JSON.parse(query.queryParams))
+  }
+
   _viewQuery = () => {
-    const {parseUrlQueryString, query} = this.props
-    const params = JSON.parse(query.queryParams)
-    if ('arriveBy' in params) {
-      params.departArrive = params.arriveBy ? 'ARRIVE' : 'DEPART'
-    }
-    parseUrlQueryString(params)
+    const {parseUrlQueryString} = this.props
+    const params = this._getParams()
+    params.departArrive = params.arriveBy ? 'ARRIVE' : 'DEPART'
+    parseUrlQueryString(params, '_CALL')
   }
 
   render () {
-    const {index} = this.props
+    const {query, timeFormat} = this.props
+    const params = this._getParams()
+    const time = query.timeStamp
+      ? moment(query.timeStamp).format(timeFormat)
+      : moment(params.time, OTP_API_TIME_FORMAT).format(timeFormat)
     return (
       <li>
-        <button onClick={this._viewQuery} className='clear-button-formatting'>
-          <Icon type='search' />
-        </button>{' '}
-        Query {index + 1}
+        <CallRecordButton onClick={this._viewQuery} className='clear-button-formatting'>
+          <CallRecordIcon type='search' />
+          {time}<br />
+          {params.from.name} to {params.to.name}
+        </CallRecordButton>
       </li>
     )
   }
 }
 
 const mapStateToProps = (state, ownProps) => {
-  return {}
+  return {
+    timeFormat: getTimeFormat(state.otp.config)
+  }
 }
 
 const {parseUrlQueryString} = formActions