Display transit leg real-time status #207
Conversation
…time time changes.
…to line-itin/ConnectedItinerary
binh-dam-ibigroup
changed the title
binh-dam-ibigroup
added
WIP
| <TimeColumn> | ||
| {renderedTime} | ||
| <StatusText> | ||
| {!isOnTime && <>{delayInMinutes} min</>} |
There was a problem hiding this comment.
It might be cleaner to use a template string here instead.
|
|
||
| // TODO: refine on-time thresholds. | ||
| // const isOnTime = delay >= -60 && delay <= 120; | ||
| const isOnTime = delay === 0 |
There was a problem hiding this comment.
I imagine this on time calculation might vary from deployment-to-deployment, so I'm not going to bother speculating how we should change this until we need to.
|
The merge conflicts the templates string suggestion have been addressed. I also updated the PR description for testing. |
There was a problem hiding this comment.
A couple of changes needed, but otherwise this is looking good. Also, could you update the testing instructions for running the otp-rr example? In general, I don't think it's productive to try to do the testing of this library through trimet-mod-otp (unless it's really needed).
| * 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 TimeColumnWithDelays ({ |
There was a problem hiding this comment.
The name of this should be RealTimeColumn or something.
| {/* Add the scheduled mention for transit legs only. */} | ||
| {isTransitLeg && <StatusText>scheduled</StatusText>} | ||
| </> | ||
| ) |
There was a problem hiding this comment.
This should go above everything else in a conditional. Otherwise, this ends up getting lost in the shuffle. It's like placing the most important sentence at the very end of five pages of text. (This is a bad analogy, but you catch my drift.)
There was a problem hiding this comment.
The comment or the entire return statement?
| <StatusText> | ||
| {/* Keep the '5 min' string on the same line. */} | ||
| {/* Append space before printing statusText. (statusText can be displayed on same line or new line.) */} | ||
| {!isOnTime && `${delayInMinutes}\xa0min `} |
There was a problem hiding this comment.
Sorry I didn't see this earlier. I think it would be better to wrap the delay minutes text in a div styled with white-space: nowrap;. The \xa0 character is cryptic.
landonreed
left a comment
landonreed
left a comment
There was a problem hiding this comment.
Looks good, just need to replace the \xa0 char.
| {renderedTime} | ||
| <StatusText> | ||
| {/* Keep the '5 min' string on the same line. */} | ||
| {!isOnTime && <DelayText>{`${delayInMinutes} min`}</DelayText>} |
There was a problem hiding this comment.
We can remove the template string now I think.
landonreed
left a comment
landonreed
left a comment
There was a problem hiding this comment.
Sorry, minor change with the new DelayText component.
|
🎉 This PR is included in version 1.2.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
|
🎉 This PR is included in version 1.0.0-alpha.4 🎉 The release is available on: Your semantic-release bot 📦🚀 |
This PR adds a component that displays the real-time status of a transit leg.
To test
To test that the slot is being applied:
otp-react-redux/lib/components/narrative/line-itin/time-column-with-delays.js
Line 60 in b1570b2
yarn startand see the status being shown for transit legs.To test real-time updates:
trimet-mod-otpbranch master, insert in thepackage.jsondependencies:trimet-mod-otp/node_modules/otp-react-redux/node_modules, delete theitinerary-bodyfolder.otp/run.js commtrans. Find an itinerary with real-time updates, and observe the updated leg times per the screenshot below.