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

chore:refactor

This commit is contained in:
dancingCycle 2024-02-19 21:00:36 +01:00
parent 7c14c288ae
commit 9f1e21dfed
11 changed files with 31 additions and 198 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/agency-per-day-table.jsx
View File

@ -11,10 +11,13 @@ export default function AgencyPerDayTable({ array, title, date }) {
<>
<p>
Table of
{' '}
{array.length}
{' '}
{title}
{' '}
for
{' '}
{date}
:
</p>

3
src/components/group-agency-per-day-table.jsx
View File

@ -13,10 +13,13 @@ export default function GroupAgencyPerDayTable({ array, title, date }) {
<>
<p>
Table of
{' '}
{array.length}
{' '}
{title}
{' '}
for
{' '}
{date}
:
</p>

2
src/components/odd-routes.jsx
View File

@ -80,8 +80,10 @@ export default function OddTrips() {
{' '}
{data.length}
, total pages:
{' '}
{Math.ceil(data.length / itemsPerPage)}
, current page:
{' '}
{currentPage}
</p>
<dl>

2
src/components/odd-trips.jsx
View File

@ -80,8 +80,10 @@ export default function OddTrips() {
{' '}
{data.length}
, total pages:
{' '}
{Math.ceil(data.length / itemsPerPage)}
, current page:
{' '}
{currentPage}
</p>
<dl>

3
src/components/per-day-table.jsx
View File

@ -11,10 +11,13 @@ export default function PerDayTable({ array, title, date }) {
<>
<p>
Table of
{' '}
{array.length}
{' '}
{title}
{' '}
for
{' '}
{date}
:
</p>

18
src/components/realtime.jsx
View File

@ -17,10 +17,12 @@ export default function Realtime({ state }) {
{' '}
<b>GTFS Realtime TripUpdate</b>
{' '}
entities that do
entities that do
{' '}
<b>not</b>
{' '}
match any
match any
{' '}
<b>GTFS Schedule routes</b>
:
</p>
@ -35,10 +37,12 @@ export default function Realtime({ state }) {
{' '}
<b>GTFS Realtime TripUpdate</b>
{' '}
entities that do
entities that do
{' '}
<b>not</b>
{' '}
match any
{' '}
<b>GTFS Schedule trips</b>
:
</p>
@ -54,9 +58,11 @@ export default function Realtime({ state }) {
<b>GTFS Realtime</b>
{' '}
entities
{' '}
<b>TripUpdate</b>
{' '}
on
{' '}
<b>feed</b>
{' '}
level:
@ -74,9 +80,11 @@ export default function Realtime({ state }) {
<b>GTFS Realtime</b>
{' '}
entities
{' '}
<b>TripUpdate</b>
{' '}
on
{' '}
<b>agencies</b>
{' '}
level:
@ -93,9 +101,11 @@ export default function Realtime({ state }) {
<b>GTFS Realtime</b>
{' '}
entities
{' '}
<b>TripUpdate</b>
{' '}
on
{' '}
<b>routes</b>
{' '}
level:
@ -112,9 +122,11 @@ export default function Realtime({ state }) {
<b>GTFS Realtime</b>
{' '}
entities
{' '}
<b>TripUpdate</b>
{' '}
on
{' '}
<b>trips</b>
{' '}
level:

3
src/components/trip-updates-route-day-table.jsx
View File

@ -11,10 +11,13 @@ export default function TripUpdatesRouteDayTable({ array, title, date }) {
<>
<p>
Table of
{' '}
{array.length}
{' '}
{title}
{' '}
for
{' '}
{date}
:
</p>

28
src/components/trips-route-day-table-entries.jsx
View File

@ -1,28 +0,0 @@
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) => (
<tr
key={item.trip_id}
>
<td>{item.agency_name}</td>
<td>{item.agency_id}</td>
<td>{item.route_id}</td>
<td>{item.route_short_name}</td>
<td>{item.service_id}</td>
<td>{item.trip_id}</td>
<td>{item.trip_short_name}</td>
<td>{item.trip_headsign}</td>
</tr>
));
}
// data is empty
return null;
}
TableEntries.propTypes = {
array: PropTypes.array
};

46
src/components/trips-route-day-table.jsx
View File

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

4
src/main.jsx
View File

@ -11,7 +11,6 @@ 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 Realtime from './pages/realtime';
// TODO import Trips from './pages/trips-route-day';
import Contact from './pages/contact';
import packageInfo from '../package.json';
@ -40,9 +39,6 @@ export default function Main() {
</Routes>
</Router>
);
/** TODO Is this route of any value?
<Route exact path="/trips" element={<Trips />} />
*/
/** TODO Date [today] is not implemented!
<Route exact path="/overview-today" element={<Overview />} />
*/

117
src/pages/trips-route-day.jsx
View File

@ -1,117 +0,0 @@
import React, { useEffect, useState } from 'react';
import axios from 'axios';
import config from '../config';
import TripsRouteDayTable from '../components/trips-route-day-table';
import AgencySelect from '../components/agency-select';
import RouteSelect from '../components/route-select';
export default function Trips() {
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 [rryTrips, setRryTrips] = 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('trips-route-day res.data.length: address: ' + address);
const res = await axios.get(address);
// console.log('trips-route-day res.data.length: Agencies: ' + res.data.length);
setRryAgencies(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('trips-route-day res.data.length: address: ' + address);
const res = await axios.get(address);
if (res.data !== undefined && res.data !== null) {
// console.log('trips-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 getRryTrips = 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('trips-route-day dateShort: ' + dateShort);
const address = `${config.API}trips-by-route-day?routeid=${strngRouteId}&day=${dateShort}`;
// console.log('trips-route-day res.data.length: address: ' + address);
const res = await axios.get(address);
if (res.data !== undefined && res.data !== null) {
// console.log('trips-route-day res.data.length: Trips: ' + res.data.length);
setRryTrips((rryTrips) => res.data);
} else {
console.error('ERROR: trips by routes and day request FAILED');
}
} catch (err) {
console.error(`err.message: ${err.message}`);
}
}
};
const handleChangeAgencyId = (event) => {
// console.log('trips-route-day: handleChangeAgencyId() value: ' + event.target.value);
setStrngAgencyId((strngAgencyId) => event.target.value);
};
const handleChangeRouteId = (event) => {
// console.log('trips-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('trips-route-day: useEffect() strngAgencyId: ' + strngAgencyId);
getRryRoutes();
/* TODO study dependency array: https://reactjs.org/docs/hooks-effect.html */
}, [strngAgencyId]);
useEffect(() => {
// console.log('trips-route-day: useEffect() strngRouteId: ' + strngRouteId);
getRryTrips();
/* 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} />
<TripsRouteDayTable array={rryTrips} title="Trips" />
</>
);
}