@@ -52,40 +52,44 @@ class TripNotificationsPane extends Component {
-
- When would you like to receive notifications about delays or disruptions to your trip?
+ {!isCreating && (
+ <>
+
+ When would you like to receive notifications about delays or disruptions to your trip?
-
- Check for delays or disruptions:
-
-
-
-
-
-
-
+
+ Check for delays or disruptions:
+
+
+
+
+
+
+
-
- Under construction!
-
- Notify me if:
- A different route or transfer point is recommended
- There is an alert for a route or stop that is part of my journey
+
+ Under construction!
+
+ Notify me if:
+ A different route or transfer point is recommended
+ There is an alert for a route or stop that is part of my journey
- Your arrival or departure time changes by more than:
-
-
-
-
-
+ Your arrival or departure time changes by more than:
+
+
+
+
+
+
+
-
-
+
+ )}
)
From 2115c7befadd6d7ecc1fd0e02d54a2a462f2774e Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Tue, 25 Aug 2020 10:40:34 -0400
Subject: [PATCH 05/12] refactor(TimeColumnWithDelays): Format delay using
template string.
---
.../narrative/line-itin/time-column-with-delays.js | 5 +++--
1 file changed, 3 insertions(+), 2 deletions(-)
diff --git a/lib/components/narrative/line-itin/time-column-with-delays.js b/lib/components/narrative/line-itin/time-column-with-delays.js
index 22fb2aeeb..85ff2499c 100644
--- a/lib/components/narrative/line-itin/time-column-with-delays.js
+++ b/lib/components/narrative/line-itin/time-column-with-delays.js
@@ -105,8 +105,9 @@ export default function TimeColumnWithDelays ({
{renderedTime}
- {!isOnTime && <>{delayInMinutes} min}
- {'\n'}
+ {/* 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 `}
{statusText}
From 3ef29f3f43f2f8829b397499d15d98ce3bcbe17b Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Tue, 25 Aug 2020 12:27:27 -0400
Subject: [PATCH 06/12] refactor(RealtimeTimeColumn): Rename component, address
PR comments.
---
.../line-itin/connected-itinerary-body.js | 4 +-
.../line-itin/realtime-time-column.js | 135 ++++++++++++++++++
.../line-itin/time-column-with-delays.js | 135 ------------------
3 files changed, 137 insertions(+), 137 deletions(-)
create mode 100644 lib/components/narrative/line-itin/realtime-time-column.js
delete mode 100644 lib/components/narrative/line-itin/time-column-with-delays.js
diff --git a/lib/components/narrative/line-itin/connected-itinerary-body.js b/lib/components/narrative/line-itin/connected-itinerary-body.js
index 4c40e6749..ce38a6f73 100644
--- a/lib/components/narrative/line-itin/connected-itinerary-body.js
+++ b/lib/components/narrative/line-itin/connected-itinerary-body.js
@@ -12,7 +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 TimeColumnWithDelays from './time-column-with-delays'
+import RealtimeTimeColumn from './realtime-time-column'
import TripDetails from '../connected-trip-details'
import TripTools from '../trip-tools'
@@ -68,7 +68,7 @@ class ConnectedItineraryBody extends Component {
toRouteAbbreviation={noop}
TransitLegSubheader={TransitLegSubheader}
TransitLegSummary={TransitLegSummary}
- TimeColumnContent={TimeColumnWithDelays}
+ TimeColumnContent={RealtimeTimeColumn}
/>
diff --git a/lib/components/narrative/line-itin/realtime-time-column.js b/lib/components/narrative/line-itin/realtime-time-column.js
new file mode 100644
index 000000000..8ab6f1550
--- /dev/null
+++ b/lib/components/narrative/line-itin/realtime-time-column.js
@@ -0,0 +1,135 @@
+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;
+`
+
+// 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 (
+ <>
+ {formattedTime}
+ {isTransitLeg && scheduled}
+
+ )
+ }
+
+ // 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 = (
+
+ {!isOnTime && {originalFormattedTime}}
+ {formattedTime}
+
+ )
+ } else {
+ renderedTime = {formattedTime}
+ }
+
+ return (
+
+ {renderedTime}
+
+ {/* 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 `}
+ {statusText}
+
+
+ )
+}
+
+RealtimeTimeColumn.propTypes = {
+ isDestination: PropTypes.bool.isRequired,
+ leg: legType.isRequired,
+ timeOptions: timeOptionsType
+}
+
+RealtimeTimeColumn.defaultProps = {
+ timeOptions: null
+}
diff --git a/lib/components/narrative/line-itin/time-column-with-delays.js b/lib/components/narrative/line-itin/time-column-with-delays.js
deleted file mode 100644
index 85ff2499c..000000000
--- a/lib/components/narrative/line-itin/time-column-with-delays.js
+++ /dev/null
@@ -1,135 +0,0 @@
-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;
-`
-
-// 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 TimeColumnWithDelays ({
- isDestination,
- leg,
- timeOptions
-}) {
- const time = isDestination ? leg.endTime : leg.startTime
- const formattedTime = time && formatTime(time, timeOptions)
- const isTransitLeg = isTransit(leg.mode)
-
- if (leg.realTime) {
- // 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 = (
-
- {!isOnTime && {originalFormattedTime}}
- {formattedTime}
-
- )
- } else {
- renderedTime = {formattedTime}
- }
-
- return (
-
- {renderedTime}
-
- {/* 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 `}
- {statusText}
-
-
- )
- }
-
- // Non-real-time leg.
- return (
- <>
- {formattedTime}
- {/* Add the scheduled mention for transit legs only. */}
- {isTransitLeg && scheduled}
-
- )
-}
-
-TimeColumnWithDelays.propTypes = {
- isDestination: PropTypes.bool.isRequired,
- leg: legType.isRequired,
- timeOptions: timeOptionsType
-}
-
-TimeColumnWithDelays.defaultProps = {
- timeOptions: null
-}
From 60f4ad69336cd89193ac0a4888859f1708439572 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Tue, 25 Aug 2020 14:09:06 -0400
Subject: [PATCH 07/12] refactor(RealtimeTimeColumn): Extract styles for delay
display.
---
.../narrative/line-itin/realtime-time-column.js | 8 ++++++--
1 file changed, 6 insertions(+), 2 deletions(-)
diff --git a/lib/components/narrative/line-itin/realtime-time-column.js b/lib/components/narrative/line-itin/realtime-time-column.js
index 8ab6f1550..41efc3aec 100644
--- a/lib/components/narrative/line-itin/realtime-time-column.js
+++ b/lib/components/narrative/line-itin/realtime-time-column.js
@@ -27,6 +27,11 @@ const StatusText = styled.div`
line-height: 1em;
`
+const DelayText = styled.span`
+ display: block;
+ white-space: nowrap;
+`
+
// Reusing stop viewer colors.
const TimeColumnOnTime = styled(TimeColumnBase)`
${TimeText}, ${StatusText} {
@@ -116,8 +121,7 @@ export default function RealtimeTimeColumn ({
{renderedTime}
{/* 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 `}
+ {!isOnTime && {`${delayInMinutes} min`}}
{statusText}
From 83c201230c65b8c61915b5dd0498da1a4959e145 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Tue, 25 Aug 2020 14:41:08 -0400
Subject: [PATCH 08/12] refactor(RealtimeTimeColumn): Remove template string
---
lib/components/narrative/line-itin/realtime-time-column.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/lib/components/narrative/line-itin/realtime-time-column.js b/lib/components/narrative/line-itin/realtime-time-column.js
index 41efc3aec..3cf031fee 100644
--- a/lib/components/narrative/line-itin/realtime-time-column.js
+++ b/lib/components/narrative/line-itin/realtime-time-column.js
@@ -121,7 +121,7 @@ export default function RealtimeTimeColumn ({
{renderedTime}
{/* Keep the '5 min' string on the same line. */}
- {!isOnTime && {`${delayInMinutes} min`}}
+ {!isOnTime && {delayInMinutes} min}
{statusText}
From ab2badb8e3e5439a327f1d778ea875148520e355 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Tue, 25 Aug 2020 18:29:50 -0400
Subject: [PATCH 09/12] fix(ItineraryBody): Pass time/date format to
TripDetails component.
---
.../narrative/line-itin/connected-itinerary-body.js | 6 +++++-
1 file changed, 5 insertions(+), 1 deletion(-)
diff --git a/lib/components/narrative/line-itin/connected-itinerary-body.js b/lib/components/narrative/line-itin/connected-itinerary-body.js
index 5c6ba0148..540afdc63 100644
--- a/lib/components/narrative/line-itin/connected-itinerary-body.js
+++ b/lib/components/narrative/line-itin/connected-itinerary-body.js
@@ -68,7 +68,11 @@ class ConnectedItineraryBody extends Component {
TransitLegSubheader={TransitLegSubheader}
TransitLegSummary={TransitLegSummary}
/>
-
+
)
From 38cdbc37fd5296341ded917cc3f3be2fb72b912b Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Thu, 27 Aug 2020 19:08:55 -0400
Subject: [PATCH 10/12] refactor(TripNotificationsPane): Remove isCreating
options.
---
lib/components/user/saved-trip-editor.js | 2 +-
lib/components/user/saved-trip-screen.js | 2 -
.../user/trip-notifications-pane.js | 62 +++++++++----------
3 files changed, 30 insertions(+), 36 deletions(-)
diff --git a/lib/components/user/saved-trip-editor.js b/lib/components/user/saved-trip-editor.js
index c17165f14..d2cc9b21e 100644
--- a/lib/components/user/saved-trip-editor.js
+++ b/lib/components/user/saved-trip-editor.js
@@ -47,7 +47,7 @@ const SavedTripEditor = ({
return (
<>
-