78 lines
2.8 KiB
JavaScript
78 lines
2.8 KiB
JavaScript
import {useNavigate, useParams, useSearchParams} from "react-router-dom"
|
|
import TrainsTable from "./TrainsTable"
|
|
import {useState} from "react";
|
|
import {Box, Button, FormLabel} from "@mui/material";
|
|
import {DatePicker, TimePicker} from "@mui/x-date-pickers";
|
|
import dayjs from "dayjs";
|
|
import {useQuery, useQueryClient} from "@tanstack/react-query";
|
|
import AutocompleteStop from "./AutocompleteStop";
|
|
|
|
function DateTimeSelector({stop, date, time}) {
|
|
const navigate = useNavigate()
|
|
|
|
function onStationSelected(event, stop) {
|
|
if (stop !== null)
|
|
navigate(`/station/${stop.id}/`)
|
|
}
|
|
|
|
return <>
|
|
<Box component="form" display="flex" alignItems="center" sx={{'& .MuiTextField-root': { m: 1, width: '25ch' },}}>
|
|
<FormLabel>
|
|
Changer la gare recherchée :
|
|
</FormLabel>
|
|
<AutocompleteStop onChange={onStationSelected} />
|
|
<FormLabel>
|
|
Modifier la date et l'heure de recherche :
|
|
</FormLabel>
|
|
<DatePicker name="date" label="Date" format="YYYY-MM-DD" defaultValue={dayjs(`${date}`)} />
|
|
<TimePicker name="time" label="Heure" format="HH:mm" defaultValue={dayjs(`${date} ${time}`)} />
|
|
<Button type="submit">Rechercher</Button>
|
|
</Box>
|
|
</>
|
|
}
|
|
|
|
function Station() {
|
|
let {stopId} = useParams()
|
|
let [searchParams, _setSearchParams] = useSearchParams()
|
|
const now = new Date()
|
|
let dateNow = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`
|
|
let timeNow = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`
|
|
let [date, setDate] = useState(searchParams.get('date') || dateNow)
|
|
let [time, setTime] = useState(searchParams.get('time') || timeNow)
|
|
|
|
useQueryClient()
|
|
const stopQuery = useQuery({
|
|
queryKey: ['stop', stopId],
|
|
queryFn: () => fetch(`/api/gtfs/stop/${stopId}/`)
|
|
.then(response => response.json()),
|
|
enabled: !!stopId,
|
|
})
|
|
const stop = stopQuery.data ?? {name: "Chargement…"}
|
|
|
|
if (time === timeNow) {
|
|
setInterval(() => {
|
|
const now = new Date()
|
|
let dateNow = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`
|
|
let timeNow = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`
|
|
setDate(dateNow)
|
|
setTime(timeNow)
|
|
}, 5000)
|
|
}
|
|
|
|
return (
|
|
<div className="Station">
|
|
<header className="App-header">
|
|
<h1>Horaires en gare de {stop.name}</h1>
|
|
</header>
|
|
|
|
<main>
|
|
<DateTimeSelector stop={stop} date={date} time={time} />
|
|
<TrainsTable stop={stop} date={date} time={time} tableType="departures" />
|
|
<TrainsTable stop={stop} date={date} time={time} tableType="arrivals" />
|
|
</main>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Station;
|