Display delays

This commit is contained in:
2024-02-04 23:58:27 +01:00
parent f2b6557cb7
commit 9ed97df4b5
4 changed files with 65 additions and 9 deletions

View File

@ -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;