feat: add Routes page
This commit is contained in:
parent
95aace906e
commit
bcd7b792ff
|
@ -0,0 +1,28 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
export default function AgencyPerDayTableEntries ({array}) {
|
||||
if ( array !== undefined && array !== null && array.length > 0 ) {
|
||||
//iterate over array
|
||||
return array.map((item, index) => {
|
||||
return (
|
||||
<tr
|
||||
key={index}
|
||||
>
|
||||
<td>{item.agency_name}</td>
|
||||
<td>{item.agency_id}</td>
|
||||
<td>{item.route_id}</td>
|
||||
<td>{item.route_short_name}</td>
|
||||
<td>{item.timestamp_pgsql}</td>
|
||||
</tr>
|
||||
);
|
||||
});
|
||||
}else{
|
||||
//data is empty
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
AgencyPerDayTableEntries.propTypes = {
|
||||
array: PropTypes.array
|
||||
};
|
|
@ -0,0 +1,41 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import AgencyPerDayTableEntries from './agency-per-day-table-entries';
|
||||
|
||||
/*destructure props object*/
|
||||
export default function AgencyPerDayTable ({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>timestamp_pgsql</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<AgencyPerDayTableEntries array={array} />
|
||||
</tbody>
|
||||
</table>
|
||||
</>
|
||||
);
|
||||
}else{
|
||||
return (
|
||||
<>
|
||||
<p>loading...</p>
|
||||
</>
|
||||
);
|
||||
}
|
||||
};
|
||||
AgencyPerDayTable.propTypes = {
|
||||
array: PropTypes.array,
|
||||
title: PropTypes.string
|
||||
};
|
|
@ -1,8 +1,9 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Form from 'react-bootstrap/Form';
|
||||
|
||||
/*controlled component: input form value controlled by React*/
|
||||
const InputSearch = ({id, name, onChange, placeholder, title, type, value}) => {
|
||||
const Input = ({id, name, onChange, placeholder, title, type, value}) => {
|
||||
return (
|
||||
<>
|
||||
<Form.Control
|
||||
|
@ -19,9 +20,9 @@ const InputSearch = ({id, name, onChange, placeholder, title, type, value}) => {
|
|||
</>
|
||||
);
|
||||
};
|
||||
export default InputSearch;
|
||||
export default Input;
|
||||
|
||||
InputSearch.propTypes = {
|
||||
Input.propTypes = {
|
||||
id: PropTypes.string,
|
||||
value: PropTypes.string,
|
||||
name: PropTypes.string,
|
||||
|
|
|
@ -19,6 +19,11 @@ function NavigationBar () {
|
|||
<Nav.Link>Files</Nav.Link>
|
||||
</LinkContainer>
|
||||
</Nav>
|
||||
<Nav className="mr-auto">
|
||||
<LinkContainer to="/agency-per-day">
|
||||
<Nav.Link>Routes</Nav.Link>
|
||||
</LinkContainer>
|
||||
</Nav>
|
||||
<Nav className="mr-auto">
|
||||
<LinkContainer to="/trip-updates">
|
||||
<Nav.Link>Trips</Nav.Link>
|
||||
|
|
|
@ -1,11 +1,13 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import Select from './select';
|
||||
import {selectOptions} from '../utils/select-options';
|
||||
import TableSwitch from './table-switch';
|
||||
import Stack from 'react-bootstrap/Stack';
|
||||
import Button from 'react-bootstrap/Button';
|
||||
import Input from './input';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import Input from './input';
|
||||
import TableSwitch from './table-switch';
|
||||
import Select from './select';
|
||||
import {selectOptions} from '../utils/select-options';
|
||||
|
||||
const TablePage = ({ name }) => {
|
||||
/*store and initialise data in function component state*/
|
||||
const [oset, setOset] = useState(1);
|
||||
|
|
|
@ -1,13 +1,13 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
export default function TableEntries ({array}) {
|
||||
export default function TripUpdatesRouteDayTableEntries ({array}) {
|
||||
if ( array !== undefined && array !== null && array.length > 0 ) {
|
||||
//iterate over array
|
||||
return array.map((item, index) => {
|
||||
return (
|
||||
<tr
|
||||
key={item.trip_id}
|
||||
key={index}
|
||||
>
|
||||
<td>{item.agency_name}</td>
|
||||
<td>{item.agency_id}</td>
|
||||
|
@ -27,6 +27,6 @@ export default function TableEntries ({array}) {
|
|||
}
|
||||
};
|
||||
|
||||
TableEntries.propTypes = {
|
||||
TripUpdatesRouteDayTableEntries.propTypes = {
|
||||
array: PropTypes.array
|
||||
};
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import TableEntries from './trip-updates-route-day-table-entries';
|
||||
import TripUpdatesRouteDayTableEntries from './trip-updates-route-day-table-entries';
|
||||
|
||||
/*destructure props object*/
|
||||
export default function TripUpdatesRouteDayTable ({array, title}){
|
||||
|
@ -26,7 +26,7 @@ export default function TripUpdatesRouteDayTable ({array, title}){
|
|||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<TableEntries array={array} />
|
||||
<TripUpdatesRouteDayTableEntries array={array} />
|
||||
</tbody>
|
||||
</table>
|
||||
</>
|
||||
|
|
|
@ -11,8 +11,9 @@ 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 AgencyPerDay from './pages/agency-per-day';
|
||||
import TripUpdates from './pages/trip-updates-route-day';
|
||||
import Trips from './pages/trips-route-day';
|
||||
//TODO import Trips from './pages/trips-route-day';
|
||||
import Contact from './pages/contact';
|
||||
|
||||
export default function Main() {
|
||||
|
@ -28,6 +29,7 @@ export default function Main() {
|
|||
<Route path="/agency" element={<OverviewNext />} />
|
||||
<Route path="/files" element={<Files />} />
|
||||
<Route path="/trip-updates" element={<TripUpdates />} />
|
||||
<Route path="/agency-per-day" element={<AgencyPerDay />} />
|
||||
<Route path="/contact" element={<Contact />} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
|
|
|
@ -0,0 +1,101 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import axios from 'axios';
|
||||
|
||||
import config from '../config';
|
||||
import AgencyPerDayTable from '../components/agency-per-day-table';
|
||||
import AgencySelect from '../components/agency-select';
|
||||
import Input from '../components/input';
|
||||
|
||||
export default function AgencyPerDay() {
|
||||
|
||||
const dateDefault = 'Select date';
|
||||
const [date, setDate] = useState(dateDefault);
|
||||
|
||||
const agencyNameDefault = 'Select GTFS agency_name';
|
||||
|
||||
/*store and initialize data in function component state*/
|
||||
const [strngAgencyId, setStrngAgencyId] = useState(agencyNameDefault);
|
||||
|
||||
const [rryAgencyPerDay, setRryAgencyPerDay] = useState([]);
|
||||
const [rryAgencies, setRryAgencies] = useState([]);
|
||||
|
||||
//TODO How do we handle invalid date input?
|
||||
const handleDate = (e) => {
|
||||
if (e.target.value.indexOf('2023') !== -1 ||
|
||||
e.target.value.indexOf('2024') !== -1) {
|
||||
setDate((date)=>e.target.value);
|
||||
}
|
||||
};
|
||||
|
||||
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 getRryAgencyPerDay = async () => {
|
||||
if ( strngAgencyId !== agencyNameDefault &&
|
||||
date !== dateDefault) {
|
||||
try {
|
||||
/*TODO handle errors: https://www.valentinog.com/blog/await-react/*/
|
||||
//console.log('route: ' + strngAgencyId);
|
||||
const address = `${config.API}trip-updates-by-agency-day?agencyid=${strngAgencyId}&day=${date}`;
|
||||
//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: AgencyPerDay: ' + res.data.length);
|
||||
setRryAgencyPerDay((rryAgencyPerDay) => 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);
|
||||
};
|
||||
|
||||
/*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);
|
||||
getRryAgencyPerDay();
|
||||
/*TODO study dependency array: https://reactjs.org/docs/hooks-effect.html*/
|
||||
}, [strngAgencyId, date]);
|
||||
|
||||
|
||||
//TODO get rry based on agency_id!
|
||||
return <>
|
||||
<label>
|
||||
<p>Select date:</p>
|
||||
<Input
|
||||
id="inputDate"
|
||||
name="inputDate"
|
||||
onChange={handleDate}
|
||||
placeholder="Enter date ${dateDefault}"
|
||||
type="date"
|
||||
title="Enter date ${dateDefault}"
|
||||
value={date}
|
||||
/>
|
||||
</label>
|
||||
<AgencySelect rry={rryAgencies} name={agencyNameDefault} onChange={handleChangeAgencyId} />
|
||||
<AgencyPerDayTable array={rryAgencyPerDay} title={'routes'} />
|
||||
</>;
|
||||
};
|
|
@ -5,19 +5,32 @@ 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';
|
||||
import Input from '../components/input';
|
||||
|
||||
export default function TripUpdates() {
|
||||
|
||||
const dateDefault = 'Select date';
|
||||
const [date, setDate] = useState(dateDefault);
|
||||
|
||||
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([]);
|
||||
|
||||
//TODO How do we handle invalid date input?
|
||||
const handleDate = (e) => {
|
||||
if (e.target.value.indexOf('2023') !== -1 ||
|
||||
e.target.value.indexOf('2024') !== -1) {
|
||||
setDate((date)=>e.target.value);
|
||||
}
|
||||
};
|
||||
|
||||
const getRryAgencies = async () => {
|
||||
try {
|
||||
/*TODO handle errors: https://www.valentinog.com/blog/await-react/*/
|
||||
|
@ -57,13 +70,12 @@ export default function TripUpdates() {
|
|||
};
|
||||
|
||||
const getRryTripUpdates = async () => {
|
||||
if ( strngRouteId !== routeNameDefault ) {
|
||||
if ( strngRouteId !== routeNameDefault &&
|
||||
date !== dateDefault) {
|
||||
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('route: ' + strngRouteId);
|
||||
const address = `${config.API}trip-updates-by-route-day?routeid=${strngRouteId}&day=${date}`;
|
||||
//console.log('trip-updates-route-day res.data.length: address: ' + address);
|
||||
const res = await axios.get(address);
|
||||
if ( res.data !== undefined && res.data !== null ) {
|
||||
|
@ -106,13 +118,25 @@ export default function TripUpdates() {
|
|||
//console.log('trip-updates-route-day: useEffect() strngRouteId: ' + strngRouteId);
|
||||
getRryTripUpdates();
|
||||
/*TODO study dependency array: https://reactjs.org/docs/hooks-effect.html*/
|
||||
}, [strngRouteId]);
|
||||
}, [strngRouteId, date]);
|
||||
|
||||
|
||||
//TODO get rry based on route_id!
|
||||
return <>
|
||||
<label>
|
||||
<p>Select date:</p>
|
||||
<Input
|
||||
id="inputDate"
|
||||
name="inputDate"
|
||||
onChange={handleDate}
|
||||
placeholder="Enter date ${dateDefault}"
|
||||
type="date"
|
||||
title="Enter date ${dateDefault}"
|
||||
value={date}
|
||||
/>
|
||||
</label>
|
||||
<AgencySelect rry={rryAgencies} name={agencyNameDefault} onChange={handleChangeAgencyId} />
|
||||
<RouteSelect rry={rryRoutes} name={routeNameDefault} onChange={handleChangeRouteId} />
|
||||
<TripUpdatesRouteDayTable array={rryTripUpdates} title={'TripUpdates'} />
|
||||
<TripUpdatesRouteDayTable array={rryTripUpdates} title={'trips'} />
|
||||
</>;
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue