diff --git a/webinterface/build.gradle b/webinterface/build.gradle
index 0acd41d..68fd2d5 100644
--- a/webinterface/build.gradle
+++ b/webinterface/build.gradle
@@ -1,5 +1,5 @@
group = 'asys'
-version = '0.11-SNAPSHOT'
+version = '0.12-SNAPSHOT'
buildscript {
repositories {
diff --git a/webinterface/src/main/java/asys/webinterface/IndexHandler.java b/webinterface/src/main/java/asys/webinterface/IndexHandler.java
index 649a6ec..a248bce 100644
--- a/webinterface/src/main/java/asys/webinterface/IndexHandler.java
+++ b/webinterface/src/main/java/asys/webinterface/IndexHandler.java
@@ -18,7 +18,8 @@ public class IndexHandler implements HttpHandler {
public IndexHandler() {
try {
InputStream inputStream = getClass().getResourceAsStream("/index.html");
- htmlTemplate = IOUtils.toString(inputStream, "UTF-8");
+ htmlTemplate = IOUtils.toString(inputStream, "UTF-8")
+ .replace("<{moduleScript}>", "");
} catch (Exception e) {
throw new RuntimeException("Error load htmlTemplate", e);
}
diff --git a/webinterface/src/main/resources/app.js b/webinterface/src/main/resources/app.js
index 0e93bc3..19e6808 100644
--- a/webinterface/src/main/resources/app.js
+++ b/webinterface/src/main/resources/app.js
@@ -1,47 +1,13 @@
// --- 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('div', null,
- ce(Navbar, {items: [<{mainMenuItems}>]}),
- ce('div', {className: 'container', style: {marginTop: '60px'}},
- ce(Panel, {title: 'Модули'},
- ce(BundleTable, null, this.tableRows)
- )
- )
- ));
- }
+ return (ce('div', null,
+ ce(Navbar, {items: [<{mainMenuItems}>]}),
+ ce('div', {className: 'container', style: {marginTop: '60px'}},
+ ce(ContentModule)
+ )
+ ));
}
});
diff --git a/webinterface/src/main/resources/index.html b/webinterface/src/main/resources/index.html
index a15b91e..28d8faa 100644
--- a/webinterface/src/main/resources/index.html
+++ b/webinterface/src/main/resources/index.html
@@ -15,6 +15,7 @@
+ <{moduleScript}>
diff --git a/webinterface/src/main/resources/static/components.js b/webinterface/src/main/resources/static/components.js
index c64e198..36e9617 100644
--- a/webinterface/src/main/resources/static/components.js
+++ b/webinterface/src/main/resources/static/components.js
@@ -51,11 +51,14 @@ var Panel = React.createClass({
if (this.props.colored) {
colored = this.props.colored;
}
+
+ elements = [ce('div', {className: 'panel-body'}, this.props.children)];
+ if (this.props.title) {
+ elements.unshift(ce('div', {className: 'panel-heading'}, this.props.title));
+ }
+
return(
- ce('div', {className: 'panel panel-'+colored},
- ce('div', {className: 'panel-heading'}, this.props.title),
- ce('div', {className: 'panel-body'}, this.props.children)
- )
+ ce('div', {className: 'panel panel-'+colored}, elements)
)
}
});
@@ -82,71 +85,8 @@ var Button = React.createClass({
// -- Разное -- //
-var BundleTable = React.createClass({
- render: function(){return(
- ce('table', {className: 'table table-hover', width: '100%', style: {'margin-bottom': '0'}},
- ce('thead', null,
- ce('tr', null,
- ce('th', {className: 'col-xs-1'}, '#'),
- ce('th', null, 'Название'),
- ce('th', {className: 'hidden-xs'}, 'Версия'),
- ce('th', null, 'Статус'),
- ce('th', {className: 'col-xs-1'}, nbsp)
- )
- ),
- ce('tbody', null, this.props.children)
- )
+var ContentModule = React.createClass({
+ render:function(){return(
+ ce(Panel, null, 'no module content')
)}
});
-
-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 = {'vertical-align': 'middle'};
- return(
- ce('tr', null,
- ce('td', {style: vertAlign}, this.state.id),
- ce('td', {style: vertAlign}, this.state.name),
- ce('td', {className: 'hidden-xs', style: vertAlign}, this.state.version),
- ce('td', {style: vertAlign}, this.stateToStr(this.state.state)),
- ce('td', {style: vertAlign},
- ce(Button, {colored: 'danger', btnSize: 'xs', onClick: this.bndUpd}, 'update')
- )
- )
- )
- }
-});
diff --git a/webinterface/src/main/resources/static/module.js b/webinterface/src/main/resources/static/module.js
new file mode 100644
index 0000000..ab70c03
--- /dev/null
+++ b/webinterface/src/main/resources/static/module.js
@@ -0,0 +1,105 @@
+var BundleTable = React.createClass({
+ render: function(){return(
+ ce('table', {className: 'table table-hover', width: '100%', style: {'margin-bottom': '0'}},
+ ce('thead', null,
+ ce('tr', null,
+ ce('th', {className: 'col-xs-1'}, '#'),
+ ce('th', null, 'Название'),
+ ce('th', {className: 'hidden-xs'}, 'Версия'),
+ ce('th', null, 'Статус'),
+ ce('th', {className: 'col-xs-1'}, 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 = {'vertical-align': 'middle'};
+ return(
+ ce('tr', null,
+ ce('td', {style: vertAlign}, this.state.id),
+ ce('td', {style: vertAlign}, this.state.name),
+ ce('td', {className: 'hidden-xs', style: vertAlign}, this.state.version),
+ ce('td', {style: vertAlign}, this.stateToStr(this.state.state)),
+ ce('td', {style: vertAlign},
+ ce(Button, {colored: 'danger', btnSize: 'xs', onClick: this.bndUpd}, 'update')
+ )
+ )
+ )
+ }
+});
+
+var ContentModule = 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(Panel, {title: 'Модули'}, ce(BundleTable, null, this.tableRows)))
+ }
+ }
+});