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')
+ )
+ )
+ )
+ }
+});