Minecraft/asys
Archived
0
Fork 0
Code Activity

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

Browse Source
This commit is contained in:
DmitriyMX
2017-05-04 12:48:08 +03:00
parent 5c8cd7e857
commit d6a9775103
5 changed files with 56 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
mcserver-manager/src/main/resources/components.js
View File

@@ -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([{
key: 'Online players',
color: '#37d668',
area: true,
values: _this.props.chartData
}]);
_this.d3ChartData = d3.select('#chart svg').datum(_this.props.datum);
_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([{
key: 'Online players',
color: '#37d668',
area: true,
values: this.props.chartData
}]);
this.d3ChartData.datum(this.props.datum);
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,
//Data is represented as an array of {x,y} pairs.
//example: chartData.push({x: i, y: Math.sin(i/10) *0.25 + 0.5})
chartData: []
title: null,
data: []
}},
render: function(){return(
ce('div', null,
ce('div', {className: 'pull-right'},
ce('div', {className: 'btn-group'},
ce(Button, {btnSize: 'xs'},
ce('span', {className: 'glyphicon glyphicon-play'}), nbsp+'запуск'),
ce(Button, {btnSize: 'xs'},
ce('span', {className: 'glyphicon glyphicon-stop'}), nbsp+'остановка')
render: function(){
if (this.state.title === null) {
return ce('div', null, 'no data');
} else {
return(
ce('div', null,
ce('h2', {style: {'margin-top': '0px'}}, this.state.title),
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(

22
mcserver-manager/src/main/resources/module.js
View File

@@ -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');