feat(table-dede-rt): commit base
This commit is contained in:
parent
878416e2ba
commit
46bf6af532
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"presets": [
|
||||
"@babel/preset-env",
|
||||
"@babel/preset-react"
|
||||
]
|
||||
}
|
|
@ -0,0 +1,13 @@
|
|||
{
|
||||
"parser": "babel-eslint",
|
||||
"extends": "react",
|
||||
"env": {
|
||||
"browser": true,
|
||||
"node": true
|
||||
},
|
||||
"settings": {
|
||||
"react": {
|
||||
"version": "detect"
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"semi": true,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "es5"
|
||||
}
|
|
@ -0,0 +1 @@
|
|||
[source](git@github.com:dancesWithCycles/react-axios-tutorial.git)
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>table</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,40 @@
|
|||
{
|
||||
"name": "table",
|
||||
"version": "1.0.0",
|
||||
"description": "example showing 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"
|
||||
}
|
||||
}
|
|
@ -0,0 +1,25 @@
|
|||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
class FareZonesTable extends Component {
|
||||
render () {
|
||||
return (
|
||||
<tr>
|
||||
<td>{this.props.obj.id}</td>
|
||||
<td>{this.props.obj.extern}</td>
|
||||
<td>{this.props.obj.type}</td>
|
||||
<td>{this.props.obj.intern}</td>
|
||||
<td>{this.props.obj.name}</td>
|
||||
<td>{this.props.obj.shortName}</td>
|
||||
<td>{this.props.obj.validFrom}</td>
|
||||
<td>{this.props.obj.validUnit}</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
FareZonesTable.propTypes = {
|
||||
obj: PropTypes.object
|
||||
};
|
||||
|
||||
export default FareZonesTable;
|
|
@ -0,0 +1,62 @@
|
|||
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: 'admin',
|
||||
password: '34106144-c645-4724-95d4-8512df16ae7e'
|
||||
}
|
||||
})
|
||||
.then((res) => {
|
||||
this.setState({ usersCollection: res.data });
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
|
||||
dataTable () {
|
||||
return this.state.usersCollection.map((data, i) => {
|
||||
return <FareZonesTable obj={data} key={i} />;
|
||||
});
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
<div className="wrapper-users">
|
||||
<div className="container">
|
||||
<table className="table table-striped table-dark">
|
||||
<thead className="thead-dark">
|
||||
<tr>
|
||||
<td>ID</td>
|
||||
<td>Extern</td>
|
||||
<td>Type</td>
|
||||
<td>Intern</td>
|
||||
<td>Name</td>
|
||||
<td>Short Name</td>
|
||||
<td>Valid From</td>
|
||||
<td>Valid To</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>{this.dataTable()}</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
|
@ -0,0 +1,30 @@
|
|||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
class Table extends Component {
|
||||
render () {
|
||||
return (
|
||||
<tr>
|
||||
<td>{this.props.obj.uuid}</td>
|
||||
<td>{this.props.obj.lat}</td>
|
||||
<td>{this.props.obj.lon}</td>
|
||||
<td>{this.props.obj.ts}</td>
|
||||
<td>{this.props.obj.alias}</td>
|
||||
<td>{this.props.obj.vehicle}</td>
|
||||
<td>{this.props.obj.lable}</td>
|
||||
<td>{this.props.obj.licensePlate}</td>
|
||||
<td>{this.props.obj.tripId}</td>
|
||||
<td>{this.props.obj.routeId}</td>
|
||||
<td>{this.props.obj.directionId}</td>
|
||||
<td>{this.props.obj.startTime}</td>
|
||||
<td>{this.props.obj.startDate}</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Table.propTypes = {
|
||||
obj: PropTypes.object
|
||||
};
|
||||
|
||||
export default Table;
|
|
@ -0,0 +1,61 @@
|
|||
import React, { Component } from 'react';
|
||||
import axios from 'axios';
|
||||
import Table from './table';
|
||||
|
||||
export default class Vehicles extends Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
this.state = { usersCollection: [] };
|
||||
}
|
||||
|
||||
componentDidMount () {
|
||||
axios.defaults.baseURL = 'http://192.168.22.16:42001';
|
||||
axios.defaults.headers.get['Content-Type'] =
|
||||
'application/json;charset=utf-8';
|
||||
axios.defaults.headers.get['Access-Control-Allow-Origin'] = '*';
|
||||
|
||||
axios
|
||||
.get('/', {})
|
||||
.then((res) => {
|
||||
this.setState({ usersCollection: res.data });
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
|
||||
dataTable () {
|
||||
return this.state.usersCollection.map((data, i) => {
|
||||
return <Table obj={data} key={i} />;
|
||||
});
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
<div className="wrapper-users">
|
||||
<div className="container">
|
||||
<table className="table table-striped table-dark">
|
||||
<thead className="thead-dark">
|
||||
<tr>
|
||||
<td>uuid</td>
|
||||
<td>lat</td>
|
||||
<td>lon</td>
|
||||
<td>ts</td>
|
||||
<td>alias</td>
|
||||
<td>vehicle</td>
|
||||
<td>label</td>
|
||||
<td>licensePlate</td>
|
||||
<td>tripId</td>
|
||||
<td>routeId</td>
|
||||
<td>directionId</td>
|
||||
<td>startTime</td>
|
||||
<td>startDate</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>{this.dataTable()}</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
|
@ -0,0 +1,6 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import Vehicles from './component/vehicles';
|
||||
import './style/main.less';
|
||||
|
||||
ReactDOM.render(<Vehicles />, document.getElementById('root'));
|
|
@ -0,0 +1,3 @@
|
|||
.header {
|
||||
background-color: #3d3d;
|
||||
}
|
|
@ -0,0 +1,5 @@
|
|||
@import "header.less";
|
||||
@color: #f5adad;
|
||||
body {
|
||||
background-color: @color;
|
||||
}
|
|
@ -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'),
|
||||
}),
|
||||
]
|
||||
};
|
Loading…
Reference in New Issue