From 2519d233dc1de41092a5d038d43aaa6861baebae Mon Sep 17 00:00:00 2001 From: DmitriyMX Date: Wed, 8 Mar 2017 15:23:58 +0300 Subject: [PATCH] =?UTF-8?q?Web=20interface:=20=D1=81=D1=82=D0=B8=D0=BB?= =?UTF-8?q?=D0=B8=D0=B7=D0=B0=D1=86=D0=B8=D1=8F=20Bootstrap?= 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 | 10 +- webinterface/src/main/resources/static/app.js | 81 +--------- .../src/main/resources/static/components.js | 138 ++++++++++++++++++ 4 files changed, 153 insertions(+), 78 deletions(-) create mode 100644 webinterface/src/main/resources/static/components.js diff --git a/webinterface/build.gradle b/webinterface/build.gradle index 72179e8..c905167 100644 --- a/webinterface/build.gradle +++ b/webinterface/build.gradle @@ -1,5 +1,5 @@ group = 'asys' -version = '0.9-SNAPSHOT' +version = '0.10-SNAPSHOT' buildscript { repositories { diff --git a/webinterface/src/main/resources/index.html b/webinterface/src/main/resources/index.html index 7acdfa4..965b394 100644 --- a/webinterface/src/main/resources/index.html +++ b/webinterface/src/main/resources/index.html @@ -3,14 +3,16 @@ ASys: Web interface - - + + + + + + -

ASys: Web interface

-
diff --git a/webinterface/src/main/resources/static/app.js b/webinterface/src/main/resources/static/app.js index 1b198cc..4447e84 100644 --- a/webinterface/src/main/resources/static/app.js +++ b/webinterface/src/main/resources/static/app.js @@ -1,75 +1,3 @@ -const ce = React.createElement; - -// --- 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({ @@ -105,7 +33,14 @@ var App = React.createClass({ return ce('span', null, 'loading...'); } else { - return ce(BundleTable, null, this.tableRows); + return (ce('div', null, + ce(Navbar), + ce('div', {className: 'container', style: {marginTop: '60px'}}, + ce(Panel, {title: 'Модули'}, + ce(BundleTable, null, this.tableRows) + ) + ) + )); } } }); diff --git a/webinterface/src/main/resources/static/components.js b/webinterface/src/main/resources/static/components.js new file mode 100644 index 0000000..1a64af3 --- /dev/null +++ b/webinterface/src/main/resources/static/components.js @@ -0,0 +1,138 @@ +const ce = React.createElement; +const nbsp = '\u00a0'; + +// -- Bootstrap -- // + +var Navbar = React.createClass({ + render: function(){return( + ce('nav', {className: 'navbar navbar-default navbar-fixed-top'}, + ce('div', {className: 'container'}, + ce('div', {className: 'navbar-header'}, + ce('button', { + type: 'button', + className: 'navbar-toggle collapsed', + 'data-toggle': 'collapse', + 'data-target': '#bs-example-navbar-collapse-1', + 'aria-expanded': 'false' + }, + ce('span', {className: 'icon-bar'}), + ce('span', {className: 'icon-bar'}), + ce('span', {className: 'icon-bar'}) + ), + ce('a', {className: 'navbar-brand', href: '#'}, 'ASys') + ), + ce('div', {className: 'collapse navbar-collapse', id: 'bs-example-navbar-collapse-1'}, + ce('ul', {className: 'nav navbar-nav'}, + ce('li', {className: 'active'}, ce('a', {href: '#'}, 'Модули')) + ) + ) + ) + ) + )} +}); + +var Panel = React.createClass({ + render: function(){ + colored = 'default'; + if (this.props.colored) { + colored = this.props.colored; + } + return( + ce('div', {className: 'panel panel-'+colored}, + ce('div', {className: 'panel-heading'}, this.props.title), + ce('div', {className: 'panel-body'}, this.props.children) + ) + ) + } +}); + +var Button = React.createClass({ + render: function(){ + var colored = 'default'; + var btnSize = ''; + + if (this.props.colored) { + colored = this.props.colored; + } + if (this.props.btnSize) { + btnSize = 'btn-'+this.props.btnSize; + } + + return ( + ce('button', {className: 'btn btn-'+colored+' '+btnSize, + onClick: this.props.onClick}, + this.props.children) + ) + } +}); + +// -- Разное -- // + +var BundleTable = React.createClass({ + render: function(){return( + ce('table', {className: 'table table-hover', width: '100%'}, + ce('thead', null, + ce('tr', null, + ce('th', {style: {'width':'2%'}}, '#'), + ce('th', null, 'Название'), + ce('th', null, 'Версия'), + ce('th', null, 'Статус'), + ce('th', {style: {'width':'5%'}}, nbsp) + ) + ), + ce('tbody', null, this.props.children) + ) + )} +}); + +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(){ + vertAlign = {style: {'vertical-align': 'middle'}}; + return( + ce('tr', null, + ce('td', vertAlign, this.state.id), + ce('td', vertAlign, this.state.name), + ce('td', vertAlign, this.state.version), + ce('td', vertAlign, this.stateToStr(this.state.state)), + ce('td', vertAlign, + ce(Button, {colored: 'danger', btnSize: 'xs', onClick: this.bndUpd}, 'update') + ) + ) + ) + } +});