Preliminary version of Web client finished
This commit is contained in:
Carlos
parent
c691c2de0b
commit
4e6b1b865e
@ -53,8 +53,15 @@
|
||||
<!-- Server management container -->
|
||||
<div class="container" id="serverContainer">
|
||||
<h1 class="mt-5">Survival</h1>
|
||||
<p class="lead">Manage now your Minecraft Server.</p>
|
||||
<p>Here will be all control buttons and console logs</p>
|
||||
<div class="input-group mb-3">
|
||||
<textarea class="form-control" rows="20" id="consoleTextArea" disabled></textarea>
|
||||
</div>
|
||||
<div class="input-group mb-3">
|
||||
<input type="text" class="form-control" id="commandInput">
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-outline-secondary" type="button" id="sendCommandButton">Send</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@ -64,7 +71,7 @@
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="addServerModalLongTitle">Add a new server</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="CloseAddServer">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
@ -78,16 +85,6 @@
|
||||
<label for="server-uri" class="col-form-label">Server URI:</label>
|
||||
<input type="text" class="form-control" id="server-uri" placeholder="ws://localhost:8080">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="server-pwd" class="col-form-label">Password:</label>
|
||||
<input type="text" class="form-control" id="server-pwd">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="rememberPwdCheckbox">
|
||||
<label class="form-check-label" for="rememberPwdCheckbox">Remember password</label>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
@ -103,16 +100,16 @@
|
||||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="passwordModalLongTitle">Add a new server</h5>
|
||||
<h5 class="modal-title" id="passwordModalLongTitle">Password required</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form>
|
||||
<form id="passwordForm">
|
||||
<div class="form-group">
|
||||
<label for="server-pwd" class="col-form-label">Password:</label>
|
||||
<input type="text" class="form-control" id="server-pwd">
|
||||
<input type="password" class="form-control" id="server-pwd">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="form-check">
|
||||
@ -124,7 +121,27 @@
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary" data-dismiss="modal" id="passwordTypedButton">Save and connect</button>
|
||||
<button type="button" class="btn btn-primary" data-dismiss="modal" id="passwordSendButton">Login</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Disconnection Modal -->
|
||||
<div class="modal fade" id="disconnectionModal" tabindex="-1" role="dialog" aria-labelledby="disconnectionModalCenterTitle" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="disconnectionModalLongTitle">Disconnected</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
Connection was lost with the server you were connected to. Moved back to welcome screen.
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -10,6 +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
|
||||
@ -39,14 +40,47 @@ $("#saveAndConnectServerButton").click(function() {
|
||||
openServer(name);
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Server saver button click handler
|
||||
* Server password typed (modal 'done' button clicked)
|
||||
*/
|
||||
$("#passwordTypedButton").click(function() {
|
||||
//Send LOGIN command to server
|
||||
|
||||
$("#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);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Prepare and show server to user
|
||||
*/
|
||||
@ -55,44 +89,39 @@ function openServer(serverName){
|
||||
$("#welcomeContainer").hide();
|
||||
$("#serverContainer").show();
|
||||
|
||||
//If a connection is already active, delete all subscribers
|
||||
if(typeof connectionManager.activeConnection !== "undefined"){
|
||||
connectionManager.activeConnection.removeSubscribers();
|
||||
}
|
||||
//New server, new variables:
|
||||
autoPasswordCompleted = false;
|
||||
|
||||
//Start connection or retrieve it if already exists
|
||||
if(typeof connectionManager.getConnection(serverName) === "undefined"){
|
||||
//Retrieve from persistence
|
||||
var serverObj = persistenceManager.getServer(serverName);
|
||||
connectionManager.activeConnection = new WebConsoleConnector(serverObj.serverName, serverObj.serverURI);
|
||||
}else{
|
||||
//Use active connection
|
||||
connectionManager.activeConnection = connectionManager.getConnection(serverName);
|
||||
|
||||
}
|
||||
//Create or retrieve connection
|
||||
connectionManager.loadConnection(serverName);
|
||||
|
||||
//Subscribe a function and connect
|
||||
//Subscribe a function
|
||||
connectionManager.activeConnection.subscribe(onWebSocketsMessage);
|
||||
connectionManager.activeConnection.connect();
|
||||
}
|
||||
|
||||
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:
|
||||
//Waiting for login
|
||||
|
||||
//Waiting for login. Show password modal or retrieve password
|
||||
var savedPwd = persistenceManager.getServer(connectionManager.activeConnection.serverName).serverPassword;
|
||||
if(typeof savedPwd !== "undefined" && !autoPasswordCompleted){
|
||||
connectionManager.sendPassword(savedPwd);
|
||||
autoPasswordCompleted = true;
|
||||
}else{
|
||||
$('#passwordModal').modal('show');
|
||||
}
|
||||
break;
|
||||
case 403:
|
||||
//Forbidden
|
||||
@ -100,11 +129,40 @@ function onWebSocketsMessage(message){
|
||||
break;
|
||||
default:
|
||||
console.log('Unknown server response:');
|
||||
console.log(message);
|
||||
}
|
||||
console.log(message);
|
||||
}
|
||||
|
||||
/**
|
||||
* Write to console
|
||||
*/
|
||||
function writeToWebConsole(msg){
|
||||
$("#consoleTextArea").append(msg + "\n");
|
||||
}
|
||||
|
||||
/**
|
||||
* On send command button click
|
||||
*/
|
||||
$("#sendCommandButton").click(function() {
|
||||
connectionManager.sendConsoleCmd($('#commandInput').val());
|
||||
$('#commandInput').val('');
|
||||
});
|
||||
|
||||
/**
|
||||
* Called from WebConsoleConnector only.
|
||||
*/
|
||||
function closedConnection(serverName){
|
||||
if(connectionManager.activeConnection.serverName == serverName){
|
||||
//Disable GUI, back to welcome page
|
||||
$("#welcomeContainer").show();
|
||||
$("#serverContainer").hide();
|
||||
|
||||
//Inform user
|
||||
$('#disconnectionModal').modal('show');
|
||||
}
|
||||
connectionManager.deleteConnection(serverName);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update dropdown with saved server list
|
||||
*/
|
||||
|
||||
@ -4,14 +4,6 @@
|
||||
https://github.com/mesacarlos
|
||||
2019 Carlos Mesa under MIT License.
|
||||
*/
|
||||
/*
|
||||
USAGE
|
||||
1 Create needed GUI
|
||||
2 Create a object of this class
|
||||
3 subscribe a function to receive the login required message
|
||||
4 show password modal
|
||||
5 subscribe console output list etc...
|
||||
*/
|
||||
class WebConsoleConnector {
|
||||
|
||||
constructor(serverName, serverURI) {
|
||||
@ -45,7 +37,7 @@ class WebConsoleConnector {
|
||||
* Internal function
|
||||
*/
|
||||
onClose(evt){
|
||||
//TODO
|
||||
closedConnection(this.serverName);
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -10,22 +10,64 @@ class WebConsoleManager {
|
||||
}
|
||||
|
||||
/**
|
||||
* Adds connection to list
|
||||
* Loads a existing connection or creates a new one
|
||||
*/
|
||||
addConnection(connection){
|
||||
this.activeConnections.push(connection);
|
||||
}
|
||||
|
||||
/**
|
||||
* Retrieve server by name
|
||||
*/
|
||||
getConnection(serverName){
|
||||
loadConnection(serverName){
|
||||
//If a connection is already active, delete all subscribers
|
||||
if(this.activeConnection){
|
||||
this.activeConnection.removeSubscribers();
|
||||
}
|
||||
|
||||
//If connection exists, load it
|
||||
var manager = this;
|
||||
var i;
|
||||
for (i = 0; i < this.activeConnections.length; i++) {
|
||||
if(this.activeConnections[i].serverName == serverName){
|
||||
return this.activeConnections[i];
|
||||
manager.activeConnection = this.activeConnections[i];
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
//If not created yet, create it
|
||||
var serverObj = new WebConsolePersistenceManager().getServer(serverName);
|
||||
this.activeConnection = new WebConsoleConnector(serverObj.serverName, serverObj.serverURI);
|
||||
this.activeConnection.connect();
|
||||
|
||||
//Save to connections list
|
||||
this.activeConnections.push(this.activeConnection);
|
||||
}
|
||||
|
||||
/**
|
||||
* Deletes connection (for example, if a connection was closed by server).
|
||||
* Called by WebConsole.js
|
||||
*/
|
||||
deleteConnection(serverName){
|
||||
//Delete from active connection (if it is the active one)
|
||||
if(this.activeConnection.serverName == serverName){
|
||||
this.activeConnection = null;
|
||||
}
|
||||
|
||||
//Delete from array
|
||||
var i;
|
||||
for (i = 0; i < this.activeConnections.length; i++) {
|
||||
if(this.activeConnections[i].serverName == serverName){
|
||||
this.activeConnections.splice(i, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Send password to server
|
||||
*/
|
||||
sendPassword(pwd){
|
||||
this.activeConnection.sendToServer("LOGIN " + pwd);
|
||||
}
|
||||
|
||||
/**
|
||||
* Send console command to server
|
||||
*/
|
||||
sendConsoleCmd(cmd){
|
||||
this.activeConnection.sendToServer("EXEC " + cmd);
|
||||
}
|
||||
|
||||
}
|
||||
@ -115,4 +115,8 @@ class WSServer{
|
||||
this.serverName = serverName;
|
||||
this.serverURI = serverURI;
|
||||
}
|
||||
|
||||
setPassword(pwd){
|
||||
this.serverPassword = pwd;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user