From 71fb9550ab13e7b40a5670232dd761340a5e9f83 Mon Sep 17 00:00:00 2001 From: SKANKHUNTER <31552675+MrBurrBurr@users.noreply.github.com> Date: Fri, 9 Feb 2018 08:41:10 +0100 Subject: [PATCH] IPC GUI Update #2 (#741) * Add basic content for config changer * Misc * Change changelog link according to currently running version * Misc * Add font for log and command that is working on each OS * Add game banners on detailed bot view * Cleanup * Added new font to log because I forgot in last commit Prepare for new bot detailed overview * Added slick-carousel for multiple games farming in bots detailed overview * Added HumanizeDuration.js to bots page * Change log and command font to monospace Fixed bots detailed overview for multiple games, thanks felipe19930 * Added command history accessible via keyboard up & down arrows * Add encodeURIComponent() * Added saving/loading for entered commands * Only save last 20 commands * Misc * Added auto clear checkbox for command * Added "show only" drop down to bots page * Fix for command history * and another one * save the last 20 commands instead of the last 5 * Add refresh button to bots page * Upgraded font-awesome to latest version Removed expert mode Added checkbox for 'show delete button' on bots page Removed show only farming Bug fixes * Misc * updated based on other commits --- ArchiSteamFarm/www/css/app.css | 50 +- ArchiSteamFarm/www/index.html | 2 +- ArchiSteamFarm/www/js/app.js | 327 ++++++++++--- ArchiSteamFarm/www/pages/bots.html | 676 ++++++++++++++++---------- ArchiSteamFarm/www/pages/command.html | 118 ++++- ArchiSteamFarm/www/pages/config.html | 166 +++---- ArchiSteamFarm/www/pages/log.html | 47 +- 7 files changed, 881 insertions(+), 505 deletions(-) diff --git a/ArchiSteamFarm/www/css/app.css b/ArchiSteamFarm/www/css/app.css index bb59e5f94..16d845f5a 100644 --- a/ArchiSteamFarm/www/css/app.css +++ b/ArchiSteamFarm/www/css/app.css @@ -1,18 +1,5 @@ -.box-content-status { - width:auto; - height:400px; - padding:6px 12px; - overflow-y:scroll; - white-space:pre-line; - border-color: rgb(221, 221, 221); - border-style: solid; - border-width: 1px; - background-color: rgb(255, 255, 255); - overflow:-moz-scrollbars-horizontal; -} - .box-content-log { - font-family: "lucida console"; + font-family: monospace, monospace; color: rgb(255, 255, 255); font-size: 14px; background-color: #000000; @@ -24,20 +11,20 @@ border-color: rgb(221, 221, 221); border-style: solid; border-width: 1px; - overflow: -moz-scrollbars-horizontal; + overflow: auto; } .box-content-command { - width:auto; - height:400px; - padding:6px 12px; - overflow-y:scroll; - white-space:pre-line; - border-color: rgb(221, 221, 221); - border-style: solid; - border-width: 1px; - background-color: rgb(255, 255, 255); - overflow:-moz-scrollbars-horizontal; + width: auto; + height: 400px; + padding: 6px 12px; + overflow-y: scroll; + white-space: pre-line; + border-color: rgb(221, 221, 221); + border-style: solid; + border-width: 1px; + background-color: rgb(255, 255, 255); + overflow: auto; } .bg-gray { @@ -45,14 +32,14 @@ } #commandReply { - font-family: "lucida console"; + font-family: monospace, monospace; color: rgb(255, 255, 255); font-size: 14px; background-color: #000000; } #commandSent { - font-family: "lucida console"; + font-family: monospace, monospace; font-size: 12px; cursor: default; } @@ -115,7 +102,7 @@ button.bot-resumed:hover { } .nav-tabs-custom > .nav-tabs > li { - margin-right: 0px; + margin-right: 0px; } .info-overview { @@ -133,4 +120,9 @@ button.bot-resumed:hover { .control-sidebar { padding-top: 100px; } -} \ No newline at end of file +} + +input[type=checkbox].dropdown-checkbox { + margin-left: 10px; + margin-right: 5px; +} diff --git a/ArchiSteamFarm/www/index.html b/ArchiSteamFarm/www/index.html index eb4b14831..2d52f36de 100644 --- a/ArchiSteamFarm/www/index.html +++ b/ArchiSteamFarm/www/index.html @@ -5,4 +5,4 @@ - \ No newline at end of file + diff --git a/ArchiSteamFarm/www/js/app.js b/ArchiSteamFarm/www/js/app.js index aa6c38123..5e7408d77 100644 --- a/ArchiSteamFarm/www/js/app.js +++ b/ArchiSteamFarm/www/js/app.js @@ -1,3 +1,4 @@ +//#region Utils if (typeof jQuery === 'undefined') { throw new Error('ASF App requires jQuery'); } @@ -55,11 +56,9 @@ if (IPCPassword) { } }); } +//#endregion Utils -/* -* ASF Version in Footer -* ---------------------- -*/ +//#region Footer $('.main-footer').ready(function () { $.ajax({ url: "/Api/ASF", @@ -72,15 +71,18 @@ $('.main-footer').ready(function () { success: function (data) { var obj = data["Result"].Version, version = obj.Major + '.' + obj.Minor + '.' + obj.Build + '.' + obj.Revision; + + // Add version to footer $("#version").html('Version ' + version); + + // Change changelog link according to currently running version + document.getElementById("changelog").href = "https://github.com/JustArchi/ArchiSteamFarm/releases/tag/" + version; } }); }); +//#endregion Footer -/* -* Bot Status Buttons -* ------------------- -*/ +//#region Bot Status Buttons $('.bot-status').ready(function () { function displayBotStatus() { var activeBots = 0, @@ -121,11 +123,9 @@ $('.bot-status').ready(function () { displayBotStatus(); }, 5000); }); +//#endregion Bot Status Buttons -/* -* ASF Information in left sidebar -* ------------------------ -*/ +//#region ASF Information $('.info-overview').ready(function () { // Display RAM usage function displayRAMUsage() { @@ -175,15 +175,15 @@ function uptimeToString(startTime) { diff -= hours * (1000 * 60 * 60); var mins = Math.floor(diff / (1000 * 60)); - diff -= mins * (1000 * 60); + + hours = (hours < 10 ? '0' : '') + hours; + mins = (mins < 10 ? '0' : '') + mins; return days + "d " + hours + "h " + mins + "m"; } +//#endregion ASF Information -/* -* Command Page -* ------------- -*/ +//#region Command Page var cmdInput = document.getElementById('commandInput'); function fillCommand(cmd) { @@ -205,45 +205,257 @@ function getDateAndTime() { } function logCommand(state, cmd) { + var tmpAutoClear = get('autoClear'); + if (state) { $("#commandSent").val(getDateAndTime() + ' Command sent: ' + cmd); } else { - $(".box-content-command").text(getDateAndTime() + ' Response received: ' + cmd); + if (tmpAutoClear === 'false') { + $(".box-content-command").append('\n' + getDateAndTime() + ' Response received: ' + cmd + '\n'); + } else { + $(".box-content-command").text(getDateAndTime() + ' Response received: ' + cmd); + } } } function sendCommand() { var command = cmdInput.value, - requestURL = "/Api/Command/" + command; + requestURL = "/Api/Command/" + command, + tmpAutoClear = get('autoClear'); if (command === "") { return; } - - $("#commandReply").append('
'); logCommand(true, command); + if (tmpAutoClear === 'false') { + if ($(".box-content-command").text() === '') { + $(".box-content-command").append(getDateAndTime() + ' Waiting for response...' + '\n'); + } else { + $(".box-content-command").append('\n' + getDateAndTime() + ' Waiting for response...' + '\n'); + } + + } else { + $(".box-content-command").text(getDateAndTime() + ' Waiting for response...'); + } + + $("#commandReply").append('
'); + $.ajax({ url: requestURL, type: "GET", success: function (data) { + $('.overlay').remove(); logCommand(false, data['Result']); }, error: function (jqXHR, textStatus, errorThrown) { + $('.overlay').remove(); logCommand(false, jqXHR.status + ' - ' + errorThrown); } }); - $('.overlay').remove(); + if (tmpAutoClear !== 'false') { + cmdInput.value = ""; + } +} +//#endregion Command Page - cmdInput.value = ""; +//#region Config Changer Page +var infoMessageHTML = '
' + + '

Under development

' + + '

This feature is currently being developed.

' + + '
'; + +function generateConfigChangerHTML() { + $.ajax({ + url: "/Api/Type/ArchiSteamFarm.BotConfig", + type: "GET", + success: function (data) { + var obj = data["Result"]; + var boxBodyHTML = ""; + var textBoxes = ''; + var checkBoxes = ''; + var numberBoxes = ''; + var defaultBoxes = ''; + + //console.log(obj) + + for (var key in obj) { + if (obj.hasOwnProperty(key)) { + var value = obj[key]; + var keyOne = key.replace(/([A-Z])/g, ' $1').trim(); + var keyWithSpace = keyOne.replace(/([A-Z])\s(?=[A-Z])/g, '$1'); + + switch (value) { + case 'System.Boolean': + // Add checkbox + checkBoxes += '
' + + '' + + '
'; + break; + case 'System.Byte': + // Add textbox + numberBoxes += '
' + + '' + + '' + + '
'; + break; + case 'System.String': + // Add textbox + textBoxes += '
' + + '' + + '' + + '
'; + break; + case 'System.Collections.Generic.Dictionary`2[System.UInt64][ArchiSteamFarm.BotConfig+EPermission]': + // Add textarea + textBoxes += '
' + + '' + + '' + + '
'; + break; + default: + // Default use textbox + defaultBoxes += '
' + + '' + + '' + + '
'; + } + } + + boxBodyHTML = '
' + defaultBoxes + '
' + + '
' + textBoxes + numberBoxes + '
' + + '
' + checkBoxes + '
'; + } + + $('#configChangerTab').html(infoMessageHTML + + '
' + + '

' + + '
' + + '
' + + '' + + '' + + '
' + + '
' + + '
' + + '
' + + boxBodyHTML + + '
'); + } + }); } -/* -* Layout -* ------- -*/ +function loadConfigValuesForBot(botName) { + $.ajax({ + url: "/Api/Bot/" + encodeURIComponent(botName), + type: "GET", + success: function (data) { + var obj = data["Result"]; + var objBot = obj[0]; + var BotConfig = objBot.BotConfig; + + //console.log(BotConfig) + + for (var key in BotConfig) { + if (BotConfig.hasOwnProperty(key)) { + var value = BotConfig[key]; + + var $key = $('#' + key); + var keyObj = $key[0]; + var inputType = keyObj.type; + + //console.log(key + ' - ' + inputType) + + switch (inputType) { + case 'checkbox': + $key.prop('checked', value); + break; + case 'textarea': + for (var key in value) { + if (value.hasOwnProperty(key)) { + var value = value[key]; + $key.append(key + ':' + value); + } + } + break; + default: + $key.val(value); + } + } + } + //setDefaultValues(); + + loadBotsDropDown(botName); + } + }); +} + +//function setDefaultValues() { +// $.ajax({ +// url: "/Api/Structure/ArchiSteamFarm.BotConfig", +// type: "GET", +// success: function (data) { +// botConfigStructure = data["Result"]; +// console.log(botConfigStructure) + +// for (var key in botConfigStructure) { +// if (botConfigStructure.hasOwnProperty(key)) { +// var value = botConfigStructure[key]; + +// console.log(key + ' - ' + value) + +// var $key = $('#' + key); +// var keyObj = $key[0]; +// var inputType = keyObj.type; + +// switch (inputType) { +// case 'checkbox': +// break; +// default: +// if ($key.val() === '') { +// $key.val(value); +// } +// } +// } +// } +// } +// }); +//} + +function loadBotsDropDown(botName) { + var botsDropDownHTML = ''; + + $.ajax({ + url: "/Api/Bot/ASF", + type: "GET", + success: function (data) { + var obj = data["Result"]; + + for (var i = 0; i < obj.length; i++) { + var currentBot = obj[i], + currentBotName = currentBot.BotName; + + if (botName !== currentBotName) { + botsDropDownHTML += '
  • ' + currentBotName + '
    • '; + } + } + + $(".box-title").html("Currently editing: " + botName + ""); + $("#saveConfig").data("BotName", botName); + $("#botsDropDown").html(botsDropDownHTML); + } + }); +} +//#endregion Config Changer Page + +//#region Layout $(function () { 'use strict'; @@ -298,15 +510,15 @@ $(function () { confirmButtonText: "Yes, reset it!", closeOnConfirm: false }, function () { - store('IPCPassword', ""); - swal({ - title: "Success!", - text: "Your IPC password has been reset.", - type: "success" - }, function () { - location.reload(); - }); + store('IPCPassword', ""); + swal({ + title: "Success!", + text: "Your IPC password has been reset.", + type: "success" + }, function () { + location.reload(); }); + }); } function changeBoxed(savedLayout) { @@ -344,29 +556,15 @@ $(function () { } } - function toggleExpertMode() { - var tmpExpertModeState = get('expertModeState'); - - if (tmpExpertModeState === "expert") { - store('expertModeState', 'normal'); - - } else { - store('expertModeState', 'expert'); - } - - location.reload(); - } - function setup() { var tmpSkin = get('skin'), tmpLayoutState = get('layoutState'), - tmpLeftSidebarState = get('leftSidebarState'), - tmpExpertModeState = get('expertModeState'); + tmpLeftSidebarState = get('leftSidebarState'); if (tmpSkin && $.inArray(tmpSkin, mySkins)) { changeSkin(tmpSkin); } - + if (tmpLeftSidebarState) { changeLeftSidebarState(tmpLeftSidebarState); } @@ -374,31 +572,23 @@ $(function () { if (tmpLayoutState) { changeBoxed(tmpLayoutState); } - + $('[data-skin]').on('click', function (e) { changeSkin($(this).data('skin')); }); - + $('[data-layout]').on('click', function () { toggleBoxed(); }); - + $('[data-general]').on('click', function () { changeSetting(); }); - $('[data-expert]').on('click', function () { - toggleExpertMode(); - }); - $('[data-navigation]').on('click', function () { saveLeftSidebarState(); }); - if (tmpExpertModeState && tmpExpertModeState === "expert") { - $('[data-expert="expertMode"]').attr('checked', 'checked'); - } - if ($('body').hasClass('layout-boxed')) { $('[data-layout="layout-boxed"]').attr('checked', 'checked'); } @@ -415,19 +605,11 @@ $(function () { // Reset IPC Password + '
    ' + '' + '

    Deletes the currently set IPC password

    ' + '
    ' - // Expert Mode - + '
    ' - + '' - + '

    Toggle between normal and expert mode

    ' - + '
    ' // Boxed Layout + ' @@ -52,10 +53,10 @@