Display trains that are near a station

trainvel-front/src/App.js

@@ -18,7 +18,7 @@ function App() {
       element: <Home />,
     },
     {
-      path: "/station/:theme/:stopId",
+      path: "/station/:theme/:stationSlug",
       element: <Station />
     }
   ])

trainvel-front/src/AutocompleteStation.jsx

@@ -1,7 +1,7 @@
 import {Autocomplete, TextField} from "@mui/material";
 import {useRef, useState} from "react";
 
-function AutocompleteStop(params) {
+function AutocompleteStation(params) {
   const [options, setOptions] = useState([])
   const previousController = useRef()
 
@@ -17,7 +17,7 @@ function AutocompleteStop(params) {
     const controller = new AbortController()
     const signal = controller.signal
     previousController.current = controller
-    fetch("/api/gtfs/stop/?location_type=1&search=" + value, {signal})
+    fetch("/api/core/station/?search=" + value, {signal})
       .then(response => response.json())
       .then(data => data.results)
       .then(setOptions)
@@ -40,24 +40,7 @@ function AutocompleteStop(params) {
 }
 
 function getOptionGroup(option) {
-  switch (option.gtfs_feed) {
-    case "FR-SNCF-TGV":
-    case "FR-SNCF-IC":
-    case "FR-SNCF-TER":
-      return "TGV/TER/Intercités"
-    case "FR-IDF-TN":
-      return "Transilien"
-    case "FR-EUROSTAR":
-      return "Eurostar"
-    case "IT-FRA-TI":
-      return "Trenitalia France"
-    case "ES-RENFE":
-      return "RENFE"
-    case "AT-OBB":
-      return "ÖBB"
-    default:
-      return option.gtfs_feed
-  }
+  return option.country
 }
 
-export default AutocompleteStop;
+export default AutocompleteStation;

trainvel-front/src/Home.js

@@ -1,11 +1,11 @@
-import AutocompleteStop from "./AutocompleteStop"
+import AutocompleteStation from "./AutocompleteStation"
 import {useNavigate} from "react-router-dom"
 
 function Home() {
   const navigate = useNavigate()
 
-  function onStationSelected(event, stop) {
-    navigate(`/station/sncf/${stop.id}/`)
+  function onStationSelected(event, station) {
+    navigate(`/station/sncf/${station.slug}/`)
   }
 
   return <>
@@ -13,7 +13,7 @@ function Home() {
     <h2>
       Choisissez une gare dont vous désirez connaître le tableau des prochains départs et arrivées :
     </h2>
-    <AutocompleteStop onChange={onStationSelected} />
+    <AutocompleteStation onChange={onStationSelected} />
   </>
 }
 

trainvel-front/src/Station.js

@@ -5,14 +5,14 @@ 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";
+import AutocompleteStation from "./AutocompleteStation";
 
-function DateTimeSelector({stop, date, time}) {
+function DateTimeSelector({station, date, time}) {
   const navigate = useNavigate()
 
-  function onStationSelected(event, stop) {
-    if (stop !== null)
-      navigate(`/station/sncf/${stop.id}/`)
+  function onStationSelected(event, station) {
+    if (station !== null)
+      navigate(`/station/sncf/${station.slug}/`)
   }
 
   return <>
@@ -20,7 +20,7 @@ function DateTimeSelector({stop, date, time}) {
         <FormLabel>
           Changer la gare recherchée :
         </FormLabel>
-        <AutocompleteStop onChange={onStationSelected} />
+        <AutocompleteStation onChange={onStationSelected} />
         <FormLabel>
           Modifier la date et l'heure de recherche :
         </FormLabel>
@@ -32,7 +32,7 @@ function DateTimeSelector({stop, date, time}) {
 }
 
 function Station() {
-  let {stopId, theme} = useParams()
+  let {theme, stationSlug} = useParams()
   let [searchParams, _setSearchParams] = useSearchParams()
   const now = new Date()
   let dateNow = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`
@@ -41,13 +41,13 @@ function Station() {
   let [time, setTime] = useState(searchParams.get('time') || timeNow)
 
   useQueryClient()
-  const stopQuery = useQuery({
-    queryKey: ['stop', stopId],
-    queryFn: () => fetch(`/api/gtfs/stop/${stopId}/`)
+  const stationQuery = useQuery({
+    queryKey: ['station', stationSlug],
+    queryFn: () => fetch(`/api/core/station/${stationSlug}/`)
       .then(response => response.json()),
-    enabled: !!stopId,
+    enabled: !!stationSlug,
   })
-  const stop = stopQuery.data ?? {name: "Chargement…"}
+  const station = stationQuery.data ?? {name: "Chargement…"}
 
   if (time === timeNow) {
     setInterval(() => {
@@ -62,13 +62,13 @@ function Station() {
   return (
     <div className="Station">
       <header className="App-header">
-        <h1>Horaires en gare de {stop.name}</h1>
+        <h1>Horaires en gare de {station.name}</h1>
       </header>
 
       <main>
-        <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" />
+        <DateTimeSelector station={station} date={date} time={time} />
+        <TrainsTable station={station} date={date} time={time} tableType="departures" />
+        <TrainsTable station={station} date={date} time={time} tableType="arrivals" />
       </main>
     </div>
   )

trainvel-front/src/TrainsTable.js

@@ -26,12 +26,12 @@ const StyledTableRow = styled(TableRow)(({ theme, tabletype }) => ({
   },
 }));
 
-function TrainsTable({stop, date, time, tableType}) {
+function TrainsTable({station, date, time, tableType}) {
   return <>
     <TableContainer>
       <Table>
         <TrainsTableHeader tableType={tableType} />
-        <TrainsTableBody stop={stop} date={date} time={time} tableType={tableType} />
+        <TrainsTableBody station={station} date={date} time={time} tableType={tableType} />
       </Table>
     </TableContainer>
   </>
@@ -49,7 +49,7 @@ function TrainsTableHeader({tableType}) {
   </>
 }
 
-function TrainsTableBody({stop, date, time, tableType}) {
+function TrainsTableBody({station, date, time, tableType}) {
   const filterTime = useCallback((train) => {
     if (tableType === "departures")
       return `${train.departure_date}T${train.departure_time_24h}` >= `${date}T${time}`
@@ -58,16 +58,16 @@ function TrainsTableBody({stop, date, time, tableType}) {
   }, [date, time, tableType])
 
   const updateTrains = useCallback(() => {
-    return fetch(`/api/station/next_${tableType}/?stop_id=${stop.id}&date=${date}&time=${time}&offset=${0}&limit=${20}`)
+    return fetch(`/api/station/next_${tableType}/?station_slug=${station.slug}&date=${date}&time=${time}&offset=${0}&limit=${20}`)
         .then(response => response.json())
         .then(data => data.results)
         .then(data => [...data])
-  }, [stop.id, date, time, tableType])
+  }, [station.id, date, time, tableType])
 
   const trainsQuery = useQuery({
-    queryKey: ['trains', stop.id, tableType],
+    queryKey: ['trains', station.id, tableType],
     queryFn: updateTrains,
-    enabled: !!stop.id,
+    enabled: !!station.id,
   })
   const trains = useMemo(() => trainsQuery.data ?? [], [trainsQuery.data])
 
@@ -114,7 +114,7 @@ function TrainRow({train, tableType, date, time}) {
 
   const stopTimesQuery = useQuery({
     queryKey: ['stop_times', trip.id],
-    queryFn: () => fetch(`/api/gtfs/stop_time/?trip=${trip.id}&order=stop_sequence&limit=1000`)
+    queryFn: () => fetch(`/api/gtfs/stop_time/?${new URLSearchParams({trip: trip.id, order: 'stop_sequence', limit: 1000})}`)
         .then(response => response.json())
         .then(data => data.results),
     enabled: !!trip.id,