Uplandustries/WebConsole-Client-v2.4
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v1.1.0 deploy

Browse Source
This commit is contained in:
Carlos 2019-08-13 20:52:28 +02:00
parent 7f170f15b6
commit 5dfd026ca8
10 changed files with 234 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
client/index.html
View File

@ -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>

154
client/scripts/WebConsole.js
View File

@ -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
*/

2
client/scripts/WebConsoleConnector.js
View File

@ -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.

98
client/scripts/WebConsoleJqueryHandler.js Normal file
View File

@ -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();
});

11
client/scripts/WebConsoleManager.js
View File

@ -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");
}
}

2
client/scripts/WebConsolePersistenceManager.js
View File

@ -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.

3
client/styles/WebConsole.css Normal file
View File

@ -0,0 +1,3 @@
.flat-progressbar{
height: 10px;
}

2
src/com/mesacarlos/webconsole/command/RamUsageCommand.java
View File

@ -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));
}
}

2
src/com/mesacarlos/webconsole/json/CpuUsage.java
View File

@ -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();

2
src/com/mesacarlos/webconsole/json/RamUsage.java
View File

@ -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();