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') + ) ) ) }