Restore time display

sncf-station/src/Station.js

@@ -1,11 +1,40 @@
 import './sncf.scss'
-import {useParams} from "react-router-dom"
+import {useParams, useSearchParams} from "react-router-dom"
 import TrainsTable from "./TrainsTable"
 import {useEffect, useState} from "react";
 
+function DateTimeSelector({date, time}) {
+  return <>
+    <form>
+      <div className="form-group row">
+        <div className="col-sm-2">
+          Modifier la date et l'heure de recherche
+        </div>
+        <label htmlFor="date" className="col-sm-1 col-form-label">Date</label>
+        <div className="col-sm-1">
+          <input type="date" name="date" className="form-control" id="date" defaultValue={date} />
+        </div>
+        <label htmlFor="time" className="col-sm-1 col-form-label">Heure</label>
+        <div className="col-sm-1">
+          <input type="time" name="time" className="form-control" id="time" defaultValue={time} />
+        </div>
+        <div className="col-sm-1">
+          <button type="submit" className="btn btn-primary">Rechercher</button>
+        </div>
+      </div>
+    </form>
+  </>
+}
+
 function Station() {
   let {stopId} = useParams()
   let [stop, setStop] = useState({'name': "Chargement…"})
+  let [searchParams, setSearchParams] = useSearchParams()
+  const now = new Date()
+  let dateNow = now.toISOString().split('T')[0]
+  let timeNow = now.toTimeString().split(' ')[0].substring(0, 5)
+  let [date, setDate] = useState(searchParams.get('date') || dateNow)
+  let [time, setTime] = useState(searchParams.get('time') || timeNow)
 
   useEffect(() => {
     fetch(`http://localhost:8000/api/gtfs/stop/${stopId}/`)
@@ -22,8 +51,9 @@ function Station() {
       </header>
 
       <main>
-        <TrainsTable stop={stop} tableType="departures" />
+        <DateTimeSelector date={date} time={time} />
-        <TrainsTable stop={stop} tableType="arrivals" />
+        <TrainsTable stop={stop} date={date} time={time} tableType="departures" />
+        <TrainsTable stop={stop} date={date} time={time} tableType="arrivals" />
       </main>
     </div>
   )

sncf-station/src/TrainsTable.js

@@ -1,12 +1,12 @@
 import {useEffect, useState} from "react";
 
-function TrainsTable({stop, tableType}) {
+function TrainsTable({stop, date, time, tableType}) {
   let tableClass = tableType === "departures" ? "table-departures" : "table-arrivals"
   tableClass = `table table-striped ${tableClass}`
   return <>
     <table className={tableClass}>
       <TrainsTableHeader />
-      <TrainsTableBody stop={stop} tableType={tableType} />
+      <TrainsTableBody stop={stop} date={date} time={time} tableType={tableType} />
     </table>
   </>
 }
@@ -21,19 +21,19 @@ function TrainsTableHeader() {
   </thead>
 }
 
-function TrainsTableBody({stop, tableType}) {
+function TrainsTableBody({stop, date, time, tableType}) {
   const [trains, setTrains] = useState([])
 
   useEffect(() => {
     if (stop.id !== undefined) {
-      fetch(`http://localhost:8000/api/station/next_${tableType}/?stop_id=${stop.id}&format=json`)
+      fetch(`http://localhost:8000/api/station/next_${tableType}/?stop_id=${stop.id}&date=${date}&time=${time}&format=json`)
         .then(response => response.json())
         .then(data => data.results)
         .then(data => {
           setTrains(data)
         })
     }
-  }, [stop, tableType])
+  }, [stop, tableType, date, time])
 
   let table_rows = trains.map((train) => <TrainRow train={train} tableType={tableType} />)
 
@@ -127,7 +127,7 @@ function TrainRow({train, tableType}) {
     </td>
     <td>
       <div className="table-hour d-flex align-items-center justify-content-center text-time fw-bold h-100">
-        {train.departure_time}
+        {getDisplayTime(train, tableType)}
       </div>
     </td>
     <td>
@@ -182,4 +182,10 @@ function getTextColor(train, route) {
   }
 }
 
+function getDisplayTime(train, tableType) {
+  let time = tableType === "departures" ? train.departure_time : train.arrival_time
+  let day_split = time.split(' ')
+  return day_split[day_split.length - 1].substring(0, 5)
+}
+
 export default TrainsTable;

sncf/api/views.py

@@ -88,7 +88,9 @@ class NextDeparturesViewSet(viewsets.ReadOnlyModelViewSet):
         stop_name = self.request.query_params.get('stop_name', None)
         query_date = date.fromisoformat(self.request.query_params.get('date', now.date().isoformat()))
         query_time = self.request.query_params.get('time', now.time().isoformat(timespec='seconds'))
-        query_time = timedelta(seconds=int(query_time[:2]) * 3600 + int(query_time[3:5]) * 60 + int(query_time[6:]))
+        query_time = timedelta(seconds=int(query_time[:2]) * 3600
+                                       + int(query_time[3:5]) * 60
+                                       + (int(query_time[6:]) if len(query_time) > 6 else 0))
 
         yesterday = query_date - timedelta(days=1)
         time_yesterday = query_time + timedelta(days=1)
@@ -144,7 +146,9 @@ class NextArrivalsViewSet(viewsets.ReadOnlyModelViewSet):
         stop_name = self.request.query_params.get('stop_name', None)
         query_date = date.fromisoformat(self.request.query_params.get('date', now.date().isoformat()))
         query_time = self.request.query_params.get('time', now.time().isoformat(timespec='seconds'))
-        query_time = timedelta(seconds=int(query_time[:2]) * 3600 + int(query_time[3:5]) * 60 + int(query_time[6:]))
+        query_time = timedelta(seconds=int(query_time[:2]) * 3600
+                                       + int(query_time[3:5]) * 60
+                                       + (int(query_time[6:]) if len(query_time) > 6 else 0))
 
         yesterday = query_date - timedelta(days=1)
         time_yesterday = query_time + timedelta(days=1)