IPC GUI Update Nr.12 (#871)

* Remove unnecessary language flags

* Move language button to navbar

Added flag-icon-css

* Bump

* Update strings.json

* Add i18n support for bootstrap-select elements

* Misc

* Readd dropdown scroll

* Misc

* Add i18n support for bootstrap-select elements

* Misc

* Remove download buttons when switching tabs

* Add error message when trying to download empty text

* notepad++ region support

* Add bootstrap-toggle

* Misc

* Add bootstrap-toggle

* Add bootstrap-toggle to Log

* Misc

* Misc

* Add bootstrap-toggle

* Add bootstrap-toggle

* Misc

* Cleanup

* More cleanup

ArchiSteamFarm/www/css/app.css

@@ -41,12 +41,6 @@
     cursor: default;
 }
 
-.scrollable-menu {
-    height: auto;
-    max-height: 220px;
-    overflow-x: hidden;
-}
-
 button.bot-stopped {
     color: red;
 }
@@ -166,18 +160,9 @@ button.bot-resumed:hover {
     background: rgb(167, 167, 167);
 }
 
-#botRow .ui-selecting {
-    background: #FECA40;
-}
-
-#botRow .ui-selected {
-    background: #F39814;
-    color: white;
-}
-
-#gamesToRedeemInBackground,
-#unusedKeysText,
-#usedKeysText {
+#txtAddKeys,
+#txtUnusedKeys,
+#txtUsedKeys {
     width: 100%;
     height: 100px;
     font-size: 18px;
@@ -188,9 +173,10 @@ button.bot-resumed:hover {
     .swal-wide {
         width: 700px !important;
     }
-    #gamesToRedeemInBackground,
-	#unusedKeysText,
-	#usedKeysText {
+	
+    #txtAddKeys,
+	#txtUnusedKeys,
+	#txtUsedKeys {
         height: 250px !important;
     }
 }
@@ -201,4 +187,43 @@ button.bot-resumed:hover {
 
 .lockscreen-image{
 	left:-5px
+}
+
+.language-item {
+	padding: 0.6rem;
+}
+
+.dropdown-language {
+	background: #222d32 !important;
+	border-color: #222d32 !important;
+}
+
+.scrollable-menu {
+    height: auto;
+    max-height: 220px;
+    overflow-x: hidden;
+}
+
+.toggle.ios, .toggle-on.ios, .toggle-off.ios, .toggle-handle { 
+	border-radius: 20px;
+}
+
+.toggle-on {
+	color: #3d9970 !important;
+}
+
+.li-btn {
+	width: 100% !important;
+}
+
+.li-toggle {
+	padding: 5px 10px;
+}
+
+.dropdown-menu-toggle {
+	min-width: 140px !important;
+}
+
+.single-btn {
+	vertical-align: -webkit-baseline-middle;
 }

ArchiSteamFarm/www/js/app.js

@@ -1,6 +1,6 @@
-//#region Setup
+//{#region Setup
 const tmpIPCPassword = get('IPCPassword'),
-	  vGUI = '0.2';
+	  vGUI = '0.3';
 
 if (tmpIPCPassword) {
     $.ajaxSetup({
@@ -24,9 +24,9 @@ $.ajaxSetup({
         }
     }
 });
-//#endregion Setup
+//}#endregion Setup
 
-//#region Footer
+//{#region Footer
 $.ajax({
     url: '/Api/ASF',
     type: 'GET',
@@ -39,9 +39,9 @@ $.ajax({
         $('#changelog').attr('href', 'https://github.com/JustArchi/ArchiSteamFarm/releases/tag/' + vNr);
     }
 });
-//#endregion Footer
+//}#endregion Footer
 
-//#region Bot Status Buttons
+//{#region Bots Status Buttons
 function displayBotStatus() {
     var offline = 0,
 		disconnected = 0,
@@ -90,9 +90,9 @@ function displayBotStatus() {
 
 displayBotStatus();
 window.setInterval(function () { displayBotStatus(); }, 5000);
-//#endregion Bot Status Buttons
+//}#endregion Bots Status Buttons
 
-//#region ASF Information
+//{#region Information
 function displayRAMUsage() {
     $.ajax({
         url: '/Api/ASF',
@@ -139,9 +139,9 @@ function displayUptime() {
 
 displayUptime();
 window.setInterval(function () { displayUptime(); }, 60000);
-//#endregion ASF Information
+//}#endregion Information
 
-//#region Commands Page
+//{#region Commands
 var $cmdInput = $('#commandInput');
 
 function getDateAndTime() {
@@ -155,7 +155,7 @@ function getDateAndTime() {
 }
 
 function logCommand(state, cmd) {
-    var tmpAutoClear = get('autoClear');
+    var tmpAutoClear = get('chkClear');
 
     if (state) {
         $('#commandSent').val($.i18n('commands-sent', getDateAndTime(), cmd));
@@ -175,7 +175,7 @@ function logCommand(state, cmd) {
 function sendCommand() {
     var command = $cmdInput.val(),
         requestURL = '/Api/Command/' + encodeURIComponent(command),
-        tmpAutoClear = get('autoClear');
+        tmpAutoClear = get('chkClear');
 
     if (command === '') return;
 
@@ -210,9 +210,9 @@ function sendCommand() {
 
     if (tmpAutoClear !== 'false') $cmdInput.val('');
 }
-//#endregion Commands Page
+//}#endregion Commands
 
-//#region Global Config Utils
+//{#region Config Utils
 function generateConfigHTML(mode) {
     var namespace = mode === 'ASF' ? 'ArchiSteamFarm.GlobalConfig' : 'ArchiSteamFarm.BotConfig';
     $('.box-content-config').empty(); // Clear page content first
@@ -317,9 +317,9 @@ function createClickFunction() {
         });
     }
 }
-//#endregion Global Config Utils
+//}#endregion Config Utils
 
-//#region Config Editor
+//{#region Editor
 var globalConfig = {};
 
 function loadPageContentEditor(botName) {
@@ -560,9 +560,9 @@ function saveConfig(botName, config) {
         }
     });
 }
-//#endregion Config Editor
+//}#endregion Editor
 
-//#region Config Generator
+//{#region Generator
 var globalDefaultConfig = {};
 
 function loadPageContentGenerator(mode) {
@@ -759,17 +759,17 @@ function prepareConfigForDownload(mode) {
     }
 }
 
-function downloadObjectAsJson(exportName, exportObj) {
-    var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(exportObj, null, "\t"));
+function downloadObjectAsJson(filename, json) {
+    var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(json, null, "\t"));
     var downloadAnchorNode = document.createElement('a');
     downloadAnchorNode.setAttribute("href", dataStr);
-    downloadAnchorNode.setAttribute("download", exportName + ".json");
+    downloadAnchorNode.setAttribute("download", filename + ".json");
     downloadAnchorNode.click();
     downloadAnchorNode.remove();
 }
-//#endregion Config Page
+//}#endregion Generator
 
-//#region Right Sidebar
+//{#region Right Sidebar
 $(function () {
     'use strict';
 
@@ -800,85 +800,23 @@ $(function () {
             if ($('body').hasClass('fixed')) {
                 $('body').removeClass('fixed');
                 $('body').addClass('layout-boxed');
-                $('#toggleBoxed').removeClass('text-grey');
-                $('#toggleBoxed').addClass('text-olive');
-                $('#iconBoxed').removeClass('fa-rotate-180');
+				$('#chkBoxed').bootstrapToggle('on');
             }
         }
     }
 
-    function toggleBoxed() {
-        if ($('body').hasClass('fixed')) {
-            $('body').removeClass('fixed');
-            $('body').addClass('layout-boxed');
-            $('#toggleBoxed').removeClass('text-grey');
-            $('#toggleBoxed').addClass('text-olive');
-            $('#iconBoxed').removeClass('fa-rotate-180');
-            $('#toggleBoxed').blur();
-            store('layoutState', 'layout-boxed');
-        } else {
-            $('body').removeClass('layout-boxed');
-            $('body').addClass('fixed');
-            $('#toggleBoxed').removeClass('text-olive');
-            $('#toggleBoxed').addClass('text-grey');
-            $('#iconBoxed').addClass('fa-rotate-180');
-            $('#toggleBoxed').blur();
-            store('layoutState', 'fixed');
-        }
-    }
-
     function changeNightmode(savedNightmodeState) {
         if (savedNightmodeState === 'nightmode') {
             $('body').addClass('nightmode');
-            $('#toggleNightmode').removeClass('text-grey');
-            $('#toggleNightmode').addClass('text-olive');
-            $('#iconNightmode').removeClass('fa-rotate-180');
-        }
-    }
-
-    function toggleNightmode() {
-        if ($('body').hasClass('nightmode')) {
-            $('body').removeClass('nightmode');
-            $('#toggleNightmode').removeClass('text-olive');
-            $('#toggleNightmode').addClass('text-grey');
-            $('#iconNightmode').addClass('fa-rotate-180');
-            $('#toggleNightmode').blur();
-            store('nightmodeState', null);
-        } else {
-            $('body').addClass('nightmode');
-            $('#toggleNightmode').removeClass('text-grey');
-            $('#toggleNightmode').addClass('text-olive');
-            $('#iconNightmode').removeClass('fa-rotate-180');
-            $('#toggleNightmode').blur();
-            store('nightmodeState', 'nightmode');
+			$('#chkNightmode').bootstrapToggle('on');
         }
     }
 
     function loadLanguageHTML() {
-        var tmpLangCode = get('langCode'),
-            tmpLangMissing = get('langMissing'),
-            tmpLangTotal = get('langTotal');
+        var tmpLangCode = get('langCode');
 
-        $('#currentLanguage').attr({
-            alt: tmpLangCode,
-            src: '../img/flags/' + tmpLangCode + '.gif'
-        });
-
-		//rework this whole part (add saving "never show again")
-		//fix translation not working
-        if (tmpLangMissing > 0) {
-            var percentage = (tmpLangMissing * 100 / tmpLangTotal).toFixed(0),
-                //infoText = $.i18n('global-language-info', percentage); //Fix this
-                infoText = percentage + "% of this language is not translated!";
-            $('#languageInfo').html('<div class="alert alert-warning alert-dismissible">'
-                //+ '<button title="Never show again" type="button" class="close" data-dismiss="alert" aria-hidden="true">x</button>'
-                + infoText
-                + '</div>');
-        } else {
-            $('#languageInfo').text('');
-        }
-
-        $('#languages').collapse('hide');
+		$('#currentLanguage').attr('class', 'flag-icon');
+		$('#currentLanguage').addClass('flag-icon-' + tmpLangCode);
     }
 
     function loadLayout() {
@@ -888,9 +826,7 @@ $(function () {
             tmpLeftSidebarState = get('leftSidebarState');
 
         if (tmpSkin && $.inArray(tmpSkin, mySkins)) changeSkin(tmpSkin);            
-        if (tmpLeftSidebarState === 'sidebar-collapse') {
-            $('body').addClass('sidebar-collapse');
-        } 
+        if (tmpLeftSidebarState === 'sidebar-collapse') $('body').addClass('sidebar-collapse');
         if (tmpLayoutState) changeBoxed(tmpLayoutState);
         if (tmpNightmodeState) changeNightmode(tmpNightmodeState);
 
@@ -900,16 +836,28 @@ $(function () {
             e.preventDefault();
             changeSkin($(this).data('skin'));
         });
-
-        $('#toggleBoxed').on('click', function (e) {
-            e.preventDefault();
-            toggleBoxed();
-        });
-
-        $('#toggleNightmode').on('click', function (e) {
-            e.preventDefault();
-            toggleNightmode();
-        });
+		
+		$('#chkBoxed').change(function() {
+			if ($('body').hasClass('fixed')) {
+				$('body').removeClass('fixed');
+				$('body').addClass('layout-boxed');
+				store('layoutState', 'layout-boxed');
+			} else {
+				$('body').removeClass('layout-boxed');
+				$('body').addClass('fixed');
+				store('layoutState', 'fixed');
+			}
+		});
+		
+		$('#chkNightmode').change(function() {
+			if ($('body').hasClass('nightmode')) {
+				$('body').removeClass('nightmode');
+				store('nightmodeState', null);
+			} else {
+				$('body').addClass('nightmode');
+				store('nightmodeState', 'nightmode');
+			}
+		});
 
         $('#leftSidebar').on('click', function (e) {
             e.preventDefault();
@@ -917,11 +865,14 @@ $(function () {
             store('leftSidebarState', state);
         });
 
-        $('.language').on('click', function (e) {
+        $('.language-item').on('click', function (e) {
             e.preventDefault();
             loadLocales($(this).data('locale'));
             loadLanguageHTML();
         });
+		
+		$('#chkBoxed').bootstrapToggle();
+		$('#chkNightmode').bootstrapToggle();
     }
 
     // Create the menu
@@ -930,21 +881,21 @@ $(function () {
     // Layout options
     $layoutSettings.append(
         '<h4 class="control-sidebar-heading" data-i18n="global-layout">Layout</h4>'
-        // Boxed Layout
-        + '<div class="form-group hidden-xs hidden-sm">'
+		// Boxed Layout
+		+ '<div class="form-group hidden-xs hidden-sm">'
         + '<label class="control-sidebar-subheading">'
-        + '<button type="button" class="btn btn-box-tool pull-right text-grey" id="toggleBoxed"><i id="iconBoxed" class="fas fa-toggle-on fa-2x fa-rotate-180"></i></button>'
+        + '<input id="chkBoxed" type="checkbox" data-style="ios pull-right" data-onstyle="default" data-toggle="toggle" data-size="mini" data-on="<i class=\'far fa-square\'></i>" data-off="<i class=\'far fa-square\'></i>">'
         + '<i class="far fa-square fa-fw"></i> <span data-i18n="global-boxed">Boxed Layout</span>'
         + '</label>'
-        + '<p data-i18n="global-boxed-description">Toggle the boxed layout</p>'
+        + '<p data-i18n="global-boxed-description">Toggle boxed layout</p>'
         + '</div>'
-        // Nightmode
-        + '<div class="form-group">'
+		// Nightmode
+		+ '<div class="form-group">'
         + '<label class="control-sidebar-subheading">'
-        + '<button type="button" class="btn btn-box-tool pull-right text-grey" id="toggleNightmode"><i id="iconNightmode" class="fas fa-toggle-on fa-2x fa-rotate-180"></i></button>'
+        + '<input id="chkNightmode" type="checkbox" data-style="ios pull-right" data-onstyle="default" data-toggle="toggle" data-size="mini" data-on="<i class=\'fas fa-moon\'></i>" data-off="<i class=\'fas fa-moon\'></i>">'
         + '<i class="fas fa-moon fa-fw"></i> <span data-i18n="global-nightmode">Nightmode</span>'
         + '</label>'
-        + '<p data-i18n="global-nightmode-description">Toggle the nightmode</p>'
+        + '<p data-i18n="global-nightmode-description">Toggle nightmode</p>'
         + '</div>'
     );
     
@@ -975,31 +926,19 @@ $(function () {
     $layoutSettings.append('<h4 class="control-sidebar-heading" data-i18n="global-skins">Skins</h4>');
     $layoutSettings.append($skinsList);
 
-    var $languagesList = $('<div />', { 'class': 'collapse', 'id': 'languages' });
-
     loadAllLanguages();
 
     for (var i in availableLanguages) {
         var language = availableLanguages[i],
-            langCode = (language === 'strings') ? 'us' : language.substr(language.length - 2).toLowerCase();
-
-        $languagesList.append('<button type="button" class="btn btn-box-tool language" data-locale="' + language + '"><img src="../img/flags/' + langCode + '.gif" alt="' + langCode + '"></button>');
+		langCode = (language === 'strings') ? 'us' : language.substr(language.length - 2).toLowerCase();
+		
+		if (language === 'strings.sr-CS') langCode = 'rs'; // fix for flag-icon-css
+		
+        $('.dropdown-language').append('<a class="language-item" href="javascript:void(0)" data-locale="' + language + '"><i class="flag-icon flag-icon-' + langCode + '"></i></a>');
     }
 
-    $layoutSettings.append('<h4 class="control-sidebar-heading" data-i18n="global-language">Language</h4>'
-        + '<div id="languageInfo"></div>'
-        + '<div class="form-group">'
-        + '<label class="control-sidebar-subheading">'
-        + '<button type="button" class="btn btn-box-tool pull-right" data-toggle="collapse" data-target="#languages"><span data-i18n="global-change-language">Change language</span> <i class="fas fa-caret-down"></i></button>'
-        + '<img id="currentLanguage" src="../img/flags/us.gif" alt="us">'
-        + '</label>'
-        + '</div>'
-    );
-
-    $layoutSettings.append($languagesList);
-
     $('#control-right-sidebar').after($layoutSettings);
 
     loadLayout();
 });
-//#endregion Right Sidebar
+//}#endregion Right Sidebar

ArchiSteamFarm/www/js/i18n.js

@@ -1,5 +1,4 @@
-const defaultLocale = 'strings',
-    nameRegex = /\.\/(\S+)\.json/i;
+const defaultLocale = 'strings';
 var availableLanguages = [],
     tmpLanguage = get('language'),
     myLocal = (tmpLanguage) ? tmpLanguage : getLocale(availableLanguages);
@@ -22,9 +21,7 @@ function getLocale(validLocales) {
 function loadLocales(language) {
     var i18n = $.i18n(),
         langCode = (language === 'strings') ? 'us' : language.substr(language.length - 2).toLowerCase(),
-        translationFile,
-        missing = 0,
-        totalSize = 0;
+        translationFile;
 
     i18n.locale = language;
     translationFile = '../locale/' + i18n.locale + '.json';
@@ -33,7 +30,6 @@ function loadLocales(language) {
             $.getJSON(translationFile, function (obj) {
                 for (var prop in obj) {
                     if (obj.hasOwnProperty(prop)) {
-                        totalSize++;
                         if (obj[prop]) {
                             if (prop.substring(0, 12) === 'placeholder-') {
                                 $('[data-i18n="' + prop + '"]').attr("placeholder", $.i18n(prop));
@@ -43,14 +39,13 @@ function loadLocales(language) {
                                 $('[data-i18n="' + prop + '"]').i18n();
                             }
 
-                        } else {
-                            missing++;
                         }
                     }
                 }
-                
-                store('langMissing', missing);
-                store('langTotal', totalSize);
+				
+				// fix for bootstrap-select elements
+				$('[data-id="commandsDropDown"] > .filter-option').text($.i18n('title-commands'));
+				$('[data-id="botsDropDown"] > .filter-option').text($.i18n('title-bots'));
             });
         }
     );

ArchiSteamFarm/www/locale/strings.json

@@ -6,9 +6,9 @@
   "auth-ipc-text": "Please enter the correct IPC password",
   "auth-title": "ASF | Authentication",
   "bots-confirm-delete": "Yes, delete bot!",
-  "bots-delete": "Show delete button",
   "bots-delete-success": "<$1> and all related files have been deleted.",
   "bots-delimiter": "Delimiter",
+  "bots-download": "There is nothing to download!",
   "bots-hide": "Hide bots",
   "bots-hide-offline": "Offline bots",
   "bots-hide-inactive": "Inactive bots",
@@ -17,7 +17,6 @@
   "bots-infobox-games": "Games Remaining",
   "bots-infobox-time": "Time Remaining",
   "bots-in-use": "Bot is currently being used.",
-  "bots-key": "Show key button",
   "bots-paused": "Bot is paused.",
   "bots-pause-success": "<$1> has been paused.",
   "bots-recover-files": "You will not be able to recover any bot files!",
@@ -30,12 +29,10 @@
   "bots-redeem-unused-title": "View unused keys",
   "bots-redeem-used-title": "View used keys",
   "bots-resume-success": "<$1> has been resumed.",
-  "bots-simple": "Simple farming info",
   "bots-start-success": "<$1> has been started.",
   "bots-stop-success": "<$1> has been stopped.",
   "bots-syntax": "Syntax: gameName{delimiter}key",
   "bots-title": "ASF | Bots",
-  "commands-auto-clear": "Auto clear",
   "commands-response": "$1 Response received: $2",
   "commands-sent": "$1 Command sent: $2",
   "commands-title": "ASF | Commands",
@@ -68,8 +65,6 @@
   "global-generator": "Generator",
   "global-home": "Home",
   "global-information": "Information",
-  "global-language": "Language",
-  "global-language-info": "$1% of this language is not translated! Help us <a href=\"https://github.com/JustArchi/ArchiSteamFarm/wiki/Localization\">here</a>.",
   "global-layout": "Layout",
   "global-log": "Log",
   "global-navigation": "Toggle navigation",

ArchiSteamFarm/www/pages/bots.html

@@ -13,6 +13,8 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/2.4.2/css/AdminLTE.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.1.0/css/flag-icon.min.css">
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css">
     <link rel="stylesheet" href="../css/_all-skins.min.css">
     <link rel="stylesheet" href="../css/app.css">
     <link rel="stylesheet" href="../css/_nightmode.min.css">
@@ -35,6 +37,11 @@
                 </a>
                 <div class="navbar-custom-menu">
                     <ul class="nav navbar-nav">
+						<!-- Language Button -->
+						<li class="dropdown">
+                            <a class="dropdown-toggle" href="javascript:void(0)" data-toggle="dropdown"><i id="currentLanguage" class="flag-icon flag-icon-us"></i></a>
+                            <div class="dropdown-menu dropdown-language"></div>
+                        </li>
                         <!-- Right Sidebar Toggle Button -->
                         <li><a href="javascript:void(0)" data-toggle="control-sidebar"><i class="fas fa-cogs"></i></a></li>
                     </ul>
@@ -110,23 +117,16 @@
                                 <button type="button" class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown">
                                     <span data-i18n="bots-hide">Hide bots</span> <span class="fas fa-caret-down"></span>
                                 </button>
-                                <ul class="dropdown-menu" role="menu">
-                                    <li><button type="button" class="btn btn-box-tool text-grey" id="chkHideOnlineBots"><i id="iconHideOnlineBots" class="fas fa-toggle-on fa-2x fa-rotate-180"></i></button><span data-i18n="bots-hide-online">Online bots</span></li>
-									<li><button type="button" class="btn btn-box-tool text-grey" id="chkHideInactiveBots"><i id="iconHideInactiveBots" class="fas fa-toggle-on fa-2x fa-rotate-180"></i></button><span data-i18n="bots-hide-inactive">Inactive bots</span></li>
-                                    <li><button type="button" class="btn btn-box-tool text-grey" id="chkHideOfflineBots"><i id="iconHideOfflineBots" class="fas fa-toggle-on fa-2x fa-rotate-180"></i></button><span data-i18n="bots-hide-offline">Offline bots</span></li>
+                                <ul class="dropdown-menu dropdown-menu-toggle" role="menu">
+									<li class="li-toggle"><input id="chkOn" type="checkbox" data-style="ios li-btn" data-onstyle="default" data-toggle="toggle" data-size="small" data-on="<i class='fas fa-users'></i> <span data-i18n='bots-hide-online'>Online bots</span>" data-off="<i class='fas fa-users'></i> <span data-i18n='bots-hide-online'>Online bots</span>"></li>
+									<li class="li-toggle"><input id="chkInactive" type="checkbox" data-style="ios li-btn" data-onstyle="default" data-toggle="toggle" data-size="small" data-on="<i class='fas fa-users'></i> <span data-i18n='bots-hide-inactive'>Inactive bots</span>" data-off="<i class='fas fa-users'></i> <span data-i18n='bots-hide-inactive'>Inactive bots</span>"></li>
+                                    <li class="li-toggle"><input id="chkOff" type="checkbox" data-style="ios li-btn" data-onstyle="default" data-toggle="toggle" data-size="small" data-on="<i class='fas fa-users'></i> <span data-i18n='bots-hide-offline'>Offline bots</span>" data-off="<i class='fas fa-users'></i> <span data-i18n='bots-hide-offline'>Offline bots</span>"></li>
                                 </ul>
-                            </div>
-                            <button type="button" class="btn btn-box-tool" id="btnRefreshContent"><i class="fas fa-sync"></i></button>
-                            <div class="btn-group">
-                                <button type="button" class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown">
-                                    <i class="fas fa-wrench"></i>
-                                </button>
-                                <ul class="dropdown-menu" role="menu">
-                                    <li><button type="button" class="btn btn-box-tool text-grey" id="chkShowKeyButton"><i id="iconShowKeyButton" class="fas fa-toggle-on fa-2x fa-rotate-180"></i></button><span data-i18n="bots-key">Show key button</span></li>
-                                    <li><button type="button" class="btn btn-box-tool text-grey" id="chkShowDeleteButton"><i id="iconShowDeleteButton" class="fas fa-toggle-on fa-2x fa-rotate-180"></i></button><span data-i18n="bots-delete">Show delete button</span></li>
-                                    <li><button type="button" class="btn btn-box-tool text-grey" id="chkSimpleFarmingInfo"><i id="iconSimpleFarmingInfo" class="fas fa-toggle-on fa-2x fa-rotate-180"></i></button><span data-i18n="bots-simple">Simple farming info</span></li>
-                                </ul>
-                            </div>
+                            </div>							
+							<input id="chkKey" type="checkbox" data-style="ios" data-onstyle="default" data-toggle="toggle" data-size="mini" data-on="<i class='fas fa-key'></i>" data-off="<i class='fas fa-key'></i>">
+							<input id="chkDelete" type="checkbox" data-style="ios" data-onstyle="default" data-toggle="toggle" data-size="mini" data-on="<i class='far fa-trash-alt'></i>" data-off="<i class='far fa-trash-alt'></i>">
+							<input id="chkSimple" type="checkbox" data-style="ios" data-onstyle="default" data-toggle="toggle" data-size="mini" data-on="<i class='fas fa-info'></i>" data-off="<i class='fas fa-info'></i>">
+                            <button type="button" class="btn btn-box-tool" id="btnRefresh"><i class="fas fa-sync"></i></button>
                         </div>
                     </div>
                 </div>
@@ -168,6 +168,7 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.i18n/1.0.4/jquery.i18n.parser.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.i18n/1.0.4/jquery.i18n.emitter.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.i18n/1.0.4/jquery.i18n.emitter.bidi.min.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
     <script src="../js/utils.js"></script>
     <script src="../js/i18n.js"></script>
     <script src="../js/app.js"></script>
@@ -177,14 +178,14 @@
 
             store('CurrentPage', 'pages/bots.html');
 
-            var tmpHideOnlineBots = get('hideOnlineBots'),
-				tmpHideInactiveBots = get('hideInactiveBots'),
-                tmpHideOfflineBots = get('hideOfflineBots'),
-                tmpShowDeleteButton = get('showDeleteButton'),
-                tmpShowKeyButton = get('showKeyButton'),
-                tmpSimpleFarmingInfo = get('simpleFarmingInfo');
+            var tmpHideOnlineBots = get('chkOn'),
+				tmpHideInactiveBots = get('chkInactive'),
+                tmpHideOfflineBots = get('chkOff'),
+                tmpShowKeyButton = get('chkKey'),
+                tmpShowDeleteButton = get('chkDelete'),
+                tmpSimpleFarmingInfo = get('chkSimple');
 
-            $(document).delegate('#gamesToRedeemInBackground', 'keydown', function (e) {
+            $(document).delegate('#txtAddKeys, #delimiter', 'keydown', function (e) {
                 var keyCode = e.keyCode || e.which;
 
                 if (keyCode == 9) {
@@ -193,196 +194,45 @@
                     var start = this.selectionStart;
                     var end = this.selectionEnd;
                     
-                    $(this).val($(this).val().substring(0, start) // set textarea value to: text before caret + tab + text after caret
-                        + "\t"
-                        + $(this).val().substring(end));
-                    
-                    this.selectionStart = this.selectionEnd = start + 1; // put caret at right position again
-                }
-            });
-
-            $(document).delegate('#delimiter', 'keydown', function (e) {
-                var keyCode = e.keyCode || e.which;
-
-                if (keyCode == 9) {
-                    e.preventDefault();
-                    e.stopImmediatePropagation();
-                    var start = this.selectionStart;
-                    var end = this.selectionEnd;
-                    
-                    $(this).val($(this).val().substring(0, start) // set textarea value to: text before caret + tab + text after caret
-                        + "\t"
-                        + $(this).val().substring(end));
+                    $(this).val($(this).val().substring(0, start) + "\t" + $(this).val().substring(end)); // set textarea value to: text before caret + tab + text after caret
                     
                     this.selectionStart = this.selectionEnd = start + 1; // put caret at right position again
                 }
             });
             
-            $('.box-tools').ready(function () { // Load state of checkboxes
-                if (tmpHideOnlineBots === 'true') {
-                    $('#chkHideOnlineBots').removeClass('text-grey');
-                    $('#chkHideOnlineBots').addClass('text-olive');
-                    $('#iconHideOnlineBots').removeClass('fa-rotate-180');
-                }
-				
-				if (tmpHideInactiveBots === 'true') {
-                    $('#chkHideInactiveBots').removeClass('text-grey');
-                    $('#chkHideInactiveBots').addClass('text-olive');
-                    $('#iconHideInactiveBots').removeClass('fa-rotate-180');
-                }
-
-                if (tmpHideOfflineBots === 'true') {
-                    $('#chkHideOfflineBots').removeClass('text-grey');
-                    $('#chkHideOfflineBots').addClass('text-olive');
-                    $('#iconHideOfflineBots').removeClass('fa-rotate-180');
-                }
+            $('.box-tools').ready(function () {
+                if (tmpHideOnlineBots === 'true') $('#chkOn').bootstrapToggle('on');
+				if (tmpHideInactiveBots === 'true') $('#chkInactive').bootstrapToggle('on');
+                if (tmpHideOfflineBots === 'true') $('#chkOff').bootstrapToggle('on');
 
                 if (tmpHideOnlineBots !== 'true' || tmpHideInactiveBots !== 'true' || tmpHideOfflineBots !== 'true') loadPageContent();
 
-                if (tmpShowDeleteButton === 'true') {
-                    $('#chkShowDeleteButton').removeClass('text-grey');
-                    $('#chkShowDeleteButton').addClass('text-olive');
-                    $('#iconShowDeleteButton').removeClass('fa-rotate-180');
-                }
-
-                if (tmpShowKeyButton === 'true') {
-                    $('#chkShowKeyButton').removeClass('text-grey');
-                    $('#chkShowKeyButton').addClass('text-olive');
-                    $('#iconShowKeyButton').removeClass('fa-rotate-180');
-                }
-
-                if (tmpShowKeyButton === 'true') {
-                    $('#chkShowKeyButton').removeClass('text-grey');
-                    $('#chkShowKeyButton').addClass('text-olive');
-                    $('#iconShowKeyButton').removeClass('fa-rotate-180');
-                }
-
-                if (tmpSimpleFarmingInfo === 'true') {
-                    $('#chkSimpleFarmingInfo').removeClass('text-grey');
-                    $('#chkSimpleFarmingInfo').addClass('text-olive');
-                    $('#iconSimpleFarmingInfo').removeClass('fa-rotate-180');
-                }
+				if (tmpShowKeyButton === 'true') $('#chkKey').bootstrapToggle('on');
+                if (tmpShowDeleteButton === 'true') $('#chkDelete').bootstrapToggle('on');
+                if (tmpSimpleFarmingInfo === 'true') $('#chkSimple').bootstrapToggle('on');
+				
+				$('#chkOn, #chkInactive, #chkOff, #chkKey, #chkDelete, #chkSimple').change(function() {
+					store($(this).attr('id'), $(this).prop('checked'));
+					loadPageContent();
+				});
+				
+				$('#btnRefresh').click(function () {
+					$('#btnRefresh').blur();
+					loadPageContent();
+				});
             });
 
-            $('#chkSimpleFarmingInfo').click(function () {
-                if ($('#iconSimpleFarmingInfo').hasClass('fa-rotate-180')) {
-                    $('#iconSimpleFarmingInfo').removeClass('fa-rotate-180');
-                    $('#chkSimpleFarmingInfo').removeClass('text-grey');
-                    $('#chkSimpleFarmingInfo').addClass('text-olive');
-                    store('simpleFarmingInfo', true);
-                } else {
-                    $('#iconSimpleFarmingInfo').addClass('fa-rotate-180');
-                    $('#chkSimpleFarmingInfo').removeClass('text-olive');
-                    $('#chkSimpleFarmingInfo').addClass('text-grey');
-                    store('simpleFarmingInfo', false);
-                }
-                loadPageContent();
-            });
-
-            $('#chkHideOnlineBots').click(function () {
-                if ($('#iconHideOnlineBots').hasClass('fa-rotate-180')) {
-                    $('#iconHideOnlineBots').removeClass('fa-rotate-180');
-                    $('#chkHideOnlineBots').removeClass('text-grey');
-                    $('#chkHideOnlineBots').addClass('text-olive');
-                    store('hideOnlineBots', true);
-                } else {
-                    $('#iconHideOnlineBots').addClass('fa-rotate-180');
-                    $('#chkHideOnlineBots').removeClass('text-olive');
-                    $('#chkHideOnlineBots').addClass('text-grey');
-                    store('hideOnlineBots', false);
-                }
-                loadPageContent();
-            });
-			
-			$('#chkHideInactiveBots').click(function () {
-                if ($('#iconHideInactiveBots').hasClass('fa-rotate-180')) {
-                    $('#iconHideInactiveBots').removeClass('fa-rotate-180');
-                    $('#chkHideInactiveBots').removeClass('text-grey');
-                    $('#chkHideInactiveBots').addClass('text-olive');
-                    store('hideInactiveBots', true);
-                } else {
-                    $('#iconHideInactiveBots').addClass('fa-rotate-180');
-                    $('#chkHideInactiveBots').removeClass('text-olive');
-                    $('#chkHideInactiveBots').addClass('text-grey');
-                    store('hideInactiveBots', false);
-                }
-                loadPageContent();
-            });
-
-            $('#chkHideOfflineBots').click(function () {
-                if ($('#iconHideOfflineBots').hasClass('fa-rotate-180')) {
-                    $('#iconHideOfflineBots').removeClass('fa-rotate-180');
-                    $('#chkHideOfflineBots').removeClass('text-grey');
-                    $('#chkHideOfflineBots').addClass('text-olive');
-                    store('hideOfflineBots', true);
-                } else {
-                    $('#iconHideOfflineBots').addClass('fa-rotate-180');
-                    $('#chkHideOfflineBots').removeClass('text-olive');
-                    $('#chkHideOfflineBots').addClass('text-grey');
-                    store('hideOfflineBots', false);
-                }
-                loadPageContent();
-            });
-
-            $('#btnRefreshContent').click(function () {
-                $('#btnRefreshContent').blur();
-                loadPageContent();
-            });
-
-            $('#chkShowDeleteButton').click(function () {
-                if ($('#iconShowDeleteButton').hasClass('fa-rotate-180')) {
-                    $('#iconShowDeleteButton').removeClass('fa-rotate-180');
-                    $('#chkShowDeleteButton').removeClass('text-grey');
-                    $('#chkShowDeleteButton').addClass('text-olive');
-                    store('showDeleteButton', true);
-                } else {
-                    $('#iconShowDeleteButton').addClass('fa-rotate-180');
-                    $('#chkShowDeleteButton').removeClass('text-olive');
-                    $('#chkShowDeleteButton').addClass('text-grey');
-                    store('showDeleteButton', false);
-                }
-                loadPageContent();
-            });
-
-            $('#chkShowKeyButton').click(function () {
-                if ($('#iconShowKeyButton').hasClass('fa-rotate-180')) {
-                    $('#iconShowKeyButton').removeClass('fa-rotate-180');
-                    $('#chkShowKeyButton').removeClass('text-grey');
-                    $('#chkShowKeyButton').addClass('text-olive');
-                    store('showKeyButton', true);
-                } else {
-                    $('#iconShowKeyButton').addClass('fa-rotate-180');
-                    $('#chkShowKeyButton').removeClass('text-olive');
-                    $('#chkShowKeyButton').addClass('text-grey');
-                    store('showKeyButton', false);
-                }
-                loadPageContent();
-            });
-			
-			function download(filename, text) {
-				var element = document.createElement('a');
-				element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
-				element.setAttribute('download', filename);
-
-				element.style.display = 'none';
-				document.body.appendChild(element);
-
-				element.click();
-
-				document.body.removeChild(element);
-			}
-
             function loadPageContent() {
-                var tmpHideOnlineBots = get('hideOnlineBots'),
-					tmpHideInactiveBots = get('hideInactiveBots'),
-                    tmpHideOfflineBots = get('hideOfflineBots'),
-                    tmpShowDeleteButton = get('showDeleteButton'),
-                    tmpDelimiter = get('delimiter'),
-                    tmpShowKeyButton = get('showKeyButton'),
-                    tmpSimpleFarmingInfo = get('simpleFarmingInfo');
+                var tmpHideOnlineBots = get('chkOn'),
+					tmpHideInactiveBots = get('chkInactive'),
+                    tmpHideOfflineBots = get('chkOff'),
+                    tmpShowKeyButton = get('chkKey'),
+                    tmpShowDeleteButton = get('chkDelete'),
+                    tmpSimpleFarmingInfo = get('chkSimple'),
+                    tmpDelimiter = get('delimiter');
                 
-                $('#totalBotOverview').empty(); // Clear page content
-                $('#botRow').empty(); // Clear page content
+                $('#totalBotOverview').empty();
+                $('#botRow').empty();
 
                 if (!tmpDelimiter) {
                     tmpDelimiter = '\t';
@@ -679,17 +529,17 @@
 														+ '<div class="tab-content">'
 															+ '<div class="tab-pane active" id="addKeys">'
 																+ '<p class="lead text-muted" style="display: block;">' + $.i18n('bots-syntax') + '</p>'
-																+ '<textarea id="gamesToRedeemInBackground"></textarea>'
+																+ '<textarea id="txtAddKeys"></textarea>'
 																+ '<div class="input-group">'
 																+ '<span class="input-group-addon" id="delimiter-text">' + $.i18n('bots-delimiter') + '</span>'
 																+ '<input type="text" class="form-control" id="delimiter" value="' + tmpDelimiter + '" aria-describedby="delimiter-text">'
 																+ '</div>'
 															+ '</div>'
 															+ '<div class="tab-pane" id="unusedKeys">'
-																+ '<textarea id="unusedKeysText"></textarea>'
+																+ '<textarea id="txtUnusedKeys"></textarea>'
 															+ '</div>'
 															+ '<div class="tab-pane" id="usedKeys">'
-																+ '<textarea id="usedKeysText"></textarea>'
+																+ '<textarea id="txtUsedKeys"></textarea>'
 															+ '</div>'
 														+ '</div>'
 													+ '</div>';
@@ -709,7 +559,7 @@
                                                 $('.overlay').remove();
                                                 return false;
                                             }
-                                            var val = $('#gamesToRedeemInBackground').val();
+                                            var val = $('#txtAddKeys').val();
 
                                             var _gamesToRedeemInBackground = {},
                                                 gamesAndKeys = [],
@@ -760,14 +610,27 @@
 										  var target = $(e.target).attr("href");
 										  
 										  if (target === '#unusedKeys') {
+											$("#downloadUnusedKeysBtn").remove();
+											$("#downloadUsedKeysBtn").remove();
 											$(".confirm").hide();
-											$(".sa-button-container").append('<div class="sa-confirm-button-container">'
+											$(".sa-button-container").append('<div id="downloadUnusedKeysBtn" class="sa-confirm-button-container">'
 												+ '<button class="confirm btn btn-lg btn-success" id="downloadUnusedKeys" tabindex="1" style="display: inline-block;">'
-												+ $.i18n('bots-redeem-unused-button', BotName) + '</button><div class="la-ball-fall">'
-												+ '<div></div><div></div><div></div></div></div>');
+												+ $.i18n('bots-redeem-unused-button', BotName) + '</button>'
+												+ '</div>');
 											$('#downloadUnusedKeys').on('click', function (e) {
 												e.preventDefault();
-												download(BotName + '.keys.unused', $('#unusedKeysText').val());
+												var unusedText = $('#txtUnusedKeys').val();
+												if (unusedText === '') {
+													$("#downloadUnusedKeysBtn").remove();
+													swal({
+														title: $.i18n('global-error-title'),
+														text: $.i18n('bots-download'),
+														type: 'error'
+													});
+													$('.overlay').remove();
+													return false;
+												}
+												download(BotName + '.keys.unused', unusedText);
 											});
 											$.ajax({
                                                 url: '/Api/GamesToRedeemInBackground/' + encodeURIComponent(BotName),
@@ -778,23 +641,36 @@
 														
 													for (var key in unusedKeys) {
 														if (unusedKeys.hasOwnProperty(key)) {
-															$('#unusedKeysText').append(unusedKeys[key] + tmpDelimiter + key + '\n');
+															$('#txtUnusedKeys').append(unusedKeys[key] + tmpDelimiter + key + '\n');
 														}
 													}
 													
-													var allKeys = $('#unusedKeysText').val();
-													$('#unusedKeysText').val(allKeys.substring(0,allKeys.length-1));
+													var allKeys = $('#txtUnusedKeys').val();
+													$('#txtUnusedKeys').val(allKeys.substring(0,allKeys.length-1));
                                                 }
                                             });
 										  } else if (target === '#usedKeys') {
+											$("#downloadUnusedKeysBtn").remove();
+											$("#downloadUsedKeysBtn").remove();
 											$(".confirm").hide();
-											$(".sa-button-container").append('<div class="sa-confirm-button-container">'
+											$(".sa-button-container").append('<div id="downloadUsedKeysBtn" class="sa-confirm-button-container">'
 												+ '<button class="confirm btn btn-lg btn-success" id="downloadUsedKeys" tabindex="1" style="display: inline-block;">'
-												+ $.i18n('bots-redeem-used-button', BotName) + '</button><div class="la-ball-fall">'
-												+ '<div></div><div></div><div></div></div></div>');
+												+ $.i18n('bots-redeem-used-button', BotName) + '</button>'
+												+ '</div>');
 											$('#downloadUsedKeys').on('click', function (e) {
 												e.preventDefault();
-												download(BotName + '.keys.used', $('#usedKeysText').val());
+												var usedText = $('#txtUsedKeys').val();
+												if (usedText === '') {
+													$("#downloadUsedKeysBtn").remove();
+													swal({
+														title: $.i18n('global-error-title'),
+														text: $.i18n('bots-download'),
+														type: 'error'
+													});
+													$('.overlay').remove();
+													return false;
+												}
+												download(BotName + '.keys.used', usedText);
 											});
 											$.ajax({
                                                 url: '/Api/GamesToRedeemInBackground/' + encodeURIComponent(BotName),
@@ -805,17 +681,17 @@
 														
 													for (var key in usedKeys) {
 														if (usedKeys.hasOwnProperty(key)) {
-															$('#usedKeysText').append(usedKeys[key] + tmpDelimiter + key + '\n');
+															$('#txtUsedKeys').append(usedKeys[key] + tmpDelimiter + key + '\n');
 														}
 													}
 													
-													var allKeys = $('#usedKeysText').val();
-													$('#usedKeysText').val(allKeys.substring(0,allKeys.length-1));
+													var allKeys = $('#txtUsedKeys').val();
+													$('#txtUsedKeys').val(allKeys.substring(0,allKeys.length-1));
                                                 }
                                             });
-										  } else {
-											$("#downloadUnusedKeys").remove();
-											$("#downloadUsedKeys").remove();
+										  } else if (target === '#addKeys') {
+											$("#downloadUnusedKeysBtn").remove();
+											$("#downloadUsedKeysBtn").remove();
 											$(".confirm").show();
 										  }
 										});
@@ -860,6 +736,16 @@
                     }
                 });
             }
+			
+			function download(filename, text) {
+				var element = document.createElement('a');
+				element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
+				element.setAttribute('download', filename);
+				element.style.display = 'none';
+				document.body.appendChild(element);
+				element.click();
+				document.body.removeChild(element);
+			}
         });
     </script>
 </body>

ArchiSteamFarm/www/pages/commands.html

@@ -13,6 +13,8 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/2.4.2/css/AdminLTE.min.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
 	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.1.0/css/flag-icon.min.css">
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css">
     <link rel="stylesheet" href="../css/_all-skins.min.css">
     <link rel="stylesheet" href="../css/app.css">
     <link rel="stylesheet" href="../css/_nightmode.min.css">
@@ -35,6 +37,11 @@
                 </a>
                 <div class="navbar-custom-menu">
                     <ul class="nav navbar-nav">
+						<!-- Language Button -->
+						<li class="dropdown">
+                            <a class="dropdown-toggle" href="javascript:void(0)" data-toggle="dropdown"><i id="currentLanguage" class="flag-icon flag-icon-us"></i></a>
+                            <div class="dropdown-menu dropdown-language"></div>
+                        </li>
                         <!-- Right Sidebar Toggle Button -->
                         <li><a href="javascript:void(0)" data-toggle="control-sidebar"><i class="fas fa-cogs"></i></a></li>
                     </ul>
@@ -106,14 +113,7 @@
                         <i class="fas fa-laptop"></i>
                         <h3 class="box-title" data-i18n="global-commands">Commands</h3>
                         <div class="box-tools pull-right">
-                            <div class="btn-group">
-                                <button type="button" class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown">
-                                    <i class="fas fa-wrench"></i>
-                                </button>
-                                <ul class="dropdown-menu" role="menu">
-                                    <li><button type="button" class="btn btn-box-tool text-olive" id="chkAutoClear"><i id="iconAutoClear" class="fas fa-toggle-on fa-2x"></i></button><span data-i18n="commands-auto-clear">Auto clear</span></li>
-                                </ul>
-                            </div>
+							<input id="chkClear" type="checkbox" data-style="ios single-btn" data-onstyle="default" data-toggle="toggle" data-size="mini" data-on="<i class='fas fa-eraser'></i>" data-off="<i class='fas fa-eraser'></i>">
                         </div>
                     </div>
                     <div class="box-body">
@@ -170,6 +170,7 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.i18n/1.0.4/jquery.i18n.emitter.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.i18n/1.0.4/jquery.i18n.emitter.bidi.min.js"></script>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
     <script src="../js/utils.js"></script>
     <script src="../js/i18n.js"></script>
     <script src="../js/app.js"></script>
@@ -179,8 +180,7 @@
 
             store('CurrentPage', 'pages/commands.html');
 
-            var $chkAutoClear = $('#chkAutoClear'),
-                $commandInput = $('#commandInput'),
+            var $commandInput = $('#commandInput'),
                 $botsDropDown = $("#botsDropDown"),
                 $commandsDropDown = $("#commandsDropDown");
 
@@ -209,7 +209,8 @@
 			$commandsDropDown.on('changed.bs.select', function (e) {
 				$cmdInput.val($commandsDropDown.val() + ' ');
 				
-				var elements = document.getElementById("commandsDropDown").options; // dirty... find a better solution
+				// dirty... find a better solution
+				var elements = document.getElementById("commandsDropDown").options;
 				for(var i = 0; i < elements.length; i++){
 					elements[i].selected = false;
 				}
@@ -223,7 +224,8 @@
 					
 				$cmdInput.val(oldText + bot);
 				
-				var elements = document.getElementById("botsDropDown").options; // dirty... find a better solution
+				// dirty... find a better solution
+				var elements = document.getElementById("botsDropDown").options;
 				for(var i = 0; i < elements.length; i++){
 					elements[i].selected = false;
 				}
@@ -255,30 +257,13 @@
             //#endregion Merge to one function
             
             $('.box-tools').ready(function () {
-                var tmpAutoClear = get('autoClear');
-
-                if (tmpAutoClear === 'false') {
-                    $chkAutoClear.removeClass('text-olive');
-                    $chkAutoClear.addClass('text-grey');
-                    $('#iconAutoClear').addClass('fa-rotate-180');
-                }
-            });
-
-            $chkAutoClear.click(function () {
-                if ($('#iconAutoClear').hasClass('fa-rotate-180')) {
-                    $('#iconAutoClear').removeClass('fa-rotate-180');
-                    $chkAutoClear.removeClass('text-grey');
-                    $chkAutoClear.addClass('text-olive');
-                    $chkAutoClear.blur();
-                    store('autoClear', true);
-                } else {
-                    $('#iconAutoClear').addClass('fa-rotate-180');
-                    $chkAutoClear.removeClass('text-olive');
-                    $chkAutoClear.addClass('text-grey');
-                    $chkAutoClear.blur();
-                    store('autoClear', false);
-                }
-                return false;
+                var tmpAutoClear = get('chkClear');
+				
+                if (tmpAutoClear == null) $('#chkClear').bootstrapToggle('on');
+				
+				$('#chkClear').change(function() {
+					store($(this).attr('id'), $(this).prop('checked'));
+				});
             });
             
             $('.box-content-commands').ready(function () {
@@ -349,6 +334,10 @@
 					
 					$('.overlay').remove();
 					$commandsDropDown.selectpicker('refresh');
+					
+					// fix for bootstrap-select elements
+					$('button > [data-id="commandsDropDown"]').attr("title", $.i18n('title-commands'));
+					$('[data-id="commandsDropDown"] > .filter-option').text($.i18n('title-commands'));
 				} else {
 					$('#commandsDropDownBox').append('<div class="overlay bot-box-loading"><i class="fas fa-sync fa-spin"></i></div>');
 				
@@ -378,11 +367,15 @@
 							store('cachedCommandsDate', new Date().toLocaleDateString());
 							
 							for (var i = 0; i < myCommands.length; i++) {
-								$commandsDropDown.append('<option title="Commands">' + myCommands[i] + '</option>');
+								$commandsDropDown.append('<option data-i18n="title-commands" title="Commands">' + myCommands[i] + '</option>');
 							}
 							
 							$('.overlay').remove();
 							$commandsDropDown.selectpicker('refresh');
+							
+							// fix for bootstrap-select elements
+							$('button > [data-id="commandsDropDown"]').attr("title", $.i18n('title-commands'));
+							$('[data-id="commandsDropDown"] > .filter-option').text($.i18n('title-commands'));
 						}
 					});
 				}
@@ -401,10 +394,14 @@
                             var obj = json[i],
                                 botName = obj.BotName;
 
-							$botsDropDown.append('<option title="Bots">' + botName + '</option>');
+							$botsDropDown.append('<option data-i18n="title-bots" title="Bots">' + botName + '</option>');
                         }
 						
 						$botsDropDown.selectpicker('refresh');
+						
+						// fix for bootstrap-select elements
+						$('button > [data-id="botsDropDown"]').attr("title", $.i18n('title-bots'));
+						$('[data-id="botsDropDown"] > .filter-option').text($.i18n('title-bots'));
                     }
                 });
             });

ArchiSteamFarm/www/pages/editor.html

@@ -12,6 +12,8 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-sweetalert/1.0.1/sweetalert.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/2.4.2/css/AdminLTE.min.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.1.0/css/flag-icon.min.css">
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css">
     <link rel="stylesheet" href="../css/_all-skins.min.css">
     <link rel="stylesheet" href="../css/app.css">
     <link rel="stylesheet" href="../css/_nightmode.min.css">
@@ -34,6 +36,11 @@
                 </a>
                 <div class="navbar-custom-menu">
                     <ul class="nav navbar-nav">
+						<!-- Language Button -->
+						<li class="dropdown">
+                            <a class="dropdown-toggle" href="javascript:void(0)" data-toggle="dropdown"><i id="currentLanguage" class="flag-icon flag-icon-us"></i></a>
+                            <div class="dropdown-menu dropdown-language"></div>
+                        </li>
                         <!-- Right Sidebar Toggle Button -->
                         <li><a href="javascript:void(0)" data-toggle="control-sidebar"><i class="fas fa-cogs"></i></a></li>
                     </ul>
@@ -106,7 +113,7 @@
                         <h3 class="box-title" data-i18n="editor-current">Currently editing:</h3>
                         <div class="box-tools pull-right">
                             <div class="btn-group">
-                                <button type="button" class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+                                <button type="button" class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown">
                                     <span data-i18n="editor-change">Change bot</span>
                                     <span class="fas fa-caret-down"></span>
                                 </button>
@@ -158,6 +165,7 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.i18n/1.0.4/jquery.i18n.parser.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.i18n/1.0.4/jquery.i18n.emitter.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.i18n/1.0.4/jquery.i18n.emitter.bidi.min.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
     <script src="../js/utils.js"></script>
     <script src="../js/i18n.js"></script>
     <script src="../js/app.js"></script>

ArchiSteamFarm/www/pages/generator.html

@@ -12,6 +12,8 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-sweetalert/1.0.1/sweetalert.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/2.4.2/css/AdminLTE.min.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.1.0/css/flag-icon.min.css">
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css">
     <link rel="stylesheet" href="../css/_all-skins.min.css">
     <link rel="stylesheet" href="../css/app.css">
     <link rel="stylesheet" href="../css/_nightmode.min.css">
@@ -34,6 +36,11 @@
                 </a>
                 <div class="navbar-custom-menu">
                     <ul class="nav navbar-nav">
+						<!-- Language Button -->
+						<li class="dropdown">
+                            <a class="dropdown-toggle" href="javascript:void(0)" data-toggle="dropdown"><i id="currentLanguage" class="flag-icon flag-icon-us"></i></a>
+                            <div class="dropdown-menu dropdown-language"></div>
+                        </li>
                         <!-- Right Sidebar Toggle Button -->
                         <li><a href="javascript:void(0)" data-toggle="control-sidebar"><i class="fas fa-cogs"></i></a></li>
                     </ul>
@@ -106,7 +113,7 @@
                         <h3 class="box-title" data-i18n="generator-current">Current mode:</h3>
                         <div class="box-tools pull-right">
                             <div class="btn-group">
-                                <button type="button" class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+                                <button type="button" class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown">
                                     <span data-i18n="generator-change">Change mode</span>
                                     <span class="fas fa-caret-down"></span>
                                 </button>
@@ -163,6 +170,7 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.i18n/1.0.4/jquery.i18n.parser.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.i18n/1.0.4/jquery.i18n.emitter.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.i18n/1.0.4/jquery.i18n.emitter.bidi.min.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
     <script src="../js/utils.js"></script>
     <script src="../js/i18n.js"></script>
     <script src="../js/app.js"></script>

ArchiSteamFarm/www/pages/log.html

@@ -12,6 +12,8 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-sweetalert/1.0.1/sweetalert.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/2.4.2/css/AdminLTE.min.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.1.0/css/flag-icon.min.css">
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css">
     <link rel="stylesheet" href="../css/_all-skins.min.css">
     <link rel="stylesheet" href="../css/app.css">
     <link rel="stylesheet" href="../css/_nightmode.min.css">
@@ -34,6 +36,11 @@
                 </a>
                 <div class="navbar-custom-menu">
                     <ul class="nav navbar-nav">
+						<!-- Language Button -->
+						<li class="dropdown">
+                            <a class="dropdown-toggle" href="javascript:void(0)" data-toggle="dropdown"><i id="currentLanguage" class="flag-icon flag-icon-us"></i></a>
+                            <div class="dropdown-menu dropdown-language"></div>
+                        </li>
                         <!-- Right Sidebar Toggle Button -->
                         <li><a href="javascript:void(0)" data-toggle="control-sidebar"><i class="fas fa-cogs"></i></a></li>
                     </ul>
@@ -105,7 +112,7 @@
                         <i class="far fa-file-alt"></i>
                         <h3 class="box-title" data-i18n="global-log">Log</h3>
                         <div class="box-tools pull-right">
-                            <button type="button" class="btn btn-box-tool text-olive" id="toggleAutoScroll"><i class="fas fa-sync"></i></button>
+							<input id="chkScroll" checked type="checkbox" data-style="ios single-btn" data-onstyle="default" data-toggle="toggle" data-size="mini" data-on="<i class='fas fa-sync'></i>" data-off="<i class='fas fa-sync'></i>">
                         </div>
                     </div>
                     <div class="box-body">
@@ -148,6 +155,7 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.i18n/1.0.4/jquery.i18n.parser.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.i18n/1.0.4/jquery.i18n.emitter.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.i18n/1.0.4/jquery.i18n.emitter.bidi.min.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
     <script src="../js/utils.js"></script>
     <script src="../js/i18n.js"></script>
     <script src="../js/app.js"></script>
@@ -157,8 +165,7 @@
 
             store('CurrentPage', 'pages/log.html');
 
-            var lastScrollPosition = 0,
-                ws;
+            var ws;
 
             startWebSocket();
 
@@ -194,35 +201,14 @@
 
                 window.onbeforeunload = function () { ws.close(); };
             }
-
-            $('#toggleAutoScroll').click(function () {
-                if (ws.readyState === ws.CLOSED) {
-                    startWebSocket();
-                    $('#toggleAutoScroll').removeClass('text-grey');
-                    $('#toggleAutoScroll').addClass('text-olive');
-					$('#toggleAutoScroll').blur();
-                } else if (ws.readyState === ws.OPEN) {
-                    ws.close();
-                    $('#toggleAutoScroll').removeClass('text-olive');
-                    $('#toggleAutoScroll').addClass('text-grey');
-					$('#toggleAutoScroll').blur();
-                }
-            });
-
-            $('.box-content-log').on('scroll', function () {
-                var newScrollPosition = $(this).scrollTop();
-
-                if (newScrollPosition < lastScrollPosition) {
-                    if (ws.readyState === ws.OPEN) {
-                        ws.close();
-                        $('#toggleAutoScroll').removeClass('text-olive');
-                        $('#toggleAutoScroll').addClass('text-grey');
-						$('#toggleAutoScroll').blur();
-                    }
-                }
-
-                lastScrollPosition = newScrollPosition;
-            });
+			
+			$('#chkScroll').change(function() {
+				if ($(this).prop('checked')) {
+					startWebSocket();
+				} else {
+					ws.close();
+				}
+			});
 
             $('.box-content-log').ready(function () {
                 var tmpLogHeight = get('logHeight');