feat: add Page Realtime

app/components/nav-bar.js

@@ -20,13 +20,8 @@ function NavigationBar () {
                     </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>
+                    <LinkContainer to="/realtime">
+                        <Nav.Link>Realtime</Nav.Link>
                     </LinkContainer>
                 </Nav>
                 <Nav className="mr-auto">

app/components/radio-button.js

@@ -0,0 +1,39 @@
+import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+
+export default function RadioButton({ state, onChange }) {
+    return (
+    <div >
+      <form>
+        <fieldset>
+            <legend>Select GTFS Realtime analysis rule:</legend>
+            <input
+            type="radio"
+            name="state"
+            id='state-routes'
+            value="routes"
+            onChange={onChange}
+            checked={state === 'routes'} />
+            <label htmlFor="state-routes">
+		Analyse GTFS Realtime TripUpdates by agency_id and date
+	    </label><br />
+          <input
+            type="radio"
+            name="state"
+            id='state-trips'
+            value="trips"
+            onChange={onChange}
+            checked={state === 'trips'} />
+            <label htmlFor="state-trips">
+		Analyse GTFS Realtime TripUpdates by route_id and date
+	    </label><br />
+        </fieldset>
+      </form>
+    </div>
+  );
+};
+
+RadioButton.propTypes = {
+    state: PropTypes.string,
+    onChange: PropTypes.func
+};

app/components/realtime.js

@@ -0,0 +1,34 @@
+import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+
+import AgencyPerDay from '../pages/agency-per-day';
+import TripUpdates from '../pages/trip-updates-route-day';
+
+export default function Realtime({ state }) {
+    if ( state === 'routes' ) {
+    return (
+	<>
+	    <p>
+		Analyse GTFS Realtime TripUpdates by agency_id and date
+	    </p>
+	    <AgencyPerDay />
+	</>
+    );
+    } else if ( state === 'trips' ) {
+    return (
+	<>
+	    <p>
+		Analyse GTFS Realtime TripUpdates by route_id and date
+	    </p>
+            <TripUpdates />
+	</>
+    );
+    } else {
+	return <p>Select GTFS Realtime analysis rule to contine!</p>;
+    }	
+};
+
+
+Realtime.propTypes = {
+    state: PropTypes.string
+};

app/main.js

@@ -11,8 +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 AgencyPerDay from './pages/agency-per-day';
-import TripUpdates from './pages/trip-updates-route-day';
+import Realtime from './pages/realtime';
 //TODO import Trips from './pages/trips-route-day';
 import Contact from './pages/contact';
 
@@ -28,8 +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="/agency-per-day" element={<AgencyPerDay />} />
+                <Route path="/realtime" element={<Realtime />} />
                 <Route path="/contact" element={<Contact />} />
             </Routes>
         </BrowserRouter>

app/pages/homepage.js

@@ -1,14 +1,8 @@
-import React, { useEffect, useState } from 'react';
-import axios from 'axios';
+import React from 'react';
 
 //TODO enable import GtfsValidatorReport from '../components/gtfs-validator-report.js';
 import GtfsFiles from '../components/gtfs-files.js';
 
-const Homepage = () => {
-	return (
-	    <>
-		<GtfsFiles />
-	    </>
-	);
+export default function Homepage() {
+    return <GtfsFiles />;
 };
-export default Homepage;

app/pages/realtime.js

@@ -0,0 +1,20 @@
+import React, { useState } from 'react';
+
+import RadioButton from '../components/radio-button';
+import Rltm from '../components/realtime';
+
+export default function Realtime() {
+    const [state, setState] = useState('');
+
+    const handleChange = (e) => {
+	setState(e.target.value);
+    }
+    return (
+	<>
+	    <RadioButton state={state} onChange={handleChange}/>
+	    <br />
+	    <Rltm state={state} />
+	</>
+    );
+
+};