From 7ae13a7e698e6691ee42491d1c85bddff7d08235 Mon Sep 17 00:00:00 2001 From: DmitriyMX Date: Tue, 7 Mar 2017 16:16:21 +0300 Subject: [PATCH] =?UTF-8?q?=D0=9F=D0=B5=D1=80=D0=B5=D1=85=D0=BE=D0=B4=20?= =?UTF-8?q?=D0=BD=D0=B0=20ReactJS?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- webinterface/build.gradle | 2 +- webinterface/src/main/resources/index.html | 9 +- webinterface/src/main/resources/static/app.js | 160 +++++++++++++----- 3 files changed, 122 insertions(+), 49 deletions(-) diff --git a/webinterface/build.gradle b/webinterface/build.gradle index a4f3d78..72179e8 100644 --- a/webinterface/build.gradle +++ b/webinterface/build.gradle @@ -1,5 +1,5 @@ group = 'asys' -version = '0.8-SNAPSHOT' +version = '0.9-SNAPSHOT' buildscript { repositories { diff --git a/webinterface/src/main/resources/index.html b/webinterface/src/main/resources/index.html index 914f2dd..7acdfa4 100644 --- a/webinterface/src/main/resources/index.html +++ b/webinterface/src/main/resources/index.html @@ -1,14 +1,17 @@ - + ASys: Web interface - + + +

ASys: Web interface

- +
+ \ No newline at end of file diff --git a/webinterface/src/main/resources/static/app.js b/webinterface/src/main/resources/static/app.js index a83812c..1b198cc 100644 --- a/webinterface/src/main/resources/static/app.js +++ b/webinterface/src/main/resources/static/app.js @@ -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: - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '
IDNameStateVersionLast modifiedCTRL
{{bundle.id}}{{bundle.name}}{{bundle.state | stateFormat}}{{bundle.version}}{{bundle.lastModified | date:"dd/MM/yyyy HH:mm"}}
', - 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; - } - } - }); - }; - } -}); \ No newline at end of file +function renderOnServer() { + return ReactDOMServer.renderToString(ce(App)); +} + +function renderOnClient() { + ReactDOM.render(ce(App),document.getElementById('app')); +}