IW4M-Admin/Admin/webfront/main.html

107 lines
3.6 KiB
HTML
Raw Normal View History

<script>
function getPlayerHistoryChart(playerHistory, i) {
///////////////////////////////////////
// thanks to canvasjs :(
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>