Skip to content
This repository has been archived by the owner on Jan 6, 2022. It is now read-only.

Commit

Permalink
Merge branch 'main' of https://github.com/dimaguy/ImpostorHQ into main
Browse files Browse the repository at this point in the history
  • Loading branch information
AntINFINAit authored and AntINFINAit committed Nov 7, 2020
2 parents 1d63c98 + 92cffb6 commit 8a66e2f
Show file tree
Hide file tree
Showing 4 changed files with 160 additions and 1,169 deletions.
17 changes: 11 additions & 6 deletions ImpostorHQ.Dashboard/client.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@
<link rel="apple-touch-icon" sizes="144x144" href="ico/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="ico/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="ico/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="ico/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="ico/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="ico/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="ico/favicon-16x16.png">
Expand Down Expand Up @@ -59,7 +58,6 @@
<script type="text/javascript" src="js/moment.js"></script>
<script type="text/javascript" src="js/chart.js"></script>
<script type="text/javascript" src="js/chart.streaming.js"></script>
<script type="text/javascript" src="js/smoothie.js"></script>
<script type="text/javascript" src="js/main.js" defer></script>
</head>
<body>
Expand All @@ -68,7 +66,7 @@
<img src="ico/apple-touch-icon-60x60.png" style="vertical-align:middle">
<h1 style="display: inline; vertical-align: middle; color:#ff0000; font-family: headerFont;">Impostor<b style="color: #41BB3F;">HQ</b></h1>
<input id="apikey" name="apikey" type="password" maxlength="50" placeholder="Your Api Key" style="display: inline; vertical-align:middle;">
<input type="button" name="login" value="Log in" onclick="connect()" style="display: inline; vertical-align:middle;">
<input type="button" name="login" value="Log in" onclick="connect()" onkeyup="handleSend(event)" style="display: inline; vertical-align:middle;">
<p id="status" style="display: inline;"></p>
<div class="header-right">
<a class="active" href="">Home</a>
Expand Down Expand Up @@ -108,14 +106,21 @@ <h1 style="display: inline; vertical-align: middle; color:#ff0000; font-family:
</tr>
</table>
<div>
<div class="chart-container" style="/*position: relative; height:20vh; width:70vw*/">
<div class="chart-container">
<canvas id="playerChart"></canvas>
</div>
<canvas id="cpu-chart" width="500" height="100"></canvas>

<div class="chart-container">
<canvas id="cpuChart"></canvas>
</div>

<div class="chart-container">
<canvas id="ramChart"></canvas>
</div>
</div>
</div>
<div class="container">
<input id="text" type="text" name="text" style="display:inline; width:auto; min-width: 80%;" maxlength="256" placeholder="Command" autocomplete="off" onkeyup="handleKey(event)" disabled>
<input id="text" type="text" name="text" style="display:inline; width:auto; min-width: 80%;" maxlength="256" placeholder="Command" autocomplete="off" onkeyup="handleSend(event)" disabled>
<input type="button" id="send" name="send" value="Send" onclick="send()" style="display: inline;" disabled>
</div>
</div>
Expand Down
193 changes: 146 additions & 47 deletions ImpostorHQ.Dashboard/js/main.js
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,19 @@
"use strict";
var connection = null;
var y = null;
var x = null;
var firstLogin = true
var playersOnline = 0;
var lobbies = 0;
/*
var chart = new SmoothieChart({
tooltip: true,
timestampFormatter: SmoothieChart.timeFormatter,
maxValue: 100,
minValue: 0
});
var canvas = document.getElementById('cpu-chart');
var cpu = new TimeSeries();
*/
var cpuUsage = 0;
var ramUsage = 0;

var playerChart = document.getElementById('playerChart');
var ctx = playerChart.getContext('2d');
var ctxPlayers = playerChart.getContext('2d');

var cpuChart = document.getElementById('cpuChart');
var ctxCpu = cpuChart.getContext('2d');

//chart.addTimeSeries(playerChart, { lineWidth: 2, strokeStyle: '#00ff00' });
var ramChart = document.getElementById('ramChart');
var ctxRam = ramChart.getContext('2d');

function connect() {
var serverUrl;
Expand All @@ -26,13 +22,13 @@ function connect() {
if (document.location.protocol === "https:") {
scheme += "s";
}

serverUrl = scheme + "://" + document.location.hostname + ":22023";

connection = new WebSocket(serverUrl);
console.log("***CREATED WEBSOCKET");
connection.onopen = function(evt) {

connection.onopen = function (evt) {
console.log("***ONOPEN");
document.getElementById("status").innerHTML = "";
var auth = {
Expand All @@ -44,7 +40,7 @@ function connect() {
};
console.log("***CREATED ONOPEN");

connection.onerror = function(event) {
connection.onerror = function (event) {
console.error("WebSocket error observed: ", event);
document.getElementById("status").innerHTML = "WebSocket Error: " + event.type;
document.getElementById("text").value = "";
Expand All @@ -53,7 +49,7 @@ function connect() {
};
console.log("***CREATED ONERROR");

connection.onmessage = function(evt) {
connection.onmessage = function (evt) {
console.log("***ONMESSAGE");
var box = document.getElementById("chatbox");
var text = "";
Expand All @@ -63,9 +59,8 @@ function connect() {
var time = new Date(msg.Date);
var timeStr = time.toLocaleTimeString();

switch (msg.Type)
{
case MessageFlags.ConsoleLogMessage:
switch (msg.Type) {
case MessageFlags.ConsoleLogMessage:
text = "(" + timeStr + ") [" + msg.Name + "] : " + msg.Text + "\n";
break;
case MessageFlags.LoginApiAccepted:
Expand All @@ -74,8 +69,13 @@ function connect() {
document.getElementById("text").value = "";
document.getElementById("text").disabled = false;
document.getElementById("send").disabled = false;
//chart.addTimeSeries(series, { lineWidth: 2, strokeStyle: '#00ff00' });
plot();
if (!firstLogin) {
_playerchart.destroy();
_cpuchart.destroy();
_ramchart.destroy();
};
plot();
firstLogin = false
console.log("AUTHED");
break;

Expand All @@ -92,6 +92,9 @@ function connect() {
document.getElementById("text").value = "";
document.getElementById("text").disabled = true;
document.getElementById("send").disabled = true;
_playerchart.destroy();
_cpuchart.destroy();
_ramchart.destroy();
break;

case MessageFlags.HeartbeatMessage:
Expand All @@ -101,10 +104,10 @@ function connect() {
document.getElementById("Uptime").innerHTML = tokens[2];
playersOnline = tokens[1];
lobbies = tokens[0];
//series.append(new Date().getTime(), tokens[3]);
//chart.streamTo(canvas, 5000);
console.log("HEARTBEAT")
break;
cpuUsage = tokens[3];
ramUsage = tokens[4];
console.log("HEARTBEAT");
break;

// commented out for now, but could be used to transmit game room list
// case "userlist":
Expand All @@ -119,8 +122,8 @@ function connect() {
}

if (text.length) {
box.value += text;
box.scrollTop = box.scrollHeight;
box.value += text;
box.scrollTop = box.scrollHeight;
}
};
console.log("***CREATED ONMESSAGE");
Expand All @@ -138,8 +141,8 @@ function send() {
document.getElementById("text").value = "";
}
function plot() {
var chart = new Chart(ctx, {
type: 'line',
var _playerchart = new Chart(ctxPlayers, {
type: 'line',
data: {

datasets: [{
Expand All @@ -164,6 +167,12 @@ function plot() {
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
precision: 0
}
}],
xAxes: [{
type: 'realtime',
realtime: {
Expand All @@ -172,13 +181,97 @@ function plot() {
onRefresh: function (chart) {
chart.data.datasets[0].data.push({
x: Date.now(),
y: playersOnline,

y: playersOnline
});
chart.data.datasets[1].data.push({
x: Date.now(),
y: lobbies,
y: lobbies
});
}
}
}]
}
},

});
var _cpuchart = new Chart(ctxCpu, {
type: 'line',
data: {

datasets: [{
label: 'CPU Usage (%)',
borderColor: 'rgb(255, 0, 132)',
backgroundColor: 'rgba(255, 99, 132, 0.5)',
lineTension: 0,
borderDash: [8, 4]

}

]
},

options: {
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
precision: 0
}
}],
xAxes: [{
type: 'realtime',
realtime: {
delay: 5000,
duration: 60000,
onRefresh: function (chart) {
chart.data.datasets[0].data.push({
x: Date.now(),
y: cpuUsage
});
}
}
}]
}
},

});
var _ramchart = new Chart(ctxRam, {
type: 'line',
data: {

datasets: [{
label: 'Memory Usage (MB)',
borderColor: 'rgb(255, 0, 255)',
backgroundColor: 'rgba(255, 99, 132, 0.5)',
lineTension: 0,
borderDash: [8, 4]

}

]
},

options: {
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
precision: 0
}
}],
xAxes: [{
type: 'realtime',
realtime: {
delay: 5000,
duration: 60000,
onRefresh: function (chart) {
chart.data.datasets[0].data.push({
x: Date.now(),
y: ramUsage
});
}
}
Expand All @@ -188,21 +281,27 @@ function plot() {

});
}
function handleKey(evt) {

function handleSend(evt) {
if (evt.keyCode === 13 || evt.keyCode === 14) {
if (!document.getElementById("send").disabled) {
send();
send();
}
}
}
const MessageFlags =
{
LoginApiRequest : "0", // A request to log in, with a given API key.
LoginApiAccepted : "1", // The API Key is correct, so the login is successful.
LoginApiRejected : "2", // The API key is incorrect, so the login is rejected.
ConsoleLogMessage : "3", // Server Message
ConsoleCommand : "4", // A command sent from the dashboard to the API.
HeartbeatMessage : "5", // Quick sanity check with some statistics
GameListMessage : "6", // Not implemented yet.
DoKickOrDisconnect : "7" // A message when a client is kicked or the server shuts down.
function HandleLogin(evt) {
if (evt.keyCode === 13 || evt.keyCode === 14) {
connect();
}
}
const MessageFlags =
{
LoginApiRequest: "0", // A request to log in, with a given API key.
LoginApiAccepted: "1", // The API Key is correct, so the login is successful.
LoginApiRejected: "2", // The API key is incorrect, so the login is rejected.
ConsoleLogMessage: "3", // Server Message
ConsoleCommand: "4", // A command sent from the dashboard to the API.
HeartbeatMessage: "5", // Quick sanity check with some statistics
GameListMessage: "6", // Not implemented yet.
DoKickOrDisconnect: "7" // A message when a client is kicked or the server shuts down.
}
Loading

0 comments on commit 8a66e2f

Please sign in to comment.