Release: Accessibility, Itinerary Body Time Format (and add saved trips)

example.js

@@ -85,7 +85,10 @@ class OtpRRExample extends Component {
         <Grid>
           <Row className='main-row'>
             <Col sm={6} md={4} className='sidebar'>
-              <DefaultMainPanel LegIcon={MyLegIcon} ModeIcon={MyModeIcon} />
+              {/* <main> Needed for accessibility checks. TODO: Find a better place. */}
+              <main>
+                <DefaultMainPanel LegIcon={MyLegIcon} ModeIcon={MyModeIcon} />
+              </main>
             </Col>
             <Col sm={6} md={8} className='map-container'>
               <Map />
@@ -97,12 +100,15 @@ class OtpRRExample extends Component {
 
     /** mobile view **/
     const mobileView = (
-      <MobileMain
-        LegIcon={MyLegIcon}
-        ModeIcon={MyModeIcon}
-        map={<Map />}
-        title={<div className='navbar-title'>OpenTripPlanner</div>}
-      />
+      // <main> Needed for accessibility checks. TODO: Find a better place.
+      <main>
+        <MobileMain
+          LegIcon={MyLegIcon}
+          ModeIcon={MyModeIcon}
+          map={<Map />}
+          title={<div className='navbar-title'>OpenTripPlanner</div>}
+        />
+      </main>
     )
 
     /** the main webapp **/

lib/actions/user.js

@@ -1,12 +1,21 @@
 import { createAction } from 'redux-actions'
 
-import { addUser, fetchUser, updateUser } from '../util/middleware'
+import {
+  addTrip,
+  addUser,
+  deleteTrip,
+  fetchUser,
+  getTrips,
+  updateTrip,
+  updateUser
+} from '../util/middleware'
 import { isNewUser } from '../util/user'
 
 const setCurrentUser = createAction('SET_CURRENT_USER')
+const setCurrentUserMonitoredTrips = createAction('SET_CURRENT_USER_MONITORED_TRIPS')
 export const setPathBeforeSignIn = createAction('SET_PATH_BEFORE_SIGNIN')
 
-function getStateForNewUser (auth0User) {
+function createNewUser (auth0User) {
   return {
     auth0UserId: auth0User.sub,
     email: auth0User.email,
@@ -18,19 +27,36 @@ function getStateForNewUser (auth0User) {
   }
 }
 
+/**
+ * Fetches the saved/monitored trips for a user.
+ * We use the accessToken to fetch the data regardless of
+ * whether the process to populate state.user is completed or not.
+ */
+export function fetchUserMonitoredTrips (accessToken) {
+  return async function (dispatch, getState) {
+    const { otp } = getState()
+    const { otp_middleware: otpMiddleware = null } = otp.config.persistence
+
+    if (otpMiddleware) {
+      const { data: trips, status: fetchStatus } = await getTrips(otpMiddleware, accessToken)
+      if (fetchStatus === 'success') {
+        dispatch(setCurrentUserMonitoredTrips(trips))
+      }
+    }
+  }
+}
+
 /**
  * Fetches user preferences to state.user, or set initial values under state.user if no user has been loaded.
  */
 export function fetchOrInitializeUser (auth) {
   return async function (dispatch, getState) {
     const { otp } = getState()
-    const { accessToken, user } = auth
+    const { otp_middleware: otpMiddleware = null } = otp.config.persistence
 
-    try {
-      const result = await fetchUser(
-        otp.config.persistence.otp_middleware,
-        accessToken
-      )
+    if (otpMiddleware) {
+      const { accessToken, user: authUser } = auth
+      const { data: user, status: fetchUserStatus } = await fetchUser(otpMiddleware, accessToken)
 
       // Beware! On AWS API gateway, if a user is not found in the middleware
       // (e.g. they just created their Auth0 password but have not completed the account setup form yet),
@@ -53,19 +79,15 @@ export function fetchOrInitializeUser (auth) {
       // }
       // TODO: Improve AWS response.
 
-      const resultData = result.data
-      const isNewAccount = result.status === 'error' || (resultData && resultData.result === 'ERR')
-
+      const isNewAccount = fetchUserStatus === 'error' || (user && user.result === 'ERR')
       if (!isNewAccount) {
-        // TODO: Move next line somewhere else.
-        if (resultData.savedLocations === null) resultData.savedLocations = []
-        dispatch(setCurrentUser({ accessToken, user: resultData }))
+        // Load user's monitored trips before setting the user state.
+        await dispatch(fetchUserMonitoredTrips(accessToken))
+
+        dispatch(setCurrentUser({ accessToken, user }))
       } else {
-        dispatch(setCurrentUser({ accessToken, user: getStateForNewUser(user) }))
+        dispatch(setCurrentUser({ accessToken, user: createNewUser(authUser) }))
       }
-    } catch (error) {
-      // TODO: improve error handling.
-      alert(`An error was encountered:\n${error}`)
     }
   }
 }
@@ -91,15 +113,71 @@ export function createOrUpdateUser (userData) {
 
       // TODO: improve the UI feedback messages for this.
       if (result.status === 'success' && result.data) {
+        alert('Your preferences have been saved.')
+
         // Update application state with the user entry as saved
         // (as returned) by the middleware.
         const userData = result.data
         dispatch(setCurrentUser({ accessToken, user: userData }))
+      } else {
+        alert(`An error was encountered:\n${JSON.stringify(result)}`)
+      }
+    }
+  }
+}
 
+/**
+ * Updates a logged-in user's monitored trip,
+ * then, if that was successful, refreshes the redux monitoredTrips
+ * with the updated trip.
+ */
+export function createOrUpdateUserMonitoredTrip (tripData, isNew) {
+  return async function (dispatch, getState) {
+    const { otp, user } = getState()
+    const { otp_middleware: otpMiddleware = null } = otp.config.persistence
+
+    if (otpMiddleware) {
+      const { accessToken } = user
+
+      let result
+      if (isNew) {
+        result = await addTrip(otpMiddleware, accessToken, tripData)
+      } else {
+        result = await updateTrip(otpMiddleware, accessToken, tripData)
+      }
+
+      // TODO: improve the UI feedback messages for this.
+      if (result.status === 'success' && result.data) {
         alert('Your preferences have been saved.')
+
+        // Reload user's monitored trips after add/update.
+        await dispatch(fetchUserMonitoredTrips(accessToken))
       } else {
         alert(`An error was encountered:\n${JSON.stringify(result)}`)
       }
     }
   }
 }
+
+/**
+ * Deletes a logged-in user's monitored trip,
+ * then, if that was successful, refreshes the redux monitoredTrips state.
+ */
+export function deleteUserMonitoredTrip (id) {
+  return async function (dispatch, getState) {
+    const { otp, user } = getState()
+    const { otp_middleware: otpMiddleware = null } = otp.config.persistence
+
+    if (otpMiddleware) {
+      const { accessToken } = user
+      const deleteResult = await deleteTrip(otpMiddleware, accessToken, id)
+
+      if (deleteResult.status === 'success') {
+        // Reload user's monitored trips after deletion.
+        await dispatch(fetchUserMonitoredTrips(accessToken))
+      } else {
+        alert(`An error was encountered:\n${JSON.stringify(deleteResult)}`)
+      }
+    }
+  }
+}

lib/components/app/app-menu.js

@@ -33,6 +33,7 @@ class AppMenu extends Component {
     return (
       <div className='app-menu'>
         <DropdownButton
+          aria-label='Application Menu'
           title={(<Icon type='bars' />)}
           noCaret
           className='app-menu-button'

lib/components/app/responsive-webapp.js

@@ -20,6 +20,8 @@ import { AUTH0_AUDIENCE, AUTH0_SCOPE, URL_ROOT } from '../../util/constants'
 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 UserAccountScreen from '../user/user-account-screen'
 import withLoggedInUserSupport from '../user/with-logged-in-user-support'
 
@@ -233,6 +235,24 @@ class RouterWrapperWithAuth0 extends Component {
                 return <UserAccountScreen {...props} />
               }}
             />
+            <Route
+              path={'/savetrip'}
+              component={(routerProps) => {
+                const props = this._combineProps(routerProps)
+                return <SavedTripScreen isCreating {...props} />
+              }}
+            />
+            <Route
+              path={'/savedtrips/:id'}
+              component={(routerProps) => {
+                const props = this._combineProps(routerProps)
+                return <SavedTripScreen {...props} />
+              }}
+            />
+            <Route
+              path={'/savedtrips'}
+              component={SavedTripList}
+            />
             <Route
               // This route is called immediately after login by Auth0
               // and by the onRedirectCallback function from /lib/util/auth.js.

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

@@ -65,7 +65,10 @@ class DateTimePreview extends Component {
 
     const button = (
       <div className='button-container'>
-        <Button onClick={this.props.onClick}>
+        <Button
+          aria-label='Edit departure or arrival time'
+          onClick={this.props.onClick}
+        >
           {editButtonText}{caret && <span> <i className={`fa fa-caret-${caret}`} /></span>}
         </Button>
       </div>

lib/components/form/settings-preview.js

@@ -35,7 +35,10 @@ class SettingsPreview extends Component {
     let showDot = coreUtils.query.isNotDefaultQuery(query, config)
     const button = (
       <div className='button-container'>
-        <Button onClick={this.props.onClick}>
+        <Button
+          aria-label={messages.label.replace('\n', ' ')}
+          onClick={this.props.onClick}
+        >
           {editButtonText}{caret && <span> <i className={`fa fa-caret-${caret}`} /></span>}
         </Button>
         {showDot && <div className='dot' />}

lib/components/narrative/default/default-itinerary.js

@@ -6,6 +6,7 @@ import ItinerarySummary from './itinerary-summary'
 import ItineraryDetails from './itinerary-details'
 import TripDetails from '../connected-trip-details'
 import TripTools from '../trip-tools'
+import LinkButton from '../../user/link-button'
 
 const { formatDuration, formatTime } = coreUtils.time
 
@@ -31,6 +32,7 @@ export default class DefaultItinerary extends NarrativeItinerary {
           <span className='title'>Itinerary {index + 1}</span>{' '}
           <span className='duration pull-right'>{formatDuration(itinerary.duration)}</span>{' '}
           <span className='arrivalTime'>{formatTime(itinerary.startTime)}—{formatTime(itinerary.endTime)}</span>
+          <span className='pull-right'><LinkButton to='/savetrip'>Save</LinkButton></span>{' '}
           <ItinerarySummary itinerary={itinerary} LegIcon={LegIcon} />
         </button>
         {(active || expanded) &&

lib/components/narrative/line-itin/connected-itinerary-body.js

@@ -41,7 +41,8 @@ class ConnectedItineraryBody extends Component {
       LegIcon,
       setActiveLeg,
       setViewedTrip,
-      showLegDiagram
+      showLegDiagram,
+      timeOptions
     } = this.props
 
     return (
@@ -62,6 +63,7 @@ class ConnectedItineraryBody extends Component {
           showLegIcon
           showMapButtonColumn={false}
           showViewTripButton
+          timeOptions={timeOptions}
           toRouteAbbreviation={noop}
           TransitLegSubheader={TransitLegSubheader}
           TransitLegSummary={TransitLegSummary}

lib/components/narrative/line-itin/line-itinerary.js

@@ -6,6 +6,7 @@ import ItineraryBody from './connected-itinerary-body'
 import ItinerarySummary from './itin-summary'
 import NarrativeItinerary from '../narrative-itinerary'
 import SimpleRealtimeAnnotation from '../simple-realtime-annotation'
+import LinkButton from '../../user/link-button'
 
 const { getLegModeLabel, getTimeZoneOffset, isTransit } = coreUtils.itinerary
 
@@ -50,9 +51,9 @@ export default class LineItinerary extends NarrativeItinerary {
       itinerary,
       itineraryFooter,
       LegIcon,
+      onClick,
       setActiveLeg,
       showRealtimeAnnotation,
-      onClick,
       timeFormat
     } = this.props
 
@@ -71,9 +72,12 @@ export default class LineItinerary extends NarrativeItinerary {
           companies={companies}
           itinerary={itinerary}
           LegIcon={LegIcon}
-          timeOptions={timeOptions}
           onClick={onClick}
+          timeOptions={timeOptions}
         />
+
+        <span className='pull-right'><LinkButton to='/savetrip'>Save this option</LinkButton></span>
+
         {showRealtimeAnnotation && <SimpleRealtimeAnnotation />}
         {active || expanded
           ? <ItineraryBody
@@ -83,6 +87,7 @@ export default class LineItinerary extends NarrativeItinerary {
             // (will cause error when clicking on itinerary suymmary).
             // Use the one passed by NarrativeItineraries instead.
             setActiveLeg={setActiveLeg}
+            timeOptions={timeOptions}
           />
           : null}
         {itineraryFooter}