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

feat: adjust UX of page Realtime

This commit is contained in:
dancingCycle 2024-01-16 04:58:49 +01:00
parent cb6da84e0b
commit 6a4696801f
2 changed files with 52 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
app/components/radio-button.js
View File

@ -6,7 +6,29 @@ export default function RadioButton({ state, onChange }) {
<div >
<form>
<fieldset>
<legend>Select GTFS Realtime analysis rule:</legend>
<legend>Select <b>GTFS Realtime</b> analysis rule:</legend>
<input
type="radio"
name="state"
id='state-feed'
value="feed"
onChange={onChange}
checked={state === 'feed'} />
<label htmlFor="state-feed">
&nbsp;Analyse <b>GTFS Realtime</b> entities <b>TripUpdate</b> on <b>feed</b> level
</label><br />
<input
type="radio"
name="state"
id='state-agencies'
value="agencies"
onChange={onChange}
checked={state === 'agencies'} />
<label htmlFor="state-agencies">
&nbsp;Analyse <b>GTFS Realtime</b> entities <b>TripUpdate</b> on <b>agencies</b> level
</label><br />
<input
type="radio"
name="state"
@ -15,9 +37,10 @@ export default function RadioButton({ state, onChange }) {
onChange={onChange}
checked={state === 'routes'} />
<label htmlFor="state-routes">
Analyse GTFS Realtime TripUpdates by agency_id and date
&nbsp;Analyse <b>GTFS Realtime</b> entities <b>TripUpdate</b> on <b>routes</b> level
</label><br />
<input
<input
type="radio"
name="state"
id='state-trips'
@ -25,7 +48,7 @@ export default function RadioButton({ state, onChange }) {
onChange={onChange}
checked={state === 'trips'} />
<label htmlFor="state-trips">
Analyse GTFS Realtime TripUpdates by route_id and date
&nbsp;Analyse <b>GTFS Realtime</b> entities <b>TripUpdate</b> on <b>trips</b> level
</label><br />
</fieldset>
</form>

29
app/components/realtime.js
View File

@ -5,11 +5,30 @@ import AgencyPerDay from '../pages/agency-per-day';
import TripUpdates from '../pages/trip-updates-route-day';
export default function Realtime({ state }) {
if ( state === 'routes' ) {
if ( state === 'feed' ) {
return (
<>
<p>
Analyse GTFS Realtime TripUpdates by agency_id and date
Analyse <b>GTFS Realtime</b> entities <b>TripUpdate</b> on <b>feed</b> level
</p>
<p>Loading...</p>
</>
);
}
else if ( state === 'agencies' ) {
return (
<>
<p>
Analyse <b>GTFS Realtime</b> entities <b>TripUpdate</b> on <b>agencies</b> level
</p>
<p>Loading...</p>
</>
);
} else if ( state === 'routes' ) {
return (
<>
<p>
Analyse <b>GTFS Realtime</b> entities <b>TripUpdate</b> on <b>routes</b> level
</p>
<AgencyPerDay />
</>
@ -18,13 +37,15 @@ export default function Realtime({ state }) {
return (
<>
<p>
Analyse GTFS Realtime TripUpdates by route_id and date
Analyse <b>GTFS Realtime</b> entities <b>TripUpdate</b> on <b>trips</b> level
</p>
<TripUpdates />
</>
);
} else {
return <p>Select GTFS Realtime analysis rule to contine!</p>;
return <p>
Select a <b>GTFS Realtime</b> analysis rule to contine!
</p>;
}
};