From 1085688d1c1092fc192810b852223da5e0892b5e Mon Sep 17 00:00:00 2001
From: DmitriyMX <dimon550@gmail.com>
Date: Tue, 9 May 2017 19:52:43 +0300
Subject: [PATCH] =?UTF-8?q?MCSM:Tabs:=20=D0=BF=D0=B5=D1=80=D0=B5=D0=BA?=
 =?UTF-8?q?=D0=BB=D1=8E=D1=87=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=B2=D0=BA=D0=BB?=
 =?UTF-8?q?=D0=B0=D0=B4=D0=BE=D0=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/main/resources/components.js          | 37 +++++++++++++------
 1 file changed, 26 insertions(+), 11 deletions(-)

diff --git a/mcserver-manager/src/main/resources/components.js b/mcserver-manager/src/main/resources/components.js
index d68238c..40bd660 100644
--- a/mcserver-manager/src/main/resources/components.js
+++ b/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(NvLineChart, {datum: [{
-                        key: 'Online players',
-                        color: '#37d668',
-                        area: true,
-                        values: this.state.data
-                    }]})
+                    ce(Tabs, {tabs: ['Онлайн', 'Консоль']},
+                        ce(NvLineChart, {datum: [{
+                            key: 'Online players',
+                            color: '#37d668',
+                            area: true,
+                            values: this.state.data
+                        }]}),
+                        ce('p', null, 'fake console element')
+                    )
                 )
             )
         }