Autocomplete stops

This commit is contained in:
Emmy D'Anello 2024-02-03 00:52:52 +01:00
parent 2120275e14
commit 6dfd04ae7e
Signed by: ynerant
GPG Key ID: 3A75C55819C8CF85
4 changed files with 67 additions and 3 deletions

View File

@ -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",

View File

@ -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;

20
sncf-station/src/Home.js Normal file
View File

@ -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;

View File

@ -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])