Minecraft/asys
Archived
0
Fork 0
Code Activity

Web interface: стилизация Bootstrap

Browse Source
This commit is contained in:
DmitriyMX
2017-03-08 15:23:58 +03:00
parent faac33b7cd
commit 2519d233dc
4 changed files with 153 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
webinterface/build.gradle
View File

@@ -1,5 +1,5 @@
group = 'asys'
version = '0.9-SNAPSHOT'
version = '0.10-SNAPSHOT'
buildscript {
repositories {

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

@@ -3,14 +3,16 @@
<head>
<meta charset="utf-8">
<title>ASys: Web interface</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>
<link rel="stylesheet" href="https://bootswatch.com/yeti/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.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/components.js"></script>
<script src="/static/app.js"></script>
</head>
<body>
<h1>ASys: Web interface</h1>
<hr>
<div id="app"></div>
<script>renderOnClient();</script>
</body>

81
webinterface/src/main/resources/static/app.js
View File

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

138
webinterface/src/main/resources/static/components.js Normal file
View File

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