Akatsuki-Misaki/ArchiSteamFarm
1
0
Fork 0
mirror of https://github.com/JustArchiNET/ArchiSteamFarm.git synced 2026-01-06 17:10:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

IPC GUI Update #2 (#741)

Browse Source 
* 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
This commit is contained in:
SKANKHUNTER
2018-02-09 08:41:10 +01:00
committed by Łukasz Domeradzki
parent 2a71032ffa
commit 71fb9550ab
7 changed files with 881 additions and 505 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
ArchiSteamFarm/www/css/app.css
View File

@@ -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;
}
}
}
input[type=checkbox].dropdown-checkbox {
margin-left: 10px;
margin-right: 5px;
}

2
ArchiSteamFarm/www/index.html
View File

@@ -5,4 +5,4 @@
</head>
<body>
</body>
</html>
</html>

327
ArchiSteamFarm/www/js/app.js
View File

@@ -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('<b>Version</b> ' + 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('<div class="overlay"><i class="fa fa-refresh fa-spin" style="color:white"></i></div>');
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('<div class="overlay"><i class="fas fa-sync fa-spin" style="color:white"></i></div>');
$.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 = '<div class="callout callout-warning margin">'
+ '<h4><i class="icon fas fa-exclamation-triangle"></i> Under development</h4>'
+ '<p>This feature is currently being developed.</p>'
+ '</div>';
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 += '<div class="checkbox">'
+ '<label for="' + key + '">'
+ '<input type="checkbox" id="' + key + '">'
+ keyWithSpace
+ '</label>'
+ '</div>';
break;
case 'System.Byte':
// Add textbox
numberBoxes += '<div class="form-group">'
+ '<label for="' + key + '">' + keyWithSpace + '</label>'
+ '<input type="number" id="' + key + '" class="form-control">'
+ '</div>';
break;
case 'System.String':
// Add textbox
textBoxes += '<div class="form-group">'
+ '<label for="' + key + '">' + keyWithSpace + '</label>'
+ '<input type="text" id="' + key + '" class="form-control">'
+ '</div>';
break;
case 'System.Collections.Generic.Dictionary`2[System.UInt64][ArchiSteamFarm.BotConfig+EPermission]':
// Add textarea
textBoxes += '<div class="form-group">'
+ '<label for="' + key + '">' + keyWithSpace + '</label>'
+ '<textarea id="' + key + '" class="form-control"></textarea>'
+ '</div>';
break;
default:
// Default use textbox
defaultBoxes += '<div class="form-group">'
+ '<label for="' + key + '">' + keyWithSpace + '</label>'
+ '<input type="text" id="' + key + '" class="form-control">'
+ '</div>';
}
}
boxBodyHTML = '<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">' + defaultBoxes + '</div>'
+ '<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">' + textBoxes + numberBoxes + '</div>'
+ '<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">' + checkBoxes + '</div>';
}
$('#configChangerTab').html(infoMessageHTML
+ '<div class="box-header with-border">'
+ '<h3 class="box-title"></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">'
+ 'Change Bot '
+ '<span class="fas fa-caret-down"></span>'
+ '</button>'
+ '<ul class="dropdown-menu scrollable-menu" role="menu" id="botsDropDown"></ul>'
+ '</div>'
+ '</div>'
+ '</div>'
+ '<div class="box-body">'
+ boxBodyHTML
+ '</div>');
}
});
}
/*
* 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 += '<li><a href="#" onclick="loadConfigValuesForBot(\'' + currentBotName + '\')">' + currentBotName + '</a></li>';
}
}
$(".box-title").html("Currently editing: <b>" + botName + "</b>");
$("#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
+ '<div class="form-group">'
+ '<label class="control-sidebar-subheading">'
+ '<a href="javascript:void(0)" class="text-red pull-right" data-general="resetIPCPassword"><i class="fa fa-trash-o"></i></a>'
+ '<a href="javascript:void(0)" class="text-red pull-right" data-general="resetIPCPassword"><i class="far fa-trash-alt"></i></a>'
+ 'Reset IPC Password'
+ '</label>'
+ '<p>Deletes the currently set IPC password</p>'
+ '</div>'
// Expert Mode
+ '<div class="form-group">'
+ '<label class="control-sidebar-subheading">'
+ '<input type="checkbox" data-expert="expertMode" class="pull-right"/> '
+ 'Expert Mode'
+ '</label>'
+ '<p>Toggle between normal and expert mode</p>'
+ '</div>'
// Boxed Layout
+ '<div class="form-group hidden-xs hidden-sm">'
+ '<label class="control-sidebar-subheading">'
@@ -548,4 +730,5 @@ $(function () {
$('#control-right-sidebar').after($layoutSettings);
setup();
});
});
//#endregion Layout

676
ArchiSteamFarm/www/pages/bots.html
View File

@@ -6,12 +6,13 @@
<title>ArchiSteamFarm | Bots</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.0.0/css/bootstrap-slider.min.css">
<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://cdnjs.cloudflare.com/ajax/libs/admin-lte/2.4.2/css/skins/_all-skins.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">
<!--Change font-awesome to cdnjs once available-->
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<link rel="stylesheet" href="../css/app.css">
<link rel="icon" href="../favicon.png" type="image/png">
<link rel="shortcut icon" href="../favicon.ico" type="img/x-icon">
@@ -39,7 +40,7 @@
<ul class="nav navbar-nav">
<!-- Control Sidebar Toggle Button -->
<li>
<a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
<a href="#" data-toggle="control-sidebar"><i class="fas fa-cogs"></i></a>
</li>
</ul>
</div>
@@ -52,10 +53,10 @@
<!-- Sidebar Menu -->
<ul class="sidebar-menu" data-widget="tree">
<li class="header">HOME</li>
<li><a href="command.html"><i class="fa fa-laptop"></i> <span>Command</span></a></li>
<li><a href="command.html"><i class="fas fa-laptop fa-fw"></i> <span>Command</span></a></li>
<li class="active">
<a href="bots.html">
<i class="fa fa-users"></i> <span>Bots</span>
<i class="fas fa-users fa-fw"></i> <span>Bots</span>
<span class="pull-right-container bot-status">
<small class="label pull-right bg-gray" id="offlineBots">0</small>
<small class="label pull-right bg-yellow" id="idleBots">0</small>
@@ -63,13 +64,13 @@
</span>
</a>
</li>
<li><a href="log.html"><i class="fa fa-file-text-o"></i> <span>Log</span></a></li>
<li><a href="config.html"><i class="fa fa-cogs"></i> <span>Config</span></a></li>
<li><a href="log.html"><i class="far fa-file-alt fa-fw"></i> <span>Log</span></a></li>
<li><a href="config.html"><i class="fas fa-cogs fa-fw"></i> <span>Config</span></a></li>
<li class="header">INFORMATION</li>
<li class="info-overview">
<a href="#">
<i class="fa fa-tachometer"></i> <span>RAM Usage</span>
<i class="fas fa-tachometer-alt fa-fw"></i> <span>RAM Usage</span>
<span class="pull-right-container">
<small class="label pull-right bg-blue" id="ramUsage">0.00 MB</small>
</span>
@@ -77,7 +78,7 @@
</li>
<li class="info-overview">
<a href="#">
<i class="fa fa-clock-o"></i> <span>Uptime</span>
<i class="far fa-clock fa-fw"></i> <span>Uptime</span>
<span class="pull-right-container">
<small class="label pull-right bg-blue" id="uptime">0d 0h 0m</small>
</span>
@@ -96,13 +97,41 @@
<small>Control Panel</small>
</h1>
<ol class="breadcrumb">
<li><i class="fa fa-home"></i> Home</li>
<li class="active"><i class="fa fa-users"></i> Bots</li>
<li><i class="fas fa-home"></i> Home</li>
<li class="active"><i class="fas fa-users"></i> Bots</li>
</ol>
</section>
<!-- Main content -->
<section class="content container-fluid">
<div class="box">
<div class="box-header">
<i class="fas fa-users"></i>
<h3 class="box-title">Bots</h3>
<div class="box-tools pull-right">
<div class="btn-group">
<button type="button" class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown">
Only show <span class="fas fa-caret-down"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><input type="checkbox" class="dropdown-checkbox" id="chkShowOnlineBots">Online bots</li>
<li><input type="checkbox" class="dropdown-checkbox" id="chkShowOfflineBots">Offline bots</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><input type="checkbox" class="dropdown-checkbox" id="chkShowDeleteButton">Show delete button</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row" id="totalBotOverview"></div>
<div class="row" id="botRow"></div>
</section>
</div>
@@ -113,7 +142,7 @@
<strong>
<a href="https://github.com/JustArchi/ArchiSteamFarm">GitHub</a> -
<a href="https://github.com/JustArchi/ArchiSteamFarm/wiki">Wiki</a> -
<a href="https://github.com/JustArchi/ArchiSteamFarm/commits/master">Changelog</a>
<a href="https://github.com/JustArchi/ArchiSteamFarm/commits/master" id="changelog">Changelog</a>
</strong>
</footer>
@@ -126,270 +155,399 @@
</div>
</aside>
<!-- Add the sidebar's background. This div must be placed
immediately after the control sidebar -->
<div class="control-sidebar-bg"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-sweetalert/1.0.1/sweetalert.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/2.4.2/js/adminlte.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/humanize-duration/3.12.1/humanize-duration.min.js"></script>
<script src="../js/app.js"></script>
<script>
$(function () {
'use strict';
$.ajax({
url: "/Api/Bot/ASF",
type: "GET",
success: function (data) {
var json = data["Result"],
steamBaseURL = "https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/",
deleteBotHTML = "",
tmpExpertModeState = get('expertModeState'),
gamesNumber = 0,
timeNumber = "00:00:00",
cardsNumber = 0,
farmingIsActive = false;
var tmpShowOnlineBots = get('showOnlineBots');
var tmpShowOfflineBots = get('showOfflineBots');
var tmpShowDeleteButton = get('showDeleteButton');
// show deleteBot button if you are an expert
if (tmpExpertModeState && tmpExpertModeState === "expert") {
deleteBotHTML = '<button title="Delete this bot" type="button" id="expertDeleteBot" class="btn btn-box-tool" data-command="deleteBot"><i class="fa fa-trash-o"></i></button>';
}
// Load state of checkboxes
$('.box-tools').ready(function () {
if (tmpShowOnlineBots === 'false') {
$("#chkShowOnlineBots").prop('checked', false);
} else {
$("#chkShowOnlineBots").prop('checked', true);
}
// create one box for each bot
for (var i = 0; i < json.length; i++) {
var obj = json[i],
BotName = obj.BotName,
AvatarHash = obj.AvatarHash,
KeepRunning = obj.KeepRunning,
Paused = obj.CardsFarmer.Paused,
boxColorHTML = "",
avatarHTML = "",
startOrStopHTML = "",
pauseOrResumeHTML = "",
expandBoxHTML = "",
boxBodyHTML = "";
if (AvatarHash) {
var folder = AvatarHash.substring(0, 2);
avatarHTML = steamBaseURL + folder + "/" + AvatarHash + ".jpg";
} else {
//use steam default pic
avatarHTML = steamBaseURL + "fe/fef49e7fa7e1997310d705b2a6158ff8dc1cdfeb.jpg";
}
if (tmpShowOfflineBots === 'false') {
$("#chkShowOfflineBots").prop('checked', false);
} else {
$("#chkShowOfflineBots").prop('checked', true);
}
if (KeepRunning === false) {
boxColorHTML = "box-gray";
startOrStopHTML = '<button title="Start <' + BotName + '>" type="button" class="btn btn-box-tool bot-stopped" data-command="startBot"><i class="fa fa-power-off"></i></button>';
} else {
startOrStopHTML = '<button title="Stop <' + BotName + '>" type="button" class="btn btn-box-tool bot-started" data-command="stopBot"><i class="fa fa-power-off"></i></button>';
if (tmpShowDeleteButton === 'false') {
$("#chkShowDeleteButton").prop('checked', false);
} else {
$("#chkShowDeleteButton").prop('checked', true);
}
var TimeRemaining = obj.CardsFarmer.TimeRemaining;
if (TimeRemaining === "00:00:00") {
boxColorHTML = "box-warning";
} else {
var GamesToFarm = obj.CardsFarmer.GamesToFarm,
allGameName = [],
allCardsRemaining = 0;
for (var j = 0; j < GamesToFarm.length; j++) {
cardsNumber = cardsNumber + GamesToFarm[j].CardsRemaining;
allCardsRemaining = allCardsRemaining + GamesToFarm[j].CardsRemaining;
allGameName.push(GamesToFarm[j].GameName);
}
if (timeNumber < TimeRemaining) {
timeNumber = TimeRemaining;
}
gamesNumber += GamesToFarm.length;
farmingIsActive = true; //at least one bot is farming
boxColorHTML = "box-success";
expandBoxHTML = '<button title="Show more infos" type="button" class="btn btn-box-tool" data-widget="collapse" id="collapse-trigger"><i class="fa fa-plus"></i></button>'
boxBodyHTML = '<div class="box-body" id="' + BotName + '">'
+ '<div class="">'
+ '<span class=""><i class="fa fa-gamepad"></i> ' + allGameName.join(", ") + '</span>'
+ '</div>'
+ '<div class="">'
+ '<span class=""><i class="fa fa-clock-o"></i> ' + TimeRemaining + '</span>'
+ '</div>'
+ '<div class="">'
+ '<span class=""><i class="fa fa-clone"></i> ' + allCardsRemaining + '</span>'
+ '</div>'
+ '</div>'
}
if (Paused) {
pauseOrResumeHTML = '<button title="Resume <' + BotName + '>" type="button" class="btn btn-box-tool bot-paused" data-command="resumeBot"><i class="fa fa-pause"></i></button>';
} else {
pauseOrResumeHTML = '<button title="Pause <' + BotName + '>" type="button" class="btn btn-box-tool bot-resumed" data-command="pauseBot"><i class="fa fa-pause"></i></button>';
}
}
$("#botRow").append('<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">'
+ '<div class="box ' + boxColorHTML + ' collapsed-box" id="bot-box-' + BotName + '">'
+ '<div class="box-header with-border botHeader">'
+ '<img class="user-image" src="' + avatarHTML + '">'
+ '<h3 class="box-title botTitle">' + BotName + '</h3>'
+ '<div class="box-tools pull-right botTools" id="' + BotName + '">'
+ startOrStopHTML
+ pauseOrResumeHTML
+ deleteBotHTML
+ expandBoxHTML
+ '</div>'
+ boxBodyHTML
+ '</div>'
+ '</div>'
+ '</div>');
$('#bot-box-' + BotName).boxWidget({
animationSpeed: 500,
collapseTrigger: '#collapse-trigger',
collapseIcon: 'fa-minus',
expandIcon: 'fa-plus',
})
$('#bot-box-' + BotName + ' .btn').click(function () {
var BotName = $(this).parent().attr('id');
if ($(this).data('command') === 'startBot') {
$.ajax({
url: "/Api/Command/start " + BotName,
type: "GET",
success: function (data) {
swal({
title: "Success!",
text: "<" + BotName + "> has been started.",
type: "success"
}, function () {
location.reload();
});
}
});
}
if ($(this).data('command') === 'stopBot') {
$.ajax({
url: "/Api/Command/stop " + BotName,
type: "GET",
success: function (data) {
swal({
title: "Success!",
text: "<" + BotName + "> has been stopped.",
type: "success"
}, function () {
location.reload();
});
}
});
}
if ($(this).data('command') === 'pauseBot') {
$.ajax({
url: "/Api/Command/pause " + BotName,
type: "GET",
success: function (data) {
swal({
title: "Success!",
text: "<" + BotName + "> has been paused.",
type: "success"
}, function () {
location.reload();
});
}
});
}
if ($(this).data('command') === 'resumeBot') {
$.ajax({
url: "/Api/Command/resume " + BotName,
type: "GET",
success: function (data) {
swal({
title: "Success!",
text: "<" + BotName + "> has been resumed.",
type: "success"
}, function () {
location.reload();
});
}
});
}
if ($(this).data('command') === 'deleteBot') {
swal({
title: "Are you sure?",
text: "You will not be able to recover any bot files!",
type: "warning",
showCancelButton: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "Yes, delete bot!",
closeOnConfirm: false,
showLoaderOnConfirm: true
}, function () {
$.ajax({
url: "/Api/Bot/" + BotName,
type: "DELETE",
success: function (data) {
swal({
title: "Success!",
text: "<" + BotName + "> and all related files have been deleted.",
type: "success"
}, function () {
location.reload();
});
}
});
});
}
})
}
// add info boxes if at least one bot is farming
if (farmingIsActive) {
$("#botRow").before('<div class="row">'
+ '<div class="col-md-4 col-sm-4 col-xs-12">'
+ '<div class="info-box bot-info-box">'
+ '<span class="info-box-icon bg-purple bots-info-box-icon"><i class="fa fa-gamepad"></i></span>'
+ '<div class="info-box-content bot-info-box-content">'
+ '<span class="info-box-text">Games Remaining</span>'
+ '<span class="info-box-number" id="gamesNumber"></span>'
+ '</div>'
+ '</div>'
+ '</div>'
+ '<div class="col-md-4 col-sm-4 col-xs-12">'
+ '<div class="info-box bot-info-box">'
+ '<span class="info-box-icon bg-green bots-info-box-icon"><i class="fa fa-clock-o"></i></span>'
+ '<div class="info-box-content bot-info-box-content">'
+ '<span class="info-box-text">Time Remaining</span>'
+ '<span class="info-box-number" id="timeNumber"></span>'
+ '</div>'
+ '</div>'
+ '</div>'
+ '<div class="col-md-4 col-sm-4 col-xs-12">'
+ '<div class="info-box bot-info-box">'
+ '<span class="info-box-icon bg-aqua bots-info-box-icon"><i class="fa fa-clone"></i></span>'
+ '<div class="info-box-content bot-info-box-content">'
+ '<span class="info-box-text">Cards Remaining</span>'
+ '<span class="info-box-number" id="cardsNumber"></span>'
+ '</div>'
+ '</div>'
+ '</div>'
+ '</div>');
$("#gamesNumber").text(gamesNumber);
$("#timeNumber").text(timeNumber);
$("#cardsNumber").text(cardsNumber);
}
if (tmpShowOnlineBots !== 'false' || tmpShowOfflineBots !== 'false') {
loadPageContent();
}
});
$('#chkShowOnlineBots').click(function () {
store('showOnlineBots', this.checked);
loadPageContent();
});
$('#chkShowOfflineBots').click(function () {
store('showOfflineBots', this.checked);
loadPageContent();
});
$('#btnRefreshContent').click(function () {
loadPageContent();
});
$('#chkShowDeleteButton').click(function () {
store('showDeleteButton', this.checked);
loadPageContent();
});
function loadPageContent() {
var tmpShowOnlineBots = get('showOnlineBots');
var tmpShowOfflineBots = get('showOfflineBots');
var tmpShowDeleteButton = get('showDeleteButton');
//clear page content first
$("#totalBotOverview").empty();
$("#botRow").empty();
$.ajax({
url: "/Api/Bot/ASF",
type: "GET",
success: function (data) {
var json = data["Result"],
steamAvatarBaseURL = "https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/",
steamGameBaseURL = "http://cdn.edgecast.steamstatic.com/steam/apps/",
deleteBotHTML = "",
totalGamesRemaining = 0,
totalTimeRemaining = "00:00:00",
totalCardsRemaining = 0,
farmingIsActive = false;
if (tmpShowDeleteButton === 'true') {
deleteBotHTML = '<button title="Delete this bot" type="button" class="btn btn-box-tool" data-command="deleteBot"><i class="far fa-trash-alt"></i></button>';
}
// Create one box for each bot
for (var i = 0; i < json.length; i++) {
var obj = json[i],
BotName = obj.BotName,
AvatarHash = obj.AvatarHash,
IsPlayingPossible = obj.IsPlayingPossible,
KeepRunning = obj.KeepRunning,
SteamID = obj.SteamID,
Paused = obj.CardsFarmer.Paused,
boxColorHTML = "",
avatarHTML = "",
startOrStopHTML = "",
pauseOrResumeHTML = "",
expandBoxHTML = "",
allGamesHTML = "",
boxBodyHTML = "";
if (AvatarHash) {
var folder = AvatarHash.substring(0, 2);
avatarHTML = steamAvatarBaseURL + folder + "/" + AvatarHash + ".jpg";
} else {
// Use steam default pic
avatarHTML = steamAvatarBaseURL + "fe/fef49e7fa7e1997310d705b2a6158ff8dc1cdfeb.jpg";
}
if (KeepRunning === false) {
// Bot is offline
if (tmpShowOfflineBots === 'false') { continue; }
boxColorHTML = "box-gray";
startOrStopHTML = '<button title="Start <' + BotName + '>" type="button" class="btn btn-box-tool bot-stopped" data-command="startBot"><i class="fas fa-power-off"></i></button>';
} else {
// Bot is idling
if (tmpShowOnlineBots === 'false') { continue; }
boxColorHTML = "box-warning";
startOrStopHTML = '<button title="Stop <' + BotName + '>" type="button" class="btn btn-box-tool bot-started" data-command="stopBot"><i class="fas fa-power-off"></i></button>';
var TimeRemaining = obj.CardsFarmer.TimeRemaining;
if (SteamID === 0) {
// Bot is not connected to steam
boxColorHTML = "box-danger";
} else {
// Bot is connected to steam
if (TimeRemaining !== "00:00:00") {
// Bot is farming
var GamesToFarm = obj.CardsFarmer.GamesToFarm,
CurrentGamesFarming = obj.CardsFarmer.CurrentGamesFarming,
allGamesRemainingName = [],
allGamesFarmingAppID = [],
allCardsRemaining = 0;
farmingIsActive = true; //at least one bot is farming
boxColorHTML = "box-success";
for (var j = 0; j < GamesToFarm.length; j++) {
totalCardsRemaining = totalCardsRemaining + GamesToFarm[j].CardsRemaining;
allCardsRemaining = allCardsRemaining + GamesToFarm[j].CardsRemaining;
allGamesRemainingName.push(GamesToFarm[j].GameName);
}
for (var k = 0; k < CurrentGamesFarming.length; k++) {
allGamesFarmingAppID.push(CurrentGamesFarming[k].AppID);
}
if (totalTimeRemaining < TimeRemaining) {
totalTimeRemaining = TimeRemaining;
}
totalGamesRemaining += GamesToFarm.length;
expandBoxHTML = '<button title="Show more infos" type="button" class="btn btn-box-tool" data-widget="collapse" id="collapse-trigger"><i class="fas fa-plus"></i></button>'
if (IsPlayingPossible) {
if (Paused) {
allGamesHTML = '<p class="text-center no-margin">Bot is paused.</p>';
} else {
if (allGamesFarmingAppID.length === 1) {
var value = allGamesFarmingAppID;
allGamesHTML = '<img src="' + steamGameBaseURL + value[0] + '/header.jpg" alt="" class="img-responsive">'; // fill alt="" with gameName
} else {
// Multiple game farming
allGamesHTML = '<div class="games-carousel-' + BotName + '">';
for (var appID in allGamesFarmingAppID) {
var value = allGamesFarmingAppID[appID];
allGamesHTML += '<div class="game-box" style="max-height: 215px;"><img src="' + steamGameBaseURL + value + '/header.jpg" alt="" class="img-responsive"></div>'; // fill alt="" with gameName
}
allGamesHTML += '</div>';
}
}
} else {
allGamesHTML = '<p class="text-center no-margin">Bot is currently being used.</p>';
}
TimeRemaining = new Date("1970-01-01T" + TimeRemaining + "Z").getTime();
boxBodyHTML = '<div class="box-body" id="' + BotName + '">'
+ '<div class="row">'
+ '<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">'
+ '<span class="pull-left"><i class="far fa-clock"></i> ' + humanizeDuration(TimeRemaining) + '</span>'
+ '</div>'
+ '<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">'
+ '<span class="pull-right"><i class="far fa-clone"></i> ' + allCardsRemaining + '</span>'
+ '</div>'
+ '</div>'
+ allGamesHTML
+ '</div>'
}
}
if (Paused) {
pauseOrResumeHTML = '<button title="Resume <' + BotName + '>" type="button" class="btn btn-box-tool bot-paused" data-command="resumeBot"><i class="fas fa-pause"></i></button>';
} else {
pauseOrResumeHTML = '<button title="Pause <' + BotName + '>" type="button" class="btn btn-box-tool bot-resumed" data-command="pauseBot"><i class="fas fa-pause"></i></button>';
}
}
$("#botRow").append('<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">'
+ '<div class="box ' + boxColorHTML + ' collapsed-box" id="bot-box-' + BotName + '">'
+ '<div class="box-header with-border botHeader">'
+ '<img src="' + avatarHTML + '">'
+ '<h3 class="box-title botTitle">' + BotName + '</h3>'
+ '<div class="box-tools pull-right botTools" id="' + BotName + '">'
+ startOrStopHTML
+ pauseOrResumeHTML
+ deleteBotHTML
+ expandBoxHTML
+ '</div>'
+ boxBodyHTML
+ '</div>'
+ '</div>'
+ '</div>');
$('#bot-box-' + BotName).boxWidget({
animationSpeed: 500,
collapseTrigger: '#collapse-trigger',
collapseIcon: 'fa-minus',
expandIcon: 'fa-plus',
})
// This will be triggered if a user expands the BOT menu.
.on('expanded.boxwidget', function (BotName) {
var botCarousel = $('.games-carousel-' + BotName);
// Checks if Slick was already initialized...
if ($(botCarousel).hasClass('slick-initialized')) {
// Slick is set up, so just resume the animation.
$(botCarousel).slick('slickPlay');
} else {
// Sets up Slick for the first time.
$(botCarousel).slick({
slidesToShow: 1,
draggable: true,
autoplay: true,
autoplaySpeed: 2000,
arrows: false, //move arrows inside of .game-box
infinite: true
});
}
}.bind(null, BotName))
// This will be triggered if a user collapses the BOT menu.
.on('collapsed.boxwidget', function (BotName) {
// Just pause Slick's animation and collapse the menu.
$('.games-carousel-' + BotName).slick('slickPause');
}.bind(null, BotName)
);
$('#bot-box-' + BotName + ' .btn').click(function () {
var BotName = $(this).parent().attr('id');
var cmd = $(this).data('command');
switch (cmd) {
case 'startBot':
$.ajax({
url: "/Api/Command/start " + encodeURIComponent(BotName),
type: "GET",
success: function (data) {
swal({
title: "Success!",
text: "<" + BotName + "> has been started.",
type: "success"
}, function () {
location.reload();
});
}
});
break;
case 'stopBot':
$.ajax({
url: "/Api/Command/stop " + encodeURIComponent(BotName),
type: "GET",
success: function (data) {
swal({
title: "Success!",
text: "<" + BotName + "> has been stopped.",
type: "success"
}, function () {
location.reload();
});
}
});
break;
case 'pauseBot':
$.ajax({
url: "/Api/Command/pause " + encodeURIComponent(BotName),
type: "GET",
success: function (data) {
swal({
title: "Success!",
text: "<" + BotName + "> has been paused.",
type: "success"
}, function () {
location.reload();
});
}
});
break;
case 'resumeBot':
$.ajax({
url: "/Api/Command/resume " + encodeURIComponent(BotName),
type: "GET",
success: function (data) {
swal({
title: "Success!",
text: "<" + BotName + "> has been resumed.",
type: "success"
}, function () {
location.reload();
});
}
});
break;
case 'deleteBot':
swal({
title: "Are you sure?",
text: "You will not be able to recover any bot files!",
type: "warning",
showCancelButton: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "Yes, delete bot!",
closeOnConfirm: false,
showLoaderOnConfirm: true
}, function () {
$.ajax({
url: "/Api/Bot/" + encodeURIComponent(BotName),
type: "DELETE",
success: function (data) {
swal({
title: "Success!",
text: "<" + BotName + "> and all related files have been deleted.",
type: "success"
}, function () {
location.reload();
});
}
});
});
break;
}
})
}
// add info boxes if at least one bot is farming
if (farmingIsActive) {
$("#totalBotOverview").html('<div class="col-md-4 col-sm-4 col-xs-12">'
+ '<div class="info-box bot-info-box">'
+ '<span class="info-box-icon bg-purple bots-info-box-icon"><i class="fas fa-gamepad"></i></span>'
+ '<div class="info-box-content bot-info-box-content">'
+ '<span class="info-box-text">Games Remaining</span>'
+ '<span class="info-box-number" id="totalGamesRemaining"></span>'
+ '</div>'
+ '</div>'
+ '</div>'
+ '<div class="col-md-4 col-sm-4 col-xs-12">'
+ '<div class="info-box bot-info-box">'
+ '<span class="info-box-icon bg-green bots-info-box-icon"><i class="far fa-clock"></i></span>'
+ '<div class="info-box-content bot-info-box-content">'
+ '<span class="info-box-text">Time Remaining</span>'
+ '<span class="info-box-number" id="totalTimeRemaining"></span>'
+ '</div>'
+ '</div>'
+ '</div>'
+ '<div class="col-md-4 col-sm-4 col-xs-12">'
+ '<div class="info-box bot-info-box">'
+ '<span class="info-box-icon bg-aqua bots-info-box-icon"><i class="far fa-clone"></i></span>'
+ '<div class="info-box-content bot-info-box-content">'
+ '<span class="info-box-text">Cards Remaining</span>'
+ '<span class="info-box-number" id="totalCardsRemaining"></span>'
+ '</div>'
+ '</div>'
+ '</div>');
totalTimeRemaining = new Date("1970-01-01T" + totalTimeRemaining + "Z").getTime();
$("#totalGamesRemaining").text(totalGamesRemaining);
$("#totalTimeRemaining").text(humanizeDuration(totalTimeRemaining));
$("#totalCardsRemaining").text(totalCardsRemaining);
}
}
});
}
})
</script>
</body>
</html>
</html>

118
ArchiSteamFarm/www/pages/command.html
View File

@@ -6,11 +6,12 @@
<title>ArchiSteamFarm | Command</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<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://cdnjs.cloudflare.com/ajax/libs/admin-lte/2.4.2/css/skins/_all-skins.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
<!--Change font-awesome to cdnjs once available-->
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<link rel="stylesheet" href="../css/app.css">
<link rel="icon" href="../favicon.png" type="image/png">
<link rel="shortcut icon" href="../favicon.ico" type="img/x-icon">
@@ -38,7 +39,7 @@
<ul class="nav navbar-nav">
<!-- Control Sidebar Toggle Button -->
<li>
<a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
<a href="#" data-toggle="control-sidebar"><i class="fas fa-cogs"></i></a>
</li>
</ul>
</div>
@@ -51,10 +52,10 @@
<!-- Sidebar Menu -->
<ul class="sidebar-menu" data-widget="tree">
<li class="header">HOME</li>
<li class="active"><a href="command.html"><i class="fa fa-laptop"></i> <span>Command</span></a></li>
<li class="active"><a href="command.html"><i class="fas fa-laptop fa-fw"></i> <span>Command</span></a></li>
<li>
<a href="bots.html">
<i class="fa fa-users"></i> <span>Bots</span>
<i class="fas fa-users fa-fw"></i> <span>Bots</span>
<span class="pull-right-container bot-status">
<small class="label pull-right bg-gray" id="offlineBots">0</small>
<small class="label pull-right bg-yellow" id="idleBots">0</small>
@@ -62,13 +63,13 @@
</span>
</a>
</li>
<li><a href="log.html"><i class="fa fa-file-text-o"></i> <span>Log</span></a></li>
<li><a href="config.html"><i class="fa fa-cogs"></i> <span>Config</span></a></li>
<li><a href="log.html"><i class="far fa-file-alt fa-fw"></i> <span>Log</span></a></li>
<li><a href="config.html"><i class="fas fa-cogs fa-fw"></i> <span>Config</span></a></li>
<li class="header">INFORMATION</li>
<li class="info-overview">
<a href="#">
<i class="fa fa-tachometer"></i> <span>RAM Usage</span>
<i class="fas fa-tachometer-alt fa-fw"></i> <span>RAM Usage</span>
<span class="pull-right-container">
<small class="label pull-right bg-blue" id="ramUsage">0.00 MB</small>
</span>
@@ -76,7 +77,7 @@
</li>
<li class="info-overview">
<a href="#">
<i class="fa fa-clock-o"></i> <span>Uptime</span>
<i class="far fa-clock fa-fw"></i> <span>Uptime</span>
<span class="pull-right-container">
<small class="label pull-right bg-blue" id="uptime">0d 0h 0m</small>
</span>
@@ -95,8 +96,8 @@
<small>Control Panel</small>
</h1>
<ol class="breadcrumb">
<li><i class="fa fa-home"></i> Home</li>
<li class="active"><i class="fa fa-laptop"></i> Command</li>
<li><i class="fas fa-home"></i> Home</li>
<li class="active"><i class="fas fa-laptop"></i> Command</li>
</ol>
</section>
@@ -104,9 +105,19 @@
<section class="content container-fluid">
<div class="box">
<div class="box-header">
<i class="fa fa-laptop"></i>
<i class="fas fa-laptop"></i>
<h3 class="box-title">Command</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><input type="checkbox" class="dropdown-checkbox" id="autoClear">Auto clear</li>
</ul>
</div>
</div>
</div>
<div class="box-body">
<div class="box-content-command resize" id="commandReply"></div>
@@ -117,20 +128,20 @@
<div class="input-group-btn hidden-xs">
<button title="Show all commands" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Commands
<span class="fa fa-caret-down"></span>
<span class="fas fa-caret-down"></span>
</button>
<ul class="dropdown-menu scrollable-menu" id="commandsDropDown"></ul>
</div>
<div class="input-group-btn hidden-xs">
<button title="Show all bots" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Bots
<span class="fa fa-caret-down"></span>
<span class="fas fa-caret-down"></span>
</button>
<ul class="dropdown-menu scrollable-menu" id="botsDropDown"></ul>
</div>
<input id="commandInput" type="text" class="form-control" placeholder="Type command...">
<div class="input-group-btn">
<button title="Send command" type="button" class="btn btn-default" onclick="sendCommand()" id="sendCommand"><i class="fa fa-paper-plane-o"></i></button>
<button title="Send command" type="button" class="btn btn-default" id="sendCommand"><i class="far fa-paper-plane"></i></button>
</div>
</div>
</div>
@@ -144,7 +155,7 @@
<strong>
<a href="https://github.com/JustArchi/ArchiSteamFarm">GitHub</a> -
<a href="https://github.com/JustArchi/ArchiSteamFarm/wiki">Wiki</a> -
<a href="https://github.com/JustArchi/ArchiSteamFarm/commits/master">Changelog</a>
<a href="https://github.com/JustArchi/ArchiSteamFarm/commits/master" id="changelog">Changelog</a>
</strong>
</footer>
@@ -157,8 +168,6 @@
</div>
</aside>
<!-- Add the sidebar's background. This div must be placed
immediately after the control sidebar -->
<div class="control-sidebar-bg"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
@@ -171,6 +180,8 @@
$(function () {
'use strict';
$("#commandInput").focus();
var myCommands = [
'redeem',
'loot',
@@ -181,12 +192,64 @@
'resume'
]
var keyCount = 0;
var prevCommand = (JSON.parse(get('prevCommand')) === null) ? [] : JSON.parse(get('prevCommand'));
$("#sendCommand").click(function (e) {
var cmd = $('#commandInput').val();
keyCount = 0;
if (typeof prevCommand[prevCommand.length - 1] === "undefined") {
prevCommand.push(cmd);
} else if (prevCommand[prevCommand.length - 1] !== cmd) {
prevCommand.push(cmd);
}
store('prevCommand', JSON.stringify(prevCommand.slice(-20)));
prevCommand = (JSON.parse(get('prevCommand')) === null) ? [] : JSON.parse(get('prevCommand'));
sendCommand();
e.preventDefault();
});
$(document).keydown(function (e) {
if (e.which == 38 && $("#commandInput").is(":focus")) {
if (prevCommand.length > keyCount) {
keyCount++;
}
var index = prevCommand.length - keyCount;
$('#commandInput').val(prevCommand[index]);
} else if (e.which == 40 && $("#commandInput").is(":focus")) {
if (keyCount > 0) {
keyCount--;
}
var index = prevCommand.length - keyCount;
$('#commandInput').val(prevCommand[index]);
}
});
$(document).keypress(function (e) {
if (e.which == 13 && cmdInput.value !== "") {
$("#sendCommand").click();
}
});
// Load state of checkbox
$('.box-tools').ready(function () {
var tmpAutoClear = get('autoClear');
if (tmpAutoClear === 'false') {
$("#autoClear").prop('checked', false);
} else {
$("#autoClear").prop('checked', true);
}
});
$('#autoClear').click(function () {
store('autoClear', this.checked);
});
// Load height of commandReply
$('.box-content-command').ready(function () {
var tmpHeight = get('commandHeight');
@@ -216,7 +279,6 @@
store('commandHeight', currentHeight);
});
$('.box-footer').ready(function () {
// Fill drop down with all bots + ASF
$.ajax({
@@ -238,12 +300,26 @@
// Fill drop down with all commands
myCommands.forEach(function (command) {
$("#commandsDropDown").append('<li><a href="#" onclick="fillCommand(\'' + command + '\')">' + command + '</a></li>');
$("#commandsDropDown").append('<li><a href="#" id="' + command + '" onclick="fillCommand(\'' + command + '\')">' + command + '</a></li>');
//$('#' + command + '')
// .mouseenter(function () {
// $('#commandInput').val('show description for command: ' + command);
// })
// .mouseleave(function () {
// $('#commandInput').val('');
// });
});
$("#commandsDropDown").append('<li class="divider"></li><li><a href="#" onclick="fillCommand(\'restart\')">restart</a></li>');
$("#commandsDropDown").append('<li class="divider"></li><li><a href="#" id="restart" onclick="fillCommand(\'restart\')">restart</a></li>');
//$('#restart')
// .mouseenter(function () {
// $('#commandInput').val('show description for command: restart');
// })
// .mouseleave(function () {
// $('#commandInput').val('');
// });
});
})
</script>
</body>
</html>
</html>

166
ArchiSteamFarm/www/pages/config.html
View File

@@ -6,11 +6,12 @@
<title>ArchiSteamFarm | Config Manager</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<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://cdnjs.cloudflare.com/ajax/libs/admin-lte/2.4.2/css/skins/_all-skins.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
<!--Change font-awesome to cdnjs once available-->
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<link rel="stylesheet" href="../css/app.css">
<link rel="icon" href="../favicon.png" type="image/png">
<link rel="shortcut icon" href="../favicon.ico" type="img/x-icon">
@@ -38,7 +39,7 @@
<ul class="nav navbar-nav">
<!-- Control Sidebar Toggle Button -->
<li>
<a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
<a href="#" data-toggle="control-sidebar"><i class="fas fa-cogs"></i></a>
</li>
</ul>
</div>
@@ -51,10 +52,10 @@
<!-- Sidebar Menu -->
<ul class="sidebar-menu" data-widget="tree">
<li class="header">HOME</li>
<li><a href="command.html"><i class="fa fa-laptop"></i> <span>Command</span></a></li>
<li><a href="command.html"><i class="fas fa-laptop fa-fw"></i> <span>Command</span></a></li>
<li>
<a href="bots.html">
<i class="fa fa-users"></i> <span>Bots</span>
<i class="fas fa-users fa-fw"></i> <span>Bots</span>
<span class="pull-right-container bot-status">
<small class="label pull-right bg-gray" id="offlineBots">0</small>
<small class="label pull-right bg-yellow" id="idleBots">0</small>
@@ -62,13 +63,13 @@
</span>
</a>
</li>
<li><a href="log.html"><i class="fa fa-file-text-o"></i> <span>Log</span></a></li>
<li class="active"><a href="config.html"><i class="fa fa-cogs"></i> <span>Config</span></a></li>
<li><a href="log.html"><i class="far fa-file-alt fa-fw"></i> <span>Log</span></a></li>
<li class="active"><a href="config.html"><i class="fas fa-cogs fa-fw"></i> <span>Config</span></a></li>
<li class="header">INFORMATION</li>
<li class="info-overview">
<a href="#">
<i class="fa fa-tachometer"></i> <span>RAM Usage</span>
<i class="fas fa-tachometer-alt fa-fw"></i> <span>RAM Usage</span>
<span class="pull-right-container">
<small class="label pull-right bg-blue" id="ramUsage">0.00 MB</small>
</span>
@@ -76,7 +77,7 @@
</li>
<li class="info-overview">
<a href="#">
<i class="fa fa-clock-o"></i> <span>Uptime</span>
<i class="far fa-clock fa-fw"></i> <span>Uptime</span>
<span class="pull-right-container">
<small class="label pull-right bg-blue" id="uptime">0d 0h 0m</small>
</span>
@@ -95,8 +96,8 @@
<small>Control Panel</small>
</h1>
<ol class="breadcrumb">
<li><i class="fa fa-home"></i> Home</li>
<li class="active"><i class="fa fa-cogs"></i> Config</li>
<li><i class="fas fa-home"></i> Home</li>
<li class="active"><i class="fas fa-cogs"></i> Config</li>
</ol>
</section>
@@ -104,86 +105,22 @@
<section class="content container-fluid">
<div class="nav-tabs-custom">
<ul class="nav nav-tabs">
<li class="active"><a href="#configManager" data-toggle="tab" aria-expanded="true"><i class="fa fa-wrench"></i> Manager</a></li>
<li class="pull-right"><a href="#configGenerator" data-toggle="tab" aria-expanded="false"><i class="fa fa-file-text-o"></i> Generator</a></li>
<li class="active"><a href="#configChangerTab" data-toggle="tab" aria-expanded="true"><i class="far fa-file-alt"></i> Changer</a></li>
<li class="pull-right"><a href="#configGeneratorTab" data-toggle="tab" aria-expanded="false"><i class="far fa-copy"></i> Generator</a></li>
</ul>
<div class="tab-content no-padding">
<div class="tab-pane active" id="configManager">
<div class="callout callout-warning margin">
<h4><i class="icon fa fa-warning"></i> Under development</h4>
<p>This feature is currently being developed.</p>
</div>
<div class="box-header">
<h3 class="box-title">Currently editing:</h3>
<div class="box-tools pull-right">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Change Bot
<span class="fa fa-caret-down"></span>
</button>
<ul class="dropdown-menu scrollable-menu" id="botsDropDownManager"></ul>
</div>
</div>
</div>
<div class="box-body">
<div class="form-group">
<label for="inputBotName">Bot Name</label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input type="text" id="inputBotName" class="form-control" placeholder="Bot name">
</div>
</div>
<div class="form-group">
<label for="inputSteamName">Steam Name</label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input type="text" id="inputSteamName" class="form-control" placeholder="Steam name">
</div>
</div>
<div class="form-group">
<label for="inputSteamPassword">Steam Password</label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-lock"></i></span>
<input type="text" id="inputSteamPassword" class="form-control" placeholder="Steam password">
</div>
</div>
<div class="form-group">
<label for="checkEnabled">Enabled</label>
<div class="checkbox">
<label>
<input type="checkbox" id="checkEnabled">
Enabled
</label>
</div>
</div>
<div class="form-group">
<label for="checkIsBotAccount">IsBotAccount</label>
<div class="checkbox">
<label>
<input type="checkbox" id="checkIsBotAccount">
IsBotAccount
</label>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="configGenerator">
<div class="tab-pane active" id="configChangerTab"></div>
<div class="tab-pane" id="configGeneratorTab">
<div class="callout callout-info margin">
<h4><i class="icon fa fa-info"></i> Not implemented</h4>
<h4><i class="icon fas fa-info"></i> Not implemented</h4>
<p>This feature has not been implemented yet.</p>
</div>
</div>
</div>
<div class="box-footer">
<!--<button type="submit" class="btn btn-default">Cancel</button>-->
<button type="submit" class="btn btn-default pull-right">Save</button>
<!--change to btn-success once something has been edited-->
<button type="submit" class="btn btn-default pull-right" id="saveConfig">Save</button>
</div>
</div>
</section>
@@ -195,7 +132,7 @@
<strong>
<a href="https://github.com/JustArchi/ArchiSteamFarm">GitHub</a> -
<a href="https://github.com/JustArchi/ArchiSteamFarm/wiki">Wiki</a> -
<a href="https://github.com/JustArchi/ArchiSteamFarm/commits/master">Changelog</a>
<a href="https://github.com/JustArchi/ArchiSteamFarm/commits/master" id="changelog">Changelog</a>
</strong>
</footer>
@@ -208,8 +145,6 @@
</div>
</aside>
<!-- Add the sidebar's background. This div must be placed
immediately after the control sidebar -->
<div class="control-sidebar-bg"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
@@ -221,29 +156,64 @@
$(function () {
'use strict';
$('.box-tools').ready(function () {
// Fill drop down with all bots
$('#configChangerTab').ready(function () {
generateConfigChangerHTML();
$.ajax({
url: "/Api/Bot/ASF",
type: "GET",
success: function (data) {
var json = data["Result"];
$(".box-title").text("Currently editing: " + json[0].BotName);
for (var i = 0; i < json.length; i++) {
var botName = json[i].BotName;
if (i === 0) {
$("#botsDropDownManager").append('<li class="active"><a href="#" onclick="#">' + botName + '</a></li>');
} else {
$("#botsDropDownManager").append('<li><a href="#" onclick="#">' + botName + '</a></li>');
}
}
loadConfigValuesForBot(json[0].BotName);
}
});
});
var objBotConfig = {}
var botConfig = JSON.stringify(objBotConfig);
function saveConfig(botName, config) {
$.ajax({
url: "/Api/Bot/" + encodeURIComponent(botName),
type: "POST",
data: botConfig,
contentType: "application/json",
success: function (data) {
swal({
title: "Success!",
text: "<" + botName + "> and its config file got updated.",
type: "success"
}, function () {
location.reload();
});
},
error: function (jqXHR, textStatus, errorThrown) {
console.log(jqXHR.status + ' - ' + errorThrown);
}
});
}
$("#saveConfig").click(function (e) {
var botName = $("#saveConfig").data("BotName");
swal({
title: "Are you sure?",
text: "The config will be updated and the bot will be restarted!",
type: "warning",
showCancelButton: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "Yes, update config!",
closeOnConfirm: false,
showLoaderOnConfirm: true
}, function () {
saveConfig(botName, botConfig);
});
e.preventDefault();
});
})
</script>
</body>
</html>
</html>

47
ArchiSteamFarm/www/pages/log.html
View File

@@ -6,11 +6,12 @@
<title>ArchiSteamFarm | Log</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<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://cdnjs.cloudflare.com/ajax/libs/admin-lte/2.4.2/css/skins/_all-skins.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
<!--Change font-awesome to cdnjs once available-->
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<link rel="stylesheet" href="../css/app.css">
<link rel="icon" href="../favicon.png" type="image/png">
<link rel="shortcut icon" href="../favicon.ico" type="img/x-icon">
@@ -38,7 +39,7 @@
<ul class="nav navbar-nav">
<!-- Control Sidebar Toggle Button -->
<li>
<a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
<a href="#" data-toggle="control-sidebar"><i class="fas fa-cogs"></i></a>
</li>
</ul>
</div>
@@ -51,10 +52,10 @@
<!-- Sidebar Menu -->
<ul class="sidebar-menu" data-widget="tree">
<li class="header">HOME</li>
<li><a href="command.html"><i class="fa fa-laptop"></i> <span>Command</span></a></li>
<li><a href="command.html"><i class="fas fa-laptop fa-fw"></i> <span>Command</span></a></li>
<li>
<a href="bots.html">
<i class="fa fa-users"></i> <span>Bots</span>
<i class="fas fa-users fa-fw"></i> <span>Bots</span>
<span class="pull-right-container bot-status">
<small class="label pull-right bg-gray" id="offlineBots">0</small>
<small class="label pull-right bg-yellow" id="idleBots">0</small>
@@ -62,13 +63,13 @@
</span>
</a>
</li>
<li class="active"><a href="log.html"><i class="fa fa-file-text-o"></i> <span>Log</span></a></li>
<li><a href="config.html"><i class="fa fa-cogs"></i> <span>Config</span></a></li>
<li class="active"><a href="log.html"><i class="far fa-file-alt fa-fw"></i> <span>Log</span></a></li>
<li><a href="config.html"><i class="fas fa-cogs fa-fw"></i> <span>Config</span></a></li>
<li class="header">INFORMATION</li>
<li class="info-overview">
<a href="#">
<i class="fa fa-tachometer"></i> <span>RAM Usage</span>
<i class="fas fa-tachometer-alt fa-fw"></i> <span>RAM Usage</span>
<span class="pull-right-container">
<small class="label pull-right bg-blue" id="ramUsage">0.00 MB</small>
</span>
@@ -76,7 +77,7 @@
</li>
<li class="info-overview">
<a href="#">
<i class="fa fa-clock-o"></i> <span>Uptime</span>
<i class="far fa-clock fa-fw"></i> <span>Uptime</span>
<span class="pull-right-container">
<small class="label pull-right bg-blue" id="uptime">0d 0h 0m</small>
</span>
@@ -95,8 +96,8 @@
<small>Control Panel</small>
</h1>
<ol class="breadcrumb">
<li><i class="fa fa-home"></i> Home</li>
<li class="active"><i class="fa fa-file-text-o"></i> Log</li>
<li><i class="fas fa-home"></i> Home</li>
<li class="active"><i class="far fa-file-alt"></i> Log</li>
</ol>
</section>
@@ -104,16 +105,16 @@
<section class="content container-fluid">
<div class="box">
<div class="box-header">
<i class="fa fa-file-text-o"></i>
<i class="far fa-file-alt"></i>
<h3 class="box-title">Log</h3>
<div class="box-tools pull-right">
<button title="Toggle auto scroll" type="button" class="btn btn-box-tool text-green" id="toggleAutoScroll"><i class="fa fa-toggle-on fa-2x"></i></button>
<button title="Toggle auto scroll" type="button" class="btn btn-box-tool text-green" id="toggleAutoScroll"><i class="fas fa-toggle-on fa-2x"></i></button>
</div>
</div>
<div class="box-body">
<div class="box-content-log resize" id="log">
<div class="overlay"><i class="fa fa-refresh fa-spin" style="color:white"></i></div>
<div class="overlay"><i class="fas fa-sync fa-spin" style="color:white"></i></div>
</div>
</div>
</div>
@@ -126,7 +127,7 @@
<strong>
<a href="https://github.com/JustArchi/ArchiSteamFarm">GitHub</a> -
<a href="https://github.com/JustArchi/ArchiSteamFarm/wiki">Wiki</a> -
<a href="https://github.com/JustArchi/ArchiSteamFarm/commits/master">Changelog</a>
<a href="https://github.com/JustArchi/ArchiSteamFarm/commits/master" id="changelog">Changelog</a>
</strong>
</footer>
@@ -139,8 +140,6 @@
</div>
</aside>
<!-- Add the sidebar's background. This div must be placed
immediately after the control sidebar -->
<div class="control-sidebar-bg"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
@@ -152,7 +151,7 @@
<script>
$(function () {
'use strict';
var lastScrollPosition = 0,
ws;
@@ -170,8 +169,7 @@
new_uri = "ws:";
}
//replace password parameter in new_uri string with authentication header once available
new_uri += "//" + loc.host + "/Api/Log?password=" + IPCPassword;
new_uri += "//" + loc.host + "/Api/Log?password=" + encodeURIComponent(IPCPassword);
ws = new WebSocket(new_uri);
@@ -196,16 +194,15 @@
startWebSocket();
document.getElementById("toggleAutoScroll").classList.remove('text-red');
document.getElementById("toggleAutoScroll").classList.add('text-green');
$("#toggleAutoScroll").html('<i class="fa fa-toggle-on fa-2x"></i>');
$("#toggleAutoScroll").html('<i class="fas fa-toggle-on fa-2x"></i>');
} else if (ws.readyState === ws.OPEN) {
ws.close();
document.getElementById("toggleAutoScroll").classList.remove('text-green');
document.getElementById("toggleAutoScroll").classList.add('text-red');
$("#toggleAutoScroll").html('<i class="fa fa-toggle-on fa-2x fa-rotate-180"></i>');
$("#toggleAutoScroll").html('<i class="fas fa-toggle-on fa-2x fa-rotate-180"></i>');
}
})
//Stop fetching log when scrolling upwards
$('.box-content-log').on('scroll', function () {
var newScrollPosition = $(this).scrollTop();
@@ -215,7 +212,7 @@
ws.close();
document.getElementById("toggleAutoScroll").classList.remove('text-green');
document.getElementById("toggleAutoScroll").classList.add('text-red');
$("#toggleAutoScroll").html('<i class="fa fa-toggle-on fa-2x fa-rotate-180"></i>');
$("#toggleAutoScroll").html('<i class="fas fa-toggle-on fa-2x fa-rotate-180"></i>');
}
}
@@ -252,4 +249,4 @@
})
</script>
</body>
</html>
</html>