MCSM:Tabs: переключение вкладок

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

@@ -33,15 +33,28 @@ var NvLineChart = React.createClass({
 });
 
 var Tabs = React.createClass({
+    onTabClick: function(idx){
+        this.setState({ activeTab: idx });
+    },
+    /*--------------------*/
+    getInitialState: function(){return{
+        activeTab: 0
+    }},
     render: function(){
+        var _this = this;
+
         var tabsElm = [];
         this.props.tabs.forEach(function(title, i){
-            tabsElm.push(ce('li', (i === 0 ? {className: 'active'} : null), ce('a', {href: '#'}, title)));
+            tabsElm.push(ce('li', (i === _this.state.activeTab ? {className: 'active'} : null),
+                ce('a', {href: '#tab'+(i+1), onClick: _this.onTabClick.bind(_this, i)}, title)));
         });
 
-        return(
-            ce('ul', {className: 'nav nav-tabs'}, tabsElm)
-        )
+        var showElement = this.props.children[this.state.activeTab];
+
+        return(ce('div', null,
+            ce('ul', {className: 'nav nav-tabs', id: 'tabs'}, tabsElm),
+            showElement
+        ))
     }
 });
 
@@ -57,13 +70,15 @@ var ServerInfo = React.createClass({
             return(
                 ce('div', null,
                     ce('h2', {style: {'margin-top': '0px'}}, this.state.title),
-                    ce(Tabs, {tabs: ['Онлайн1', 'Консоль2']}),
+                    ce(Tabs, {tabs: ['Онлайн', 'Консоль']},
                         ce(NvLineChart, {datum: [{
                             key: 'Online players',
                             color: '#37d668',
                             area: true,
                             values: this.state.data
-                    }]})
+                        }]}),
+                        ce('p', null, 'fake console element')
+                    )
                 )
             )
         }