646 lines
No EOL
18 KiB
JavaScript
646 lines
No EOL
18 KiB
JavaScript
$(document).ready(function()
|
|
{
|
|
// remove old js
|
|
$('script[src="js/modules/dashboard.js"]').remove();
|
|
|
|
// image replacements
|
|
$('img[src$="game_monitor.png"]').replaceWith('<h2 class="d-inline float-right m-2"><i class="fas fa-desktop"></i></h2>');
|
|
$('img[src$="support.png"]').replaceWith('<h2 class="d-inline float-right m-2"><i class="fas fa-hands-helping"></i></h2>');
|
|
|
|
// head sections
|
|
$('.column').each(function()
|
|
{
|
|
if(!$(this).parent('div').hasClass('row'))
|
|
{
|
|
$(this).parent('div').addClass('row').removeAttr('style');
|
|
}
|
|
|
|
var columnContent = $(this).html();
|
|
|
|
if($(this).hasClass('one_two'))
|
|
{
|
|
$(this).replaceWith("<section class='col-12 col-md-6 connectedSortable' id='"+$(this).attr('id')+"'>" + columnContent + "</section>");
|
|
}
|
|
else if($(this).hasClass('one_fourth'))
|
|
{
|
|
$(this).replaceWith("<section class='col-12 col-md-6 col-lg-3 connectedSortable' id='"+$(this).attr('id')+"'>" + columnContent + "</section>");
|
|
}
|
|
else
|
|
{
|
|
$(this).replaceWith("<section class='col-12 connectedSortable' id='"+$(this).attr('id')+"'>" + columnContent + "</section>");
|
|
}
|
|
});
|
|
|
|
// dragbox / bloc to card conversion
|
|
$('.dragbox, .bloc').each(function()
|
|
{
|
|
var isCollapsed = false
|
|
var collapseBtn = 'fa-minus';
|
|
var thisContent = $(this).find('.dragbox-content');
|
|
if($(thisContent).length > 0)
|
|
{
|
|
// check if dragbox has attribute "style"
|
|
if(typeof $(thisContent).attr('style') !== 'undefined' && $(thisContent).attr('style') !== false)
|
|
{
|
|
// check if dragbox has style "display:none"
|
|
if($(thisContent).attr('style').indexOf("display:none") >= 0)
|
|
{
|
|
isCollapsed = true
|
|
var collapseBtn = 'fa-plus';
|
|
}
|
|
}
|
|
$(thisContent).removeClass('dragbox-content').addClass('card-body').removeAttr('style');
|
|
|
|
// check if dragbox is a link
|
|
if(typeof $(thisContent).attr('onclick') !== 'undefined' && $(thisContent).attr('onclick') !== false)
|
|
{
|
|
// add cursor pointer style
|
|
$(thisContent).css('cursor', 'pointer');
|
|
|
|
// check if link is external to change event to window.open (new window)
|
|
var thisURL = $(thisContent).attr('onclick').replace("location.href='", "").replace("'", "");
|
|
if(thisURL.includes("://"))
|
|
{
|
|
$(thisContent).attr("onclick", "window.open('"+thisURL+"')");
|
|
}
|
|
}
|
|
}
|
|
|
|
if(isCollapsed)
|
|
{
|
|
$(this).attr('class', '').addClass('card collapsed-card');
|
|
}else
|
|
{
|
|
$(this).attr('class', '').addClass('card');
|
|
}
|
|
|
|
var boxTitle = $(this).find('h4').text();
|
|
$(this).find('h4').replaceWith("\
|
|
<div class='card-header ui-sortable-handle' style='cursor: move;'>\
|
|
<h3 class='card-title'>" + boxTitle + "</h3>\
|
|
<div class='card-tools'>\
|
|
<button type='button' class='btn btn-tool' data-card-widget='collapse'>\
|
|
<i class='fas " + collapseBtn + "'></i>\
|
|
</button>\
|
|
</div>\
|
|
</div>");
|
|
});
|
|
|
|
// padding fix
|
|
$('.online_servers').parent('.card-body').addClass('p-2');
|
|
|
|
// remove old refresh elements
|
|
$('.row > [id^="refreshed-"]').remove();
|
|
|
|
// hide elements before data refresh mod
|
|
$('.main > .row > h0, .main > .row > br, .main > .row > #column4').addClass('d-none');
|
|
|
|
/* *** Data Refresh Mod *** */
|
|
if($('.container-fluid h0').last().length)
|
|
{
|
|
// get columnsettings
|
|
$.get('themes/AdminLTE/dist/php/settings.php?m=dashboard&p=columnsettings',
|
|
function(columnsettings){
|
|
// build server status card
|
|
var serverStatusTitle = $('.container-fluid h0').last().text();
|
|
var serverSelectTitle = $('.container-fluid #column4 h3').text();
|
|
var serverSelectForm = $('.container-fluid #column4 center').html();
|
|
$('.container-fluid h0').last().remove();
|
|
$('.container-fluid #column4').remove();
|
|
|
|
// add new sections
|
|
$('.content > .container-fluid').append("\
|
|
<div class='row'>\
|
|
<section class='col-12 col-md-6 connectedSortable' id='column4'></section>\
|
|
<section class='col-12 col-md-6 connectedSortable' id='column5'></section>\
|
|
</div>\
|
|
<div class='row'>\
|
|
<section class='col-12 connectedSortable' id='column6'></section>\
|
|
</div>");
|
|
|
|
// add cards to new sections
|
|
// console.log(columnsettings);
|
|
Object.keys(columnsettings).forEach(function(key)
|
|
{
|
|
item = columnsettings[key]['item']
|
|
section = columnsettings[key]['section']
|
|
collapsed = columnsettings[key]['collapsed']
|
|
|
|
if(item=='item6')
|
|
{
|
|
$('#' + section).append(createCard(item, serverSelectTitle, serverSelectForm, collapsed));
|
|
}
|
|
else if(item=='item7')
|
|
{
|
|
$('#' + section).append(createCard(item, serverStatusTitle, '', true, collapsed));
|
|
}
|
|
else
|
|
{
|
|
$('#' + section).append(createCard(item, '', '', true, collapsed));
|
|
}
|
|
})
|
|
|
|
// define regexes
|
|
var axrgx = /jQuery\.ajax\(\{(.*?)\}\)\;(.*?)\}\)\;/sg; // get all ajax definitions
|
|
var urlrgx = /url\: \"(.*?)\"/m; // get url from ajax object
|
|
var destrgx = /\$\(\'(.*?)\'\)\.html/; // get destination from ajax object
|
|
|
|
// get complete js content
|
|
var embjs = $('.main > script:not([src])').html();
|
|
$('.main > script:not([src])').remove();
|
|
|
|
var refreshDashboardServerInterval;
|
|
var aradded = [];
|
|
if(axrgx.test(embjs))
|
|
{
|
|
embjs.match(axrgx).forEach((element, index) => {
|
|
var url = element.match(urlrgx)[1];
|
|
var dest = element.match(destrgx)[1];
|
|
|
|
if(!aradded.includes(url))
|
|
{
|
|
if(url.toLowerCase().indexOf("remote_server_id") >= 0)
|
|
{
|
|
aradded.push(url);
|
|
|
|
function refreshDashboardServerStats()
|
|
{
|
|
jQuery.ajax({
|
|
url: url,
|
|
cache: false,
|
|
// beforeSend: function(xhr)
|
|
// {
|
|
// $('a').click(function()
|
|
// {
|
|
// xhr.abort();
|
|
// enableCallbacks = false;
|
|
// });
|
|
// },
|
|
success: function(data, textStatus)
|
|
{
|
|
// if (!enableCallbacks) return;
|
|
updateServerStats(data);
|
|
}
|
|
});
|
|
}
|
|
|
|
if (!refreshDashboardServerInterval)
|
|
{
|
|
refreshDashboardServerStats();
|
|
|
|
var refreshDashboardServerInterval = setInterval(function()
|
|
{
|
|
refreshDashboardServerStats();
|
|
}, 10000);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// clear intervals on link follow
|
|
$('a:not([data-widget="control-sidebar"]):not([data-widget="pushmenu"])').click(function()
|
|
{
|
|
if(typeof refreshServerInterval !== 'undefined')
|
|
{
|
|
clearInterval(refreshServerInterval);
|
|
refreshServerInterval = null;
|
|
}
|
|
});
|
|
|
|
// Make the dashboard widgets sortable Using jquery UI
|
|
var topItems = ['item1','item2','item3','item4','item5'];
|
|
$('.connectedSortable').sortable(
|
|
{
|
|
placeholder: 'sort-highlight',
|
|
connectWith: '.connectedSortable',
|
|
handle: '.card-header',
|
|
forcePlaceholderSize: true,
|
|
zIndex: 999999,
|
|
stop: function(event, ui){
|
|
// check if element is on a valid location
|
|
if(topItems.includes($(ui['item'][0]).attr('id')))
|
|
{
|
|
// item is in top row - check if its in .main card
|
|
if($(ui['item'][0]).parents('.main').length==1)
|
|
{
|
|
updateNewWidgetData();
|
|
}else
|
|
{
|
|
toastr.warning('Top Elements only in Top Region allowed', 'Warning');
|
|
event.preventDefault();
|
|
}
|
|
}else
|
|
{
|
|
if($(ui['item'][0]).parents('.main').length==0)
|
|
{
|
|
updateNewWidgetData();
|
|
}else
|
|
{
|
|
toastr.warning('Bottom Elements only in Bottom Region allowed', 'Warning');
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
}
|
|
});
|
|
$('.connectedSortable .card-header').css('cursor', 'move');
|
|
|
|
// update widget data when collapsing card
|
|
$('[data-card-widget="collapse"]').click(function()
|
|
{
|
|
setTimeout(function()
|
|
{
|
|
updateNewWidgetData();
|
|
}, 1000);
|
|
})
|
|
|
|
// loading
|
|
var loading = '\
|
|
<div class="d-flex justify-content-center w-100 m-1">\
|
|
<div class="spinner-grow spinner-grow-sm" role="status">\
|
|
<span class="sr-only">Loading...</span>\
|
|
</div>\
|
|
</div>';
|
|
$('[id^=refreshed]').html(loading);
|
|
}
|
|
);
|
|
}
|
|
|
|
// initial load (load faster on startup)
|
|
animateProgressBars();
|
|
});
|
|
|
|
|
|
$(window).load(function ()
|
|
{
|
|
//welcome title
|
|
if($(".main > div:not(.row)").length)
|
|
{
|
|
$(".main > div:not(.row)").addClass('card-body').wrap('<div class="card welcome-card"></div>');
|
|
$(".main .welcome-card").prependTo('section.content > .container-fluid');
|
|
}
|
|
});
|
|
|
|
|
|
// $.fn.inlineStyle = function(prop)
|
|
// {
|
|
// var thisProb = this.prop("style")[$.camelCase(prop)];
|
|
// if(thisProb !== undefined || thisProb!='')
|
|
// {
|
|
// return thisProb;
|
|
// }
|
|
// else
|
|
// {
|
|
// return false;
|
|
// }
|
|
// };
|
|
|
|
|
|
function updateNewWidgetData()
|
|
{
|
|
var items = [];
|
|
$('section.connectedSortable').each(function()
|
|
{
|
|
var columnId = $(this).attr('id');
|
|
$(this).find('.card').each(function(order)
|
|
{
|
|
var collapsed = 0;
|
|
if($(this).hasClass('collapsed-card'))
|
|
{
|
|
collapsed = 1;
|
|
}
|
|
|
|
//Create Item object for current panel
|
|
var item = {
|
|
id: $(this).attr('id'),
|
|
collapsed: collapsed,
|
|
order : order,
|
|
column: columnId
|
|
};
|
|
|
|
//Push item object into items array
|
|
items.push(item);
|
|
});
|
|
});
|
|
|
|
//Assign items array to sortorder JSON variable
|
|
var sortorder = {items: items};
|
|
var successOrderChange = true;
|
|
|
|
//Pass sortorder variable to server using ajax to save state (OGP sections)
|
|
$.post('home.php?m=dashboard&p=updateWidgets', 'data='+$.toJSON(sortorder), function(response)
|
|
{
|
|
var checkRespone = $(response).filter('section.content');
|
|
|
|
if(response.indexOf("success") < 0)
|
|
{
|
|
successOrderChange = false;
|
|
// toastr.error('Failed to update widget order');
|
|
}else
|
|
{
|
|
// toastr.success('Successfully update widget order');
|
|
}
|
|
});
|
|
|
|
//Pass sortorder variable to server using ajax to save state (Theme sections)
|
|
$.post('themes/AdminLTE/dist/php/settings.php?m=dashboard&p=updatecolumnsettings', 'data='+$.toJSON(sortorder), function(response)
|
|
{
|
|
var checkRespone = $(response).filter('section.content');
|
|
|
|
if(response.indexOf("success") < 0)
|
|
{
|
|
successOrderChange = false;
|
|
// toastr.error('Failed to update widget order');
|
|
}else
|
|
{
|
|
// toastr.success('Successfully update widget order');
|
|
}
|
|
});
|
|
|
|
if(successOrderChange)
|
|
{
|
|
toastr.success('Successfully update widget order');
|
|
}else
|
|
{
|
|
toastr.error('Failed to update widget order');
|
|
}
|
|
}
|
|
|
|
|
|
function createCard(id, title, body, refresh = false, collapsed = 0)
|
|
{
|
|
var addBody = ''
|
|
var collapsedClass = ''
|
|
var maximize = ''
|
|
|
|
if(refresh)
|
|
{
|
|
addBody = " id='refreshed'"
|
|
}
|
|
|
|
if(collapsed==1)
|
|
{
|
|
collapsedClass = ' collapsed-card'
|
|
}
|
|
|
|
//add maximize button
|
|
if(id=='item8')
|
|
{
|
|
maximize = '<button type="button" class="btn btn-tool" data-card-widget="maximize"><i class="fas fa-expand"></i></button>';
|
|
}
|
|
|
|
return "\
|
|
<div class='card " + collapsedClass + "' id='" + id + "'>\
|
|
<div class='card-header'>\
|
|
<h3 class='card-title'>" + title + "</h3>\
|
|
<div class='card-tools'>\
|
|
" + maximize + "\
|
|
<button type='button' class='btn btn-tool' data-card-widget='collapse'>\
|
|
<i class='fas fa-minus'></i>\
|
|
</button>\
|
|
</div>\
|
|
</div>\
|
|
<div class='card-body'" + addBody + ">\
|
|
" + body + "\
|
|
</div>\
|
|
</div>\
|
|
";
|
|
}
|
|
|
|
|
|
function updateServerStats(html)
|
|
{
|
|
var dataOut = '';
|
|
var brExp = /<br\s*\/?>/i;
|
|
|
|
// System Uptime
|
|
var data = clone(html);
|
|
var sysUptime = $(data).filter('#column4:nth-child(1)');
|
|
if($(sysUptime).length > 0)
|
|
{
|
|
var sysUptimeTitle = $(sysUptime).find('h4').html();
|
|
var sysUptimeContent = '';
|
|
var sysUptimeSplit = $(sysUptime).find('b').html().split(brExp);
|
|
$.each(sysUptimeSplit, function(i, element)
|
|
{
|
|
sysUptimeContent += '<p class="mb-0">'+element.trim()+'</p>';
|
|
});
|
|
|
|
$('#item9 .card-title').text(sysUptimeTitle);
|
|
$('#item9 .card-body').html(sysUptimeContent);
|
|
}
|
|
|
|
// CPU Usage
|
|
var data = clone(html);
|
|
var cpu = $(data).filter('#column4:nth-child(2)');
|
|
if($(cpu).length > 0)
|
|
{
|
|
var progressCPU = '';
|
|
var cpuTitle = $(cpu).find('h4').text();
|
|
|
|
$(cpu).find('.dragbox-content').children('b').each(function()
|
|
{
|
|
var cpuName = $(this).text().split(':')[0].trim();
|
|
var cpuLoad = $(this).text().split(':')[1].trim().split(' ')[0].trim();
|
|
var cpuLoad = $(this).text().split(':')[1].trim().split(' ')[0].trim();
|
|
|
|
progressCPU += '\
|
|
<div class="progress-group">\
|
|
'+cpuName+'\
|
|
<span class="float-right"><b>'+cpuLoad+' %</b> / 100 %</span>\
|
|
<div class="progress progress-sm">\
|
|
<div class="progress-bar bg-primary" style="width: '+cpuLoad+'%"></div>\
|
|
</div>\
|
|
</div>\
|
|
';
|
|
});
|
|
|
|
dataOut += progressCPU
|
|
}
|
|
|
|
// RAM Usage
|
|
var data = clone(html);
|
|
var ram = $(data).filter('#column4:nth-child(3)');
|
|
if($(ram).length > 0)
|
|
{
|
|
var ramTitle = $(ram).find('h4').text();
|
|
var ram = $(ram).find('.dragbox-content').html();
|
|
|
|
var ramUsageSplit = ram.split(':')[1].split(' ');
|
|
var ramUsage = ramUsageSplit[1] + ' ' + ramUsageSplit[2];
|
|
var ramTotal = ramUsageSplit[4] + ' ' + ramUsageSplit[5].split('<')[0];
|
|
var ramPerc = $(ram).find('.progress-bar').attr('data');
|
|
|
|
var progressRam = '\
|
|
<div class="progress-group">\
|
|
'+ramTitle+'\
|
|
<span class="float-right"><b>'+ramUsage+'</b> / '+ramTotal+'</span>\
|
|
<div class="progress progress-sm">\
|
|
<div class="progress-bar bg-primary" style="width: '+ramPerc+'%"></div>\
|
|
</div>\
|
|
</div>\
|
|
';
|
|
|
|
dataOut += progressRam
|
|
}
|
|
|
|
// Storage Space
|
|
var data = clone(html);
|
|
var storage = $(data).filter('#column4:nth-child(4)');
|
|
if($(storage).length > 0)
|
|
{
|
|
var spaceTitle = $(storage).find('h4').text();
|
|
var storage = $(storage).find('.dragbox-content').html();
|
|
var storagelines = storage.split(brExp);
|
|
|
|
var spaceTotal = storagelines[0].split(':')[1].trim();
|
|
var spaceUsed = storagelines[1].split(':')[1].trim().split('(')[0].trim();
|
|
var spaceUsedPerc = storagelines[1].match(/\((.*?)\)/)[1];
|
|
var spaceFree = storagelines[2].split(':')[2].trim().split('<')[0].trim();
|
|
|
|
var progressStorage = '\
|
|
<div class="progress-group">\
|
|
'+spaceTitle+'\
|
|
<span class="float-right"><b>'+spaceUsed+'</b> / '+spaceTotal+'</span>\
|
|
<div class="progress progress-sm">\
|
|
<div class="progress-bar bg-primary" style="width: '+spaceUsedPerc+'"></div>\
|
|
</div>\
|
|
</div>\
|
|
';
|
|
|
|
dataOut += progressStorage
|
|
}
|
|
|
|
// put all informations into card
|
|
$('#item7 .card-body').html(dataOut);
|
|
|
|
// Process Monitor
|
|
var procMonTitle = $(data).filter('#column4:nth-child(5)').find('h4').text();
|
|
var procMonContent = $(data).filter('#column4:nth-child(5)').find('.dragbox-content').html();
|
|
$('#item8 .card-title').text(procMonTitle);
|
|
$('#item8 .card-body').html(procMonContent);
|
|
}
|
|
|
|
|
|
function clone(obj)
|
|
{
|
|
if (null == obj || "object" != typeof obj) return obj;
|
|
var copy = obj.constructor();
|
|
for (var attr in obj)
|
|
{
|
|
if (obj.hasOwnProperty(attr)) copy[attr] = obj[attr];
|
|
}
|
|
return copy;
|
|
}
|
|
|
|
|
|
function animateProgressBars()
|
|
{
|
|
// image replacement
|
|
$('img[src$="magnifglass.png"]').replaceWith('<i class="fas fa-search mr-2"></i>');
|
|
|
|
// online servers
|
|
$('#item2 .card-body > br').remove();
|
|
$('#item2 .card-body > center br').replaceWith(' ');
|
|
$('.currently-online').addClass('table table-striped table-sm');
|
|
$('.currently-online td').removeAttr('style');
|
|
$('.currently-online > tbody > tr:first-of-type > td').replaceWith('<th>'+$('.currently-online > tbody > tr:first-of-type td').text()+'</th>');
|
|
|
|
if(localStorage.getItem('themeServerstats')=='remove')
|
|
{
|
|
$('.online_servers [id^=refreshed]').each(function()
|
|
{
|
|
var thisLink = $(this).find('.name').find('a').attr('href');
|
|
$(this).addClass('btn btn-sm btn-primary').attr('onclick', 'location.href=\''+thisLink+'\'');
|
|
});
|
|
}else
|
|
{
|
|
if($('#item2 .card-body').length>0)
|
|
{
|
|
if(!$('#item2 .card-body').hasClass('onlineServers'))
|
|
{
|
|
$('#item2 .card-body').addClass('onlineServers p-2');
|
|
}
|
|
|
|
// get server satistics, update title and remove statistics
|
|
if($('#item2 .card-body').find('center').length>0)
|
|
{
|
|
var serverStats = $('#item2 .card-body').find('center').text();
|
|
|
|
const serversRegex = / (\d*?)\/(\d*?) /m;
|
|
if(serversRegex.test(serverStats))
|
|
{
|
|
$('#item2 .card-title').append(' (' + serverStats.match(serversRegex)[1] + '/' + serverStats.match(serversRegex)[2] + ' ' + langConsts['OGP_LANG_server'] + ')');
|
|
$('#item2 .card-body').find('center').remove();
|
|
}
|
|
}
|
|
|
|
if($('.onlineServers').data('init')===undefined)
|
|
{
|
|
$('.onlineServers').attr('data-init', 'load');
|
|
|
|
if($('#item2 .onlineServers > p').length>0)
|
|
{
|
|
$('#item2 .onlineServers > p').addClass('px-2');
|
|
}
|
|
|
|
var loading = '\
|
|
<div class="listServers">\
|
|
<div class="d-flex justify-content-center w-100 m-1 serverLoading">\
|
|
<div class="spinner-grow spinner-grow-sm" role="status">\
|
|
<span class="sr-only">Loading...</span>\
|
|
</div>\
|
|
</div>\
|
|
</div>';
|
|
|
|
// add loader
|
|
if($('#item2 .onlineServers > b').length>0)
|
|
{
|
|
$('#item2 .onlineServers > b').replaceWith(loading);
|
|
}else
|
|
{
|
|
$('.onlineServers').prepend(loading);
|
|
}
|
|
|
|
if(localStorage.getItem('themeServerstats')=='activate')
|
|
{
|
|
// initial load serverlist
|
|
loadServerList();
|
|
|
|
// setInterval for ServerList Refresh
|
|
setInterval(function()
|
|
{
|
|
loadServerList();
|
|
}, 60000);
|
|
}
|
|
}
|
|
}
|
|
|
|
if($('table.online_servers').length>0)
|
|
{
|
|
// remove old table
|
|
$('table.online_servers').remove();
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
function loadServerList()
|
|
{
|
|
// initial load serverlist
|
|
$.ajax({
|
|
cache: false,
|
|
async: true,
|
|
type: 'GET',
|
|
url: 'themes/AdminLTE/dist/php/settings.php?m=dashboard&p=listservers',
|
|
success: function(html)
|
|
{
|
|
// update server boxes
|
|
$('.listServers').html(html);
|
|
|
|
// init tooltips
|
|
$('[data-toggle="tooltip"]').tooltip();
|
|
}
|
|
});
|
|
} |