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); });