diff --git a/src/Station.js b/src/Station.js index 65c4c6b..04080d0 100644 --- a/src/Station.js +++ b/src/Station.js @@ -1,14 +1,14 @@ import {useNavigate, useParams, useSearchParams} from "react-router-dom" import TrainsTable from "./TrainsTable" import TripsFilter from "./TripsFilter" -import {useState} from "react" -import {Box, Button, FormLabel} from "@mui/material" +import {useEffect, useState} from "react" +import {Box, Checkbox, FormLabel} from "@mui/material" import {DateTimePicker} from "@mui/x-date-pickers" import dayjs from "dayjs" import {useQuery, useQueryClient} from "@tanstack/react-query" import AutocompleteStation from "./AutocompleteStation" -function DateTimeSelector({datetime, setDatetime}) { +function DateTimeSelector({datetime, setDatetime, realtime, setRealtime}) { const navigate = useNavigate() function onStationSelected(event, station) { @@ -18,14 +18,18 @@ function DateTimeSelector({datetime, setDatetime}) { return <> - - Changer la gare recherchée : - - - - Modifier la date et l'heure de recherche : - - + + Changer la gare recherchée : + + + + Modifier la date et l'heure de recherche : + + + setRealtime(event.target.checked)} checked={realtime} /> + + Temps réel + } @@ -35,9 +39,18 @@ function Station() { let {theme, stationId} = useParams() // eslint-disable-next-line no-unused-vars let [searchParams, setSearchParams] = useSearchParams() + const [realtime, setRealtime] = useState(searchParams.get('realtime') === "1" || false) const [datetime, setDatetime] = useState(dayjs(searchParams.get('time') || undefined)) - if (datetime.format() !== searchParams.get('time')) { + if ((searchParams.get('realtime') === null || searchParams.get('realtime') === "0") + && (searchParams.get('time') === null || realtime)) { + searchParams.set('realtime', "1") + searchParams.delete("time") + setRealtime(true) + window.history.replaceState({}, '', '?' + searchParams.toString()) + } + else if (datetime.format() !== searchParams.get('time') && !realtime) { searchParams.set('time', datetime.format()) + searchParams.set('realtime', "0") window.history.replaceState({}, '', '?' + searchParams.toString()) } @@ -50,11 +63,14 @@ function Station() { }) const station = stationQuery.data?.stopTimes[0].place ?? {name: "Chargement…"} - if (searchParams.get("time") === undefined) { - setInterval(() => { - setDatetime(dayjs()) - }, 5000) - } + useEffect(() => { + if (realtime) { + const interval = setInterval(() => { + setDatetime(dayjs()) + }, 5000) + return () => clearInterval(interval) + } + }, [realtime]) return (
@@ -63,10 +79,10 @@ function Station() {
- + - - + +
) diff --git a/src/TrainsTable.js b/src/TrainsTable.js index c4efcae..866b3e1 100644 --- a/src/TrainsTable.js +++ b/src/TrainsTable.js @@ -27,12 +27,12 @@ const StyledTableRow = styled(TableRow)(({ theme, tabletype }) => ({ }, })); -function TrainsTable({station, datetime, tableType}) { +function TrainsTable({station, datetime, realtime, tableType}) { return <> - +
@@ -50,7 +50,7 @@ function TrainsTableHeader({tableType}) { } -function TrainsTableBody({station, datetime, tableType}) { +function TrainsTableBody({station, datetime, realtime, tableType}) { const filterTime = useCallback((train) => { if (tableType === "departures") return dayjs(train.place.departure) >= datetime @@ -59,30 +59,35 @@ function TrainsTableBody({station, datetime, tableType}) { }, [datetime, tableType]) const updateTrains = useCallback(() => { - const query_params = new URLSearchParams({ + const params = { stopId: station.stopId, arriveBy: tableType === "arrivals", - time: datetime.format(), + direction: "LATER", n: 20, - }).toString() + } + if (!realtime) + params['time'] = datetime.format() + const query_params = new URLSearchParams(params).toString() return fetch(`${process.env.REACT_APP_MOTIS_SERVER}/api/v1/stoptimes?${query_params}`) .then(response => response.json()) .then(data => data.stopTimes) .then(data => [...data]) - }, [station.stopId, tableType, datetime]) + }, [station.stopId, tableType, datetime, realtime]) const trainsQuery = useQuery({ - queryKey: ['trains', station.stopId, tableType, datetime], + queryKey: ['trains', station.stopId, tableType], queryFn: updateTrains, enabled: !!station.stopId, }) const trains = useMemo(() => trainsQuery.data ?? [], [trainsQuery.data]) useEffect(() => { - let validTrains = trains?.filter(filterTime) ?? [] - if (trains?.length > 0 && validTrains.length < trains?.length) - trainsQuery.refetch().then() - }, [trains, filterTime, trainsQuery]) + if (realtime) { + let validTrains = trains?.filter(filterTime) ?? [] + if ((trains?.length > 0 && validTrains.length < trains?.length)) + trainsQuery.refetch().then() + } + }, [trains, filterTime, trainsQuery, realtime]) const nullRef = useRef(null) let table_rows = trains.map((train) =>