MCSM:WebConsole: консоль активна при не активной вкладке

mcserver-manager/src/main/resources/components.js

@@ -55,7 +55,13 @@ var Tabs = React.createClass({
                 ce('a', {href: '#tab'+(i+1), onClick: _this.onTabClick.bind(_this, i)}, title)));
         });
 
-        var showElement = this.props.children[this.state.activeTab];
+        var showElement = this.props.children.map(function(child, i){
+            return ce('div', (i !== _this.state.activeTab ? {style: {display: 'none'}} : null), child);
+        });
+
+        if (this.props.stateCallback !== null) {
+            this.props.stateCallback(this.state.activeTab);
+        }
 
         return(ce('div', null,
             ce('ul', {className: 'nav nav-tabs', id: 'tabs'}, tabsElm),
@@ -66,35 +72,45 @@ var Tabs = React.createClass({
 
 var WebConsole = React.createClass({
     ws: null,
+    connect: function(){
+        if (this.ws !== null) return;
+        var _this = this;
+
+        this.ws = new WebSocket("ws://127.0.0.1:8770"); //FIXME указывать ip:port из настроек
+        this.ws.onopen = function(){ console.debug('WS: open...'); };
+        this.ws.onclose = function(){ console.debug('WS: close...'); };
+        this.ws.onerror = function(e){ console.debug('WS: error'); console.error(e); };
+        this.ws.onmessage = function(event){
+            _this.setState({ lines: _this.state.lines.concat([event.data]) });
+        };
+    },
+    disconnect: function() {
+        if (this.ws === null) return;
+        this.ws.close();
+        this.ws = null;
+    },
     /*--------------------*/
     getInitialState: function(){return{
         lines: []
     }},
     render: function(){
         return(
-            ce('div', {id: 'webconsole', ref: 'webconsole'}, this.state.lines.map(function(line){ return ce('p', null, line); }))
+            ce('div', {id: 'webconsole'},
+                this.state.lines.map(function(line){ return ce('p', null, line); }))
         )
     },
-    componentDidMount: function(){
-        var _this = this;
-
-        this.ws = new WebSocket("ws://127.0.0.1:8770"); //FIXME указывать ip:port из настроек
-        this.ws.onopen = function(){ console.debug('WS: open...'); };
-        this.ws.onclose = function(){ console.debug('WS: close...'); };
-        this.ws.onmessage = function(event){
-            console.debug('WS: message: '+event.data);
-            _this.setState({ lines: _this.state.lines.concat([event.data]) });
-        };
-    },
-    componentDidUpdate: function() {
-        // this.refs.webconsole.scrollTop = this.refs.webconsole.scrollHeight;
-    },
     componentWillUnmount: function(){
-        this.ws.close();
+        this.disconnect();
     }
 });
 
 var ServerInfo = React.createClass({
+    tabStateWebConsole: function(state) {
+        if (state === 1) {
+            this.refs.webconsole.connect();
+        }
+    },
+    /*--------------------*/
     getInitialState: function(){return {
         title: null,
         data: []
@@ -106,14 +122,14 @@ var ServerInfo = React.createClass({
             return(
                 ce('div', null,
                     ce('h2', {style: {'margin-top': '0px'}}, this.state.title),
-                    ce(Tabs, {tabs: ['Онлайн', 'Консоль']},
+                    ce(Tabs, {tabs: ['Онлайн', 'Консоль'], stateCallback: this.tabStateWebConsole},
                         ce(NvLineChart, {datum: [{
                             key: 'Online players',
                             color: '#37d668',
                             area: true,
                             values: this.state.data
                         }]}),
-                        ce(WebConsole)
+                        ce(WebConsole, {ref: 'webconsole'})
                     )
                 )
             )