mirror of
https://github.com/kaboomserver/website.git
synced 2024-12-22 07:45:00 +00:00
Add web console prototype
This commit is contained in:
mathiascode
parent
cb2c2d4ea2
commit
25ba4f1fa9
6 changed files with 432 additions and 0 deletions
78
console/index.html
Executable file
78
console/index.html
Executable file
|
|
@ -0,0 +1,78 @@
|
|||
<!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>
|
||||
178
console/scripts/WebConsole.js
Executable file
178
console/scripts/WebConsole.js
Executable file
|
|
@ -0,0 +1,178 @@
|
|||
/**
|
||||
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();
|
||||
}
|
||||
80
console/scripts/WebConsoleConnector.js
Executable file
80
console/scripts/WebConsoleConnector.js
Executable file
|
|
@ -0,0 +1,80 @@
|
|||
/**
|
||||
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 = [];
|
||||
}
|
||||
}
|
||||
50
console/scripts/WebConsoleJqueryHandler.js
Executable file
50
console/scripts/WebConsoleJqueryHandler.js
Executable file
|
|
@ -0,0 +1,50 @@
|
|||
/**
|
||||
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;
|
||||
}
|
||||
});
|
||||
34
console/scripts/WebConsoleManager.js
Executable file
34
console/scripts/WebConsoleManager.js
Executable file
|
|
@ -0,0 +1,34 @@
|
|||
/**
|
||||
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("ws://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");
|
||||
}
|
||||
|
||||
}
|
||||
12
console/styles/WebConsole.css
Executable file
12
console/styles/WebConsole.css
Executable file
|
|
@ -0,0 +1,12 @@
|
|||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.flat-progressbar{
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.console{
|
||||
height: 480px;
|
||||
}
|
||||
Loading…
Reference in a new issue