From 25ba4f1fa9a426198aa342bcb983e00486552fcc Mon Sep 17 00:00:00 2001
From: mathiascode <mail@mathias.is>
Date: Sat, 21 Sep 2019 03:48:20 +0300
Subject: [PATCH] Add web console prototype

---
 console/index.html                         |  78 +++++++++
 console/scripts/WebConsole.js              | 178 +++++++++++++++++++++
 console/scripts/WebConsoleConnector.js     |  80 +++++++++
 console/scripts/WebConsoleJqueryHandler.js |  50 ++++++
 console/scripts/WebConsoleManager.js       |  34 ++++
 console/styles/WebConsole.css              |  12 ++
 6 files changed, 432 insertions(+)
 create mode 100755 console/index.html
 create mode 100755 console/scripts/WebConsole.js
 create mode 100755 console/scripts/WebConsoleConnector.js
 create mode 100755 console/scripts/WebConsoleJqueryHandler.js
 create mode 100755 console/scripts/WebConsoleManager.js
 create mode 100755 console/styles/WebConsole.css
diff --git a/console/index.html b/console/index.html
new file mode 100755
index 0000000..9dfa6c8
--- /dev/null
+++ b/console/index.html
@@ -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>
diff --git a/console/scripts/WebConsole.js b/console/scripts/WebConsole.js
new file mode 100755
index 0000000..64e0527
--- /dev/null
+++ b/console/scripts/WebConsole.js
@@ -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 &lt; (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();
+}
\ No newline at end of file
diff --git a/console/scripts/WebConsoleConnector.js b/console/scripts/WebConsoleConnector.js
new file mode 100755
index 0000000..b8ebaac
--- /dev/null
+++ b/console/scripts/WebConsoleConnector.js
@@ -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 = [];
+	}
+}
\ No newline at end of file
diff --git a/console/scripts/WebConsoleJqueryHandler.js b/console/scripts/WebConsoleJqueryHandler.js
new file mode 100755
index 0000000..165fe79
--- /dev/null
+++ b/console/scripts/WebConsoleJqueryHandler.js
@@ -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;
+	}
+});
\ No newline at end of file
diff --git a/console/scripts/WebConsoleManager.js b/console/scripts/WebConsoleManager.js
new file mode 100755
index 0000000..21e4c96
--- /dev/null
+++ b/console/scripts/WebConsoleManager.js
@@ -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");
+	}
+	
+}
\ No newline at end of file
diff --git a/console/styles/WebConsole.css b/console/styles/WebConsole.css
new file mode 100755
index 0000000..71fb5b7
--- /dev/null
+++ b/console/styles/WebConsole.css
@@ -0,0 +1,12 @@
+html,
+body {
+	height: 100%;
+}
+
+.flat-progressbar{
+	height: 10px;
+}
+
+.console{
+	height: 480px;
+}
\ No newline at end of file
