fzorb/REDACTED-rig
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added toggle switch for turning off offline notifications

Browse source 
Cleanup
This commit is contained in:
BenDroid 2017-12-27 12:56:27 +01:00
parent 2bcccf6cc3
commit 609efa25b1
1 changed files with 105 additions and 88 deletions
Download patch file Download diff file Expand all files Collapse all files

73
index.html
View file

@ -8,14 +8,33 @@
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.0/css/buttons.bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.0/css/buttons.bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.4/css/select.dataTables.min.css"> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.4/css/select.dataTables.min.css">
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<style> <style>
.left{text-align:left;} .left{text-align:left;}
.center{text-align:center; padding-bottom: 50pt} .center{text-align:center; padding-bottom: 50pt}
.toolbar{text-align: right;}
.center-tab{text-align: center; vertical-align: middle;} .center-tab{text-align: center; vertical-align: middle;}
.online { color: green} .online { color: green}
.offline { color: red} .offline { color: red}
.toggle { border-radius: 2px;}
.toggle .toggle-handle { border-radius: 2px; }
form label
{
display:block;
margin-bottom: 5px;
text-align: left;
}
form label span {
display:inline-block;
margin-left: .5rem;
text-align: left;
}
form label input {
vertical-align: top;
}
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script> <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
@ -25,6 +44,7 @@
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.5.0/js/buttons.bootstrap.min.js"></script> <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.5.0/js/buttons.bootstrap.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.2.4/js/dataTables.select.min.js"></script> <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.2.4/js/dataTables.select.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timeago/1.6.1/jquery.timeago.min.js"></script> <script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timeago/1.6.1/jquery.timeago.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/6b3cdfc597.js"></script> <script src="https://use.fontawesome.com/6b3cdfc597.js"></script>
@ -34,7 +54,8 @@
$.fn.dataTable.ext.search.push( $.fn.dataTable.ext.search.push(
function( settings, data, dataIndex ) { function( settings, data, dataIndex ) {
var hide = $('#hideOffline').hasClass("fa fa-check-square-o"); var hideOffline = $('#hideOffline').prop('checked');
var showNotification = $('#showOfflineNotification').prop('checked');
var clientId = settings.aoData[dataIndex]._aData.client_status.client_id; var clientId = settings.aoData[dataIndex]._aData.client_status.client_id;
var lastStatus = settings.aoData[dataIndex]._aData.client_status.last_status_update * 1000; var lastStatus = settings.aoData[dataIndex]._aData.client_status.last_status_update * 1000;
@ -42,15 +63,15 @@
if (!online) { if (!online) {
var threshold = new Date().getTime() - (TRESHOLD_IN_MS + RELOAD_INTERVAL_IN_MS); var threshold = new Date().getTime() - (TRESHOLD_IN_MS + RELOAD_INTERVAL_IN_MS);
if (lastStatus > threshold) { if (lastStatus > threshold && showNotification) {
$("#notificationBar").after('<div class="alert alert-danger alert-dismissable fade in">' + $("#notificationBar").after('<div class="alert alert-danger alert-dismissable fade in">' +
'<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>' + '<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>' +
'<strong>Client ' + clientId + ' just went offline!</strong> Last update: ' + new Date(lastStatus) + '<strong>Miner ' + clientId + ' just went offline!</strong> Last update: ' + new Date(lastStatus) +
'</div>'); '</div>');
} }
} }
return (online || !hide); return (online || !hideOffline);
} }
); );
@ -58,7 +79,7 @@
var latestRelease = ""; var latestRelease = "";
var table = $('#clientStatusList').DataTable({ var table = $('#clientStatusList').DataTable({
dom: "<'toolbar'><'row'<'col-sm-9'B><'col-sm-3'f>><'row'<'col-sm-12't>><i>", dom: "<'row'<'col-sm-9'B><'col-sm-3'f>><'row'<'col-sm-12't>><i>",
bPaginate: false, bPaginate: false,
ajax: { ajax: {
url: "/admin/getClientStatusList", url: "/admin/getClientStatusList",
@ -88,7 +109,7 @@
{ {
data: null, data: null,
defaultContent: defaultContent:
"<td class='center-tab'><button type='button' id='EDIT' class='btn btn-xs btn-primary' data-toggle='tooltip' title='Edit Client Config'><i class='fa fa-edit'></i></button></td>", "<td class='center-tab'><button type='button' id='EDIT' class='btn btn-xs btn-primary' data-toggle='tooltip' title='Edit miner config'><i class='fa fa-edit'></i></button></td>",
orderable: false, orderable: false,
className: "center-tab" className: "center-tab"
} }
@ -101,7 +122,7 @@
lengthChange: false, lengthChange: false,
buttons: [ buttons: [
{ {
text: '<i class="fa fa-download"> Pull client config</i>', text: '<i class="fa fa-download"> Pull miner config</i>',
className: 'btn-default', className: 'btn-default',
enabled: false, enabled: false,
action: function () { action: function () {
@ -114,7 +135,7 @@
} }
}, },
{ {
text: '<i class="fa fa-upload"> Push client config</i>', text: '<i class="fa fa-upload"> Push miner config</i>',
className: 'btn-primary', className: 'btn-primary',
enabled: false, enabled: false,
action: function () { action: function () {
@ -318,7 +339,9 @@
table.buttons().container().appendTo('#clientStatusList_wrapper .col-sm-6:eq(0)'); table.buttons().container().appendTo('#clientStatusList_wrapper .col-sm-6:eq(0)');
$("div.toolbar").html('<div class="col-sm-13 fa fa-check-square-o" id="hideOffline"></div><label style="margin-left: 5px">Hide offline miners</label>'); $('#hideOffline').change(function() {
table.draw();
});
$('#clientStatusList tbody').on( 'click', 'button', function () { $('#clientStatusList tbody').on( 'click', 'button', function () {
var data = table.row( $(this).parents('tr') ).data(); var data = table.row( $(this).parents('tr') ).data();
@ -340,7 +363,7 @@
$('#minerEditor').modal('show'); $('#minerEditor').modal('show');
}, },
error: function (data) { error: function (data) {
setError('Unable to fetch <strong>' + clientId + '_config.json</strong> - Please make sure that you pulled the config before!'); setError('<strong>Unable to fetch ' + clientId + '_config.json</strong> - Please make sure that you pulled the config before!');
} }
}); });
}); });
@ -372,23 +395,12 @@
setClientConfig(clientId, jsonClientConfig, true); setClientConfig(clientId, jsonClientConfig, true);
}, },
error: function (data) { error: function (data) {
setError('Unable to fetch <strong>' + clientId + '_config.json</strong> - Please make sure that you pulled the config before!'); setError('<strong>Unable to fetch ' + clientId + '_config.json</strong> - Please make sure that you pulled the config before!');
} }
}); });
}); });
}); });
$('#hideOffline').click( function() {
if ($(this).hasClass("fa fa-square-o")) {
$(this).removeClass("fa fa-square-o").addClass("fa fa-check-square-o");
} else {
$(this).removeClass("fa fa-check-square-o").addClass("fa fa-square-o");
}
table.draw();
} );
$('#selectAllTop,#selectAllBottom').click( function() { $('#selectAllTop,#selectAllBottom').click( function() {
if ($("#selectAllTop").hasClass("fa fa-square-o")) { if ($("#selectAllTop").hasClass("fa fa-square-o")) {
$("#selectAllTop").removeClass("fa fa-square-o").addClass("fa fa-check-square-o"); $("#selectAllTop").removeClass("fa fa-square-o").addClass("fa fa-check-square-o");
@ -512,14 +524,14 @@
data: clientConfig, data: clientConfig,
success: function(data){ success: function(data){
if (isMultiConfigEdit) { if (isMultiConfigEdit) {
setSuccess('<strong>Successfully updated configs for the selected clients</strong> - You need push the config to the clients to apply the config.'); setSuccess('<strong>Successfully updated configs for the selected miners</strong> - You need push the config to the miners to apply the config.');
} else { } else {
setSuccess('<strong>Successfully updated config for: ' + clientId + '</strong> - You need push the config to the client to apply the config.'); setSuccess('<strong>Successfully updated config for: ' + clientId + '</strong> - You need push the config to the miner to apply the config.');
} }
}, },
error: function (data) { error: function (data) {
if (isMultiConfigEdit) { if (isMultiConfigEdit) {
setError('<strong>Failed to update configs for the selected clients</strong> \nError:' + JSON.stringify(data,undefined, 2)); setError('<strong>Failed to update configs for the selected miners</strong> \nError:' + JSON.stringify(data,undefined, 2));
} else { } else {
setError('<strong>Failed to update config for: ' + clientId + '</strong> \nError: ' + JSON.stringify(data,undefined, 2)); setError('<strong>Failed to update config for: ' + clientId + '</strong> \nError: ' + JSON.stringify(data,undefined, 2));
} }
@ -540,11 +552,16 @@
<h1>XMRigCC Dashboard</h1> <h1>XMRigCC Dashboard</h1>
</div> </div>
<form style="padding-bottom: 25px">
<label><input id="hideOffline" type="checkbox" checked data-toggle="toggle" data-size="mini" data-onstyle="success" data-offstyle="danger"/><span>Hide offline miners</span></label>
<label><input id="showOfflineNotification" type="checkbox" checked data-toggle="toggle" data-size="mini" data-onstyle="success" data-offstyle="danger" /><span>Notify when miner went offline</span></label>
</form>
<table id="clientStatusList" class="table table-striped table-bordered" cellspacing="0" width="100%"> <table id="clientStatusList" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th class="center" width="2%"><i class="fa fa-square-o" id="selectAllTop"></i></th> <th class="center" width="2%"><i class="fa fa-square-o" id="selectAllTop"></i></th>
<th>Client Id</th> <th>Miner Id</th>
<th>Pool</th> <th>Pool</th>
<th>Status</th> <th>Status</th>
<th>Algo</th> <th>Algo</th>
@ -591,7 +608,7 @@
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button> <button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Config editor</h4> <h4 class="modal-title">Miner editor</h4>
</div> </div>
<div class="modal-body"> <div class="modal-body">
</div> </div>