Minecraft/asys
Archived
0
Fork 0
Code Activity

Web interface: переход на модульный контент

Browse Source
This commit is contained in:
DmitriyMX
2017-03-12 14:25:42 +03:00
parent 5aabb6fe1a
commit dbcf9c9894
6 changed files with 125 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
webinterface/src/main/java/asys/webinterface/IndexHandler.java
View File

@@ -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}>", "<script src=\"/static/module.js\"></script>");
} catch (Exception e) {
throw new RuntimeException("Error load htmlTemplate", e);
}

46
webinterface/src/main/resources/app.js
View File

@@ -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)
)
));
}
});

1
webinterface/src/main/resources/index.html
View File

@@ -15,6 +15,7 @@
<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/components.js"></script>
<{moduleScript}>
<script src="/app.js"></script>
</head>
<body>

80
webinterface/src/main/resources/static/components.js
View File

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

105
webinterface/src/main/resources/static/module.js Normal file
View 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)))
}
}
});