Add stop autocomplete component in station page

This commit is contained in:
Emmy D'Anello 2024-02-03 01:00:29 +01:00
parent 6dfd04ae7e
commit d7b9515750
Signed by: ynerant
GPG Key ID: 3A75C55819C8CF85
1 changed files with 14 additions and 3 deletions

View File

@ -1,14 +1,25 @@
import {useParams, useSearchParams} from "react-router-dom" import {useNavigate, useParams, useSearchParams} from "react-router-dom"
import TrainsTable from "./TrainsTable" import TrainsTable from "./TrainsTable"
import {useState} from "react"; import {useState} from "react";
import {Box, Button, FormLabel} from "@mui/material"; import {Box, Button, FormLabel} from "@mui/material";
import {DatePicker, TimePicker} from "@mui/x-date-pickers"; import {DatePicker, TimePicker} from "@mui/x-date-pickers";
import dayjs from "dayjs"; import dayjs from "dayjs";
import {useQuery, useQueryClient} from "@tanstack/react-query"; import {useQuery, useQueryClient} from "@tanstack/react-query";
import AutocompleteStop from "./AutocompleteStop";
function DateTimeSelector({stop, date, time}) {
const navigate = useNavigate()
function onStationSelected(event, stop) {
navigate(`/station/${stop.id}/`)
}
function DateTimeSelector({date, time}) {
return <> return <>
<Box component="form" display="flex" alignItems="center" sx={{'& .MuiTextField-root': { m: 1, width: '25ch' },}}> <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> <FormLabel>
Modifier la date et l'heure de recherche : Modifier la date et l'heure de recherche :
</FormLabel> </FormLabel>
@ -54,7 +65,7 @@ function Station() {
</header> </header>
<main> <main>
<DateTimeSelector date={date} time={time} /> <DateTimeSelector stop={stop} date={date} time={time} />
<TrainsTable stop={stop} date={date} time={time} tableType="departures" /> <TrainsTable stop={stop} date={date} time={time} tableType="departures" />
<TrainsTable stop={stop} date={date} time={time} tableType="arrivals" /> <TrainsTable stop={stop} date={date} time={time} tableType="arrivals" />
</main> </main>