feat: adjust UX of page Realtime

src/components/odd-routes.js

@@ -0,0 +1,50 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+
+
+export default function OddTrips() {
+  const [data, setData] = useState([]);
+  const [currentPage, setCurrentPage] = useState(1);
+  const itemsPerPage = 10; // Number of items to display per page
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  const fetchData = async () => {
+    try {
+	const response = await axios.get('https://v1api.cnnct.dp.gtfs.swingbe.de/trip-updates-odd-routes?day=2024-01-31');
+      setData(response.data);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  const startIndex = (currentPage - 1) * itemsPerPage;
+  const endIndex = startIndex + itemsPerPage;
+  const currentItems = data.slice(startIndex, endIndex);
+
+  const handlePreviousPage = () => {
+    if (currentPage > 1) {
+      setCurrentPage(currentPage - 1);
+    }
+  };
+
+  const handleNextPage = () => {
+    const totalPages = Math.ceil(data.length / itemsPerPage);
+    if (currentPage < totalPages) {
+      setCurrentPage(currentPage + 1);
+    }
+  };
+
+  return (
+    <div>
+      <dl>
+          {currentItems.map((item, index) => (
+              <dt key={index}>{item.trip_route_id}</dt>
+        ))}
+      </dl>
+      <button onClick={handlePreviousPage}>Previous</button>
+      <button onClick={handleNextPage}>Next</button>
+    </div>
+  );
+};

src/components/odd-trips.js

@@ -0,0 +1,50 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+
+
+export default function OddTrips() {
+  const [data, setData] = useState([]);
+  const [currentPage, setCurrentPage] = useState(1);
+  const itemsPerPage = 10; // Number of items to display per page
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  const fetchData = async () => {
+    try {
+	const response = await axios.get('https://v1api.ccnnct.dp.gtfs.swingbe.de/trip-updates-odd-trips?day=2024-01-31');
+      setData(response.data);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  const startIndex = (currentPage - 1) * itemsPerPage;
+  const endIndex = startIndex + itemsPerPage;
+  const currentItems = data.slice(startIndex, endIndex);
+
+  const handlePreviousPage = () => {
+    if (currentPage > 1) {
+      setCurrentPage(currentPage - 1);
+    }
+  };
+
+  const handleNextPage = () => {
+    const totalPages = Math.ceil(data.length / itemsPerPage);
+    if (currentPage < totalPages) {
+      setCurrentPage(currentPage + 1);
+    }
+  };
+
+  return (
+    <div>
+      <dl>
+          {currentItems.map((item, index) => (
+          <dt key={index}>{item.trip_trip_id}</dt>
+        ))}
+      </dl>
+      <button onClick={handlePreviousPage}>Previous</button>
+      <button onClick={handleNextPage}>Next</button>
+    </div>
+  );
+};

src/components/radio-button.js

@@ -7,6 +7,28 @@ export default function RadioButton({ state, onChange }) {
       <form>
         <fieldset>
             <legend>Select <b>GTFS Realtime</b> analysis rule:</legend>
+            <input
+            type="radio"
+            name="state"
+            id='state-odd-routes'
+            value="odd-routes"
+            onChange={onChange}
+            checked={state === 'odd-routes'} />
+            <label htmlFor="state-odd-routes">
+		&nbsp;Show <b>GTFS Realtime</b> entities <b>TripUpdate</b> with <b>odd routes</b>
+	    </label><br />
+
+            <input
+            type="radio"
+            name="state"
+            id='state-odd-trips'
+            value="odd-trips"
+            onChange={onChange}
+            checked={state === 'odd-trips'} />
+            <label htmlFor="state-odd-trips">
+		&nbsp;Show <b>GTFS Realtime</b> entities <b>TripUpdate</b> with <b>odd trips</b>
+	    </label><br />
+
             <input
             type="radio"
             name="state"

src/components/realtime.js

@@ -3,11 +3,17 @@ import React, { useState } from 'react';
 
 import AgencyPerDay from '../pages/agency-per-day';
 import GroupAgencyPerDay from '../pages/group-agency-per-day';
+import OddRoutes from './odd-routes';
+import OddTrips from './odd-trips';
 import PerDay from '../pages/per-day';
 import TripUpdates from '../pages/trip-updates-route-day';
 
 export default function Realtime({ state }) {
-    if ( state === 'feed' ) {
+    if ( state === 'odd-routes' ) {
+	return <OddRoutes />;
+    } else if ( state === 'odd-trips' ) {
+	return <OddTrips />;
+    } else if ( state === 'feed' ) {
     return (
 	<>
 	    <p>