diff --git a/app/component/DepartureTime.js b/app/component/DepartureTime.js
index d2102ed25a..b08cafd1ee 100644
--- a/app/component/DepartureTime.js
+++ b/app/component/DepartureTime.js
@@ -7,9 +7,17 @@ import Icon from './Icon';
import LocalTime from './LocalTime';
function DepartureTime(props, context) {
+ const isLate =
+ props.realtimeDeparture - props.scheduledDeparture >=
+ context.config.itinerary.delayThreshold;
+ const departureTime =
+ props.canceled || !isLate
+ ? props.scheduledDeparture
+ : props.realtimeDeparture;
+
let shownTime;
const timeDiffInMinutes = Math.floor(
- (props.departureTime - props.currentTime) / 60,
+ (departureTime - props.currentTime) / 60,
);
if (timeDiffInMinutes <= -1) {
shownTime = undefined;
@@ -45,6 +53,7 @@ function DepartureTime(props, context) {
{
realtime: props.realtime,
canceled: props.canceled,
+ late: isLate,
},
props.className,
)}
@@ -63,6 +72,7 @@ function DepartureTime(props, context) {
canceled: props.canceled,
first: !props.isNextDeparture,
next: props.isNextDeparture,
+ late: isLate,
},
props.className,
)}
@@ -72,8 +82,13 @@ function DepartureTime(props, context) {
id: 'next',
defaultMessage: 'Next',
})} `}
-
+
+ {props.realtime && isLate && (
+
+
+
+ )}
{props.canceled && props.showCancelationIcon && (
)}
@@ -92,7 +107,8 @@ DepartureTime.propTypes = {
className: PropTypes.string,
canceled: PropTypes.bool,
currentTime: PropTypes.number.isRequired,
- departureTime: PropTypes.number.isRequired,
+ scheduledDeparture: PropTypes.number.isRequired,
+ realtimeDeparture: PropTypes.number.isRequired,
realtime: PropTypes.bool,
style: PropTypes.object,
useUTC: PropTypes.bool,
@@ -123,11 +139,8 @@ export default DepartureTime;
export const mapStopTime = (stoptime, pattern) => ({
stop: stoptime.stop,
canceled: stoptime.realtimeState === 'CANCELED',
- departureTime:
- stoptime.serviceDay +
- (stoptime.realtimeState === 'CANCELED' || stoptime.realtimeDeparture === -1
- ? stoptime.scheduledDeparture
- : stoptime.realtimeDeparture),
+ scheduledDeparture: stoptime.serviceDay + stoptime.scheduledDeparture,
+ realtimeDeparture: stoptime.serviceDay + stoptime.realtimeDeparture,
realtime: stoptime.realtimeDeparture !== -1 && stoptime.realtime,
pattern: pattern && pattern.pattern,
trip: stoptime.trip,
diff --git a/app/component/route.scss b/app/component/route.scss
index b75040ece9..e93f648d3b 100644
--- a/app/component/route.scss
+++ b/app/component/route.scss
@@ -411,6 +411,10 @@ $margin-left-right: 21.3px;
letter-spacing: -0.03em;
}
}
+ .original-time {
+ text-decoration: line-through;
+ color: $gray;
+ }
}
}
}
diff --git a/test/unit/component/DepartureTime.test.js b/test/unit/component/DepartureTime.test.js
index 6c47b3c876..a8b1c9ce4d 100644
--- a/test/unit/component/DepartureTime.test.js
+++ b/test/unit/component/DepartureTime.test.js
@@ -33,11 +33,17 @@ describe('', () => {
const props = {
canceled: true,
currentTime: 0,
- departureTime: 180,
+ scheduledDeparture: 180,
+ realtimeDeparture: 180,
showCancelationIcon: true,
};
const wrapper = shallowWithIntl(, {
- context: { config: { minutesToDepartureLimit: 2 } },
+ context: {
+ config: {
+ minutesToDepartureLimit: 2,
+ itinerary: { delayThreshold: 180 },
+ },
+ },
});
expect(wrapper.find('.caution')).to.have.lengthOf(1);
});