небольшие корректировки в javascript

mcserver-manager/build.gradle

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

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

@@ -1,24 +1,22 @@
+/**
+ * График.
+ * <code>this.props.datum</code> - данные в формате D3
+ */
 var NvLineChart = React.createClass({
     chart: null,
     d3ChartData: null,
+    /*--------------------*/
     render: function(){return(
         ce('div', {id: 'chart'}, ce('svg', {style: {'height': '500px'}}))
     )},
     componentDidMount: function() {
-        console.debug('nvd3: componentDidMount');
         var _this = this;
-
         nv.addGraph(function() {
             _this.chart = nv.models.lineChart().useInteractiveGuideline(true);
             _this.chart.xAxis.axisLabel('Time').tickFormat(function(d){ return d3.time.format('%X')(new Date(d)); });
             _this.chart.yAxis.axisLabel('Players').tickFormat(d3.format('d'));
 
-            _this.d3ChartData = d3.select('#chart svg').datum([{
+            _this.d3ChartData = d3.select('#chart svg').datum(_this.props.datum);
-                key: 'Online players',
-                color: '#37d668',
-                area: true,
-                values: _this.props.chartData
-            }]);
             _this.d3ChartData.transition().duration(500).call(_this.chart);
 
             nv.utils.windowResize(_this.chart.update);
@@ -26,50 +24,44 @@ var NvLineChart = React.createClass({
         });
     },
     componentDidUpdate: function() {
-        console.debug('nvd3: componentDidUpdate');
         if (this.d3ChartData === null) return;
 
-        this.d3ChartData.datum([{
+        this.d3ChartData.datum(this.props.datum);
-            key: 'Online players',
-            color: '#37d668',
-            area: true,
-            values: this.props.chartData
-        }]);
         this.d3ChartData.transition().duration(500).call(this.chart);
         nv.utils.windowResize(this.chart.update);
     }
 });
 
 var ServerInfo = React.createClass({
-    sin2: function(){
-        var sin2 = [];
-        for (var i = 0; i < 100; i++) {
-            sin2.push({x: i, y: Math.sin(i/10) *0.25 + 0.5});
-        }
-        return sin2;
-    },
     getInitialState: function(){return {
-        title: this.props.title,
+        title: null,
-        //Data is represented as an array of {x,y} pairs.
+        data: []
-        //example: chartData.push({x: i, y: Math.sin(i/10) *0.25 + 0.5})
-        chartData: []
     }},
-    render: function(){return(
+    render: function(){
-        ce('div', null,
+        if (this.state.title === null) {
-            ce('div', {className: 'pull-right'},
+            return ce('div', null, 'no data');
-                ce('div', {className: 'btn-group'},
+        } else {
-                    ce(Button, {btnSize: 'xs'},
+            return(
-                        ce('span', {className: 'glyphicon glyphicon-play'}), nbsp+'запуск'),
+                ce('div', null,
-                    ce(Button, {btnSize: 'xs'},
+                    ce('h2', {style: {'margin-top': '0px'}}, this.state.title),
-                        ce('span', {className: 'glyphicon glyphicon-stop'}), nbsp+'остановка')
+                    ce(NvLineChart, {datum: [{
+                        key: 'Online players',
+                        color: '#37d668',
+                        area: true,
+                        values: this.state.data
+                    }]})
                 )
-            ),
+            )
-            ce('h2', {style: {'margin-top': '0px'}}, this.state.title),
+        }
-            ce(NvLineChart, {chartData: this.state.chartData})
+    }
-        )
-    )}
 });
 
+/**
+ * Пункт списка серверов.
+ * <code>this.props.title</code> - заголовок / clientId
+ * <code>this.props.onClick</code> - callback события клика
+ * <code>this.props.active</code> - состояние активности (true/false)
+ */
 var ServerListItem = React.createClass({
     render: function(){
         return(

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

@@ -1,19 +1,4 @@
 var ContentModule = React.createClass({
-    loadScript: function(url, fnLoad, fnError) {
-        const script = document.createElement("script");
-        script.src = url;
-        script.onload = fnLoad;
-        script.onerror = fnError;
-        document.body.appendChild(script);
-    },
-    loadStyle: function(url, fnLoad, fnError) {
-        const style = document.createElement("link");
-        style.rel = "stylesheet";
-        style.href = url;
-        style.onload = fnLoad;
-        style.onerror = fnError;
-        document.body.appendChild(style);
-    },
     requestServerList: function() {
         var _this = this;
         fetch('/mcsmanager/servers.json')
@@ -50,6 +35,7 @@ var ContentModule = React.createClass({
                 console.error(err);
             });
     },
+    /*--------------------*/
     getInitialState: function(){return{
         nvScriptReady: 0,
         serverList: []
@@ -57,12 +43,12 @@ var ContentModule = React.createClass({
     componentWillMount: function(){
         var _this = this;
 
-        this.loadScript("/mcsmanager/components.js",
+        loadScript("/mcsmanager/components.js",
             function(){ _this.setState({nvScriptReady: _this.state.nvScriptReady+1}); console.debug('components - ok'); },
             function(){ _this.setState({nvScriptReady: -5}); console.debug('components - error'); }
         );
 
-        this.loadScript("https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js",
+        loadScript("https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js",
             function(){
                 _this.setState({nvScriptReady: _this.state.nvScriptReady+1}); console.info('d3 - ok');
                 _this.loadStyle("https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.min.css");
@@ -87,7 +73,7 @@ var ContentModule = React.createClass({
 
             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]', ref: "serverInfo"}))
+                          ce('div', {className: 'col-md-8'}, ce(ServerInfo, {ref: "serverInfo"}))
                       );
         } else if (this.state.nvScriptReady < 0) {
             element = ce('span', null, 'error');

webinterface/build.gradle

@@ -1,5 +1,5 @@
 group = 'asys'
-version = '0.18.2-SNAPSHOT'
+version = '0.18.3-SNAPSHOT'
 
 buildscript {
     repositories {

webinterface/src/main/resources/static/components.js

@@ -1,6 +1,25 @@
 const ce = React.createElement;
 const nbsp = '\u00a0';
 
+// -- Functions -- //
+
+function loadScript(url, fnLoad, fnError) {
+    const script = document.createElement("script");
+    script.src = url;
+    script.onload = fnLoad;
+    script.onerror = fnError;
+    document.body.appendChild(script);
+}
+
+function loadStyle(url, fnLoad, fnError) {
+    const style = document.createElement("link");
+    style.rel = "stylesheet";
+    style.href = url;
+    style.onload = fnLoad;
+    style.onerror = fnError;
+    document.body.appendChild(style);
+}
+
 // -- Bootstrap -- //
 
 var MainMenuItem = React.createClass({