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) =>