MCSM: частичное обновление информации в интерфейсе

mcserver-manager/build.gradle

@@ -1,5 +1,5 @@
 group = 'asys'
-version = '0.8.3-SNAPSHOT'
+version = '0.8.4-SNAPSHOT'
 
 apply plugin: 'osgi'
 

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

@@ -54,6 +54,9 @@ var NvLineChart = React.createClass({
 });
 
 var ServerInfo = React.createClass({
+    getInitialState: function(){return {
+        title: this.props.title
+    }},
     render: function(){return(
         ce('div', null,
             ce('div', {className: 'pull-right'},
@@ -64,28 +67,17 @@ var ServerInfo = React.createClass({
                         ce('span', {className: 'glyphicon glyphicon-stop'}), nbsp+'остановка')
                 )
             ),
-            ce('h2', {style: {'margin-top': '0px'}}, this.props.title),
+            ce('h2', {style: {'margin-top': '0px'}}, this.state.title),
             this.props.children
         )
     )}
 });
 
 var ServerListItem = React.createClass({
-    requestServerInfo: function() {
-        fetch('/mcsmanager/servers.json?clientid='+this.props.title)
-            .then(function(response){
-                response.json().then(function(data){
-                    console.debug(data);
-                });
-            })
-            .catch(function(err){
-                console.error(err);
-            });
-    },
     render: function(){
         return(
             ce('a', {className: 'list-group-item clearfix' + (this.props.active ? ' active' : ''), href: '#',
-                     onClick: this.requestServerInfo},
+                     onClick: this.props.onClick},
                 ce('span', {style: {'padding-top': '15px'}},
                     ce('span', {className: 'glyphicon glyphicon-tasks'}),
                     nbsp,

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

@@ -27,6 +27,19 @@ var ContentModule = React.createClass({
                 console.error(err);
             });
     },
+    clickServerListItem: function(title) {
+        var _this = this;
+        fetch('/mcsmanager/servers.json?clientid='+title)
+            .then(function(response){
+                response.json().then(function(data){
+                    console.debug(data);
+                    _this.refs.serverInfo.setState({ title: data.name });
+                });
+            })
+            .catch(function(err){
+                console.error(err);
+            });
+    },
     getInitialState: function(){return{
         nvScriptReady: 0,
         serverList: []
@@ -56,14 +69,15 @@ var ContentModule = React.createClass({
     render: function(){
         var element;
         if (this.state.nvScriptReady === 3) {
+            var _this = this;
             var serverListItems = [];
             this.state.serverList.forEach(function(item){
-                serverListItems.push(ce(ServerListItem, {title: item}));
+                serverListItems.push(ce(ServerListItem, {title: item, onClick: _this.clickServerListItem.bind(_this, item)}));
             });
 
             element = ce('div', {className: 'row'},
                           ce('div', {className: 'col-md-4'}, ce(ServerList, null, serverListItems)),
-                          ce('div', {className: 'col-md-8'}, ce(ServerInfo, {title: 'Server 2 [skywars-1]'}, ce(NvLineChart)))
+                          ce('div', {className: 'col-md-8'}, ce(ServerInfo, {title: 'Server 2 [skywars-1]', ref: "serverInfo"}, ce(NvLineChart)))
                       );
         } else if (this.state.nvScriptReady < 0) {
             element = ce('span', null, 'error');