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

2017-03-08 15:23:58 +03:00
parent faac33b7cd
commit 2519d233dc
4 changed files with 153 additions and 78 deletions
--- a/webinterface/src/main/resources/static/components.js
+++ 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')
+                )
+            )
+        )
+    }
+});