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 ( +
+
+ + + + + + + + + + + + + + {this.dataTable()} +
IDExternTypeInternNameShort NameValid FromValid To
+
+
+ ); + } +} 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'), + }), + ] +};