From 5c833246d89a9d005efa6f85b685420c2cce82cf Mon Sep 17 00:00:00 2001
From: Carlos <28845529+mesacarlos@users.noreply.github.com>
Date: Mon, 3 Feb 2020 00:41:00 +0100
Subject: [PATCH] Added settings menu, datetime on each line, text focus to end
 on history browsing, ..

---
 client/index.html                             | 26 +++++++++
 client/scripts/WebConsole.js                  |  4 ++
 client/scripts/WebConsoleJqueryHandler.js     | 19 ++++++-
 client/scripts/WebConsoleLanguage.js          | 28 ++++++++++
 .../scripts/WebConsolePersistenceManager.js   | 55 +++++++++++++++++++
 5 files changed, 131 insertions(+), 1 deletion(-)

diff --git a/client/index.html b/client/index.html
index 82d7e96..4a3d274 100644
--- a/client/index.html
+++ b/client/index.html
@@ -52,6 +52,9 @@
 								<a class="dropdown-item" href="#" onclick="setLanguage('fr_FR')">Français</a>
 							</div>
 						</li>
+						<li class="nav-item">
+							<a class="nav-link" href data-toggle="modal" data-target="#settingsModal" id="settingsLink">Settings</a>
+						</li>
 					</ul>
 				</div>
 			</nav>
@@ -209,6 +212,29 @@
 				</div>
 			</div>
 		</div>
+
+		<!-- Settings Modal -->
+		<div class="modal fade" id="settingsModal" tabindex="-1" role="dialog" aria-labelledby="settingsModalCenterTitle" 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="settingsModalLongTitle">WebConsole Settings</h5>
+						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
+							<span aria-hidden="true">&times;</span>
+						</button>
+					</div>
+					<div class="modal-body" id="settingsModalDescription">
+						<div class="custom-control custom-switch">
+							<input type="checkbox" class="custom-control-input" id="showDateSettingsSwitch">
+							<label class="custom-control-label" for="showDateSettingsSwitch" id="showDateSettingsSwitchLabel">Show date and time on each console line</label>
+						</div>
+					</div>
+					<div class="modal-footer">
+						<button type="button" class="btn btn-secondary" data-dismiss="modal" id="settingsModalCloseButton">Done</button>
+					</div>
+				</div>
+			</div>
+		</div>
 		
 		<!-- Webpage footer -->
 		<footer class="footer mt-auto py-3">
diff --git a/client/scripts/WebConsole.js b/client/scripts/WebConsole.js
index 4f55ecb..9fa64ff 100644
--- a/client/scripts/WebConsole.js
+++ b/client/scripts/WebConsole.js
@@ -150,6 +150,10 @@ function writeToWebConsole(msg){
 	msg = msg.replace(/§o/g, "<span style='font-style: italic;'>"); //&o
 	
 	msg = msg.replace(/§r/g, "</span>");  //&r
+
+	//Append datetime if enabled
+	if(persistenceManager.getSetting("dateTimePrefix"))
+		msg = "[" + new Date().toLocaleString() + "] " + msg;
 	
 	$("#consoleTextArea").append(msg + "<br>");
 	
diff --git a/client/scripts/WebConsoleJqueryHandler.js b/client/scripts/WebConsoleJqueryHandler.js
index 9f99fe8..d7709ec 100644
--- a/client/scripts/WebConsoleJqueryHandler.js
+++ b/client/scripts/WebConsoleJqueryHandler.js
@@ -9,6 +9,7 @@
 */
 $(document).ready(function() {
 	$("#serverContainer").hide();
+	persistenceManager.initializeSettings();
 	setLanguage(persistenceManager.getLanguage());
 	updateServerList();
 
@@ -111,7 +112,7 @@ $("#sendCommandButton").click(function() {
 /**
 * Enter or arrow down/up key on command input
 */
-$("#commandInput").on('keydown', function (e) {
+$("#commandInput").on('keyup', function (e) {
 	if(e.which === 13){ //Detect enter key
 		//Disable textbox to prevent multiple submit
 		$(this).attr("disabled", "disabled");
@@ -142,6 +143,7 @@ $("#commandInput").on('keydown', function (e) {
 	}else if(e.which == 9){ //Detect tab key
 		//TODO Suggest user from connectionManager.activeConnection.players;
 	}
+
 });
 
 /**
@@ -180,3 +182,18 @@ $("#navbarHomeLink").click(function() {
 	backToHomepage();
 });
 
+/**
+* On Settings link clicked
+*/
+$("#settingsLink").click(function() {
+	//Update modal switches and boxes with saved settings
+	$("#showDateSettingsSwitch").prop("checked", persistenceManager.getSetting("dateTimePrefix"));
+});
+
+/**
+* On showDateSettingsSwitch switched
+*/
+$("#showDateSettingsSwitch").click(function() {
+	//Update modal switches and boxes with saved settings
+	persistenceManager.setSetting("dateTimePrefix", $("#showDateSettingsSwitch").is(":checked"));
+});
\ No newline at end of file
diff --git a/client/scripts/WebConsoleLanguage.js b/client/scripts/WebConsoleLanguage.js
index 1a73332..dc48554 100644
--- a/client/scripts/WebConsoleLanguage.js
+++ b/client/scripts/WebConsoleLanguage.js
@@ -34,6 +34,10 @@ function setLanguage(locale){
 				"disconnectionModalLongTitle": "Disconnected",
 				"disconnectionModalDescription": "Connection was lost with the server you were connected to, probably caused by a server stop. Moved back to welcome screen.",
 				"disconnectionModalCloseButton": "Close",
+				"settingsLink": "Settings",
+				"settingsModalLongTitle": "WebConsole Settings",
+				"showDateSettingsSwitchLabel": "Show date and time on each console line",
+				"settingsModalCloseButton": "Done",
 				"players_online": "Players Online",
 				"cpu_title": "CPU",
 				"ram_title": "RAM usage",
@@ -66,6 +70,10 @@ function setLanguage(locale){
 				"disconnectionModalLongTitle": "Desconectado",
 				"disconnectionModalDescription": "Se ha perdido la conexión con el servidor al que estabas conectado. Esto puede ser debido a que el servidor se ha cerrado. Se ha vuelto a la ventana principal.",
 				"disconnectionModalCloseButton": "Cerrar",
+				"settingsLink": "Configuración",
+				"settingsModalLongTitle": "Configuración de WebConsole",
+				"showDateSettingsSwitchLabel": "Mostrar fecha y hora en cada linea de consola",
+				"settingsModalCloseButton": "Hecho",
 				"players_online": "Jugadores en línea",
 				"cpu_title": "CPU",
 				"ram_title": "RAM en uso",
@@ -98,6 +106,10 @@ function setLanguage(locale){
 				"disconnectionModalLongTitle": "Отключение!",
 				"disconnectionModalDescription": "Соединение с сервером, к которому вы подключены, потеряно.",
 				"disconnectionModalCloseButton": "Закрыть",
+				"settingsLink": "настройки",
+				"settingsModalLongTitle": "настройки WebConsole",
+				"showDateSettingsSwitchLabel": "Показать дату и время в каждой строке консоли",
+				"settingsModalCloseButton": "Выполнено",
 				"players_online": "Игроки",
 				"cpu_title": "CPU",
 				"ram_title": "RAM",
@@ -130,6 +142,10 @@ function setLanguage(locale){
 				"disconnectionModalLongTitle": "desconectado",
 				"disconnectionModalDescription": "Você foi desconectado, pode ser que o servidor foi fechado/reiniciado ou pode haver algum problema com a sua conexão.",
 				"disconnectionModalCloseButton": "Fechar",
+				"settingsLink": "Configurações",
+				"settingsModalLongTitle": "Configurações do WebConsole",
+				"showDateSettingsSwitchLabel": "Mostrar data e hora em cada linha do console",
+				"settingsModalCloseButton": "Feito",
 				"players_online": "Jogadores online",
 				"cpu_title": "Consumo de CPU",
 				"ram_title": "Consumo de RAM",
@@ -162,6 +178,10 @@ function setLanguage(locale){
 				"disconnectionModalLongTitle": "已断开",
 				"disconnectionModalDescription": "与服务器的通信中断, 可能是因为服务器停止运行. 已回到欢迎界面.",
 				"disconnectionModalCloseButton": "关闭",
+				"settingsLink": "设定值",
+				"settingsModalLongTitle": "WebConsole 设定值",
+				"showDateSettingsSwitchLabel": "在每个控制台行上显示日期和时间",
+				"settingsModalCloseButton": "完成",
 				"players_online": "在线人数",
 				"cpu_title": "CPU",
 				"ram_title": "内存使用量",
@@ -194,6 +214,10 @@ function setLanguage(locale){
 				"disconnectionModalLongTitle": "Débranché",
 				"disconnectionModalDescription": "La connexion a été perdue avec le serveur auquel vous étiez connecté, probablement en raison d'un arrêt du serveur. Revenu à l'écran d'accueil.",
 				"disconnectionModalCloseButton": "Fermer",
+				"settingsLink": "Réglages",
+				"settingsModalLongTitle": "Réglages de WebConsole",
+				"showDateSettingsSwitchLabel": "Afficher la date et l'heure sur chaque ligne de console",
+				"settingsModalCloseButton": "Terminé",
 				"players_online": "Joueurs en ligne",
 				"cpu_title": "Utilisation de la CPU",
 				"ram_title": "Utilisation de la RAM",
@@ -226,6 +250,10 @@ function setLanguage(locale){
 				"disconnectionModalLongTitle": "Odpojeno",
 				"disconnectionModalDescription": "Připojení se ztratilo se serverem, ke kterému jste byli připojeni, pravděpodobně způsobené zastavením serveru. Vrátil se zpět na uvítací obrazovku.",
 				"disconnectionModalCloseButton": "Zavřít",
+				"settingsLink": "Nastavení",
+				"settingsModalLongTitle": "Nastavení WebConsole",
+				"showDateSettingsSwitchLabel": "Zobrazit datum a čas na každé řádce konzoly",
+				"settingsModalCloseButton": "Hotovo",
 				"players_online": "Hráči online",
 				"cpu_title": "CPU",
 				"ram_title": "Využití RAM",
diff --git a/client/scripts/WebConsolePersistenceManager.js b/client/scripts/WebConsolePersistenceManager.js
index d303e7d..f3dfc5e 100644
--- a/client/scripts/WebConsolePersistenceManager.js
+++ b/client/scripts/WebConsolePersistenceManager.js
@@ -134,6 +134,54 @@ class WebConsolePersistenceManager{
 		//Save to WebStorage
 		window.localStorage.WebConsole = JSON.stringify(storageObj);
 	}
+
+	/**
+	* Create settings object if not defined or populate with new options if updating
+	*/
+	initializeSettings(){
+		this.initializeLocalStorage();
+
+		//Create settings object
+		var currentSettings = JSON.parse(window.localStorage.WebConsole).settings;
+		if (typeof currentSettings === 'undefined') {
+			currentSettings = new Object();
+		}
+
+		var settings = {
+			dateTimePrefix : new Setting("dateTimePrefix", true)
+		}
+
+		//Set settings
+		jQuery.each(settings, (key, settingObj) =>{
+			if(!currentSettings.hasOwnProperty(settingObj.name))
+				currentSettings[settingObj.name] = settingObj.defaultValue;
+		});
+
+		//Save all
+		var storageObj = JSON.parse(window.localStorage.WebConsole);
+		storageObj.settings = currentSettings;
+		window.localStorage.WebConsole = JSON.stringify(storageObj);
+	}
+
+	/**
+	* Update setting value
+	*/
+	setSetting(name, value){
+		var currentSettings = JSON.parse(window.localStorage.WebConsole).settings;
+		currentSettings[name] = value;
+
+		//Save all
+		var storageObj = JSON.parse(window.localStorage.WebConsole);
+		storageObj.settings = currentSettings;
+		window.localStorage.WebConsole = JSON.stringify(storageObj);
+	}
+
+	/**
+	* Get setting value
+	*/
+	getSetting(name){
+		return JSON.parse(window.localStorage.WebConsole).settings[name];
+	}
 	
 }
 
@@ -146,4 +194,11 @@ class WSServer{
 	setPassword(pwd){
 		this.serverPassword = pwd;
 	}
+}
+
+class Setting{
+	constructor(name, defaultValue){
+		this.name = name;
+		this.defaultValue = defaultValue;
+	}
 }
\ No newline at end of file