INSANEMODE/IW4M-Admin
1
0
Fork 0
mirror of https://github.com/RaidMax/IW4M-Admin.git synced 2025-07-06 03:50:18 -05:00
Code Issues Releases Wiki Activity

made the graphs load faster

Browse Source 
fixed issues with stats page
made the pages json request faster
This commit is contained in:
RaidMax
2017-10-04 18:01:04 -05:00
parent 9758e72f6b
commit d8b19f289a
11 changed files with 137 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
Admin/webfront/main.html
View File

@ -1,101 +1,99 @@
<script>
var chartsRendered = false;
function getPlayerHistoryChart(playerHistory, i) {
///////////////////////////////////////
return new CanvasJS.Chart(`graph-player-history-${i}`, {
backgroundColor: "#191919",
height: 100,
animationEnabled: true,
function renderPlayerHistory(id) {
$.getJSON("/_playerhistory?server=" + id, function (playerHistory) {
toolTip: {
contentFormatter: function (e) {
var date = new Date(e.entries[0].dataPoint.x * 1000);
return date.toLocaleTimeString('en-US', { timeZone: 'America/New_York', hour12: true }) + " - " + e.entries[0].dataPoint.y + " players";
}
},
var i = id;
if ($("#server-" + i).children().length > 1)
return false;
axisX: {
interval: 1,
gridThickness: 0,
lineThickness: 0,
tickThickness: 0,
margin: 0,
valueFormatString: " ",
},
$("#server-" + i).append("<div class='player-history' id='graph-player-history-" + i + "'></div><hr/><br/><br/>");
axisY: {
gridThickness: 0,
lineThickness: 0,
tickThickness: 0,
minimum: 0,
margin: 0,
valueFormatString: " ",
labelMaxWidth: 0,
},
///////////////////////////////////////
var chart = new CanvasJS.Chart("graph-player-history-" + i,
{
backgroundColor: "#191919",
height: 100,
animationEnabled: true,
legend: {
maxWidth: 0,
maxHeight: 0,
dockInsidePlotArea: true,
},
toolTip: {
contentFormatter: function (e) {
var date = new Date(e.entries[0].dataPoint.x * 1000);
return date.toLocaleTimeString('en-US', { timeZone: 'America/New_York', hour12: true }) + " - " + e.entries[0].dataPoint.y + " players";
}
},
axisX: {
interval: 1,
gridThickness: 0,
lineThickness: 0,
tickThickness: 0,
margin: 0,
valueFormatString: " ",
},
axisY: {
gridThickness: 0,
lineThickness: 0,
tickThickness: 0,
minimum: 0,
margin: 0,
valueFormatString: " ",
labelMaxWidth: 0,
},
legend: {
maxWidth: 0,
maxHeight: 0,
dockInsidePlotArea: true,
},
data: [{
showInLegend: false,
type: "splineArea",
color: "rgba(0, 122, 204, 0.432)",
markerSize: 0,
dataPoints: playerHistory,
}]
});
chart.render();
//////////////////////////////////////
data: [{
showInLegend: false,
type: "splineArea",
color: "rgba(0, 122, 204, 0.432)",
markerSize: 0,
dataPoints: playerHistory,
}]
});
//////////////////////////////////////
}
function getServers() {
$.getJSON("/_servers", function (result) {
result = result.sort(function (a, b) { return a.currentPlayers < b.currentPlayers });
$.each(result, function (i, server) {
var selectedServer = $(`#server-${i}`);
if ($('#server-' + i).length < 1)
$('#serverList').append("<div id='server-" + i + "'></div>")
if (selectedServer.length < 1) {
$('#serverList').append(`<div id="server-${i}"><div class="serverContainer"></div></div>`);
selectedServer = $(`#server-${i}`);
selectedServer.append(`<div class="player-history" id="graph-player-history-${i}"></div><hr/><br/><br/>`)
}
$('#server-' + i + ' .serverContainer').remove();
$('#server-' + i).prepend("<div class='serverContainer'> \
<div class='serverInfo table'> \
<div class='serverTitle tableCell'>" + server['serverName'] + "</div> \
<div class='serverMap tableCell'>" + server['mapName'] + "</div> \
<div class='serverPlayers tableCell'>" + server['currentPlayers'] + "/" + server['maxPlayers'] + "</div> \
</div> \
<div class='serverChatList table'>" +
formatMessages(server['chatHistory'])
+ "</div> \
<div class='serverPlayerList table'>" +
formatPlayers(server['players'])
+ "</div> \
<div style='clear: both;'></div><hr/></div> \
</div>"
);
renderPlayerHistory(i);
var template =
`
<div class ="serverInfo table">
<div class ="serverTitle tableCell">${server.serverName}</div>
<div class ="serverMap tableCell">${server.mapName}</div>
<div class ="serverPlayers tableCell">${server.currentPlayers}/${server.maxPlayers}</div>
</div>
<div class ="serverChatList table">${formatMessages(server.chatHistory)}</div>
<div class ="serverPlayerList table">${formatPlayers(server.players)}</div>
<div style="clear:both;"></div>
<hr/>`;
selectedServer.find('.serverContainer').html(template);
if (!selectedServer.find(`#graph-player-history-${i}`).children().length) {
var historyGraph = getPlayerHistoryChart(server.PlayerHistory, i);
$(document).trigger("graphready", [historyGraph]);
}
});
});
}
$(document).ready(function () {
getServers();
setInterval(getServers, 1000)
setInterval(getServers, 1000);
});
$(document).on("graphready", function (e, graph) {
// why is this so slow I have to call it async?
setTimeout(graph.render, 1);
})
</script>
<div id="serverList">
</div>