IW4M-Admin/Admin/webfront/main.html
RaidMax 4c813b18d6 removed code that mysteriously caused player count to be inaccurate.
fixed unrepresentable datetime when minute rounded to 60 (forgot to copy changes to release code)

fixed the player graph render time (apparently canvasjs doesn't like big numbers

hopefully fixed duplicate 'stats' pages from appearing.
2017-10-15 20:40:27 -05:00

107 lines
3.6 KiB
HTML

<script>
function getPlayerHistoryChart(playerHistory, i) {
///////////////////////////////////////
// thanks to cnavas js :(
playerHistory.forEach(function(item, i) {
playerHistory[i].x = new Date(playerHistory[i].x);
});
return new CanvasJS.Chart(`graph-player-history-${i}`, {
backgroundColor: "#191919",
height: 100,
animationEnabled: true,
toolTip: {
contentFormatter: function (e) {
var date = new Date(e.entries[0].dataPoint.x);
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,
}]
});
//////////////////////////////////////
}
function getServers() {
$.getJSON("/_servers", function (result) {
$.each(result, function (i, server) {
var selectedServer = $(`#server-${i}`);
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/>`)
}
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);
});
$(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>