Merge pull request #290 from opentripplanner/trip-status-ui

Trip Status UI

Author: landonreed

lib/actions/user.js

@@ -1,5 +1,12 @@
+import clone from 'clone'
+import moment from 'moment'
+import { planParamsToQuery } from '@opentripplanner/core-utils/lib/query'
+import { OTP_API_DATE_FORMAT } from '@opentripplanner/core-utils/lib/time'
+import qs from 'qs'
 import { createAction } from 'redux-actions'
 
+import { routingQuery } from './api'
+import { setQueryParam } from './form'
 import { routeTo } from './ui'
 import { secureFetch } from '../util/middleware'
 import { isNewUser } from '../util/user'
@@ -192,7 +199,12 @@ export function fetchUserMonitoredTrips () {
  * then, if that was successful, alerts (optional)
  * and refreshes the redux monitoredTrips with the updated trip.
  */
-export function createOrUpdateUserMonitoredTrip (tripData, isNew, silentOnSuccess) {
+export function createOrUpdateUserMonitoredTrip (
+  tripData,
+  isNew,
+  silentOnSuccess,
+  noRedirect
+) {
   return async function (dispatch, getState) {
     const { accessToken, apiBaseUrl, apiKey } = getMiddlewareVariables(getState())
     const { id } = tripData
@@ -220,6 +232,8 @@ export function createOrUpdateUserMonitoredTrip (tripData, isNew, silentOnSucces
       // Reload user's monitored trips after add/update.
       await dispatch(fetchUserMonitoredTrips())
 
+      if (noRedirect) return
+
       // Finally, navigate to the saved trips page.
       dispatch(routeTo('/savedtrips'))
     } else {
@@ -228,12 +242,39 @@ export function createOrUpdateUserMonitoredTrip (tripData, isNew, silentOnSucces
   }
 }
 
+/**
+ * Toggles the isActive status of a monitored trip
+ */
+export function togglePauseTrip (trip) {
+  return function (dispatch, getState) {
+    const clonedTrip = clone(trip)
+    clonedTrip.isActive = !clonedTrip.isActive
+
+    // Silent update of existing trip.
+    dispatch(createOrUpdateUserMonitoredTrip(clonedTrip, false, true, true))
+  }
+}
+
+/**
+ * Toggles the snoozed status of a monitored trip
+ */
+export function toggleSnoozeTrip (trip) {
+  return function (dispatch, getState) {
+    const newTrip = clone(trip)
+    newTrip.snoozed = !newTrip.snoozed
+
+    // Silent update of existing trip.
+    dispatch(createOrUpdateUserMonitoredTrip(newTrip, false, true, true))
+  }
+}
+
 /**
  * Deletes a logged-in user's monitored trip,
  * then, if that was successful, refreshes the redux monitoredTrips state.
  */
-export function deleteUserMonitoredTrip (tripId) {
+export function confirmAndDeleteUserMonitoredTrip (tripId) {
   return async function (dispatch, getState) {
+    if (!confirm('Would you like to remove this trip?')) return
     const { accessToken, apiBaseUrl, apiKey } = getMiddlewareVariables(getState())
     const requestUrl = `${apiBaseUrl}${API_MONITORED_TRIP_PATH}/${tripId}`
 
@@ -334,3 +375,29 @@ export function checkItineraryExistence (trip) {
     }
   }
 }
+
+/**
+ * Plans a new trip for the current date given the query parameters in the given
+ * monitored trip
+ */
+export function planNewTripFromMonitoredTrip (monitoredTrip) {
+  return function (dispatch, getState) {
+    // update query params in store
+    const newQuery = planParamsToQuery(qs.parse(monitoredTrip.queryParams))
+    newQuery.date = moment().format(OTP_API_DATE_FORMAT)
+
+    dispatch(setQueryParam(newQuery))
+
+    dispatch(routeTo('/'))
+
+    // This prevents some kind of race condition whose origin I can't figure
+    // out. Unless this is called after redux catches up with routing to the '/'
+    // path, then the old path will be used and the screen won't change.
+    // Therefore, this timeout occurs so that the view of the homepage has time
+    // to render itself.
+    // FIXME: remove hack
+    setTimeout(() => {
+      dispatch(routingQuery())
+    }, 300)
+  }
+}

lib/components/app/responsive-webapp.js

@@ -22,8 +22,8 @@ import { ComponentContext } from '../../util/contexts'
 import { getActiveItinerary, getTitle } from '../../util/state'
 import AfterSignInScreen from '../user/after-signin-screen'
 import BeforeSignInScreen from '../user/before-signin-screen'
-import SavedTripList from '../user/saved-trip-list'
-import SavedTripScreen from '../user/saved-trip-screen'
+import SavedTripList from '../user/monitored-trip/saved-trip-list'
+import SavedTripScreen from '../user/monitored-trip/saved-trip-screen'
 import UserAccountScreen from '../user/user-account-screen'
 import withLoggedInUserSupport from '../user/with-logged-in-user-support'
 

lib/components/user/saved-trip-editor.js renamed to lib/components/user/monitored-trip/saved-trip-editor.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import StackedPaneDisplay from './stacked-pane-display'
+import StackedPaneDisplay from '../stacked-pane-display'
 
 /**
  * This component handles editing of an existing trip.

lib/components/user/saved-trip-list.js renamed to lib/components/user/monitored-trip/saved-trip-list.js

@@ -1,17 +1,16 @@
 import { withAuthenticationRequired } from '@auth0/auth0-react'
-import clone from 'clone'
 import React, { Component } from 'react'
 import { Button, ButtonGroup, Glyphicon, Panel } from 'react-bootstrap'
 import { connect } from 'react-redux'
 
-import * as uiActions from '../../actions/ui'
-import * as userActions from '../../actions/user'
-import DesktopNav from '../app/desktop-nav'
-import { RETURN_TO_CURRENT_ROUTE } from '../../util/ui'
-import AwaitingScreen from './awaiting-screen'
-import LinkButton from './link-button'
+import * as uiActions from '../../../actions/ui'
+import * as userActions from '../../../actions/user'
+import DesktopNav from '../../app/desktop-nav'
+import { RETURN_TO_CURRENT_ROUTE } from '../../../util/ui'
+import AwaitingScreen from '../awaiting-screen'
+import LinkButton from '../link-button'
 import TripSummaryPane from './trip-summary-pane'
-import withLoggedInUserSupport from './with-logged-in-user-support'
+import withLoggedInUserSupport from '../with-logged-in-user-support'
 
 /**
  * This component displays the list of saved trips for the logged-in user.
@@ -88,24 +87,18 @@ class TripListItem extends Component {
   /**
    * Pauses or resumes the specified trip.
    */
-  _handlePauseOrResumeMonitoring = () => {
-    const { createOrUpdateUserMonitoredTrip, trip } = this.props
-    const newTrip = clone(trip)
-    newTrip.isActive = !newTrip.isActive
-
-    // Silent update of existing trip.
-    createOrUpdateUserMonitoredTrip(newTrip, false, true)
+  _handleTogglePauseMonitoring = () => {
+    const { togglePauseTrip, trip } = this.props
+    togglePauseTrip(trip)
   }
 
   /**
    * Deletes a trip from persistence.
    * (The operation also refetches the redux monitoredTrips for the logged-in user.)
    */
-  _handleDeleteTrip = async () => {
-    if (confirm('Would you like to remove this trip?')) {
-      const { deleteUserMonitoredTrip, trip } = this.props
-      await deleteUserMonitoredTrip(trip.id)
-    }
+  _handleDeleteTrip = () => {
+    const { confirmAndDeleteUserMonitoredTrip, trip } = this.props
+    confirmAndDeleteUserMonitoredTrip(trip.id)
   }
 
   render () {
@@ -118,7 +111,7 @@ class TripListItem extends Component {
         <Panel.Body>
           <TripSummaryPane monitoredTrip={trip} />
           <ButtonGroup>
-            <Button bsSize='small' onClick={this._handlePauseOrResumeMonitoring}>
+            <Button bsSize='small' onClick={this._handleTogglePauseMonitoring}>
               {trip.isActive
                 ? <><Glyphicon glyph='pause' /> Pause</>
                 : <><Glyphicon glyph='play' /> Resume</>
@@ -141,9 +134,12 @@ class TripListItem extends Component {
 const itemMapStateToProps = () => ({})
 
 const itemMapDispatchToProps = {
-  createOrUpdateUserMonitoredTrip: userActions.createOrUpdateUserMonitoredTrip,
-  deleteUserMonitoredTrip: userActions.deleteUserMonitoredTrip,
-  routeTo: uiActions.routeTo
+  confirmAndDeleteUserMonitoredTrip: userActions.confirmAndDeleteUserMonitoredTrip,
+  routeTo: uiActions.routeTo,
+  togglePauseTrip: userActions.togglePauseTrip
 }
 
-const ConnectedTripListItem = connect(itemMapStateToProps, itemMapDispatchToProps)(TripListItem)
+const ConnectedTripListItem = connect(
+  itemMapStateToProps,
+  itemMapDispatchToProps
+)(TripListItem)

lib/components/user/saved-trip-screen.js renamed to lib/components/user/monitored-trip/saved-trip-screen.js

@@ -5,18 +5,18 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import * as yup from 'yup'
 
-import * as uiActions from '../../actions/ui'
-import * as userActions from '../../actions/user'
-import DesktopNav from '../app/desktop-nav'
-import AwaitingScreen from './awaiting-screen'
+import * as uiActions from '../../../actions/ui'
+import * as userActions from '../../../actions/user'
+import DesktopNav from '../../app/desktop-nav'
+import AwaitingScreen from '../awaiting-screen'
 import SavedTripEditor from './saved-trip-editor'
 import TripBasicsPane from './trip-basics-pane'
 import TripNotificationsPane from './trip-notifications-pane'
 import TripSummaryPane from './trip-summary-pane'
-import { ALL_DAYS, arrayToDayFields, WEEKDAYS } from '../../util/monitored-trip'
-import { getActiveItineraries, getActiveSearch } from '../../util/state'
-import { RETURN_TO_CURRENT_ROUTE } from '../../util/ui'
-import withLoggedInUserSupport from './with-logged-in-user-support'
+import { ALL_DAYS, arrayToDayFields, WEEKDAYS } from '../../../util/monitored-trip'
+import { getActiveItineraries, getActiveSearch } from '../../../util/state'
+import { RETURN_TO_CURRENT_ROUTE } from '../../../util/ui'
+import withLoggedInUserSupport from '../with-logged-in-user-support'
 
 // The validation schema shape for the form fields.
 // TODO: add fields here as they are implemented.
@@ -162,11 +162,12 @@ class SavedTripScreen extends Component {
       screenContents = (
         <Formik
           // Avoid validating on change as it is annoying. Validating on blur is enough.
-          validateOnChange={false}
+          enableReinitialize
+          initialValues={clone(monitoredTrip)}
+          onSubmit={this._updateMonitoredTrip}
           validateOnBlur
+          validateOnChange={false}
           validationSchema={validationSchema}
-          onSubmit={this._updateMonitoredTrip}
-          initialValues={clone(monitoredTrip)}
         >
           {
             // Formik props provide access to the current user data state and errors

lib/components/user/trip-basics-pane.js renamed to lib/components/user/monitored-trip/trip-basics-pane.js

@@ -11,7 +11,8 @@ import {
 import { connect } from 'react-redux'
 import styled from 'styled-components'
 
-import * as userActions from '../../actions/user'
+import * as userActions from '../../../actions/user'
+import TripStatus from './trip-status'
 import TripSummary from './trip-summary'
 
 // Styles.
@@ -102,6 +103,7 @@ class TripBasicsPane extends Component {
 
       return (
         <div>
+          <TripStatus monitoredTrip={monitoredTrip} />
           <ControlLabel>Selected itinerary:</ControlLabel>
           <TripSummary monitoredTrip={monitoredTrip} />
 

lib/components/user/trip-notifications-pane.js renamed to lib/components/user/monitored-trip/trip-notifications-pane.js

@@ -0,0 +1,53 @@
+import moment from 'moment'
+import { formatDuration } from '@opentripplanner/core-utils/lib/time'
+
+import baseRenderer from './base-renderer'
+
+/**
+ * Calculates various data for monitored trips that are currently active.
+ */
+export default function activeTripRenderer ({ monitoredTrip, timeFormat }) {
+  const data = baseRenderer(monitoredTrip)
+
+  const tripEndMoment = moment(data.matchingItinerary.endTime)
+
+  // analyze whether the journey state indicates that the matching itinerary
+  // has realtime data. It is assumed that realtime data will exist for
+  // itineraries that have differing values of the scheduled arrival time
+  // and matching itinerary arrival time.
+  if (data.journeyState.hasRealtimeData) {
+    // calculate the deviation from the scheduled arrival time (positive
+    // value indicates delay)
+    const arrivalDeviationSeconds = (
+      data.matchingItinerary.endTime -
+      data.journeyState.scheduledArrivalTimeEpochMillis
+    ) / 1000
+    const deviationHumanDuration = formatDuration(
+      Math.abs(arrivalDeviationSeconds)
+    )
+    if (Math.abs(arrivalDeviationSeconds) < data.ON_TIME_THRESHOLD_SECONDS) {
+      // about on time
+      data.panelBsStyle = 'success'
+      data.headingText = 'Trip is in progress and is about on time.'
+    } else if (arrivalDeviationSeconds > 0) {
+      // delayed
+      data.panelBsStyle = 'warning'
+      data.headingText = `Trip is in progress and is delayed ${deviationHumanDuration}!`
+    } else {
+      // early
+      data.panelBsStyle = 'warning'
+      data.headingText = `Trip is in progress and is arriving ${deviationHumanDuration} earlier than expected!`
+    }
+  } else {
+    data.panelBsStyle = 'info'
+    data.headingText = 'Trip is in progress (no realtime updates available).'
+  }
+
+  data.bodyText =
+    `Trip is due to arrive at the destination at ${tripEndMoment.format(timeFormat)}.`
+
+  data.shouldRenderTogglePauseTripButton = true
+  data.shouldRenderToggleSnoozeTripButton = true
+
+  return data
+}

lib/components/user/monitored-trip/trip-status-rendering-strategies/active-trip-renderer.js

@@ -0,0 +1,65 @@
+import moment from 'moment'
+import { formatDuration } from '@opentripplanner/core-utils/lib/time'
+
+/**
+ * Calculate commonly-used pieces of data used to render the trip status
+ * component. The monitoredTrip param can be undefined.
+ */
+export default function baseRenderer (monitoredTrip) {
+  const data = {
+    // the threshold for schedule deviation in seconds for whether an arrival or
+    // departure time is to be considered on-time
+    // TODO: get this from config or something
+    ON_TIME_THRESHOLD_SECONDS: 120,
+    // create some default display values in case another renderer doesn't
+    // calculate these values
+    body: 'Unknown trip state',
+    headingText: 'Unknown trip state',
+    lastCheckedText: 'Last checked time unknown',
+    monitoredTrip: monitoredTrip,
+    journeyState: monitoredTrip && monitoredTrip.journeyState,
+    tripIsActive: monitoredTrip && monitoredTrip.isActive,
+    tripIsSnoozed: monitoredTrip && monitoredTrip.snoozed
+  }
+  data.matchingItinerary =
+    data.journeyState && data.journeyState.matchingItinerary
+
+  // set the last checked text if the journey state exists
+  if (data.journeyState) {
+    const secondsSinceLastCheck = moment().diff(
+      moment(data.journeyState.lastCheckedEpochMillis),
+      'seconds'
+    )
+    data.lastCheckedText =
+      `Last checked: ${formatDuration(secondsSinceLastCheck)} ago`
+  }
+
+  // set some alert data if the matching itinerary exists
+  data.alerts = data.matchingItinerary && data.matchingItinerary.alerts
+  data.hasMoreThanOneAlert = !!(data.alerts && data.alerts.length > 0)
+  data.shouldRenderAlerts = data.hasMoreThanOneAlert
+
+  // set some defaults for the toggle buttons
+  data.shouldRenderDeleteTripButton = false
+  data.shouldRenderPlanNewTripButton = false
+  data.shouldRenderTogglePauseTripButton = false
+  data.shouldRenderToggleSnoozeTripButton = false
+
+  if (data.tripIsActive) {
+    data.togglePauseTripButtonGlyphIcon = 'pause'
+    data.togglePauseTripButtonText = 'Pause'
+  } else {
+    data.togglePauseTripButtonGlyphIcon = 'play'
+    data.togglePauseTripButtonText = 'Resume'
+  }
+
+  if (data.tripIsSnoozed) {
+    data.toggleSnoozeTripButtonGlyphIcon = 'play'
+    data.toggleSnoozeTripButtonText = 'Unsnooze trip analysis'
+  } else {
+    data.toggleSnoozeTripButtonGlyphIcon = 'pause'
+    data.toggleSnoozeTripButtonText = 'Snooze for rest of today'
+  }
+
+  return data
+}