Web interface: переход на модульный контент
This commit is contained in:
@@ -1,5 +1,5 @@
|
|||||||
group = 'asys'
|
group = 'asys'
|
||||||
version = '0.11-SNAPSHOT'
|
version = '0.12-SNAPSHOT'
|
||||||
|
|
||||||
buildscript {
|
buildscript {
|
||||||
repositories {
|
repositories {
|
||||||
|
|||||||
@@ -18,7 +18,8 @@ public class IndexHandler implements HttpHandler {
|
|||||||
public IndexHandler() {
|
public IndexHandler() {
|
||||||
try {
|
try {
|
||||||
InputStream inputStream = getClass().getResourceAsStream("/index.html");
|
InputStream inputStream = getClass().getResourceAsStream("/index.html");
|
||||||
htmlTemplate = IOUtils.toString(inputStream, "UTF-8");
|
htmlTemplate = IOUtils.toString(inputStream, "UTF-8")
|
||||||
|
.replace("<{moduleScript}>", "<script src=\"/static/module.js\"></script>");
|
||||||
} catch (Exception e) {
|
} catch (Exception e) {
|
||||||
throw new RuntimeException("Error load htmlTemplate", e);
|
throw new RuntimeException("Error load htmlTemplate", e);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,47 +1,13 @@
|
|||||||
// --- ROOT APP --- //
|
// --- ROOT APP --- //
|
||||||
|
|
||||||
var App = React.createClass({
|
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(){
|
render: function(){
|
||||||
if (this.state.fLoad) {
|
return (ce('div', null,
|
||||||
this.requestBundleList();
|
ce(Navbar, {items: [<{mainMenuItems}>]}),
|
||||||
return ce('span', null, 'loading...');
|
ce('div', {className: 'container', style: {marginTop: '60px'}},
|
||||||
}
|
ce(ContentModule)
|
||||||
else {
|
)
|
||||||
return (ce('div', null,
|
));
|
||||||
ce(Navbar, {items: [<{mainMenuItems}>]}),
|
|
||||||
ce('div', {className: 'container', style: {marginTop: '60px'}},
|
|
||||||
ce(Panel, {title: 'Модули'},
|
|
||||||
ce(BundleTable, null, this.tableRows)
|
|
||||||
)
|
|
||||||
)
|
|
||||||
));
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -15,6 +15,7 @@
|
|||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>
|
||||||
<script src="/static/fetch.js"></script>
|
<script src="/static/fetch.js"></script>
|
||||||
<script src="/static/components.js"></script>
|
<script src="/static/components.js"></script>
|
||||||
|
<{moduleScript}>
|
||||||
<script src="/app.js"></script>
|
<script src="/app.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
@@ -51,11 +51,14 @@ var Panel = React.createClass({
|
|||||||
if (this.props.colored) {
|
if (this.props.colored) {
|
||||||
colored = 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(
|
return(
|
||||||
ce('div', {className: 'panel panel-'+colored},
|
ce('div', {className: 'panel panel-'+colored}, elements)
|
||||||
ce('div', {className: 'panel-heading'}, this.props.title),
|
|
||||||
ce('div', {className: 'panel-body'}, this.props.children)
|
|
||||||
)
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@@ -82,71 +85,8 @@ var Button = React.createClass({
|
|||||||
|
|
||||||
// -- Разное -- //
|
// -- Разное -- //
|
||||||
|
|
||||||
var BundleTable = React.createClass({
|
var ContentModule = React.createClass({
|
||||||
render: function(){return(
|
render:function(){return(
|
||||||
ce('table', {className: 'table table-hover', width: '100%', style: {'margin-bottom': '0'}},
|
ce(Panel, null, 'no module content')
|
||||||
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')
|
|
||||||
)
|
|
||||||
)
|
|
||||||
)
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|||||||
105
webinterface/src/main/resources/static/module.js
Normal file
105
webinterface/src/main/resources/static/module.js
Normal file
@@ -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)))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user