mirror of
https://github.com/kaboomserver/website.git
synced 2024-12-22 15:55:04 +00:00
Remove web console code from main repo
This commit is contained in:
mathiascode
parent
27ea53fbf3
commit
f85889f2fe
6 changed files with 0 additions and 432 deletions
|
|
@ -1,78 +0,0 @@
|
||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
|
|
||||||
<link rel="stylesheet" href="styles/WebConsole.css">
|
|
||||||
<title>Console</title>
|
|
||||||
</head>
|
|
||||||
<body onload="openServer();">
|
|
||||||
<main role="main" class="h-100">
|
|
||||||
<div class="container h-100" id="offlineContainer" style="display: none;">
|
|
||||||
<div class="row h-100">
|
|
||||||
<div class="col align-self-center text-center">
|
|
||||||
<h1 class="mt-3 mb-3">The server is currently offline</h1>
|
|
||||||
<p class="lead mb-3">This is most likely caused by a server crash. Come back later.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="container h-100" id="serverContainer">
|
|
||||||
<div class="row h-100">
|
|
||||||
<div class="col align-self-center">
|
|
||||||
<div class="row mt-4">
|
|
||||||
<div class="col-sm mb-3">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-body">
|
|
||||||
<h5 class="card-title">Players Online</h5>
|
|
||||||
<p class="card-text"><span id="connectedPlayers">0</span> / <span id="maxPlayers">Unknown</span></p>
|
|
||||||
<div class="progress flat-progressbar">
|
|
||||||
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;" id="playerProgressBar"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-sm mb-3">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-body">
|
|
||||||
<h5 class="card-title">CPU</h5>
|
|
||||||
<p class="card-text" id="cpuInfo">0%</p>
|
|
||||||
<div class="progress flat-progressbar">
|
|
||||||
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;" id="CpuProgressBar"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-sm mb-3">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-body">
|
|
||||||
<h5 class="card-title">RAM</h5>
|
|
||||||
<p class="card-text"><span id="usedRam">0</span> MB / <span id="totalRam">0</span> MB</p>
|
|
||||||
<div class="progress flat-progressbar">
|
|
||||||
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;" id="RamProgressBar"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="card mb-3">
|
|
||||||
<div class="card-body overflow-auto text-light bg-dark console" id="consoleTextArea"></div>
|
|
||||||
</div>
|
|
||||||
<div class="input-group mb-4">
|
|
||||||
<input type="text" class="form-control" id="commandInput">
|
|
||||||
<div class="input-group-append">
|
|
||||||
<button class="btn btn-secondary" type="button" id="sendCommandButton">Send</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
|
||||||
<script src="scripts/WebConsoleConnector.js"></script>
|
|
||||||
<script src="scripts/WebConsoleManager.js"></script>
|
|
||||||
<script src="scripts/WebConsole.js"></script>
|
|
||||||
<script src="scripts/WebConsoleJqueryHandler.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,178 +0,0 @@
|
||||||
/**
|
|
||||||
Main JS file for WebConsole.
|
|
||||||
https://github.com/mesacarlos
|
|
||||||
2019 Carlos Mesa under MIT License.
|
|
||||||
*/
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Global variables
|
|
||||||
*/
|
|
||||||
var connectionManager = new WebConsoleManager();
|
|
||||||
var statusCommandsInterval = -1;
|
|
||||||
var commandHistoryIndex = -1; //Saves current command history index. -1 when not browsing history.
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Prepare and show server to user
|
|
||||||
*/
|
|
||||||
function openServer(serverName){
|
|
||||||
//Create or retrieve connection
|
|
||||||
connectionManager.loadConnection(serverName);
|
|
||||||
|
|
||||||
//Load saved messages
|
|
||||||
var i;
|
|
||||||
var messages = connectionManager.activeConnection.messages;
|
|
||||||
for(i = 0; i < messages.length; i++){
|
|
||||||
if(messages[i].status != 401){
|
|
||||||
onWebSocketsMessage(messages[i]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//Subscribe a function
|
|
||||||
connectionManager.activeConnection.subscribe(onWebSocketsMessage);
|
|
||||||
}
|
|
||||||
|
|
||||||
function onWebSocketsMessage(message){
|
|
||||||
switch (message.status) {
|
|
||||||
case 10:
|
|
||||||
//Console Output
|
|
||||||
writeToWebConsole(message.message);
|
|
||||||
break;
|
|
||||||
case 200:
|
|
||||||
//Processed
|
|
||||||
writeToWebConsole(message.message);
|
|
||||||
break;
|
|
||||||
case 400:
|
|
||||||
//Unknown Command
|
|
||||||
writeToWebConsole(message.message);
|
|
||||||
break;
|
|
||||||
case 401:
|
|
||||||
//Send password
|
|
||||||
connectionManager.activeConnection.sendToServer("LOGIN 1234");
|
|
||||||
break;
|
|
||||||
case 1000:
|
|
||||||
//Players
|
|
||||||
writePlayerInfo(message.connectedPlayers, message.maxPlayers);
|
|
||||||
connectionManager.activeConnection.players = JSON.parse(message.players);
|
|
||||||
break;
|
|
||||||
case 1001:
|
|
||||||
//Cpu Usage
|
|
||||||
writeCpuInfo(message.usage);
|
|
||||||
break;
|
|
||||||
case 1002:
|
|
||||||
//RAM Usage
|
|
||||||
writeRamInfo(message.free, message.used, message.max);
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
console.log('Unknown server response:');
|
|
||||||
}
|
|
||||||
console.log(message);
|
|
||||||
|
|
||||||
//Add interval for Players, CPU and RAM info, if not set
|
|
||||||
if(statusCommandsInterval == -1 && message.status !== 401){
|
|
||||||
statusCommandsInterval = setInterval(function(){
|
|
||||||
connectionManager.askForInfo();
|
|
||||||
}, 2500);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Write to console
|
|
||||||
*/
|
|
||||||
function writeToWebConsole(msg){
|
|
||||||
var isScrolledDown = document.getElementById("consoleTextArea").scrollHeight - document.getElementById("consoleTextArea").scrollTop - 40 == $("#consoleTextArea").height();
|
|
||||||
|
|
||||||
//Write to div, replacing < to < (to avoid XSS) and replacing new line to br.
|
|
||||||
msg = msg.replace(/</g, "<");
|
|
||||||
msg = msg.replace(/(?:\r\n|\r|\n)/g, "<br>");
|
|
||||||
|
|
||||||
//Color filter for Windows (thanks to SuperPykkon)
|
|
||||||
msg = msg.replace(/\[0;30;22m/g, "<span style='color: #000000;'>"); //&0
|
|
||||||
msg = msg.replace(/\[0;34;22m/g, "<span style='color: #0000AA;'>"); //&1
|
|
||||||
msg = msg.replace(/\[0;32;22m/g, "<span style='color: #00AA00;'>"); //&2
|
|
||||||
msg = msg.replace(/\[0;36;22m/g, "<span style='color: #00AAAA;'>"); //&3
|
|
||||||
msg = msg.replace(/\[0;31;22m/g, "<span style='color: #AA0000;'>"); //&4
|
|
||||||
msg = msg.replace(/\[0;35;22m/g, "<span style='color: #AA00AA;'>"); //&5
|
|
||||||
msg = msg.replace(/\[0;33;22m/g, "<span style='color: #FFAA00;'>"); //&6
|
|
||||||
msg = msg.replace(/\[0;37;22m/g, "<span style='color: #AAAAAA;'>"); //&7
|
|
||||||
msg = msg.replace(/\[0;30;1m/g, "<span style='color: #555555;'>"); //&8
|
|
||||||
msg = msg.replace(/\[0;34;1m/g, "<span style='color: #5555FF;'>"); //&9
|
|
||||||
msg = msg.replace(/\[0;32;1m/g, "<span style='color: #55FF55;'>"); //&a
|
|
||||||
msg = msg.replace(/\[0;36;1m/g, "<span style='color: #55FFFF;'>"); //&b
|
|
||||||
msg = msg.replace(/\[0;31;1m/g, "<span style='color: #FF5555;'>"); //&c
|
|
||||||
msg = msg.replace(/\[0;35;1m/g, "<span style='color: #FF55FF;'>"); //&d
|
|
||||||
msg = msg.replace(/\[0;33;1m/g, "<span style='color: #FFFF55;'>"); //&e
|
|
||||||
msg = msg.replace(/\[0;37;1m/g, "<span style='color: #FFFFFF;'>"); //&f
|
|
||||||
msg = msg.replace(/\[m/g, "</span>"); //&f
|
|
||||||
|
|
||||||
//Color filter for UNIX (This is easier!)
|
|
||||||
//span may not be closed every time but browsers will do for ourselves
|
|
||||||
msg = msg.replace(/§0/g, "<span style='color: #000000;'>"); //&0
|
|
||||||
msg = msg.replace(/§1/g, "<span style='color: #0000AA;'>"); //&1
|
|
||||||
msg = msg.replace(/§2/g, "<span style='color: #00AA00;'>"); //&2
|
|
||||||
msg = msg.replace(/§3/g, "<span style='color: #00AAAA;'>"); //&3
|
|
||||||
msg = msg.replace(/§4/g, "<span style='color: #AA0000;'>"); //&4
|
|
||||||
msg = msg.replace(/§5/g, "<span style='color: #AA00AA;'>"); //&5
|
|
||||||
msg = msg.replace(/§6/g, "<span style='color: #FFAA00;'>"); //&6
|
|
||||||
msg = msg.replace(/§7/g, "<span style='color: #AAAAAA;'>"); //&7
|
|
||||||
msg = msg.replace(/§8/g, "<span style='color: #555555;'>"); //&8
|
|
||||||
msg = msg.replace(/§9/g, "<span style='color: #5555FF;'>"); //&9
|
|
||||||
msg = msg.replace(/§a/g, "<span style='color: #55FF55;'>"); //&a
|
|
||||||
msg = msg.replace(/§b/g, "<span style='color: #55FFFF;'>"); //&b
|
|
||||||
msg = msg.replace(/§c/g, "<span style='color: #FF5555;'>"); //&c
|
|
||||||
msg = msg.replace(/§d/g, "<span style='color: #FF55FF;'>"); //&d
|
|
||||||
msg = msg.replace(/§e/g, "<span style='color: #FFFF55;'>"); //&e
|
|
||||||
msg = msg.replace(/§f/g, "<span style='color: #FFFFFF;'>"); //&f
|
|
||||||
|
|
||||||
msg = msg.replace(/§l/g, "<span style='font-weight:bold;'>"); //&l
|
|
||||||
msg = msg.replace(/§m/g, "<span style='text-decoration: line-through;'>"); //&m
|
|
||||||
msg = msg.replace(/§n/g, "<span style='text-decoration: underline;'>"); //&n
|
|
||||||
msg = msg.replace(/§o/g, "<span style='font-style: italic;'>"); //&o
|
|
||||||
|
|
||||||
msg = msg.replace(/§r/g, "</span>"); //&r
|
|
||||||
|
|
||||||
$("#consoleTextArea").append(msg + "<br>");
|
|
||||||
|
|
||||||
if(isScrolledDown){
|
|
||||||
var textarea = document.getElementById('consoleTextArea');
|
|
||||||
textarea.scrollTop = textarea.scrollHeight;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Fill connected players card
|
|
||||||
*/
|
|
||||||
function writePlayerInfo(connected, maximum){
|
|
||||||
$("#connectedPlayers").text(connected);
|
|
||||||
$("#maxPlayers").text(maximum);
|
|
||||||
|
|
||||||
var percent = (connected/maximum)*100;
|
|
||||||
$("#playerProgressBar").width(percent + "%");
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Fill CPU info card
|
|
||||||
*/
|
|
||||||
function writeCpuInfo(usage){
|
|
||||||
$("#cpuInfo").text(usage + "%");
|
|
||||||
|
|
||||||
$("#CpuProgressBar").width(usage + "%");
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Fill RAM info card
|
|
||||||
*/
|
|
||||||
function writeRamInfo(free, used, total){
|
|
||||||
$("#usedRam").text(used);
|
|
||||||
$("#totalRam").text(total);
|
|
||||||
|
|
||||||
var percent = (used/total)*100;
|
|
||||||
$("#RamProgressBar").width(percent + "%");
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Called from WebConsoleConnector only.
|
|
||||||
*/
|
|
||||||
function closedConnection(){
|
|
||||||
$("#offlineContainer").show();
|
|
||||||
$("#serverContainer").hide();
|
|
||||||
}
|
|
||||||
|
|
@ -1,80 +0,0 @@
|
||||||
/**
|
|
||||||
WebConsole Connector for WebConsole
|
|
||||||
Used to connect to WebSocketsServer
|
|
||||||
https://github.com/mesacarlos
|
|
||||||
2019 Carlos Mesa under MIT License.
|
|
||||||
*/
|
|
||||||
class WebConsoleConnector {
|
|
||||||
|
|
||||||
constructor(serverURI) {
|
|
||||||
this.serverURI = serverURI;
|
|
||||||
this.subscribers = []; //List of functions called when a new message arrive
|
|
||||||
this.messages = []; //All messages retrieved since connection start
|
|
||||||
this.commands = []; //EXEC Commands sent by user to this server
|
|
||||||
this.players = []; //Connected users.
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Connect to WebSocket
|
|
||||||
*/
|
|
||||||
connect(){
|
|
||||||
var connector = this;
|
|
||||||
this.websocket = new WebSocket(this.serverURI);
|
|
||||||
this.websocket.onclose = function(evt) { connector.onClose(evt) };
|
|
||||||
this.websocket.onmessage = function(evt) { connector.onMessage(evt) };
|
|
||||||
this.websocket.onerror = function(evt) { connector.onError(evt) };
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Internal function
|
|
||||||
*/
|
|
||||||
onClose(evt){
|
|
||||||
closedConnection();
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Internal function
|
|
||||||
*/
|
|
||||||
onMessage(evt){
|
|
||||||
var obj = JSON.parse(evt.data);
|
|
||||||
this.notify(obj); //Notify all subscribers
|
|
||||||
this.messages.push(obj);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Internal function
|
|
||||||
*/
|
|
||||||
onError(evt){
|
|
||||||
closedConnection();
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Sends a WebSocket command to Server
|
|
||||||
*/
|
|
||||||
sendToServer(message){
|
|
||||||
this.websocket.send(message);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Notifies a new message to all subscribers
|
|
||||||
*/
|
|
||||||
notify(obj){
|
|
||||||
this.subscribers.forEach(function(fun) {
|
|
||||||
fun(obj); //Calls function with this object
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Adds a function to subscriber list
|
|
||||||
*/
|
|
||||||
subscribe(func){
|
|
||||||
this.subscribers.push(func);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Unsubscribe all subscribers
|
|
||||||
*/
|
|
||||||
removeSubscribers(){
|
|
||||||
this.subscribers = [];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,50 +0,0 @@
|
||||||
/**
|
|
||||||
JS File containing all JQuery-related handlers
|
|
||||||
https://github.com/mesacarlos
|
|
||||||
2019 Carlos Mesa under MIT License.
|
|
||||||
*/
|
|
||||||
|
|
||||||
/**
|
|
||||||
* On send command button click
|
|
||||||
*/
|
|
||||||
$("#sendCommandButton").click(function() {
|
|
||||||
connectionManager.sendConsoleCmd($("#commandInput").val());
|
|
||||||
$("#commandInput").val('');
|
|
||||||
commandHistoryIndex = -1; //Reset command history index
|
|
||||||
});
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Enter or arrow down/up key on command input
|
|
||||||
*/
|
|
||||||
$("#commandInput").on('keydown', function (e) {
|
|
||||||
if(e.which === 13){ //Detect enter key
|
|
||||||
//Disable textbox to prevent multiple submit
|
|
||||||
$(this).attr("disabled", "disabled");
|
|
||||||
|
|
||||||
//Send command
|
|
||||||
sendCommandButton.click();
|
|
||||||
|
|
||||||
//Enable the textbox again.
|
|
||||||
$(this).removeAttr("disabled");
|
|
||||||
|
|
||||||
//Focus again
|
|
||||||
$(this).focus();
|
|
||||||
}else if(e.which === 38){ //Detect arrow up key
|
|
||||||
//Replace with older command
|
|
||||||
if(commandHistoryIndex == -1){
|
|
||||||
//If not browsing history, start by latest command sent
|
|
||||||
commandHistoryIndex = connectionManager.activeConnection.commands.length;
|
|
||||||
}
|
|
||||||
$("#commandInput").val(connectionManager.activeConnection.commands[commandHistoryIndex - 1]);
|
|
||||||
commandHistoryIndex = commandHistoryIndex - 1;
|
|
||||||
}else if(e.which === 40){ //Detect arrow down key
|
|
||||||
//Replace with newer command
|
|
||||||
if(commandHistoryIndex !== -1){
|
|
||||||
//If not browsing history, do nothing
|
|
||||||
$("#commandInput").val(connectionManager.activeConnection.commands[commandHistoryIndex + 1]);
|
|
||||||
commandHistoryIndex = commandHistoryIndex + 1;
|
|
||||||
}
|
|
||||||
}else if(e.which == 9){ //Detect tab key
|
|
||||||
//TODO Suggest user from connectionManager.activeConnection.players;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
@ -1,34 +0,0 @@
|
||||||
/**
|
|
||||||
WebConsole Manager for WebConsole
|
|
||||||
Used to manage active connections
|
|
||||||
https://github.com/mesacarlos
|
|
||||||
2019 Carlos Mesa under MIT License.
|
|
||||||
*/
|
|
||||||
class WebConsoleManager {
|
|
||||||
/**
|
|
||||||
* Loads a existing connection or creates a new one
|
|
||||||
*/
|
|
||||||
loadConnection(){
|
|
||||||
//If not created yet, create it
|
|
||||||
this.activeConnection = new WebConsoleConnector("wss://play.kaboom.pw:53951");
|
|
||||||
this.activeConnection.connect();
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Send console command to server
|
|
||||||
*/
|
|
||||||
sendConsoleCmd(cmd){
|
|
||||||
this.activeConnection.sendToServer("EXEC " + cmd);
|
|
||||||
this.activeConnection.commands.push(cmd);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Asks server for CPU, RAM and players info
|
|
||||||
*/
|
|
||||||
askForInfo(){
|
|
||||||
this.activeConnection.sendToServer("PLAYERS");
|
|
||||||
this.activeConnection.sendToServer("CPUUSAGE");
|
|
||||||
this.activeConnection.sendToServer("RAMUSAGE");
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -1,12 +0,0 @@
|
||||||
html,
|
|
||||||
body {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flat-progressbar{
|
|
||||||
height: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.console{
|
|
||||||
height: 480px;
|
|
||||||
}
|
|
||||||
Loading…
Reference in a new issue