feat: adjust src to new package.json

.babelrc

@@ -1,20 +1,6 @@
 {
   "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "targets": {
-          "browsers": [
-            ">0.25%",
-            "not ie 11",
-            "not op_mini all"
-          ]
-        }
-      }
-    ],
+    "@babel/preset-env",
     "@babel/preset-react"
-  ],
-  "plugins": [
-    "@babel/plugin-transform-runtime"
   ]
-}
+}

.prettierrc

@@ -1,5 +0,0 @@
-{
- "semi": true,
- "singleQuote": true,
- "trailingComma": "es5"
-}

config/webpack.common.js

@@ -0,0 +1,61 @@
+//generate a HTML5 file including all webpack bundles in the body using script tags
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+//path is used to resolve properly across the OS
+const path = require('path');
+module.exports = {
+    //bundle *.js from this entry point
+    entry: path.resolve(__dirname, '../src/index.jsx'),
+    //create output file to be linked to index.html
+    output: {
+        filename: '[name].bundle.js',
+	path: path.resolve(__dirname, '../dist'),
+	clean: true,
+    },
+    module: {
+	rules: [
+	    {
+		//test all *.js using babel-loader
+		//test all *.jsx (e.g. React.js) using babel-loader
+		test: /\.(js|jsx)$/,
+		exclude: /node_modules/,
+		include: path.resolve(__dirname, '../src'),
+		use: ['babel-loader'],
+	    },
+	    {
+		//test all *.css using style-loader and css-loader
+		test: /\.css$/i,
+		use: ["style-loader", "css-loader"],
+	    },
+	    {
+		//test all *.svg using svg-loader
+		test: /\.svg$/,
+		use: [
+		    {
+			loader: 'svg-url-loader',
+			options: {
+			    limit: 10000,
+			},
+		    },
+		],
+	    },
+	    {
+		test: /\.(png|jpe?g|gif)$/i,
+		use: [
+		    {
+			loader: 'file-loader',
+		    },
+		],
+	    },
+	]
+    },
+    resolve: {
+	extensions: ['*', '.js', '.jsx'],
+    },
+    plugins: [
+	// create a plugin instance so that you can use it several times anywhere
+	new HtmlWebpackPlugin({
+	    title: 'Production',
+	    template: path.resolve(__dirname, "../public/index.html")
+	}),
+    ],
+};

config/webpack.dev.js

@@ -0,0 +1,16 @@
+//path is used to resolve properly across the OS
+const path = require('path');
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+//merge() calls in the environment-specific configuration to include commons
+module.exports = merge(common, {
+    //set development mode
+    mode: 'development',
+    //enable strong source mapping
+    devtool: 'inline-source-map',
+    devServer: {
+	static: path.resolve(__dirname, '../dist'),
+	//When using the HTML5 History API, the index.html page will likely have to be served in place of any 404 responses. Enable devServer.historyApiFallback by setting it to true.
+	historyApiFallback: true,
+    },
+});

config/webpack.prod.js

@@ -0,0 +1,8 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+module.exports = merge(common, {
+    mode: 'production',
+    //source maps encouraged in production
+    //choose mapping with fairly quick build speed like source-map
+    devtool: 'source-map',
+});

package.json

@@ -14,34 +14,33 @@
     "author": "Software Ingenieur Begerad <dialog@SwIngBe.de>",
     "license": "GPL-3.0-or-later",
     "engines": {
-        "node": "<=18.19.0"
+        "node": ">=18.19.0"
     },
     "scripts": {
-        "start": "webpack-dev-server --mode development",
-	"test": "echo \"Error: no test specified\" && exit 1",
-        "build": "webpack --mode production"
-    },
-    "dependencies": {
-        "axios": "0.27.2",
-        "react": "18.2.0",
-        "react-dom": "18.2.0",
-        "react-router-dom": "6.4.3"
+        "start": "webpack serve --config config/webpack.dev.js",
+        "build": "webpack --config config/webpack.prod.js",
+        "test": "echo \"Error: no test specified\" && exit 1"
     },
     "devDependencies": {
-        "@babel/core": "7.20.2",
-        "@babel/plugin-transform-runtime": "7.19.6",
-        "@babel/preset-env": "7.20.2",
-        "@babel/preset-react": "7.18.6",
-        "@babel/runtime": "7.20.1",
-        "babel-loader": "8.3.0",
-        "css-loader": "6.7.1",
-        "html-webpack-plugin": "5.5.0",
-        "less": "4.1.3",
-        "less-loader": "11.1.0",
-        "prettier": "2.7.1",
-        "style-loader": "3.3.1",
-        "webpack": "5.75.0",
-        "webpack-cli": "4.10.0",
-        "webpack-dev-server": "4.11.1"
+        "@babel/core": "7.22.10",
+        "@babel/preset-env": "7.22.10",
+        "@babel/preset-react": "7.22.5",
+        "babel-loader": "9.1.3",
+        "css-loader": "6.8.1",
+        "file-loader": "6.2.0",
+        "html-webpack-plugin": "5.5.3",
+        "style-loader": "3.3.2",
+        "svg-url-loader": "8.0.0",
+        "webpack": "5.88.2",
+        "webpack-cli": "5.1.4",
+        "webpack-dev-server": "4.15.1",
+        "webpack-merge": "5.9.0"
+    },
+    "dependencies": {
+        "axios": "1.3.6",
+        "prop-types": "15.8.1",
+        "react": "18.2.0",
+        "react-dom": "18.2.0",
+        "react-router-dom": "6.15.0"
     }
 }

public/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>GTFS-Display</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

src/components/agency-select.js

@@ -7,8 +7,7 @@ import PropTypes from 'prop-types';
 export default function AgencySelect({ name, onChange, rry }) {
     
     if (rry !== undefined && rry !== null && rry.length > 0) {
-        return (<>
-		    <form >
+        return <form >
 			<label htmlFor="input-agency">{name}: </label>
 			<select
 			    name={name}
@@ -27,8 +26,7 @@ export default function AgencySelect({ name, onChange, rry }) {
 				</option>
 			    ))}
 			</select>
-		    </form>
-		</>);
+	       </form>;
     } else {
         return <p>Loading...</p>;
     }

src/components/file-select.js

@@ -1,23 +1,28 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Form from 'react-bootstrap/Form';
 
 export default function FileSelect({ options, name, onChange, title }) {
     if (options.length > 0) {
-        return <Form.Select
-                   aria-label="select table entries per page"
-                   name={name}
-                   id={name}
-                   className={name}
-                   onChange={onChange}
-		   title={title}
-               >
-                   {options.map((item, index) => (
-                       <option key={index} value={item}>
-                           {item}
-                       </option>
-                   ))}
-	       </Form.Select>;
+        return <form >
+			<label htmlFor="input-agency">{name}: </label>
+			<select
+			    name={name}
+			    id={name}
+			    className={name}
+			    onChange={onChange}
+			    placeholder={name}
+			    defaultValue={name}
+			    title={name}
+			    type="text"
+			    required
+			>
+			    {options.map((item, index) => (
+				<option key={index} value={item}>
+				    {item}
+				</option>
+			    ))}
+			</select>
+	       </form>;
     } else {
         return <p>Loading...</p>;
     }

src/components/gtfs-file.js

@@ -1,11 +1,11 @@
 import React, { useEffect, useState } from 'react';
 import axios from 'axios';
 import PropTypes from 'prop-types';
-import Card from 'react-bootstrap/Card';
-import Badge from 'react-bootstrap/Badge';
+
 import config from '../config';
+
 //destructure props
-const GtfsFile = ({ name }) => {
+export default function GtfsFile({ name }) {
     /*store count as array in function component state*/
     /*initialise as empty array*/
     const [count, setCount] = useState(null);
@@ -35,26 +35,13 @@ const GtfsFile = ({ name }) => {
     /*TODO study dependency array: https://reactjs.org/docs/hooks-effect.html*/
     }, []);
     return (
-        <>
-            <Card
-                style={{ width: '11rem' }}
-                body
-                bg="dark"
-                key="dark"
-                text="light"
-                className="m-1"
-            >
+            <p>
                 {name}:<br />
-                <Badge pill bg="secondary">
-                    {count ? count : 'loading...'}
-                </Badge>
-            </Card>
-        </>
+                {count ? count : 'loading...'}
+            </p>
     );
 };
 
 GtfsFile.propTypes = {
     name: PropTypes.string
 };
-
-export default GtfsFile;

src/components/gtfs-files.js

@@ -1,27 +1,23 @@
 import React, { useEffect, useState } from 'react';
 import axios from 'axios';
-import Container from 'react-bootstrap/Container';
-import Row from 'react-bootstrap/Row';
 import PropTypes from 'prop-types';
 
 import GtfsFile from './gtfs-file';
 import gtfs from '../utils/gtfs';
 
-const GtfsFiles = () => {
+export default function GtfsFiles() {
     //TODO Do we have to call an API for each and every dataset file?
         return (
             <>
-                <Container>
-                    <Row>
+                <p>
                         {gtfs.datasetFiles.map((item, index) => {
 			    return <GtfsFile key={index} name={item} />;
                         })}
-                    </Row>
-                </Container>
+                </p>
             </>
         );
 };
+
 GtfsFiles.propTypes = {
     data: PropTypes.array
 };
-export default GtfsFiles;

src/components/header.js

@@ -1,14 +1,27 @@
 import React from 'react'
 
-//TODO Shall we make this header generic by using params for URL's?
 export default function Header(){
-    return (
-	<>
+    return <>
       	    <a href='/' rel="noopener noreferrer">
 		<button>
 		    Home
 		</button>
 	    </a>
+      	    <a href='/agency' rel="noopener noreferrer">
+		<button>
+		    Agency
+		</button>
+	    </a>
+      	    <a href='/files' rel="noopener noreferrer">
+		<button>
+		    Files
+		</button>
+	    </a>
+      	    <a href='/realtime' rel="noopener noreferrer">
+		<button>
+		    Realtime
+		</button>
+	    </a>
       	    <a href='https://www.swingbe.de/imprint/'
 	       target="_blank" rel="noopener noreferrer">
 		<button>
@@ -27,6 +40,5 @@ export default function Header(){
 		    Source
 		</button>
 	    </a>
-	</>
-    );
+	   </>;
 };

src/components/input.js

@@ -1,9 +1,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Form from 'react-bootstrap/Form';
 
 /*controlled component: input form value controlled by React*/
-const Input = ({id, name, onChange, placeholder, title, type, value}) => {
+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
@@ -20,7 +33,6 @@ const Input = ({id, name, onChange, placeholder, title, type, value}) => {
         </>
     );
 };
-export default Input;
 
 Input.propTypes = {
     id: PropTypes.string,

src/components/overview-next-table.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Table from 'react-bootstrap/Table';
 
 import Entry from './overview-next-table-entry';
 import Head from './overview-next-table-head';
@@ -34,12 +33,12 @@ export default function OverviewNextTable ({ overview }) {
         <>
             {/*size="sm" cuts cell padding in half*/}
             {/*variant="dark" inverts colors*/}
-            <Table striped bordered hover size="sm" variant="dark" responsive>
+            <table>
                 <thead>
                     <Head />
                 </thead>
                 <tbody>{handleOverview()}</tbody>
-            </Table>
+            </table>
         </>
     );
 }

src/components/select.js

@@ -1,31 +1,34 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Form from 'react-bootstrap/Form';
+
 /*controlled component: select controlled by React*/
-const Select = ({defaultValue, id, name, onChange, options, title}) => {
+export default function Select({defaultValue, id, name, onChange, options, title}) {
     if (options) {
-        return (
-                <Form.Select
-                    aria-label="select table entries per page"
-                    className={name}
-                    defaultValue={defaultValue}
-                    name={name}
-                    id={id}
-                    onChange={onChange}
-                    title={title}
-                >
-                    {options.map((item, index) => (
-                        <option key={index} value={item}>
-                            {item}
-                        </option>
-                    ))}
-                </Form.Select>
-        );
+        return <form >
+			<label htmlFor="input-agency">{name}: </label>
+			<select
+			    name={name}
+			    id={id}
+			    className={name}
+			    onChange={onChange}
+			    placeholder={name}
+			    defaultValue={defaultValue}
+			    title={title}
+			    type="text"
+			    required
+			>
+			    {options.map((item, intex) => (
+				<option key={index} value={item}>
+				    {item}
+				</option>
+			    ))}
+			</select>
+	       </form>;
     } else {
         return <p>Select options unavailable.</p>;
     }
 };
-export default Select;
+
 Select.propTypes = {
     id: PropTypes.string,
     name: PropTypes.string,

src/components/table-page.js

@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
-import Stack from 'react-bootstrap/Stack';
-import Button from 'react-bootstrap/Button';
+
 import PropTypes from 'prop-types';
 
 import Input from './input';
@@ -28,13 +27,8 @@ const TablePage = ({ name }) => {
     if (name && name.indexOf(' ') === -1) {
         return (
             <>
-                <Stack direction="horizontal" gap={1} className="m-1">
-                    <Button variant="secondary" onClick={handleClickPrev}>
-            prev
-                    </Button>
-                    <Button variant="secondary" onClick={handleClickNext}>
-            next
-                    </Button>
+                    <button onClick={handleClickPrev}>prev</button>
+                    <button onClick={handleClickNext}>next</button>
 		    <Select
 			defaultValue={selectOptions[0]}
 			id="tablePageLimit"
@@ -51,7 +45,6 @@ const TablePage = ({ name }) => {
 			title="Enter search value"
 			value={searchField}
 		    />
-                </Stack>
                 <TableSwitch
 		    name={name}
 		    isFetched={false}

src/components/table-switch.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import axios from 'axios';
 import PropTypes from 'prop-types';
-import Table from 'react-bootstrap/Table';
+
 import TableHeadSwitch from './table-head-switch';
 import TableEntrySwitch from './table-entry-switch';
 import config from '../config';
@@ -83,21 +83,14 @@ function TableSwitch ({name, isFetched, oset, limit, filter}) {
 	/*return a React element*/
 	return (
         <>
-            <Table
-		striped
-		bordered
-		hover
-		size="sm"
-		variant="dark"
-		responsive
-	    >
+            <table>
                 <thead>
 		    <TableHeadSwitch name={name}/>
 		</thead>
                 <tbody>
 		    <TableEntrySwitch aryData={aryFiltered} name={name}/>
 		</tbody>
-            </Table>
+            </table>
         </>
 	);
     }else{

src/index.js

@@ -1,6 +0,0 @@
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './main';
-const container = document.getElementById('root');
-const root = createRoot(container);
-root.render(<App tab="home" />);

src/index.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './main';
+
+
+//TODO remove debugging
+if (process.env.NODE_ENV !== 'production') {
+    console.log('development mode');
+}
+
+//since react 18
+import { createRoot } from 'react-dom/client';
+
+//create root container
+const root = createRoot(document.getElementById("root"));
+
+//render root app
+root.render(
+    <React.StrictMode>
+	<App />
+    </React.StrictMode>
+);

src/main.js

@@ -1,11 +1,8 @@
 import React from 'react';
-import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';
 
-/*some stylesheet is required to use react-bootstrip components*/
-import 'bootstrap/dist/css/bootstrap.min.css';
-
-import NavBar from './components/nav-bar';
-import HomePage from './pages/homepage';
+import Header from './components/header';
+import Home from './pages/homepage';
 import Files from './pages/files';
 //TODO Date [today] is not implemented! import Overview from './pages/overview';
 import OverviewNext from './pages/overview-next';
@@ -15,35 +12,43 @@ import Realtime from './pages/realtime';
 //TODO import Trips from './pages/trips-route-day';
 import Contact from './pages/contact';
 
+import packageInfo from '../package.json'
+const VERSION = packageInfo.version;
+
 export default function Main() {
     return (
-    //BrowserRouter is the router implementation for HTML5 browsers
+    //Router is the router implementation for HTML5 browsers
     //Link enables Routes on an anchor tag
     //Switch returns only the first matching route rather than all
     //Route is the conditionally shown component //based on matching a path to a URL
-        <BrowserRouter>
-            <NavBar />
+        <Router>
+	    <Header />
+		<h1>GTFS-Display</h1>
+		<p>
+		    This website (Version:&nbsp;{VERSION}) display GTFS Realtime and Schedule data.
+		</p>
             <Routes>
-                <Route path="/" element={<HomePage />} />
-                <Route path="/agency" element={<OverviewNext />} />
-                <Route path="/files" element={<Files />} />
-                <Route path="/realtime" element={<Realtime />} />
-                <Route path="/contact" element={<Contact />} />
+                <Route exact path="/" element={<Home />} />
+                <Route exact path="/agency" element={<OverviewNext />} />
+                <Route exact path="/files" element={<Files />} />
+                <Route exact path="/realtime" element={<Realtime />} />
+                <Route exact path="/contact" element={<Contact />} />
+		<Route path="*" element={<Navigate to="/" />} />
             </Routes>
-        </BrowserRouter>
+        </Router>
     );
     /** TODO Is this route of any value?
-                <Route path="/trips" element={<Trips />} />
+                <Route exact path="/trips" element={<Trips />} />
     */
     /** TODO Date [today] is not implemented!
-                <Route path="/overview-today" element={<Overview />} />
+                <Route exact path="/overview-today" element={<Overview />} />
     */
 
     /** TODO Disable this route as it is not working!
-                <Route path="/service" element={<Service />} />
+                <Route exact path="/service" element={<Service />} />
     */
 
     /** TODO Disable this route as it is way too much overhead for API and database!
-                <Route path="/trip-calendar" element={<TripCalendar />} />
+                <Route exact path="/trip-calendar" element={<TripCalendar />} />
     */
 };

src/utils/badge.js

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

webpack.config.js

@@ -1,63 +0,0 @@
-const path = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-
-module.exports = {
-    //tell Webpack to generate src maps
-    devtool: 'inline-source-map',
-    //entry point of app
-    entry: './src/index.js',
-    //put the output of the bundling process at this place
-    output: {
-	path: path.resolve(__dirname, 'build'),
-	publicPath: '/',
-	filename: 'bundle.js'
-    },
-
-    devServer: {
-	static: {
-	    //tell server to serve from this place
-	    directory: path.join(__dirname, '/build'),
-	},
-    },
-    module: {
-	rules: [
-	    //process any .js or .jsx file with Babel
-	    {
-		test: /\.(js|jsx)$/,
-		exclude: /node_modules/,
-		use: [
-		    //use babel-loader to transpile these file types
-		    'babel-loader'
-		]
-	    },
-	    //process any .css file with CSS loader
-	    {
-		test: /\.css$/,
-		use: [
-		    'style-loader',
-		    'css-loader',
-		],
-	    },
-	    //url-loader is required to pull images an fonts for bootstrap
-	    {
-		test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
-		use: [
-		    'url-loader',
-		],
-	    },
-	    {
-		test: /\.less$/,
-		use: [
-		    'style-loader',
-		    'css-loader',
-		    'less-loader',
-		],
-	    },
-	]
-    },
-    plugins: [
-	new HtmlWebpackPlugin({
-	    template: path.resolve('./index.html'),
-	}),
-    ]
-};