diff --git a/fare-zones-table/.babelrc b/fare-zones-table/.babelrc
new file mode 100644
index 0000000..0960c01
--- /dev/null
+++ b/fare-zones-table/.babelrc
@@ -0,0 +1,6 @@
+{
+ "presets": [
+ "@babel/preset-env",
+ "@babel/preset-react"
+ ]
+}
\ No newline at end of file
diff --git a/fare-zones-table/.eslintrc b/fare-zones-table/.eslintrc
new file mode 100644
index 0000000..60df05f
--- /dev/null
+++ b/fare-zones-table/.eslintrc
@@ -0,0 +1,13 @@
+{
+ "parser": "babel-eslint",
+ "extends": "react",
+ "env": {
+ "browser": true,
+ "node": true
+ },
+ "settings": {
+ "react": {
+ "version": "detect"
+ }
+ }
+}
\ No newline at end of file
diff --git a/fare-zones-table/.prettierrc b/fare-zones-table/.prettierrc
new file mode 100644
index 0000000..3a4d1e8
--- /dev/null
+++ b/fare-zones-table/.prettierrc
@@ -0,0 +1,5 @@
+{
+ "semi": true,
+ "singleQuote": true,
+ "trailingComma": "es5"
+}
\ No newline at end of file
diff --git a/fare-zones-table/README.md b/fare-zones-table/README.md
new file mode 100644
index 0000000..f9d4c39
--- /dev/null
+++ b/fare-zones-table/README.md
@@ -0,0 +1 @@
+[source](git@github.com:dancesWithCycles/react-axios-tutorial.git)
\ No newline at end of file
diff --git a/fare-zones-table/index.html b/fare-zones-table/index.html
new file mode 100644
index 0000000..4dac29f
--- /dev/null
+++ b/fare-zones-table/index.html
@@ -0,0 +1,10 @@
+
+
+
+
+ fare-zones-table
+
+
+
+
+
diff --git a/fare-zones-table/package.json b/fare-zones-table/package.json
new file mode 100644
index 0000000..6920a1d
--- /dev/null
+++ b/fare-zones-table/package.json
@@ -0,0 +1,40 @@
+{
+ "name": "fare-zones-table",
+ "version": "1.0.0",
+ "description": "example showing fare zones table",
+ "main": "index.js",
+ "scripts": {
+ "start": "webpack-dev-server --mode development",
+ "test": "echo \"Error: no test specified\" && exit 1",
+ "format": "prettier --write \"src/**/*.js\"",
+ "eslint-fix": "eslint --fix \"src/**/*.js\"",
+ "build": "webpack --mode production"
+ },
+ "author": "Stefan Begerad",
+ "license": "GPL-3.0-or-later",
+ "dependencies": {
+ "axios": "^0.21.4",
+ "react": "^17.0.2",
+ "react-dom": "^17.0.2"
+ },
+ "devDependencies": {
+ "@babel/core": "^7.15.5",
+ "@babel/preset-env": "^7.15.4",
+ "@babel/preset-react": "^7.14.5",
+ "babel-eslint": "^10.1.0",
+ "babel-loader": "^8.2.2",
+ "css-loader": "^6.2.0",
+ "eslint": "^7.32.0",
+ "eslint-config-react": "^1.1.7",
+ "eslint-loader": "^4.0.2",
+ "eslint-plugin-react": "^7.25.1",
+ "html-webpack-plugin": "^5.3.2",
+ "less": "^4.1.1",
+ "less-loader": "^10.0.1",
+ "prettier": "2.4.0",
+ "style-loader": "^3.2.1",
+ "webpack": "^5.52.0",
+ "webpack-cli": "^4.8.0",
+ "webpack-dev-server": "^4.1.1"
+ }
+}
diff --git a/fare-zones-table/src/component/fare-zones-table.js b/fare-zones-table/src/component/fare-zones-table.js
new file mode 100644
index 0000000..a1b6496
--- /dev/null
+++ b/fare-zones-table/src/component/fare-zones-table.js
@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+class FareZonesTable extends Component {
+ render () {
+ return (
+
+ {this.props.obj.id} |
+ {this.props.obj.extern} |
+ {this.props.obj.type} |
+ {this.props.obj.intern} |
+ {this.props.obj.name} |
+ {this.props.obj.shortName} |
+ {this.props.obj.validFrom} |
+ {this.props.obj.validUnit} |
+
+ );
+ }
+}
+
+FareZonesTable.propTypes = {
+ obj: PropTypes.object
+};
+
+export default FareZonesTable;
diff --git a/fare-zones-table/src/component/fare-zones.js b/fare-zones-table/src/component/fare-zones.js
new file mode 100644
index 0000000..e345b3e
--- /dev/null
+++ b/fare-zones-table/src/component/fare-zones.js
@@ -0,0 +1,63 @@
+import React, { Component } from 'react';
+import axios from 'axios';
+import FareZonesTable from './fare-zones-table';
+
+export default class FareZones extends Component {
+ constructor (props) {
+ super(props);
+ this.state = { usersCollection: [] };
+ }
+
+ componentDidMount () {
+ axios.defaults.baseURL = 'https://tarifmatrix.vbn.de:4445';
+ axios.defaults.headers.get['Content-Type'] =
+ 'application/json;charset=utf-8';
+ axios.defaults.headers.get['Access-Control-Allow-Origin'] = '*';
+
+ axios
+ .get('fares/areas/info', {
+ // Axios looks for the `auth` option, and, if it is set, formats a
+ // basic auth header for you automatically.
+ auth: {
+ username: 'tbd',
+ password: 'tbd'
+ }
+ })
+ .then((res) => {
+ this.setState({ usersCollection: res.data });
+ })
+ .catch(function (error) {
+ console.log(error);
+ });
+ }
+
+ dataTable () {
+ return this.state.usersCollection.map((data, i) => {
+ return ;
+ });
+ }
+
+ render () {
+ return (
+
+
+
+
+
+ ID |
+ Extern |
+ Type |
+ Intern |
+ Name |
+ Short Name |
+ Valid From |
+ Valid To |
+
+
+ {this.dataTable()}
+
+
+
+ );
+ }
+}
diff --git a/fare-zones-table/src/index.js b/fare-zones-table/src/index.js
new file mode 100644
index 0000000..e4a13fe
--- /dev/null
+++ b/fare-zones-table/src/index.js
@@ -0,0 +1,6 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import FareZones from './component/fare-zones';
+import './style/main.less';
+
+ReactDOM.render(, document.getElementById('root'));
diff --git a/fare-zones-table/src/style/header.less b/fare-zones-table/src/style/header.less
new file mode 100644
index 0000000..0f63e05
--- /dev/null
+++ b/fare-zones-table/src/style/header.less
@@ -0,0 +1,3 @@
+.header {
+ background-color: #3d3d;
+}
diff --git a/fare-zones-table/src/style/main.less b/fare-zones-table/src/style/main.less
new file mode 100644
index 0000000..af82fe0
--- /dev/null
+++ b/fare-zones-table/src/style/main.less
@@ -0,0 +1,5 @@
+@import "header.less";
+@color: #f5adad;
+body {
+ background-color: @color;
+}
diff --git a/fare-zones-table/webpack.config.js b/fare-zones-table/webpack.config.js
new file mode 100644
index 0000000..e823e4f
--- /dev/null
+++ b/fare-zones-table/webpack.config.js
@@ -0,0 +1,50 @@
+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: [
+ {
+ test: /\.(js|jsx)$/,
+ exclude: /node_modules/,
+ use: [
+ //use babel-loader to transpile these file types
+ 'babel-loader',
+ //use esling-loader to hook JavaScript linter ESLint into Webpack
+ 'eslint-loader'
+ ]
+ },
+ {
+ test: /\.less$/,
+ use: [
+ 'style-loader',
+ 'css-loader',
+ //use less-loader so that LESS.js processes styles
+ 'less-loader',
+ ],
+ },
+ ]
+ },
+ plugins: [
+ new HtmlWebpackPlugin({
+ template: path.resolve('./index.html'),
+ }),
+ ]
+};