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

feat: adjust src to new package.json

This commit is contained in:
dancingCycle 2024-02-14 22:24:39 +01:00
parent a062476fb4
commit 39985d8f2d
28 changed files with 95 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/agency-per-day-table.js
View File

@ -4,13 +4,13 @@ import PropTypes from 'prop-types';
import AgencyPerDayTableEntries from './agency-per-day-table-entries';
/*destructure props object*/
export default function AgencyPerDayTable ({array, title}){
export default function AgencyPerDayTable ({array, title, date}){
if ( array !== undefined && array !== null) {
/*return a React element*/
return (
<>
<p>Table of {array.length}&nbsp;{title} for today:</p>
<p>Table of {array.length}&nbsp;{title} for {date}:</p>
<table>
<thead>
<tr>
@ -40,5 +40,6 @@ export default function AgencyPerDayTable ({array, title}){
};
AgencyPerDayTable.propTypes = {
array: PropTypes.array,
title: PropTypes.string
title: PropTypes.string,
date: PropTypes.string
};

20
src/components/file-select.js
View File

@ -4,9 +4,9 @@ import PropTypes from 'prop-types';
export default function FileSelect({ options, name, onChange, title }) {
if (options.length > 0) {
return <form >
<label htmlFor="input-agency">{name}: </label>
<select
name={name}
<label htmlFor="input-agency">{name}: </label>
<select
name={name}
id={name}
className={name}
onChange={onChange}
@ -15,13 +15,13 @@ export default function FileSelect({ options, name, onChange, title }) {
title={name}
type="text"
required
>
{options.map((item, index) => (
<option key={index} value={item}>
{item}
</option>
))}
</select>
>
{options.map((item, index) => (
<option key={index} value={item}>
{item}
</option>
))}
</select>
</form>;
} else {
return <p>Loading...</p>;

8
src/components/file-selection.js
View File

@ -2,7 +2,7 @@ import React, { useState } from 'react';
import PropTypes from 'prop-types';
import FileSelect from '../components/file-select';
import TablePage from '../components/table-page.js';
import TablePage from '../components/table-page';
import gtfs from '../utils/gtfs';
export default function FileSelection({ options }) {
@ -13,8 +13,7 @@ export default function FileSelection({ options }) {
setFileName((fileName) => event.target.value);
};
if (options.length > 0) {
return (
<div>
return <>
<FileSelect
name="file"
onChange={handleChangeFile}
@ -22,8 +21,7 @@ export default function FileSelection({ options }) {
title='Select GTFS dataset file'
/>
<TablePage name={fileName} />
</div>
);
</>;
} else {
return <p>Loading...</p>;
}

7
src/components/group-agency-per-day-table.js
View File

@ -6,13 +6,13 @@ import GroupAgencyPerDayTableEntries from './group-agency-per-day-table-entries'
//TODO For the cnnct feed, why do we get a 93 length agency array instead of 123?
/*destructure props object*/
export default function GroupAgencyPerDayTable ({array, title}){
export default function GroupAgencyPerDayTable ({array, title, date}){
if ( array !== undefined && array !== null) {
/*return a React element*/
return (
<>
<p>Table of {array.length}&nbsp;{title} for today:</p>
<p>Table of {array.length}&nbsp;{title} for {date}:</p>
<table>
<thead>
<tr>
@ -39,5 +39,6 @@ export default function GroupAgencyPerDayTable ({array, title}){
};
GroupAgencyPerDayTable.propTypes = {
array: PropTypes.array,
title: PropTypes.string
title: PropTypes.string,
date: PropTypes.string,
};

10
src/components/gtfs-file.js
View File

@ -34,12 +34,10 @@ export default function GtfsFile({ name }) {
/*use an empty dependency array to ensure the hook is running only once*/
/*TODO study dependency array: https://reactjs.org/docs/hooks-effect.html*/
}, []);
return (
<p>
{name}:<br />
{count ? count : 'loading...'}
</p>
);
return <li key={name}>
{name}:&nbsp;{count ? count : 'loading...'}
</li>;
};
GtfsFile.propTypes = {

17
src/components/gtfs-files.js
View File

@ -7,15 +7,14 @@ import gtfs from '../utils/gtfs';
export default function GtfsFiles() {
//TODO Do we have to call an API for each and every dataset file?
return (
<>
<p>
{gtfs.datasetFiles.map((item, index) => {
return <GtfsFile key={index} name={item} />;
})}
</p>
</>
);
return <fieldset>
<legend><b>GTFS Schedule</b> feed overview (file: item count)</legend>
<ul>
{gtfs.datasetFiles.map((item, index) => {
return <GtfsFile key={index} name={item} />;
})}
</ul>
</fieldset>;
};
GtfsFiles.propTypes = {

5
src/components/header.js
View File

@ -22,6 +22,11 @@ export default function Header(){
Realtime
</button>
</a>
<a href='/contact' rel="noopener noreferrer">
<button>
Contact
</button>
</a>
<a href='https://www.swingbe.de/imprint/'
target="_blank" rel="noopener noreferrer">
<button>

43
src/components/input.js
View File

@ -3,35 +3,20 @@ import PropTypes from 'prop-types';
/*controlled component: input form value controlled by React*/
export default function Input({id, name, onChange, placeholder, title, type, value}) {
return <form >
<label htmlFor="input-agency">{name}: </label>
<select
name={name}
id={id}
className={name}
onChange={onChange}
placeholder={placeholder}
title={title}
type={type}
value={value}
required
/>;
</form>;
return (
<>
<Form.Control
aria-label={title}
className={name}
id={id}
name={name}
onChange={onChange}
placeholder={placeholder}
title={title}
type={type}
value={value}
/>
</>
);
return <form >
<label htmlFor="input-agency">{name}: </label>
<input
name={name}
id={id}
className={name}
onChange={onChange}
placeholder={placeholder}
title={title}
type={type}
value={value}
required
/>
</form>;
};
Input.propTypes = {

3
src/components/odd-routes.js
View File

@ -66,10 +66,9 @@ export default function OddTrips() {
return (
<>
<label>
<p>Select date:</p>
<Input
id="inputDate"
name="inputDate"
name={dateDefault}
onChange={handleDate}
placeholder="Enter date ${dateDefault}"
type="date"

3
src/components/odd-trips.js
View File

@ -66,10 +66,9 @@ export default function OddTrips() {
return (
<>
<label>
<p>Select date:</p>
<Input
id="inputDate"
name="inputDate"
name={dateDefault}
onChange={handleDate}
placeholder="Enter date ${dateDefault}"
type="date"

4
src/components/overview-next-table-count.js
View File

@ -1,13 +1,11 @@
import React from 'react';
import PropTypes from 'prop-types';
import Badge from '../utils/badge';
export default function CountNext({ count }) {
if (count === '0'
|| count === null
|| count === undefined) {
return <Badge msg={count} modifier={'danger'} />;
return '0';
} else {
return count;
}

8
src/components/overview-next-table-head.js
View File

@ -3,10 +3,10 @@ import React from 'react';
export default function OverviewNextTableHead () {
return (
<tr>
<th>Agency</th>
<th>Route Count</th>
<th>Stop Count</th>
<th>Trip Count</th>
<th>Agency&nbsp;|</th>
<th>Route Count&nbsp;|</th>
<th>Stop Count&nbsp;|</th>
<th>Trip Count&nbsp;|</th>
</tr>
);
};

9
src/components/overview-next-table.js
View File

@ -29,8 +29,8 @@ export default function OverviewNextTable ({ overview }) {
};
/*return a React element*/
return (
<>
return <fieldset>
<legend><b>GTFS Schedule</b> agency overview</legend>
{/*size="sm" cuts cell padding in half*/}
{/*variant="dark" inverts colors*/}
<table>
@ -39,9 +39,8 @@ export default function OverviewNextTable ({ overview }) {
</thead>
<tbody>{handleOverview()}</tbody>
</table>
</>
);
}
</fieldset>;
};
OverviewNextTable.propTypes = {
overview: PropTypes.array

7
src/components/per-day-table.js
View File

@ -4,13 +4,13 @@ import PropTypes from 'prop-types';
import PerDayTableEntries from './per-day-table-entries';
/*destructure props object*/
export default function PerDayTable ({array, title}){
export default function PerDayTable ({array, title, date}){
if ( array !== undefined && array !== null) {
/*return a React element*/
return (
<>
<p>Table of {array.length}&nbsp;{title} for today:</p>
<p>Table of {array.length}&nbsp;{title} for {date}:</p>
<table>
<thead>
<tr>
@ -36,5 +36,6 @@ export default function PerDayTable ({array, title}){
};
PerDayTable.propTypes = {
array: PropTypes.array,
title: PropTypes.string
title: PropTypes.string,
date: PropTypes.string
};

2
src/components/radio-button.js
View File

@ -6,7 +6,7 @@ export default function RadioButton({ state, onChange }) {
<div >
<form>
<fieldset>
<legend>Select <b>GTFS Realtime</b> analysis rule:</legend>
<legend>Select <b>GTFS Realtime</b> analysis rule</legend>
<input
type="radio"
name="state"

2
src/components/select.js
View File

@ -17,7 +17,7 @@ export default function Select({defaultValue, id, name, onChange, options, title
type="text"
required
>
{options.map((item, intex) => (
{options.map((item, index) => (
<option key={index} value={item}>
{item}
</option>

12
src/components/table-page.js
View File

@ -25,10 +25,9 @@ const TablePage = ({ name }) => {
setSearchField((searchField)=>e.target.value);
};
if (name && name.indexOf(' ') === -1) {
return (
<>
<button onClick={handleClickPrev}>prev</button>
<button onClick={handleClickNext}>next</button>
return <>
<button onClick={handleClickPrev}>prev</button>&nbsp;
<button onClick={handleClickNext}>next</button>
<Select
defaultValue={selectOptions[0]}
id="tablePageLimit"
@ -41,7 +40,7 @@ const TablePage = ({ name }) => {
name="tablePageSearch"
onChange={handleSearch}
placeholder="Search table globally"
type="search"
type="text"
title="Enter search value"
value={searchField}
/>
@ -52,8 +51,7 @@ const TablePage = ({ name }) => {
limit={limit}
filter={searchField}
/>
</>
);
</>;
} else {
return <p>Loading...</p>;
}

6
src/components/tables.js
View File

@ -5,11 +5,7 @@ import FileSelection from './file-selection';
export default function Tables({ data }) {
if (data.length > 0) {
return (
<>
<FileSelection options={data} />
</>
);
return <FileSelection options={data} />;
} else {
return <p>Selection loading...</p>;
}

7
src/components/trip-updates-route-day-table.js
View File

@ -4,13 +4,13 @@ import PropTypes from 'prop-types';
import TripUpdatesRouteDayTableEntries from './trip-updates-route-day-table-entries';
/*destructure props object*/
export default function TripUpdatesRouteDayTable ({array, title}){
export default function TripUpdatesRouteDayTable ({array, title, date}){
if ( array !== undefined && array !== null) {
/*return a React element*/
return (
<>
<p>Table of {array.length}&nbsp;{title} for today:</p>
<p>Table of {array.length}&nbsp;{title} for {date}:</p>
<table>
<thead>
<tr>
@ -41,5 +41,6 @@ export default function TripUpdatesRouteDayTable ({array, title}){
};
TripUpdatesRouteDayTable.propTypes = {
array: PropTypes.array,
title: PropTypes.string
title: PropTypes.string,
date: PropTypes.string
};

2
src/main.js
View File

@ -25,7 +25,7 @@ export default function Main() {
<Header />
<h1>GTFS-Display</h1>
<p>
This website (Version:&nbsp;{VERSION}) display GTFS Realtime and Schedule data.
This website processes GTFS Realtime and Schedule data.
</p>
<Routes>
<Route exact path="/" element={<Home />} />

8
src/pages/agency-per-day.js
View File

@ -45,7 +45,6 @@ export default function AgencyPerDay() {
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);
@ -83,18 +82,17 @@ export default function AgencyPerDay() {
return <>
<label>
<p>Select date:</p>
<Input
id="inputDate"
name="inputDate"
name={dateDefault}
onChange={handleDate}
placeholder="Enter date ${dateDefault}"
type="date"
title="Enter date ${dateDefault}"
value={date}
/>
</label>
</label>
<AgencySelect rry={rryAgencies} name={agencyNameDefault} onChange={handleChangeAgencyId} />
<AgencyPerDayTable array={rryAgencyPerDay} title={'routes'} />
<AgencyPerDayTable array={rryAgencyPerDay} title={'routes'} date={date}/>
</>;
};

3
src/pages/contact.js
View File

@ -1,14 +1,11 @@
import React from 'react';
import Header from '../components/header';
import packageInfo from '../../package.json'
const VERSION = packageInfo.version;
export default function Contact() {
return (
<>
<Header />
<p>
For questions about this website please do not hesitate to reach out to dialog (at) swingbe (dot) de.
</p>

11
src/pages/files.js
View File

@ -1,14 +1,13 @@
import React, { useEffect, useState } from 'react';
import axios from 'axios';
import Tables from '../components/tables.js';
import Tables from '../components/tables';
import gtfs from '../utils/gtfs';
const Files = () => {
return (
<>
<Tables data={gtfs.datasetFiles} />
</>
);
return <fieldset>
<legend><b>GTFS Schedule</b> file overview</legend>
<Tables data={gtfs.datasetFiles} />
</fieldset>;
};
export default Files;

5
src/pages/group-agency-per-day.js
View File

@ -50,10 +50,9 @@ export default function GroupAgencyPerDay() {
return <>
<label>
<p>Select date:</p>
<Input
id="inputDate"
name="inputDate"
name={dateDefault}
onChange={handleDate}
placeholder="Enter date ${dateDefault}"
type="date"
@ -61,6 +60,6 @@ export default function GroupAgencyPerDay() {
value={date}
/>
</label>
<GroupAgencyPerDayTable array={rryGroupAgencyPerDay} title={'routes'} />
<GroupAgencyPerDayTable array={rryGroupAgencyPerDay} title={'agencies'} date={date}/>
</>;
};

2
src/pages/homepage.js
View File

@ -1,7 +1,7 @@
import React from 'react';
//TODO enable import GtfsValidatorReport from '../components/gtfs-validator-report.js';
import GtfsFiles from '../components/gtfs-files.js';
import GtfsFiles from '../components/gtfs-files';
export default function Homepage() {
return <GtfsFiles />;

5
src/pages/per-day.js
View File

@ -50,10 +50,9 @@ export default function PerDay() {
return <>
<label>
<p>Select date:</p>
<Input
id="inputDate"
name="inputDate"
name={dateDefault}
onChange={handleDate}
placeholder="Enter date ${dateDefault}"
type="date"
@ -61,6 +60,6 @@ export default function PerDay() {
value={date}
/>
</label>
<PerDayTable array={rryPerDay} title={'routes'} />
<PerDayTable array={rryPerDay} title={'feeds'} date={date}/>
</>;
};

5
src/pages/trip-updates-route-day.js
View File

@ -124,10 +124,9 @@ export default function TripUpdates() {
//TODO get rry based on route_id!
return <>
<label>
<p>Select date:</p>
<Input
id="inputDate"
name="inputDate"
name={dateDefault}
onChange={handleDate}
placeholder="Enter date ${dateDefault}"
type="date"
@ -137,6 +136,6 @@ export default function TripUpdates() {
</label>
<AgencySelect rry={rryAgencies} name={agencyNameDefault} onChange={handleChangeAgencyId} />
<RouteSelect rry={rryRoutes} name={routeNameDefault} onChange={handleChangeRouteId} />
<TripUpdatesRouteDayTable array={rryTripUpdates} title={'trips'} />
<TripUpdatesRouteDayTable array={rryTripUpdates} title={'trips'} date={date}/>
</>;
};

12
src/utils/badge.js
View File

@ -1,12 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
export default function badge({ msg, modifier }) {
return <p>{msg === null ? '0' : msg}</p>;
};
badge.propTypes = {
msg: PropTypes.string,
modifier: PropTypes.string
};