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

Client, revision 2: Console colors added. General improvements.

Browse Source
This commit is contained in:
Carlos 2019-08-20 16:10:59 +02:00
parent fcd89e3539
commit 1446d5fb32
4 changed files with 56 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
client/index.html
View File

@ -93,13 +93,13 @@
<button type="button" class="btn btn-danger" id="deleteServerButton">Delete server</button>
</div>
</div>
<div class="input-group mb-3">
<textarea class="form-control" rows="20" id="consoleTextArea" disabled style="resize: none;"></textarea>
<div class="card mb-2">
<div class="card-body overflow-auto text-light bg-dark console" id="consoleTextArea"></div>
</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>
<button class="btn btn-secondary" type="button" id="sendCommandButton">Send</button>
</div>
</div>
</div>
@ -198,7 +198,7 @@
<!-- Webpage footer -->
<footer class="footer mt-auto py-3">
<div class="container">
<span class="text-muted">WebConsole v1.1 - <a href="https://github.com/mesacarlos/WebConsole">GitHub</a></span>
<span class="text-muted">WebConsole v1.1 (rev. 2) - <a href="https://github.com/mesacarlos/WebConsole">GitHub</a></span>
</div>
</footer>

47
client/scripts/WebConsole.js
View File

@ -96,9 +96,52 @@ function onWebSocketsMessage(message){
* Write to console
*/
function writeToWebConsole(msg){
var isScrolledDown = document.getElementById("consoleTextArea").scrollHeight - document.getElementById("consoleTextArea").scrollTop - 12 == $("#consoleTextArea").height();
var isScrolledDown = document.getElementById("consoleTextArea").scrollHeight - document.getElementById("consoleTextArea").scrollTop - 40 == $("#consoleTextArea").height();
$("#consoleTextArea").append(msg.replace("<", "&lt;") + "\n");
//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(/§r/g, "</span>"); //&r
$("#consoleTextArea").append(msg + "<br>");
if(isScrolledDown){
var textarea = document.getElementById('consoleTextArea');

3
client/scripts/WebConsoleJqueryHandler.js
View File

@ -103,6 +103,9 @@ $("#commandInput").on('keypress', function (e) {
//Enable the textbox again.
$(this).removeAttr("disabled");
//Focus again
$(this).focus();
}
});

4
client/styles/WebConsole.css
View File

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