Переход на ReactJS
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
group = 'asys'
|
||||
version = '0.8-SNAPSHOT'
|
||||
version = '0.9-SNAPSHOT'
|
||||
|
||||
buildscript {
|
||||
repositories {
|
||||
|
||||
@@ -1,14 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru" ng-app="asysApp">
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<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>
|
||||
</head>
|
||||
<body>
|
||||
<h1>ASys: Web interface</h1>
|
||||
<hr>
|
||||
<bundle-list></bundle-list>
|
||||
<div id="app"></div>
|
||||
<script>renderOnClient();</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,51 +1,121 @@
|
||||
var app = angular.module('asysApp', []);
|
||||
const ce = React.createElement;
|
||||
|
||||
// filtres
|
||||
app.filter('stateFormat', function() {
|
||||
return 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';}
|
||||
// --- COMPONENTS --- //
|
||||
|
||||
var BundleTableRow = React.createClass({
|
||||
getInitialState: function(){return{
|
||||
id: this.props.id,
|
||||
name: this.props.name,
|
||||
state: this.props.state,
|
||||
version: this.props.version,
|
||||
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+')'}
|
||||
},
|
||||
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){
|
||||
$http.get('/ajax/bundles.json?id='+bundleId+'&act=upd').then(function(response){
|
||||
for(var i=0; i < self.bundles.length; i++) {
|
||||
if (self.bundles[i].id == bundleId) {
|
||||
self.bundles[i] = response.data;
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
}
|
||||
});
|
||||
function renderOnServer() {
|
||||
return ReactDOMServer.renderToString(ce(App));
|
||||
}
|
||||
|
||||
function renderOnClient() {
|
||||
ReactDOM.render(ce(App),document.getElementById('app'));
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user