LTR changes for Stop Viewer Schedules

__tests__/components/viewers/__snapshots__/stop-viewer.js.snap

@@ -990,7 +990,6 @@ exports[`components > viewers > stop viewer should render countdown times after
                     </div>
                   </PatternRow>
                 </div>
-                .
                 <div
                   style={
                     Object {
@@ -1045,7 +1044,6 @@ exports[`components > viewers > stop viewer should render countdown times after
                     00:17
                   </button>
                 </div>
-                }
               </StopLiveTable>
             </div>
           </styled.div>
@@ -1758,7 +1756,6 @@ exports[`components > viewers > stop viewer should render countdown times for st
                     </div>
                   </PatternRow>
                 </div>
-                .
                 <div
                   style={
                     Object {
@@ -1813,7 +1810,6 @@ exports[`components > viewers > stop viewer should render countdown times for st
                     00:17
                   </button>
                 </div>
-                }
               </StopLiveTable>
             </div>
           </styled.div>
@@ -2823,7 +2819,6 @@ exports[`components > viewers > stop viewer should render times after midnight w
                     </div>
                   </PatternRow>
                 </div>
-                .
                 <div
                   style={
                     Object {
@@ -2878,7 +2873,6 @@ exports[`components > viewers > stop viewer should render times after midnight w
                     00:17
                   </button>
                 </div>
-                }
               </StopLiveTable>
             </div>
           </styled.div>
@@ -5230,7 +5224,6 @@ exports[`components > viewers > stop viewer should render with OTP transit index
                     </div>
                   </PatternRow>
                 </div>
-                .
                 <div
                   style={
                     Object {
@@ -5285,7 +5278,6 @@ exports[`components > viewers > stop viewer should render with OTP transit index
                     17:50
                   </button>
                 </div>
-                }
               </StopLiveTable>
             </div>
           </styled.div>
@@ -6801,7 +6793,6 @@ exports[`components > viewers > stop viewer should render with TriMet transit in
                     </div>
                   </PatternRow>
                 </div>
-                .
                 <div
                   style={
                     Object {
@@ -6856,7 +6847,6 @@ exports[`components > viewers > stop viewer should render with TriMet transit in
                     17:38
                   </button>
                 </div>
-                }
               </StopLiveTable>
             </div>
           </styled.div>

lib/components/viewers/stop-live-table.js

@@ -18,6 +18,10 @@ const defaultState = {
   timer: null
 }
 
+/**
+ * Table showing next arrivals (refreshing every 10 seconds) for the specified
+ * stop organized by route pattern.
+ */
 class StopLiveTable extends Component {
   state = defaultState
 
@@ -125,7 +129,7 @@ class StopLiveTable extends Component {
           }
         </div>
 
-        {/* Auto update controls for realtime arrivals */}.
+        {/* Auto update controls for realtime arrivals */}
         <div style={{ marginTop: '20px' }}>
           {/* eslint-disable-next-line jsx-a11y/label-has-for */}
           <label style={{ fontWeight: 300, fontSize: 'small' }}>
@@ -148,7 +152,6 @@ class StopLiveTable extends Component {
               .format(timeFormat)}
           </button>
         </div>
-          }
       </>
     )
   }

lib/components/viewers/stop-schedule-table.js

@@ -1,3 +1,4 @@
+import moment from 'moment'
 import React, { Component, createRef } from 'react'
 import styled from 'styled-components'
 
@@ -43,16 +44,20 @@ const TimeCell = styled.td`
   white-space: nowrap;
 `
 
+/**
+ * Table showing scheduled departure times for the specified stop organized
+ * chronologically.
+ */
 class StopScheduleTable extends Component {
-  firstDepartureRef = createRef()
+  targetDepartureRef = createRef()
 
   /*
    * Scroll to the first stop time that is departing from now.
    */
   _scrollToFirstDeparture = () => {
-    const { current } = this.firstDepartureRef
+    const { current } = this.targetDepartureRef
     if (current) {
-      current.scrollIntoView()
+      current.scrollIntoView({ behavior: 'smooth', block: 'start' })
     }
   }
 
@@ -66,7 +71,7 @@ class StopScheduleTable extends Component {
   }
 
   render () {
-    const { homeTimezone, stopData, timeFormat } = this.props
+    const { date, homeTimezone, stopData, timeFormat } = this.props
     const stopTimesByPattern = getStopTimesByPattern(stopData)
 
     // Merge stop times, so that we can sort them across all route patterns.
@@ -91,10 +96,11 @@ class StopScheduleTable extends Component {
     })
 
     mergedStopTimes = mergedStopTimes.sort(stopTimeComparator)
-
-    // Find the next stop time that is departing. We will scroll to that stop time entry.
+    const today = moment().startOf('day').format('YYYY-MM-DD')
+    // Find the next stop time that is departing.
+    // We will scroll to that stop time entry (if showing schedules for today).
     let firstDepartureFromNow
-    if (mergedStopTimes.length) {
+    if (mergedStopTimes.length && date === today) {
       // Search starting from the last stop time (largest seconds until departure) for this pattern.
       const lastStopTime = mergedStopTimes[mergedStopTimes.length - 1]
 
@@ -121,12 +127,23 @@ class StopScheduleTable extends Component {
         <tbody>
           {mergedStopTimes.map((stopTime, index) => {
             const { blockId, headsign, route } = stopTime
+            // Highlight if this row is the imminent departure.
+            const highlightRow = stopTime === firstDepartureFromNow
+            const className = highlightRow ? 'highlighted-item' : null
+            // FIXME: This is a bit of a hack to account for the sticky table
+            // header interfering with the scrollIntoView. If the next stop time
+            // is the imminent departure, we'll set the scrollTo to this row (the
+            // stop time prior), which effectively applies an offset for the
+            // scroll. If next row does not exist, default to this row.
+            const nextStopTime = mergedStopTimes[index + 1]
+            const scrollToRow = nextStopTime
+              ? nextStopTime === firstDepartureFromNow
+              : highlightRow
             const routeName = route.shortName ? route.shortName : route.longName
             // Add ref to scroll to the first stop time departing from now.
-            const refProp = stopTime === firstDepartureFromNow ? this.firstDepartureRef : null
-
+            const refProp = scrollToRow ? this.targetDepartureRef : null
             return (
-              <tr key={index} ref={refProp}>
+              <tr key={index} className={className} ref={refProp}>
                 <td>{blockId}</td>
                 <RouteCell>{routeName}</RouteCell>
                 <td>{headsign}</td>

lib/components/viewers/stop-viewer.js

@@ -207,15 +207,16 @@ class StopViewer extends Component {
       transitOperators,
       viewedStop
     } = this.props
-    const { scheduleView } = this.state
+    const { date, scheduleView } = this.state
     const hasStopTimesAndRoutes = !!(stopData && stopData.stopTimes && stopData.stopTimes.length > 0 && stopData.routes)
-
+    console.log(date)
     let contents
     if (!hasStopTimesAndRoutes) {
       contents = <div>No stop times found for date.</div>
     } else if (scheduleView) {
       contents = (
         <StopScheduleTable
+          date={date}
           homeTimezone={homeTimezone}
           stopData={stopData}
           timeFormat={timeFormat}

lib/components/viewers/viewers.css

@@ -13,6 +13,17 @@
   height: 100%;
 }
 
+@keyframes yellowfade {
+    from { background: yellow; }
+    to { background: transparent; }
+}
+
+/* Used to briefly highlight an element and then fade to transparent. */
+.highlighted-item {
+    animation-name: yellowfade;
+    animation-duration: 1.5s;
+}
+
 /* Remove arrows on date input */
 .otp .stop-viewer-body input[type="date"]::-webkit-inner-spin-button {
   -webkit-appearance: none;