IW4M-Admin/WebfrontCore/wwwroot/js/server.js

175 lines
5.9 KiB
JavaScript
Raw Normal View History

function createDiagonalPattern(color = 'black') {
let shape = document.createElement('canvas');
shape.width = 10;
shape.height = 10;
let c = shape.getContext('2d');
c.strokeStyle = color;
c.beginPath();
c.moveTo(2, 0);
c.lineTo(10, 8);
c.stroke();
c.beginPath();
c.moveTo(0, 8);
c.lineTo(2, 10);
c.stroke();
return c.createPattern(shape, 'repeat');
}
function getPlayerHistoryChart(playerHistory, i, width, maxClients) {
2022-04-19 19:43:58 -04:00
const primaryColor = $('.text-primary').css('color');
const rgb = primaryColor.match(/\d+/g);
const fillColor = `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 0.66)`;
const offlineFillColor = 'rgba(255, 96, 96, 0.55)';
const onlineTime = [];
const offlineTime = [];
const mapChange = [];
let lastMap = '';
playerHistory.forEach((elem, i) => {
2023-05-30 19:12:57 -04:00
if (elem.ma !== lastMap) {
mapChange.push(i);
2023-05-30 19:12:57 -04:00
lastMap = elem;
}
if (elem.connectionInterrupted) {
offlineTime.push({
clientCount: maxClients,
2023-05-30 19:12:57 -04:00
timeString: elem.ts
});
onlineTime.push({
clientCount: 0,
2023-05-30 19:12:57 -04:00
timeString: elem.ts
})
} else {
offlineTime.push({
clientCount: 0,
2023-05-30 19:12:57 -04:00
timeString: elem.ts
});
onlineTime.push(elem)
}
2018-02-21 20:29:23 -05:00
});
let animationProgress = 0;
let initialAnimationComplete = false;
const canvas = document.getElementById(`server_history_canvas_${i}`);
canvas.setAttribute('width', width);
return new Chart(document.getElementById(`server_history_canvas_${i}`), {
type: 'line',
data: {
2023-05-30 19:12:57 -04:00
labels: playerHistory.map(history => history.ts),
datasets: [{
2023-05-30 19:12:57 -04:00
data: onlineTime.map(history => history.cc),
backgroundColor: fillColor,
borderColor: primaryColor,
borderWidth: 2,
hoverBorderColor: 'white',
hoverBorderWidth: 2
},
{
2023-05-30 19:12:57 -04:00
data: offlineTime.map(history => history.cc),
backgroundColor: createDiagonalPattern(offlineFillColor),
borderColor: offlineFillColor,
borderWidth: 2,
hoverBorderColor: 'white',
hoverBorderWidth: 2
}],
lineAtIndexes: mapChange,
2018-02-21 20:29:23 -05:00
},
options: {
responsive: true,
maintainAspectRatio: false,
legend: false,
defaultFontFamily: '-apple-system, BlinkMacSystemFont, "Open Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
tooltips: {
callbacks: {
// todo: localization at some point
title: context => moment(context[0].label).local().calendar(),
2023-05-30 19:12:57 -04:00
label: context => context.datasetIndex !== 1 ? `${context.value} ${_localization['WEBFRONT_SCRIPT_SERVER_PLAYERS']} | ${playerHistory[context.index].ma}` : context.value === '0' ? '' : _localization['WEBFRONT_SCRIPT_SERVER_UNREACHABLE'],
},
mode: 'nearest',
intersect: false,
animationDuration: 0,
cornerRadius: 0,
displayColors: false
},
scales: {
xAxes: [{
display: false,
}],
yAxes: [{
display: false,
gridLines: {
display: false
},
ticks: {
2022-06-16 15:02:44 -04:00
max: 0.5,
min: maxClients + 1
}
}]
},
hover: {
mode: 'nearest',
intersect: false
},
elements: {
point: {
radius: 0
}
},
animation: {
duration: 1000,
onProgress: function (context) {
animationProgress = context.currentStep / context.numSteps;
if (animationProgress >= 1) {
initialAnimationComplete = true;
}
}
}
2018-02-21 20:29:23 -05:00
},
});
}
2022-04-19 19:43:58 -04:00
function refreshClientActivity(serverId) {
$.get({
url: `/server/clientactivity/${serverId}`,
cache: false
})
.done(function (response) {
const clientCount = $(response).find('a.no-decoration').length;
$('#server_header_' + serverId + ' .server-clientcount').text(clientCount);
$('#server_clientactivity_' + serverId).html(response);
})
2022-04-19 19:43:58 -04:00
.fail(function (jqxhr, textStatus, error) {
$('#server_clientactivity_' + serverId).html('');
});
2018-02-21 20:29:23 -05:00
}
2019-07-19 15:54:39 -04:00
$(document).ready(function () {
$('.server-join-button').click(function (e) {
$(this).parent().parent().find('.server-header-ip-address').show();
});
2023-05-30 19:12:57 -04:00
$('.server-history-row').each(async function (index, element) {
2022-04-19 19:43:58 -04:00
const serverId = $(this).data('serverid');
2023-05-30 19:12:57 -04:00
const serverEp = $(this).data('server-endpoint');
2022-04-19 19:43:58 -04:00
setInterval(() => refreshClientActivity(serverId), 2000 + (index * 100));
let maxClients = parseInt($('#server_header_' + serverId + ' .server-maxclients').text());
let width = $('.server-header').first().width();
2023-05-30 19:12:57 -04:00
const clientHistory = await fetch(`/api/server/${serverEp}/history`);
getPlayerHistoryChart(await clientHistory.json(), serverId, width, maxClients);
});
$('.moment-date').each((index, element) => {
const title = $(element).attr('title');
if (title !== undefined) {
const date = new Date(title);
$(element).attr('title', moment.utc(date).calendar());
}
});
2019-07-19 15:54:39 -04:00
});