Minecraft/asys
Archived
0
Fork 0
Code Activity

Переход на ReactJS

Browse Source
This commit is contained in:
DmitriyMX
2017-03-07 16:16:21 +03:00
parent bffd322c1d
commit 7ae13a7e69
3 changed files with 122 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
webinterface/build.gradle
View File

@@ -1,5 +1,5 @@
group = 'asys' group = 'asys'
version = '0.8-SNAPSHOT' version = '0.9-SNAPSHOT'
buildscript { buildscript {
repositories { repositories {

9
webinterface/src/main/resources/index.html
View File

@@ -1,14 +1,17 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="ru" ng-app="asysApp"> <html lang="ru">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>ASys: Web interface</title> <title>ASys: Web interface</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>
<script src="/static/fetch.js"></script>
<script src="/static/app.js"></script> <script src="/static/app.js"></script>
</head> </head>
<body> <body>
<h1>ASys: Web interface</h1> <h1>ASys: Web interface</h1>
<hr> <hr>
<bundle-list></bundle-list> <div id="app"></div>
<script>renderOnClient();</script>
</body> </body>
</html> </html>

160
webinterface/src/main/resources/static/app.js
View File

@@ -1,51 +1,121 @@
var app = angular.module('asysApp', []); const ce = React.createElement;
// filtres // --- COMPONENTS --- //
app.filter('stateFormat', function() {
return function(state) { var BundleTableRow = React.createClass({
if (state == 1) {return 'UNINSTALLED';} getInitialState: function(){return{
else if (state == 2) {return 'INSTALLED';} id: this.props.id,
else if (state == 4) {return 'RESOLVED';} name: this.props.name,
else if (state == 8) {return 'STARTING';} state: this.props.state,
else if (state == 16) {return 'STOPPING';} version: this.props.version,
else if (state == 32) {return 'ACTIVE';} lastModified: this.props.lastModified
}},
stateToStr: function(state) {
if (state == 1) {return 'UNINSTALLED'}
else if (state == 2) {return 'INSTALLED'}
else if (state == 4) {return 'RESOLVED'}
else if (state == 8) {return 'STARTING'}
else if (state == 16) {return 'STOPPING'}
else if (state == 32) {return 'ACTIVE'}
else {return 'UNKNOW('+state+')'} else {return 'UNKNOW('+state+')'}
},
bndUpd: function() {
var _this = this;
fetch('/ajax/bundles.json?id='+this.props.id+'&act=upd')
.then(function(resp){
resp.json().then(function(data){
_this.setState({
id: data.id,
name: data.name,
state: data.state,
version: data.version,
lastModified: data.lastModified
});
console.debug(data);
});
})
.catch(function(err){
console.error(err);
});
},
render: function(){return(
ce('tr', null,
ce('td', null, this.state.id),
ce('td', null, this.state.name),
ce('td', null, this.stateToStr(this.state.state)),
ce('td', null, this.state.version),
ce('td', null, this.state.lastModified),
ce('td', null,
ce('button', {onClick: this.bndUpd}, 'update')
)
)
)}
});
var BundleTable = React.createClass({
render: function(){return(
ce('table', {width: '100%'},
ce('thead', null,
ce('tr', null,
ce('th', null, 'ID'),
ce('th', null, 'Name'),
ce('th', null, 'State'),
ce('th', null, 'Version'),
ce('th', null, 'Last modified'),
ce('th', null, 'CTRL')
)
),
ce('tbody', null, this.props.children)
)
)}
});
// --- ROOT APP --- //
var App = React.createClass({
tableRows: [],
getInitialState: function(){return{
fLoad: true
}},
requestBundleList: function() {
var _this = this;
fetch('/ajax/bundles.json')
.then(function(response){
response.json().then(function(data){
console.debug(data);
data.forEach(function(bundle){
_this.tableRows.push(ce(BundleTableRow, {
id: bundle.id,
name: bundle.name,
state: bundle.state,
version: bundle.version,
lastModified: bundle.lastModified
}));
});
_this.setState({fLoad: false});
});
})
.catch(function(err){
console.error(err);
});
},
render: function(){
if (this.state.fLoad) {
this.requestBundleList();
return ce('span', null, 'loading...');
}
else {
return ce(BundleTable, null, this.tableRows);
}
} }
}); });
/* --- [bundle-list] --- */ // ================================================= //
app.component('bundleList', {
template:
'<table width="100%">' +
'<thead><tr>' +
'<th>ID</th><th>Name</th><th>State</th><th>Version</th><th>Last modified</th><th>CTRL</th>' +
'</tr></thead>' +
'<tbody>' +
'<tr ng-repeat="bundle in $ctrl.bundles">' +
'<td>{{bundle.id}}</td>' +
'<td>{{bundle.name}}</td>' +
'<td>{{bundle.state | stateFormat}}</td>' +
'<td>{{bundle.version}}</td>' +
'<td>{{bundle.lastModified | date:"dd/MM/yyyy HH:mm"}}</td>' +
'<td><button ng-click="$ctrl.bndUpd(bundle.id)">update</button></td>' +
'</tr>' +
'</tbody>' +
'</table>',
controller: function BundleListController($http) {
var self = this;
$http.get('/ajax/bundles.json').then(function(response) {
self.bundles = response.data;
});
this.bndUpd = function(bundleId){ function renderOnServer() {
$http.get('/ajax/bundles.json?id='+bundleId+'&act=upd').then(function(response){ return ReactDOMServer.renderToString(ce(App));
for(var i=0; i < self.bundles.length; i++) { }
if (self.bundles[i].id == bundleId) {
self.bundles[i] = response.data; function renderOnClient() {
break; ReactDOM.render(ce(App),document.getElementById('app'));
} }
}
});
};
}
});