Display delays
This commit is contained in:
@ -79,7 +79,7 @@ function TrainsTableBody({stop, date, time, tableType}) {
|
||||
|
||||
const nullRef = useRef(null)
|
||||
let table_rows = trains.map((train) => <CSSTransition key={train.id} timeout={500} classNames="shrink" nodeRef={nullRef}>
|
||||
<TrainRow train={train} tableType={tableType} />
|
||||
<TrainRow train={train} tableType={tableType} date={date} time={time} />
|
||||
</CSSTransition>)
|
||||
|
||||
return <>
|
||||
@ -91,7 +91,7 @@ function TrainsTableBody({stop, date, time, tableType}) {
|
||||
</>
|
||||
}
|
||||
|
||||
function TrainRow({train, tableType}) {
|
||||
function TrainRow({train, tableType, date, time}) {
|
||||
const tripQuery = useQuery({
|
||||
queryKey: ['trip', train.trip],
|
||||
queryFn: () => fetch(`/api/gtfs/trip/${train.trip}/`)
|
||||
@ -138,6 +138,19 @@ function TrainRow({train, tableType}) {
|
||||
stopsFilter = (stop_time) => stop_time.stop_sequence < train.stop_sequence && stop_time.pickup_type === 0
|
||||
let stopsNames = stops.filter(stopsFilter).map(stopTime => stopTime?.stop.name ?? "").join(", ") ?? ""
|
||||
|
||||
const realtimeQuery = useQuery({
|
||||
queryKey: ['realtime', train.id, date, time],
|
||||
queryFn: () => fetch(`/api/gtfs-rt/stop_time_update/${train.id}/`)
|
||||
.then(response => response.json()),
|
||||
enabled: !!train.id,
|
||||
})
|
||||
const realtimeData = realtimeQuery.data ?? {}
|
||||
if (!realtimeQuery.isError)
|
||||
console.log(realtimeData)
|
||||
const delay = tableType === "departures" ? realtimeData.departure_delay : realtimeData.arrival_delay
|
||||
const prettyDelay = delay ? getPrettyDelay(delay) : ""
|
||||
const visibleDelay = delay ? `${prettyDelay}` : ""
|
||||
|
||||
return <>
|
||||
<StyledTableRow tabletype={tableType}>
|
||||
<TableCell>
|
||||
@ -165,8 +178,15 @@ function TrainRow({train, tableType}) {
|
||||
</Box>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Box display="flex" alignItems="center" justifyContent="center" fontWeight="bold" color="#FFED02" fontSize={24}>
|
||||
{getDisplayTime(train, tableType)}
|
||||
<Box display="flex" alignItems="center" justifyContent="center">
|
||||
<Box>
|
||||
<Box fontWeight="bold" color="#FFED02" fontSize={24}>
|
||||
{getDisplayTime(train, tableType)}
|
||||
</Box>
|
||||
<Box color={delay && delay !== "00:00:00" ? "#e86d2b" : "white"} fontWeight={delay && delay !== "00:00:00" ? "bold" : ""}>
|
||||
{visibleDelay}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
@ -227,4 +247,12 @@ function getDisplayTime(train, tableType) {
|
||||
return day_split[day_split.length - 1].substring(0, 5)
|
||||
}
|
||||
|
||||
function getPrettyDelay(delay) {
|
||||
let delay_split = delay.split(':')
|
||||
let hours = parseInt(delay_split[0])
|
||||
let minutes = parseInt(delay_split[1])
|
||||
let full_minutes = hours * 60 + minutes
|
||||
return full_minutes ? `+${full_minutes} min` : "À l'heure"
|
||||
}
|
||||
|
||||
export default TrainsTable;
|
Reference in New Issue
Block a user