Restore time display

This commit is contained in:
Emmy D'Anello 2024-01-28 20:48:44 +01:00
parent 6317c900ef
commit 2230058826
Signed by: ynerant
GPG Key ID: 3A75C55819C8CF85
3 changed files with 53 additions and 13 deletions

View File

@ -1,11 +1,40 @@
import './sncf.scss' import './sncf.scss'
import {useParams} from "react-router-dom" import {useParams, useSearchParams} from "react-router-dom"
import TrainsTable from "./TrainsTable" import TrainsTable from "./TrainsTable"
import {useEffect, useState} from "react"; 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() { function Station() {
let {stopId} = useParams() let {stopId} = useParams()
let [stop, setStop] = useState({'name': "Chargement…"}) 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(() => { useEffect(() => {
fetch(`http://localhost:8000/api/gtfs/stop/${stopId}/`) fetch(`http://localhost:8000/api/gtfs/stop/${stopId}/`)
@ -22,8 +51,9 @@ function Station() {
</header> </header>
<main> <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> </main>
</div> </div>
) )

View File

@ -1,12 +1,12 @@
import {useEffect, useState} from "react"; import {useEffect, useState} from "react";
function TrainsTable({stop, tableType}) { function TrainsTable({stop, date, time, tableType}) {
let tableClass = tableType === "departures" ? "table-departures" : "table-arrivals" let tableClass = tableType === "departures" ? "table-departures" : "table-arrivals"
tableClass = `table table-striped ${tableClass}` tableClass = `table table-striped ${tableClass}`
return <> return <>
<table className={tableClass}> <table className={tableClass}>
<TrainsTableHeader /> <TrainsTableHeader />
<TrainsTableBody stop={stop} tableType={tableType} /> <TrainsTableBody stop={stop} date={date} time={time} tableType={tableType} />
</table> </table>
</> </>
} }
@ -21,19 +21,19 @@ function TrainsTableHeader() {
</thead> </thead>
} }
function TrainsTableBody({stop, tableType}) { function TrainsTableBody({stop, date, time, tableType}) {
const [trains, setTrains] = useState([]) const [trains, setTrains] = useState([])
useEffect(() => { useEffect(() => {
if (stop.id !== undefined) { 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(response => response.json())
.then(data => data.results) .then(data => data.results)
.then(data => { .then(data => {
setTrains(data) setTrains(data)
}) })
} }
}, [stop, tableType]) }, [stop, tableType, date, time])
let table_rows = trains.map((train) => <TrainRow train={train} tableType={tableType} />) let table_rows = trains.map((train) => <TrainRow train={train} tableType={tableType} />)
@ -127,7 +127,7 @@ function TrainRow({train, tableType}) {
</td> </td>
<td> <td>
<div className="table-hour d-flex align-items-center justify-content-center text-time fw-bold h-100"> <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> </div>
</td> </td>
<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; export default TrainsTable;

View File

@ -45,8 +45,8 @@ class StopTimeViewSet(viewsets.ReadOnlyModelViewSet):
serializer_class = StopTimeSerializer serializer_class = StopTimeSerializer
filter_backends = [DjangoFilterBackend, OrderingFilter] filter_backends = [DjangoFilterBackend, OrderingFilter]
filterset_fields = '__all__' filterset_fields = '__all__'
ordering_fields = ['arrival_time', 'departure_time', 'stop_sequence',] ordering_fields = ['arrival_time', 'departure_time', 'stop_sequence', ]
ordering = ['stop_sequence',] ordering = ['stop_sequence', ]
class CalendarViewSet(viewsets.ReadOnlyModelViewSet): class CalendarViewSet(viewsets.ReadOnlyModelViewSet):
@ -88,7 +88,9 @@ class NextDeparturesViewSet(viewsets.ReadOnlyModelViewSet):
stop_name = self.request.query_params.get('stop_name', None) stop_name = self.request.query_params.get('stop_name', None)
query_date = date.fromisoformat(self.request.query_params.get('date', now.date().isoformat())) 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 = 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) yesterday = query_date - timedelta(days=1)
time_yesterday = query_time + 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) stop_name = self.request.query_params.get('stop_name', None)
query_date = date.fromisoformat(self.request.query_params.get('date', now.date().isoformat())) 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 = 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) yesterday = query_date - timedelta(days=1)
time_yesterday = query_time + timedelta(days=1) time_yesterday = query_time + timedelta(days=1)