ynerant
/
trainvel
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
sncf-station/src/Station.js
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 {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) {
navigate(`/station/${stop.id}/`)
}
function DateTimeSelector({date, time}) {
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>
@ -54,7 +65,7 @@ function Station() {
</header>
<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="arrivals" />
</main>