Release request

example-config.yml

@@ -124,6 +124,12 @@ routingTypes:
   - key: ITINERARY
     text: Exact Time
 
+# Itinerary options
+itinerary:
+  # Show fares for each transit leg (false if omitted).
+  # (Requires using LineItinerary.)
+  showRouteFares: false
+
 ### Use this config for the standard mode selector
 # modeGroups:
 #   - name: Transit

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

@@ -12,6 +12,7 @@ import styled from 'styled-components'
 import { showLegDiagram } from '../../../actions/map'
 import { setViewedTrip } from '../../../actions/ui'
 import TransitLegSubheader from './connected-transit-leg-subheader'
+import RealtimeTimeColumn from './realtime-time-column'
 import TripDetails from '../connected-trip-details'
 import TripTools from '../trip-tools'
 
@@ -62,13 +63,19 @@ class ConnectedItineraryBody extends Component {
           showElevationProfile
           showLegIcon
           showMapButtonColumn={false}
+          showRouteFares={config.itinerary && config.itinerary.showRouteFares}
           showViewTripButton
           timeOptions={timeOptions}
           toRouteAbbreviation={noop}
           TransitLegSubheader={TransitLegSubheader}
           TransitLegSummary={TransitLegSummary}
+          TimeColumnContent={RealtimeTimeColumn}
+        />
+        <TripDetails
+          itinerary={itinerary}
+          longDateFormat={config.dateTime.longDateFormat}
+          timeOptions={timeOptions}
         />
-        <TripDetails itinerary={itinerary} />
         <TripTools itinerary={itinerary} />
       </ItineraryBodyContainer>
     )

lib/components/narrative/line-itin/realtime-time-column.js

@@ -0,0 +1,139 @@
+import { isTransit } from '@opentripplanner/core-utils/lib/itinerary'
+import {
+  legType,
+  timeOptionsType
+} from '@opentripplanner/core-utils/lib/types'
+import { formatTime } from '@opentripplanner/core-utils/lib/time'
+import PropTypes from 'prop-types'
+import React from 'react'
+import styled from 'styled-components'
+
+const TimeText = styled.div``
+
+const TimeStruck = styled.div`
+  text-decoration: line-through;
+`
+
+const TimeBlock = styled.div`
+  line-height: 1em;
+  margin-bottom: 4px;
+`
+
+const TimeColumnBase = styled.div``
+
+const StatusText = styled.div`
+  color: #bbb;
+  font-size: 80%;
+  line-height: 1em;
+`
+
+const DelayText = styled.span`
+  display: block;
+  white-space: nowrap;
+`
+
+// Reusing stop viewer colors.
+const TimeColumnOnTime = styled(TimeColumnBase)`
+  ${TimeText}, ${StatusText} {
+    color: #5cb85c;
+  }
+`
+const TimeColumnEarly = styled(TimeColumnBase)`
+  ${TimeText}, ${StatusText} {
+    color: #337ab7;
+  }
+`
+const TimeColumnLate = styled(TimeColumnBase)`
+  ${TimeText}, ${StatusText} {
+    color: #d9534f;
+  }
+`
+
+/**
+ * This component displays the scheduled departure/arrival time for a leg,
+ * and, for transit legs, displays any delays or earliness where applicable.
+ */
+export default function RealtimeTimeColumn ({
+  isDestination,
+  leg,
+  timeOptions
+}) {
+  const time = isDestination ? leg.endTime : leg.startTime
+  const formattedTime = time && formatTime(time, timeOptions)
+  const isTransitLeg = isTransit(leg.mode)
+
+  // For non-real-time legs, show only the scheduled time,
+  // except for transit legs where we add the "scheduled" text underneath.
+  if (!leg.realTime) {
+    return (
+      <>
+        <TimeText>{formattedTime}</TimeText>
+        {isTransitLeg && <StatusText>scheduled</StatusText>}
+      </>
+    )
+  }
+
+  // Delay in seconds.
+  const delay = isDestination ? leg.arrivalDelay : leg.departureDelay
+  // Time is in milliseconds.
+  const originalTime = time - delay * 1000
+  const originalFormattedTime =
+    originalTime && formatTime(originalTime, timeOptions)
+
+  // TODO: refine on-time thresholds.
+  // const isOnTime = delay >= -60 && delay <= 120;
+  const isOnTime = delay === 0
+
+  let statusText
+  let TimeColumn = TimeColumnBase
+  if (isOnTime) {
+    statusText = 'on time'
+    TimeColumn = TimeColumnOnTime
+  } else if (delay < 0) {
+    statusText = 'early'
+    TimeColumn = TimeColumnEarly
+  } else if (delay > 0) {
+    statusText = 'late'
+    TimeColumn = TimeColumnLate
+  }
+
+  // Absolute delay in rounded minutes, for display purposes.
+  const delayInMinutes = Math.abs(
+    Math.round((isDestination ? leg.arrivalDelay : leg.departureDelay) / 60)
+  )
+
+  let renderedTime
+  if (!isOnTime) {
+    // If the transit vehicle is not on time, strike the original scheduled time
+    // and display the updated time underneath.
+    renderedTime = (
+      <TimeBlock>
+        {!isOnTime && <TimeStruck>{originalFormattedTime}</TimeStruck>}
+        <TimeText>{formattedTime}</TimeText>
+      </TimeBlock>
+    )
+  } else {
+    renderedTime = <TimeText>{formattedTime}</TimeText>
+  }
+
+  return (
+    <TimeColumn>
+      {renderedTime}
+      <StatusText>
+        {/* Keep the '5 min' string on the same line. */}
+        {!isOnTime && <DelayText>{delayInMinutes} min</DelayText>}
+        {statusText}
+      </StatusText>
+    </TimeColumn>
+  )
+}
+
+RealtimeTimeColumn.propTypes = {
+  isDestination: PropTypes.bool.isRequired,
+  leg: legType.isRequired,
+  timeOptions: timeOptionsType
+}
+
+RealtimeTimeColumn.defaultProps = {
+  timeOptions: null
+}

lib/components/user/saved-trip-editor.js

@@ -7,31 +7,47 @@ import StackedPaneDisplay from './stacked-pane-display'
  * This component handles editing of an existing trip.
  */
 const SavedTripEditor = ({
+  isCreating,
   monitoredTrip,
   onCancel,
   onComplete,
   onDeleteTrip,
   panes
 }) => {
   if (monitoredTrip) {
-    const paneSequence = [
-      {
-        pane: panes.basics,
-        title: 'Trip overview'
-      },
-      {
-        pane: panes.notifications,
-        title: 'Trip notifications'
-      },
-      {
-        // TODO: Find a better place for this.
-        pane: () => <Button bsStyle='danger' onClick={onDeleteTrip}>Delete Trip</Button>,
-        title: 'Danger zone'
-      }
-    ]
+    let paneSequence
+    if (isCreating) {
+      paneSequence = [
+        {
+          pane: panes.basics,
+          title: 'Trip information'
+        },
+        {
+          pane: panes.notifications,
+          title: 'Trip notifications'
+        }
+      ]
+    } else {
+      paneSequence = [
+        {
+          pane: panes.basics,
+          title: 'Trip overview'
+        },
+        {
+          pane: panes.notifications,
+          title: 'Trip notifications'
+        },
+        {
+          // TODO: Find a better place for this.
+          pane: () => <Button bsStyle='danger' onClick={onDeleteTrip}>Delete Trip</Button>,
+          title: 'Danger zone'
+        }
+      ]
+    }
+
     return (
       <>
-        <h1>{monitoredTrip.tripName}</h1>
+        <h1>{isCreating ? 'Save trip' : monitoredTrip.tripName}</h1>
         <StackedPaneDisplay
           onCancel={onCancel}
           onComplete={onComplete}

lib/components/user/saved-trip-screen.js

@@ -6,7 +6,6 @@ import * as uiActions from '../../actions/ui'
 import * as userActions from '../../actions/user'
 import DesktopNav from '../app/desktop-nav'
 import SavedTripEditor from './saved-trip-editor'
-import SavedTripWizard from './saved-trip-wizard'
 import TripBasicsPane from './trip-basics-pane'
 import TripNotificationsPane from './trip-notifications-pane'
 import TripSummaryPane from './trip-summary-pane'
@@ -187,36 +186,22 @@ class SavedTripScreen extends Component {
   }
 
   render () {
-    const { isCreating, monitoredTrips } = this.props
+    const { isCreating } = this.props
     const { monitoredTrip } = this.state
 
-    let content
-    if (isCreating && !hasMaxTripCount(monitoredTrips)) {
-      content = (
-        <SavedTripWizard
-          monitoredTrip={monitoredTrip}
-          onComplete={this._handleSaveNewTrip}
-          panes={this._panes}
-        />
-      )
-    } else {
-      content = (
-        <SavedTripEditor
-          monitoredTrip={monitoredTrip}
-          onCancel={this._goToSavedTrips}
-          onComplete={this._handleSaveTripEdits}
-          onDeleteTrip={this._handleDeleteTrip}
-          panes={this._panes}
-        />
-      )
-    }
-
     return (
       <div className='otp'>
         {/* TODO: Do mobile view. */}
         <DesktopNav />
         <form className='container'>
-          {content}
+          <SavedTripEditor
+            isCreating={isCreating}
+            monitoredTrip={monitoredTrip}
+            onCancel={isCreating ? this._goToTripPlanner : this._goToSavedTrips}
+            onComplete={isCreating ? this._handleSaveNewTrip : this._handleSaveTripEdits}
+            onDeleteTrip={this._handleDeleteTrip}
+            panes={this._panes}
+          />
         </form>
       </div>
     )

lib/components/user/trip-notifications-pane.js

@@ -71,13 +71,13 @@ class TripNotificationsPane extends Component {
           </FormGroup>
 
           <Alert bsStyle='warning'>
-            Under construction!
+                    Under construction!
             <FormGroup>
               <ControlLabel>Notify me if:</ControlLabel>
               <Checkbox>A different route or transfer point is recommended</Checkbox>
               <Checkbox>There is an alert for a route or stop that is part of my journey</Checkbox>
 
-              Your arrival or departure time changes by more than:
+                      Your arrival or departure time changes by more than:
               <FormControl componentClass='select' defaultValue={5} placeholder='select'>
                 <option value={5}>5 min. (default)</option>
                 <option value={10}>10 min.</option>

package.json

@@ -34,7 +34,7 @@
     "@opentripplanner/geocoder": "^1.0.2",
     "@opentripplanner/humanize-distance": "^0.0.22",
     "@opentripplanner/icons": "^1.0.1",
-    "@opentripplanner/itinerary-body": "^1.0.2",
+    "@opentripplanner/itinerary-body": "^1.2.0",
     "@opentripplanner/location-field": "^1.0.2",
     "@opentripplanner/location-icon": "^1.0.0",
     "@opentripplanner/park-and-ride-overlay": "^1.0.1",