diff --git a/mcserver-manager/src/main/resources/components.js b/mcserver-manager/src/main/resources/components.js index 5d5307d..208f84a 100644 --- a/mcserver-manager/src/main/resources/components.js +++ b/mcserver-manager/src/main/resources/components.js @@ -52,3 +52,15 @@ var NvLineChart = React.createClass({ }); } }); + +var ServerList = React.createClass({ + render: function(){return( + ce('div', {className: 'list-group'}, + ce('button', {className: 'list-group-item', type: 'button'}, 'Server 1'), + ce('button', {className: 'list-group-item', type: 'button'}, 'Server 2'), + ce('button', {className: 'list-group-item', type: 'button'}, 'Server 3'), + ce('button', {className: 'list-group-item', type: 'button'}, 'Server 4'), + ce('button', {className: 'list-group-item', type: 'button'}, 'Server 5') + ) + )} +}); diff --git a/mcserver-manager/src/main/resources/module.js b/mcserver-manager/src/main/resources/module.js index 39acd04..ef5ed8a 100644 --- a/mcserver-manager/src/main/resources/module.js +++ b/mcserver-manager/src/main/resources/module.js @@ -20,34 +20,38 @@ var ContentModule = React.createClass({ componentWillMount: function(){ var _this = this; - this.loadScript("/mcsmanager/components.js"); - this.loadScript( - "https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js", + this.loadScript("/mcsmanager/components.js", + function(){ _this.setState({nvScriptReady: _this.state.nvScriptReady+1}); console.debug('components - ok'); }, + function(){ _this.setState({nvScriptReady: -5}); console.debug('components - error'); }, + ); + + this.loadScript("https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js", function(){ + _this.setState({nvScriptReady: _this.state.nvScriptReady+1}); console.info('d3 - ok'); _this.loadStyle("https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.min.css"); - _this.loadScript( - "https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.js", - function(){ _this.setState({nvScriptReady: 1}); console.info('nv ok'); }, - function(){ _this.setState({nvScriptReady: 2}); console.error('nv error load'); } + _this.loadScript("https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.js", + function(){ _this.setState({nvScriptReady: _this.state.nvScriptReady+1}); console.info('nv - ok'); }, + function(){ _this.setState({nvScriptReady: -5}); console.error('nv - error'); } ); }, - function(){ _this.setState({nvScriptReady: 2}); console.error('d3 error load'); } + function(){ _this.setState({nvScriptReady: -5}); console.error('d3 - error'); } ); }, render: function(){ var element; - if (this.state.nvScriptReady == 1) { - element = ce(NvLineChart); - } else if (this.state.nvScriptReady == 2) { + if (this.state.nvScriptReady == 3) { + element = ce('div', {className: 'row'}, + ce('div', {className: 'col-md-4'}, ce(ServerList)), + ce('div', {className: 'col-md-8'}, ce(NvLineChart)) + ); + } else if (this.state.nvScriptReady < 0) { element = ce('span', null, 'error'); } else { element = ce('span', null, 'loading...'); } return( - ce(Panel, {title: 'MC Server Manager'}, - element - ) + ce(Panel, {title: 'Серверы'}, element) ) } });