Autocomplete stops
This commit is contained in:
parent
2120275e14
commit
6dfd04ae7e
|
@ -9,12 +9,13 @@ import './App.css'
|
|||
import {QueryClient, QueryClientProvider} from "@tanstack/react-query";
|
||||
import {createSyncStoragePersister} from "@tanstack/query-sync-storage-persister";
|
||||
import {persistQueryClient} from "@tanstack/react-query-persist-client";
|
||||
import Home from "./Home";
|
||||
|
||||
function App() {
|
||||
const router = createBrowserRouter([
|
||||
{
|
||||
path: "/",
|
||||
element: <div>Hello World!</div>
|
||||
element: <Home />,
|
||||
},
|
||||
{
|
||||
path: "/station/:stopId",
|
||||
|
|
|
@ -0,0 +1,42 @@
|
|||
import {Autocomplete, TextField} from "@mui/material";
|
||||
import {useRef, useState} from "react";
|
||||
|
||||
function AutocompleteStop(params) {
|
||||
const [options, setOptions] = useState([])
|
||||
const previousController = useRef()
|
||||
|
||||
function onInputChange(event, value) {
|
||||
if (!value) {
|
||||
setOptions([])
|
||||
return
|
||||
}
|
||||
|
||||
if (previousController.current)
|
||||
previousController.current.abort()
|
||||
|
||||
const controller = new AbortController()
|
||||
const signal = controller.signal
|
||||
previousController.current = controller
|
||||
fetch("/api/gtfs/stop/?location_type=1&search=" + value, {signal})
|
||||
.then(response => response.json())
|
||||
.then(data => data.results)
|
||||
.then(setOptions)
|
||||
.catch()
|
||||
}
|
||||
|
||||
return <>
|
||||
<Autocomplete
|
||||
id="stop"
|
||||
options={options}
|
||||
onInputChange={onInputChange}
|
||||
filterOptions={(x) => x}
|
||||
getOptionKey={option => option.id}
|
||||
getOptionLabel={option => option.name}
|
||||
groupBy={option => option.id.startsWith("IDFM") ? "Transilien" : "TER/TGV/Intercités"}
|
||||
isOptionEqualToValue={(option, value) => option.id === value.id}
|
||||
renderInput={(params) => <TextField {...params} label="Arrêt" />}
|
||||
{...params} />
|
||||
</>
|
||||
}
|
||||
|
||||
export default AutocompleteStop;
|
|
@ -0,0 +1,20 @@
|
|||
import AutocompleteStop from "./AutocompleteStop"
|
||||
import {useNavigate} from "react-router-dom"
|
||||
|
||||
function Home() {
|
||||
const navigate = useNavigate()
|
||||
|
||||
function onStationSelected(event, stop) {
|
||||
navigate(`/station/${stop.id}/`)
|
||||
}
|
||||
|
||||
return <>
|
||||
<h1>Horaires SNCF</h1>
|
||||
<h2>
|
||||
Choisissez une gare dont vous désirez connaître le tableau des prochains départs et arrivées :
|
||||
</h2>
|
||||
<AutocompleteStop onChange={onStationSelected} />
|
||||
</>
|
||||
}
|
||||
|
||||
export default Home;
|
|
@ -6,7 +6,7 @@ from django.views.decorators.cache import cache_control
|
|||
from django.views.decorators.http import last_modified
|
||||
from django_filters.rest_framework import DjangoFilterBackend
|
||||
from rest_framework import viewsets
|
||||
from rest_framework.filters import OrderingFilter
|
||||
from rest_framework.filters import OrderingFilter, SearchFilter
|
||||
|
||||
from sncf.api.serializers import AgencySerializer, StopSerializer, RouteSerializer, TripSerializer, \
|
||||
StopTimeSerializer, CalendarSerializer, CalendarDateSerializer, TransferSerializer, \
|
||||
|
@ -33,8 +33,9 @@ class AgencyViewSet(viewsets.ReadOnlyModelViewSet):
|
|||
class StopViewSet(viewsets.ReadOnlyModelViewSet):
|
||||
queryset = Stop.objects.all()
|
||||
serializer_class = StopSerializer
|
||||
filter_backends = [DjangoFilterBackend]
|
||||
filter_backends = [DjangoFilterBackend, SearchFilter]
|
||||
filterset_fields = '__all__'
|
||||
search_fields = ['name',]
|
||||
|
||||
|
||||
@method_decorator(name='list', decorator=[CACHE_CONTROL, LAST_MODIFIED])
|
||||
|
|
Loading…
Reference in New Issue