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 {QueryClient, QueryClientProvider} from "@tanstack/react-query";
|
||||||
import {createSyncStoragePersister} from "@tanstack/query-sync-storage-persister";
|
import {createSyncStoragePersister} from "@tanstack/query-sync-storage-persister";
|
||||||
import {persistQueryClient} from "@tanstack/react-query-persist-client";
|
import {persistQueryClient} from "@tanstack/react-query-persist-client";
|
||||||
|
import Home from "./Home";
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
const router = createBrowserRouter([
|
const router = createBrowserRouter([
|
||||||
{
|
{
|
||||||
path: "/",
|
path: "/",
|
||||||
element: <div>Hello World!</div>
|
element: <Home />,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/station/:stopId",
|
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.views.decorators.http import last_modified
|
||||||
from django_filters.rest_framework import DjangoFilterBackend
|
from django_filters.rest_framework import DjangoFilterBackend
|
||||||
from rest_framework import viewsets
|
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, \
|
from sncf.api.serializers import AgencySerializer, StopSerializer, RouteSerializer, TripSerializer, \
|
||||||
StopTimeSerializer, CalendarSerializer, CalendarDateSerializer, TransferSerializer, \
|
StopTimeSerializer, CalendarSerializer, CalendarDateSerializer, TransferSerializer, \
|
||||||
|
@ -33,8 +33,9 @@ class AgencyViewSet(viewsets.ReadOnlyModelViewSet):
|
||||||
class StopViewSet(viewsets.ReadOnlyModelViewSet):
|
class StopViewSet(viewsets.ReadOnlyModelViewSet):
|
||||||
queryset = Stop.objects.all()
|
queryset = Stop.objects.all()
|
||||||
serializer_class = StopSerializer
|
serializer_class = StopSerializer
|
||||||
filter_backends = [DjangoFilterBackend]
|
filter_backends = [DjangoFilterBackend, SearchFilter]
|
||||||
filterset_fields = '__all__'
|
filterset_fields = '__all__'
|
||||||
|
search_fields = ['name',]
|
||||||
|
|
||||||
|
|
||||||
@method_decorator(name='list', decorator=[CACHE_CONTROL, LAST_MODIFIED])
|
@method_decorator(name='list', decorator=[CACHE_CONTROL, LAST_MODIFIED])
|
||||||
|
|
Loading…
Reference in New Issue