Skip to content

Commit

Permalink
refactor: Optional lateness display
Browse files Browse the repository at this point in the history
  • Loading branch information
miles-grant-ibigroup committed Oct 11, 2023
1 parent f27e945 commit 44186d1
Show file tree
Hide file tree
Showing 2 changed files with 40 additions and 33 deletions.
2 changes: 2 additions & 0 deletions example-config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -349,6 +349,8 @@ itinerary:
# This flag disables the dot between legs in the metro itnerary summary, replacing it with
# a gray background
disableMetroSeperatorDot: false
# Show the number of minutes of delay or early beneath a time in the itinerary body
showLateness: true
# Shows the duration of a leg below the leg in the metro itinerary summary
showLegDurations: false
# The sort option to use by default
Expand Down
71 changes: 38 additions & 33 deletions lib/components/viewers/realtime-status-label.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@
// Typescript TODO: Waiting on viewer.js being typed
import { connect } from 'react-redux'
import { FormattedMessage, FormattedTime } from 'react-intl'
import { InvisibleAdditionalDetails } from '@opentripplanner/itinerary-body/lib/styled'
import React from 'react'
import styled from 'styled-components'

import { getTripStatus, REALTIME_STATUS } from '../../util/viewer'
import { InvisibleAdditionalDetails } from '@opentripplanner/itinerary-body/lib/styled'
import FormattedDuration from '../util/formatted-duration'
import FormattedRealtimeStatusLabel from '../util/formatted-realtime-status-label'

Expand Down Expand Up @@ -66,6 +66,7 @@ const RealtimeStatusLabel = ({
isRealtime,
onTimeThresholdSeconds,
originalTime,
showLateness,
time,
withBackground
}: {
Expand All @@ -74,6 +75,7 @@ const RealtimeStatusLabel = ({
isRealtime?: boolean
onTimeThresholdSeconds?: number
originalTime?: number
showLateness?: boolean
time?: number
withBackground?: boolean
}): JSX.Element => {
Expand Down Expand Up @@ -117,45 +119,48 @@ const RealtimeStatusLabel = ({
withBackground={withBackground}
>
{renderedTime}
<MainContent>
<FormattedRealtimeStatusLabel
minutes={
isEarlyOrLate ? (
<DelayText>
<FormattedDuration
duration={Math.abs(delay)}
includeSeconds={false}
/>
</DelayText>
) : (
<>{null}</>
)
}
// @ts-ignore getTripStatus is not typed yet
status={STATUS[status].label}
/>
{isEarlyOrLate && (
<InvisibleAdditionalDetails>
<FormattedMessage
id="components.MetroUI.originallyScheduledTime"
values={{
originalTime: (
<FormattedTime timeStyle="short" value={originalTime} />
)
}}
/>
</InvisibleAdditionalDetails>
)}
</MainContent>
{showLateness && (
<MainContent>
<FormattedRealtimeStatusLabel
minutes={
isEarlyOrLate ? (
<DelayText>
<FormattedDuration
duration={Math.abs(delay)}
includeSeconds={false}
/>
</DelayText>
) : (
<>{null}</>
)
}
// @ts-ignore getTripStatus is not typed yet
status={STATUS[status].label}
/>
{isEarlyOrLate && (
<InvisibleAdditionalDetails>
<FormattedMessage
id="components.MetroUI.originallyScheduledTime"
values={{
originalTime: (
<FormattedTime timeStyle="short" value={originalTime} />
)
}}
/>
</InvisibleAdditionalDetails>
)}
</MainContent>
)}
</Container>
)
}

const mapStateToProps = (state: {
// Typescript TODO: type state
otp: { config: { onTimeThresholdSeconds: any } }
otp: { config: { onTimeThresholdSeconds: any; showLateness: boolean } }
}) => ({
onTimeThresholdSeconds: state.otp.config.onTimeThresholdSeconds
onTimeThresholdSeconds: state.otp.config.onTimeThresholdSeconds,
showLateness: state.otp.config.showLateness
})

export default connect(mapStateToProps)(RealtimeStatusLabel)

0 comments on commit 44186d1

Please sign in to comment.