dancingCycle
/
gtfs-display
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add Trip Updates page

This commit is contained in:
dancingCycle 2023-12-16 14:24:31 +01:00
parent e164e58b49
commit 86d07a6bd0
6 changed files with 197 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/components/nav-bar.js
View File

@ -19,6 +19,11 @@ function NavigationBar () {
<Nav.Link>Files</Nav.Link>
</LinkContainer>
</Nav>
<Nav className="mr-auto">
<LinkContainer to="/trip-updates">
<Nav.Link>Trip Updates</Nav.Link>
</LinkContainer>
</Nav>
<Nav className="mr-auto">
<LinkContainer to="/trips">
<Nav.Link>Trips</Nav.Link>

29
app/components/trip-updates-route-day-table-entries.js Normal file
View File

@ -0,0 +1,29 @@
import React from 'react';
import PropTypes from 'prop-types';
export default function TableEntries ({array}) {
if ( array !== undefined && array !== null && array.length > 0 ) {
//iterate over array
return array.map((item, index) => {
return (
<tr
key={item.trip_id}
>
<td>{item.trip_id}</td>
<td>{item.trip_short_name}</td>
<td>{item.trip_headsign}</td>
<td>{item.timestamp_pgsql}</td>
<td>{item.route_id}</td>
<td>{item.route_short_name}</td>
</tr>
);
});
}else{
//data is empty
return null;
}
};
TableEntries.propTypes = {
array: PropTypes.array
};

42
app/components/trip-updates-route-day-table.js Normal file
View File

@ -0,0 +1,42 @@
import React from 'react';
import PropTypes from 'prop-types';
import TableEntries from './trip-updates-route-day-table-entries';
/*destructure props object*/
export default function TripUpdatesRouteDayTable ({array, title}){
if ( array !== undefined && array !== null) {
/*return a React element*/
return (
<>
<p>Table of {array.length}&nbsp;{title} today:</p>
<table>
<thead>
<tr>
<th>trip_id</th>
<th>trip_short_name</th>
<th>trip_headsign</th>
<th>timestamp_pgsql</th>
<th>route_id</th>
<th>route_short_name</th>
</tr>
</thead>
<tbody>
<TableEntries array={array} />
</tbody>
</table>
</>
);
}else{
return (
<>
<p>loading...</p>
</>
);
}
};
TripUpdatesRouteDayTable.propTypes = {
array: PropTypes.array,
title: PropTypes.string
};

2
app/main.js
View File

@ -11,6 +11,7 @@ import Files from './pages/files';
import OverviewNext from './pages/overview-next';
//TODO Disable this route as it is not working! import Service from './pages/service';
//TODO Disable this route as it is way too much overhead for API and database! import TripCalendar from './pages/trip-calendar';
import TripUpdates from './pages/trip-updates-route-day';
import Trips from './pages/trips-route-day';
import Contact from './pages/contact';
@ -26,6 +27,7 @@ export default function Main() {
<Route path="/" element={<HomePage />} />
<Route path="/agency" element={<OverviewNext />} />
<Route path="/files" element={<Files />} />
<Route path="/trip-updates" element={<TripUpdates />} />
<Route path="/trips" element={<Trips />} />
<Route path="/contact" element={<Contact />} />
</Routes>

1
app/pages/overview-next.js
View File

@ -10,6 +10,7 @@ export default function OverviewNext() {
const getTrips = async () => {
try {
//TODO Sort trips by agency name descending!
/*get trips*/
/*TODO handle errors: https://www.valentinog.com/blog/await-react/*/
const res = await axios.get(`${config.API}number-of-trips`);

118
app/pages/trip-updates-route-day.js Normal file
View File

@ -0,0 +1,118 @@
import React, { useEffect, useState } from 'react';
import axios from 'axios';
import config from '../config';
import TripUpdatesRouteDayTable from '../components/trip-updates-route-day-table';
import AgencySelect from '../components/agency-select';
import RouteSelect from '../components/route-select';
export default function TripUpdates() {
const agencyNameDefault = 'Select GTFS agency_name';
const routeNameDefault = 'Select GTFS route_short_name';
/*store and initialize data in function component state*/
const [strngAgencyId, setStrngAgencyId] = useState(agencyNameDefault);
const [strngRouteId, setStrngRouteId] = useState(routeNameDefault);
const [rryTripUpdates, setRryTripUpdates] = useState([]);
const [rryAgencies, setRryAgencies] = useState([]);
const [rryRoutes, setRryRoutes] = useState([]);
const getRryAgencies = async () => {
try {
/*TODO handle errors: https://www.valentinog.com/blog/await-react/*/
const address = `${config.API}agencyids`;
//console.log('trip-updates-route-day res.data.length: address: ' + address);
const res = await axios.get(address);
//console.log('trip-updates-route-day res.data.length: Agencies: ' + res.data.length);
setRryAgencies((rryAgency) => res.data);
} catch (err) {
console.error('err.message: ' + err.message);
}
};
const getRryRoutes = async () => {
if ( strngAgencyId !== agencyNameDefault ) {
try {
/*TODO handle errors: https://www.valentinog.com/blog/await-react/*/
const address = `${config.API}routes?agencyid=${strngAgencyId}`;
//console.log('trip-updates-route-day res.data.length: address: ' + address);
const res = await axios.get(address);
if ( res.data !== undefined && res.data !== null ) {
//console.log('trip-updates-route-day res.data.length: Routes: ' + res.data.length);
setRryRoutes((rryRoutes) => res.data);
if ( res.data.length > 0 ) {
setStrngRouteId((strngRouteId) => res.data[0].route_id);
} else {
console.error('ERROR: agency has NO routes');
}
} else {
console.error('ERROR: routes by agency request FAILED');
}
} catch (err) {
console.error('err.message: ' + err.message);
}
}
};
const getRryTripUpdates = async () => {
if ( strngRouteId !== routeNameDefault ) {
try {
/*TODO handle errors: https://www.valentinog.com/blog/await-react/*/
const date = new Date();
const dateShort = date.getFullYear() + '-' + (date.getMonth()+1) + '-' + date.getDate();
//console.log('trip-updates-route-day dateShort: ' + dateShort);
const address = `${config.API}trip-updates-by-route-day?routeid=${strngRouteId}&day=${dateShort}`;
//console.log('trip-updates-route-day res.data.length: address: ' + address);
const res = await axios.get(address);
if ( res.data !== undefined && res.data !== null ) {
//console.log('trip-updates-route-day res.data.length: TripUpdates: ' + res.data.length);
setRryTripUpdates((rryTripUpdates) => res.data);
} else {
console.error('ERROR: trip-updates by routes and day request FAILED');
}
} catch (err) {
console.error('err.message: ' + err.message);
}
}
};
const handleChangeAgencyId = (event) => {
//console.log('trip-updates-route-day: handleChangeAgencyId() value: ' + event.target.value);
setStrngAgencyId((strngAgencyId) => event.target.value);
};
const handleChangeRouteId = (event) => {
//console.log('trip-updates-route-day: handleChangeRouteId() value: ' + event.target.value);
setStrngRouteId((strngRouteId) => event.target.value);
};
/*this hook is run after a DOM update. Changing state might result in an infinite loop*/
/*hook need to be placed in body of the function component in which it is used*/
useEffect(() => {
getRryAgencies();
/*use an empty dependency array to ensure the hook is running only once*/
/*TODO study dependency array: https://reactjs.org/docs/hooks-effect.html*/
}, []);
useEffect(() => {
//console.log('trip-updates-route-day: useEffect() strngAgencyId: ' + strngAgencyId);
getRryRoutes();
/*TODO study dependency array: https://reactjs.org/docs/hooks-effect.html*/
}, [strngAgencyId]);
useEffect(() => {
//console.log('trip-updates-route-day: useEffect() strngRouteId: ' + strngRouteId);
getRryTripUpdates();
/*TODO study dependency array: https://reactjs.org/docs/hooks-effect.html*/
}, [strngRouteId]);
//TODO get rry based on route_id!
return <>
<AgencySelect rry={rryAgencies} name={agencyNameDefault} onChange={handleChangeAgencyId} />
<RouteSelect rry={rryRoutes} name={routeNameDefault} onChange={handleChangeRouteId} />
<TripUpdatesRouteDayTable array={rryTripUpdates} title={'TripUpdates'} />
</>;
};