From 5dfd026ca86a6ed677f3da5078ea52eee77c5a3f Mon Sep 17 00:00:00 2001
From: Carlos <28845529+mesacarlos@users.noreply.github.com>
Date: Tue, 13 Aug 2019 20:52:28 +0200
Subject: [PATCH] v1.1.0 deploy

---
 client/index.html                             |  52 +++++-
 client/scripts/WebConsole.js                  | 154 +++++++++---------
 client/scripts/WebConsoleConnector.js         |   2 +-
 client/scripts/WebConsoleJqueryHandler.js     |  98 +++++++++++
 client/scripts/WebConsoleManager.js           |  11 +-
 .../scripts/WebConsolePersistenceManager.js   |   2 +-
 client/styles/WebConsole.css                  |   3 +
 .../webconsole/command/RamUsageCommand.java   |   2 +-
 .../mesacarlos/webconsole/json/CpuUsage.java  |   2 +-
 .../mesacarlos/webconsole/json/RamUsage.java  |   2 +-
 10 files changed, 234 insertions(+), 94 deletions(-)
 create mode 100644 client/scripts/WebConsoleJqueryHandler.js
 create mode 100644 client/styles/WebConsole.css
diff --git a/client/index.html b/client/index.html
index 5e09512..a4f4772 100644
--- a/client/index.html
+++ b/client/index.html
@@ -8,19 +8,22 @@
 		<!-- Bootstrap CSS -->
 		<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">
 		
+		<!-- Custom CSS -->
+		<link rel="stylesheet" href="styles/WebConsole.css">
+		
 		<title>WebConsole</title>
 	</head>
 	<body class="d-flex flex-column h-100">
 		<header>
 			<nav class="navbar navbar-expand-lg sticky-top navbar-dark bg-dark">
-				<a class="navbar-brand" href="index.html">WebConsole</a>
+				<a class="navbar-brand" href="#" id="navbarBrandLink">WebConsole</a>
 				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContainer" aria-controls="navbarContainer" aria-expanded="false" aria-label="Toggle navigation">
 					<span class="navbar-toggler-icon"></span>
 				</button>
 				<div class="collapse navbar-collapse" id="navbarContainer">
 					<ul class="navbar-nav mr-auto">
 						<li class="nav-item">
-							<a class="nav-link" href="index.html">Home</a>
+							<a class="nav-link" href="#" id="navbarHomeLink">Home</a>
 						</li>
 						<li class="nav-item dropdown">
 							<a class="nav-link dropdown-toggle" href="#" id="serversDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
@@ -34,9 +37,7 @@
 						</li>
 					</ul>
 					<ul class="navbar-nav ml-auto">
-						<li class="nav-item">
-							<a class="nav-link" href="#">Something</a>
-						</li>
+						<!-- Elements on the right -->
 					</ul>
 				</div>
 			</nav>
@@ -52,7 +53,43 @@
 			
 			<!-- Server management container -->
 			<div class="container" id="serverContainer" style="display: none;">
-				<h1 class="mt-5" id="serverTitle"></h1>
+				<h1 class="mt-4" id="serverTitle"></h1>
+				
+				<div class="row p-3">
+					<div class="col-sm-3 mb-2">
+						<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-3 mb-2">
+						<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-3 mb-2">
+						<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="input-group mb-3">
 					<textarea class="form-control" rows="20" id="consoleTextArea" disabled style="resize: none;"></textarea>
 				</div>
@@ -150,7 +187,7 @@
 		<!-- Webpage footer -->
 		<footer class="footer mt-auto py-3">
 			<div class="container">
-				<span class="text-muted">WebConsole 1.0.0 - <a href="https://github.com/mesacarlos/WebConsole">GitHub</a></span>
+				<span class="text-muted">WebConsole 1.1.0 - <a href="https://github.com/mesacarlos/WebConsole">GitHub</a></span>
 			</div>
 		</footer>
 		
@@ -164,5 +201,6 @@
 		<script src="scripts/WebConsoleManager.js"></script>
 		<script src="scripts/WebConsolePersistenceManager.js"></script>
 		<script src="scripts/WebConsole.js"></script>
+		<script src="scripts/WebConsoleJqueryHandler.js"></script>
 	</body>
 </html>
\ No newline at end of file
diff --git a/client/scripts/WebConsole.js b/client/scripts/WebConsole.js
index 27318bb..e7d9f7f 100644
--- a/client/scripts/WebConsole.js
+++ b/client/scripts/WebConsole.js
@@ -1,6 +1,5 @@
 /**
  Main JS file for WebConsole.
- Version v1.0.0
  https://github.com/mesacarlos
  2019 Carlos Mesa under MIT License.
 */
@@ -11,78 +10,7 @@
 var persistenceManager = new WebConsolePersistenceManager();
 var connectionManager = new WebConsoleManager();
 var autoPasswordCompleted = false; //When true, saved password was used. If a 401 is received, then saved password is not correct
-
-/**
-* Show saved serverlist on startup
-*/
-$(document).ready(function() {
-	$("#serverContainer").hide();
-	updateServerList();
-});
-
-/**
-* Server saver button click handler
-*/
-$("#saveAndConnectServerButton").click(function() {
-	//Save server
-	var name = $("#server-name").val();
-	var uri = $("#server-uri").val();
-	persistenceManager.saveServer(new WSServer(name, uri));
-	
-	//Empty all modal values
-	$("#server-name").val("");
-	$("#server-uri").val("");
-	
-	//Update GUI serverlist
-	updateServerList();
-	
-	//Connect to server
-	openServer(name);
-});
-
-
-
-
-/**
-* Server password typed (modal 'done' button clicked)
-*/
-$("#passwordSendButton").click(function() {
-	//Close modal
-	$('#passwordModal').modal('hide');
-});
-
-/**
-* Enter button keyboard pressed on password modal
-*/
-$("#passwordForm").submit(function(event){
-	//Solves bug with forms:
-	event.preventDefault();
-	
-	//Close modal
-	$('#passwordModal').modal('hide');
-});
-
-$('#passwordModal').on('hidden.bs.modal', function (e) {
-	//Send LOGIN command to server
-	var pwd = $("#server-pwd").val();
-	connectionManager.sendPassword(pwd);
-	
-	//Save password if set
-	var savePasswordChecked = $("#rememberPwdCheckbox").prop("checked");
-	if(savePasswordChecked){
-		var serverName = connectionManager.activeConnection.serverName;
-		var serverURI = connectionManager.activeConnection.serverURI;
-		var svObj = new WSServer(serverName, serverURI);
-		svObj.setPassword(pwd);
-		persistenceManager.saveServer(svObj);
-	}
-	
-	//Remove password from modal
-	$("#server-pwd").val('');
-});
-
-
-
+var statusCommandsInterval = -1;
 
 /**
 * Prepare and show server to user
@@ -139,35 +67,82 @@ function onWebSocketsMessage(message){
 				$('#passwordModal').modal('show');
 			}
 			break;
+		case 1000:
+			//Players
+			writePlayerInfo(message.connectedPlayers, message.maxPlayers);
+			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){
+		statusCommandsInterval = setInterval(function(){
+			connectionManager.askForInfo();
+		}, 2500);
+	}
 }
 
 /**
 * Write to console
 */
 function writeToWebConsole(msg){
+	var isScrolledDown = document.getElementById("consoleTextArea").scrollHeight - document.getElementById("consoleTextArea").scrollTop - 12 == $("#consoleTextArea").height();
+	
 	$("#consoleTextArea").append(msg.replace("<", "&lt;") + "\n");
+	
+	if(isScrolledDown){
+		var textarea = document.getElementById('consoleTextArea');
+		textarea.scrollTop = textarea.scrollHeight;
+	}
 }
 
 /**
-* On send command button click
+* Fill connected players card
 */
-$("#sendCommandButton").click(function() {
-	connectionManager.sendConsoleCmd($('#commandInput').val());
-	$('#commandInput').val('');
-});
+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(serverName){
 	if(connectionManager.activeConnection.serverName == serverName){
-		//Disable GUI, back to welcome page
-		$("#welcomeContainer").show();
-		$("#serverContainer").hide();
+		backToHomepage();
 		
 		//Inform user
 		$('#disconnectionModal').modal('show');
@@ -175,6 +150,23 @@ function closedConnection(serverName){
 	connectionManager.deleteConnection(serverName);
 }
 
+/**
+* Shows welcome screen
+*/
+function backToHomepage(){
+	//Stop gathering info from server
+	clearInterval(statusCommandsInterval);
+	statusCommandsInterval = -1;
+	
+	//Clear all server indicators
+	writePlayerInfo(0, 0);
+	writeCpuInfo(0);
+	writeRamInfo(0, 0, 0);
+	
+	$("#welcomeContainer").show();
+	$("#serverContainer").hide();
+}
+
 /**
 * Update dropdown with saved server list
 */
diff --git a/client/scripts/WebConsoleConnector.js b/client/scripts/WebConsoleConnector.js
index f74a2f8..e9a3b8f 100644
--- a/client/scripts/WebConsoleConnector.js
+++ b/client/scripts/WebConsoleConnector.js
@@ -1,5 +1,5 @@
 /**
- WebConsole Connector for WebConsole v1.0.0
+ WebConsole Connector for WebConsole
  Used to connect to WebSocketsServer
  https://github.com/mesacarlos
  2019 Carlos Mesa under MIT License.
diff --git a/client/scripts/WebConsoleJqueryHandler.js b/client/scripts/WebConsoleJqueryHandler.js
new file mode 100644
index 0000000..0444e6e
--- /dev/null
+++ b/client/scripts/WebConsoleJqueryHandler.js
@@ -0,0 +1,98 @@
+/**
+ JS File containing all JQuery-related handlers
+ https://github.com/mesacarlos
+ 2019 Carlos Mesa under MIT License.
+*/
+
+/**
+* Show saved serverlist on startup
+*/
+$(document).ready(function() {
+	$("#serverContainer").hide();
+	updateServerList();
+});
+
+/**
+* Add server modal button click
+*/
+$("#saveAndConnectServerButton").click(function() {
+	//Save server
+	var name = $("#server-name").val();
+	var uri = $("#server-uri").val();
+	persistenceManager.saveServer(new WSServer(name, uri));
+	
+	//Empty all modal values
+	$("#server-name").val("");
+	$("#server-uri").val("");
+	
+	//Update GUI serverlist
+	updateServerList();
+	
+	//Connect to server
+	openServer(name);
+});
+
+/**
+* Password modal button click
+*/
+$("#passwordSendButton").click(function() {
+	//Close modal
+	$('#passwordModal').modal('hide');
+});
+
+/**
+* Password modal Enter key pressed
+*/
+$("#passwordForm").submit(function(event){
+	//Solves bug with forms:
+	event.preventDefault();
+	
+	//Close modal
+	$('#passwordModal').modal('hide');
+});
+
+/**
+* On password modal close (Login)
+*/
+$('#passwordModal').on('hidden.bs.modal', function (e) {
+	//Send LOGIN command to server
+	var pwd = $("#server-pwd").val();
+	connectionManager.sendPassword(pwd);
+	
+	//Save password if set
+	var savePasswordChecked = $("#rememberPwdCheckbox").prop("checked");
+	if(savePasswordChecked){
+		var serverName = connectionManager.activeConnection.serverName;
+		var serverURI = connectionManager.activeConnection.serverURI;
+		var svObj = new WSServer(serverName, serverURI);
+		svObj.setPassword(pwd);
+		persistenceManager.saveServer(svObj);
+	}
+	
+	//Remove password from modal
+	$("#server-pwd").val('');
+});
+
+/**
+* On send command button click
+*/
+$("#sendCommandButton").click(function() {
+	connectionManager.sendConsoleCmd($('#commandInput').val());
+	$('#commandInput').val('');
+});
+
+/**
+* On Navbar Home link clicked
+*/
+$("#navbarBrandLink").click(function() {
+	backToHomepage();
+});
+
+/**
+* On Navbar Brand link clicked
+*/
+$("#navbarHomeLink").click(function() {
+	backToHomepage();
+});
+
+
diff --git a/client/scripts/WebConsoleManager.js b/client/scripts/WebConsoleManager.js
index 80d4f16..f02cdc2 100644
--- a/client/scripts/WebConsoleManager.js
+++ b/client/scripts/WebConsoleManager.js
@@ -1,5 +1,5 @@
 /**
- WebConsole Manager for WebConsole v1.0.0
+ WebConsole Manager for WebConsole
  Used to manage active connections
  https://github.com/mesacarlos
  2019 Carlos Mesa under MIT License.
@@ -70,4 +70,13 @@ class WebConsoleManager {
 		this.activeConnection.sendToServer("EXEC " + 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/client/scripts/WebConsolePersistenceManager.js b/client/scripts/WebConsolePersistenceManager.js
index 265e113..220f9a9 100644
--- a/client/scripts/WebConsolePersistenceManager.js
+++ b/client/scripts/WebConsolePersistenceManager.js
@@ -1,5 +1,5 @@
 /**
- WebConsole Persistence Manager for WebConsole v1.0.0
+ WebConsole Persistence Manager for WebConsole
  Used to save your servers into your browser
  https://github.com/mesacarlos
  2019 Carlos Mesa under MIT License.
diff --git a/client/styles/WebConsole.css b/client/styles/WebConsole.css
new file mode 100644
index 0000000..c5643c2
--- /dev/null
+++ b/client/styles/WebConsole.css
@@ -0,0 +1,3 @@
+.flat-progressbar{
+	height: 10px;
+}
\ No newline at end of file
diff --git a/src/com/mesacarlos/webconsole/command/RamUsageCommand.java b/src/com/mesacarlos/webconsole/command/RamUsageCommand.java
index 9eb7637..6b5cadf 100644
--- a/src/com/mesacarlos/webconsole/command/RamUsageCommand.java
+++ b/src/com/mesacarlos/webconsole/command/RamUsageCommand.java
@@ -15,7 +15,7 @@ public class RamUsageCommand implements WSCommand {
 		int max = (int) r.maxMemory()/1024/1024;
 		int used = max - free;
 		
-		wsServer.sendToClient(conn, new RamUsage(free + "free, " + used + " used," + max + " maximum memmory", free, used, max));
+		wsServer.sendToClient(conn, new RamUsage(free + " free, " + used + " used, " + max + " maximum memmory", free, used, max));
 	}
 
 }
\ No newline at end of file
diff --git a/src/com/mesacarlos/webconsole/json/CpuUsage.java b/src/com/mesacarlos/webconsole/json/CpuUsage.java
index bf16fa2..858e33b 100644
--- a/src/com/mesacarlos/webconsole/json/CpuUsage.java
+++ b/src/com/mesacarlos/webconsole/json/CpuUsage.java
@@ -33,7 +33,7 @@ public class CpuUsage implements JSONOutput{
 	public String toJSON() {
 		JsonObject object = new JsonObject();
 		object.addProperty("status", getStatusCode());
-		object.addProperty("statusDescription", "Cpu Usage");
+		object.addProperty("statusDescription", "CPU Usage");
 		object.addProperty("usage", getUsage());
 		object.addProperty("message", getMessage());
 		return object.toString();
diff --git a/src/com/mesacarlos/webconsole/json/RamUsage.java b/src/com/mesacarlos/webconsole/json/RamUsage.java
index 0f6533d..89901fc 100644
--- a/src/com/mesacarlos/webconsole/json/RamUsage.java
+++ b/src/com/mesacarlos/webconsole/json/RamUsage.java
@@ -55,7 +55,7 @@ public class RamUsage implements JSONOutput {
 		object.addProperty("status", getStatusCode());
 		object.addProperty("statusDescription", "RAM Usage");
 		object.addProperty("free", getFree());
-		object.addProperty("total", getUsed());
+		object.addProperty("used", getUsed());
 		object.addProperty("max", getMax());
 		object.addProperty("message", getMessage());
 		return object.toString();
