Panel/themes/AdminLTE/modules/settings/themes.js
2025-09-11 13:29:15 -04:00

354 lines
No EOL
10 KiB
JavaScript

$(document).ready(function()
{
$('.main > br').remove();
// remove original logo link
$('#logo_link').parents('tr').remove();
// remove original background wrapper
$('#bg_wrapper').parents('tr').remove();
// add multiform attribute for image upload
$('form[action="?m=settings&p=themes"]').attr('enctype','multipart/form-data');
// add theme width option
$('.main #theme').parents('tr').after('\
<tr>\
<td align="right">\
<label for="themeNavWidth" class="mb-0">'+langConsts['OGP_LANG_theme']+' Nav Width:</label>\
<small class="currentNavWidth text-muted d-block"></small>\
</td>\
<td align="left">\
<div class="form-group mb-0">\
<input type="range" class="form-control-range" min="250" max="350" value="'+localStorage.getItem('themeNavWidth')+'" id="themeNavWidth" name="themeNavWidth">\
</div>\
</td>\
<td>\
<div class="image-tip" data-toggle="tooltip" data-html="true" title="Sets '+langConsts['OGP_LANG_theme']+' Navigation Width for all Users"><i class="far fa-question-circle"></i></div>\
</td>\
</tr>\
');
// add logo upload form
$('.main #theme').parents('tr').after('\
<tr>\
<td align="right">\
<label for="themeLogo">'+langConsts['OGP_LANG_theme']+' Logo:</label>\
</td>\
<td align="left">\
<div class="form-group mb-0">\
<div class="input-group">\
<div class="custom-file">\
<input type="file" class="custom-file-input" name="themeLogo" id="themeLogo">\
<label class="custom-file-label" for="themeLogo">Choose Image</label>\
</div>\
</div>\
</div>\
</td>\
<td>\
<div class="image-tip" data-toggle="tooltip" data-html="true" title="'+langConsts['OGP_LANG_theme']+' Logo - Max Size: '+(localStorage.getItem('themeNavWidth')-32)+'x50px"><i class="far fa-question-circle"></i></div>\
</td>\
</tr>\
');
// add themeLogo removal if set
$.ajax({
cache: false,
async: true,
type: 'GET',
url: 'themes/AdminLTE/dist/php/settings.php?m=global&p=themeLogo',
dataType: 'json',
success: function(themeLogo)
{
if(themeLogo)
{
// add themeRemoval
addThemeRemoval(themeLogo);
}
}
});
// add theme serverstats option
var themeServerstatsOptions = {'remove' : langConsts['OGP_LANG_off'], 'activate' : langConsts['OGP_LANG_on']}
var themeServerstatsOptionsOut = ''
for(var key in themeServerstatsOptions)
{
if(key==localStorage.getItem('themeServerstats'))
{
themeServerstatsOptionsOut += '<option value="'+key+'" selected>'+themeServerstatsOptions[key]+'</option>';
}else
{
themeServerstatsOptionsOut += '<option value="'+key+'">'+themeServerstatsOptions[key]+'</option>';
}
}
if(localStorage.getItem('themeServerstats')=='activate')
{
// load themeServerstatsNum settings from db
var themeServerstatsNum = 10;
$.ajax({
cache: false,
async: false,
type: 'GET',
url: 'themes/AdminLTE/dist/php/settings.php?m=global&p=themeServerstats&v=displayNum',
success: function(data)
{
themeServerstatsNum = data;
}
});
var themeServerstatsDisplayNum = '\
<tr>\
<td align="right">\
<label for="themeServerstatsNum" class="mb-0">Server Player Stats Num:</label>\
<small class="text-muted d-block">Displays last <span id="themeServerstatsNumber">'+themeServerstatsNum+'</span> measurements</small>\
</td>\
<td align="left">\
<div class="form-group mb-0">\
<input type="range" class="form-control-range" min="1" max="20" value="'+themeServerstatsNum+'" id="themeServerstatsNum" name="themeServerstatsNum">\
</div>\
</td>\
<td>\
<div class="image-tip" data-toggle="tooltip" data-html="true" title="Displays last n measurements in Playercharts on Dashboard"><i class="far fa-question-circle"></i></div>\
</td>\
</tr>\
'
}
$('.main #theme').parents('tr').after('\
<tr>\
<td align="right">\
<label for="themeServerstats" class="mb-0">Server Player Stats:</label>\
<small class="text-muted d-block">Displays custom Server Boxes on Dashboard</small>\
</td>\
<td align="left">\
<div class="form-group mb-0">\
<select id="themeServerstats" name="themeServerstats" class="form-control">\
' + themeServerstatsOptionsOut + '\
</select>\
</div>\
</td>\
<td>\
<div class="image-tip" data-toggle="tooltip" data-html="true" title="Activates user stats for each server, also installs a running cronjob on first server (1/5min check each server)"><i class="far fa-question-circle"></i></div>\
</td>\
</tr>\
' + themeServerstatsDisplayNum + '\
');
// display current themeNavWidth
$('.currentNavWidth').text('Current Width: '+localStorage.getItem('themeNavWidth')+'px');
// themeNavWidth slide
$(document).on('input', '#themeNavWidth', function()
{
// call setNavWidth function from main.js
setNavWidth($(this).val());
// change currentNavWidth text
$('.currentNavWidth').text('Current Width: ' + $(this).val() + 'px');
});
// themeNavWidth change
$('#themeNavWidth').change(function()
{
$.ajax({
cache: false,
async: true,
type: 'GET',
url: 'themes/AdminLTE/dist/php/settings.php?m=settings&p=themeNavWidth&v='+$(this).val(),
start: function()
{
toastr.info(langConsts['OGP_LANG_theme']+' Nav Width change initiated');
},
success: function(themeNavWidth)
{
// reseset themeNavWidth cache
localStorage.setItem('themeNavWidth', themeNavWidth);
// call setNavWidth function from main.js
setNavWidth(themeNavWidth);
// display current themeNavWidth
$('.currentNavWidth').text('Current Width: '+themeNavWidth+'px');
// reset themeLogo tooltip message
$('#themeLogo').closest('tr').find('.image-tip').attr('title', langConsts['OGP_LANG_theme']+' Logo - Max Size: '+(themeNavWidth-32)+' x 33px');
toastr.success('Successfully changed '+langConsts['OGP_LANG_theme']+' Nav Width to ' + themeNavWidth + 'px');
}
});
});
// themeServerstats change
$('#themeServerstats').change(function()
{
// disable form button
$('[name="update_settings"]').attr('disabled', 'disabled');
// message
toastr.info('themeServerstats change initiated');
var themeServerstatsVal = $(this).val();
$.ajax({
cache: false,
async: true,
type: 'GET',
url: 'themes/AdminLTE/dist/php/settings.php?m=settings&p=themeServerstats&v=' + themeServerstatsVal,
success: function(html)
{
// message
toastr.success('Successfully ' + themeServerstatsVal + 'd themeServerstats');
// set localStorage cache
localStorage.setItem('themeServerstats', themeServerstatsVal);
},
error: function(error)
{
toastr.error('Error: ' + error);
}
}).done(function()
{
// enable form button
$('[name="update_settings"]').removeAttr('disabled');
});
});
// themeServerstatsNum slide
$(document).on('input', '#themeServerstatsNum', function()
{
// change themeServerstatsNumber text
$('#themeServerstatsNumber').text($(this).val());
});
// themeServerstatsNum change
$('#themeServerstatsNum').change(function()
{
// disable form button
$('[name="update_settings"]').attr('disabled', 'disabled');
// message
toastr.info('themeServerstatsNum change initiated');
var themeServerstatsNumVal = $(this).val();
$.ajax({
cache: false,
async: true,
type: 'GET',
url: 'themes/AdminLTE/dist/php/settings.php?m=settings&p=themeServerstats&v=setNum&num=' + themeServerstatsNumVal,
success: function(html)
{
// message
toastr.success('Successfully set themeServerstatsNum');
},
error: function(error)
{
toastr.error('Error: ' + error);
}
}).done(function()
{
// enable form button
$('[name="update_settings"]').removeAttr('disabled');
});
});
});
$(window).load(function()
{
// themeLogo upload
$('input[type=file]#themeLogo').change(function()
{
$(this).simpleUpload('themes/AdminLTE/dist/php/settings.php?m=settings&p=fileUpload', {
allowedExts: ["jpg", "jpeg", "jpe", "jif", "jfif", "jfi", "png", "gif", "svg"],
allowedTypes: ["image/pjpeg", "image/jpeg", "image/png", "image/x-png", "image/gif", "image/x-gif", "image/svg", "image/svg+xml"],
maxFileSize: 5242880, // 5mb in bytes
limit: 1,
start: function()
{
toastr.info(langConsts['OGP_LANG_theme']+' Logo Upload initiated');
},
success: function(data)
{
var jsonData = $.parseJSON(data);
if(jsonData['code']=="success")
{
$.ajax({
url: jsonData['data'],
type: 'HEAD',
error: function()
{
toastr.error('Error: Uploaded File not found');
},
success: function()
{
var d = new Date();
// overwrite themeLogo cache
localStorage.setItem('themeLogo', jsonData['data']);
// set themeLogo
$('img.brand-image').attr('src', jsonData['data'] + "?t=" + d.getTime());
if($('.themeLogoRemoval').length==0)
{
// add themeRemoval
addThemeRemoval(jsonData['data']);
}
toastr.success('Successfully uploaded new '+langConsts['OGP_LANG_theme']+' Logo');
}
});
}else
{
toastr.error(jsonData['data']);
}
},
error: function(error)
{
toastr.error('Error: ' + error);
}
});
});
});
function addThemeRemoval(themeLogo)
{
var d = new Date();
$('.main #themeLogo').parents('.form-group').after('\
<div class="themeLogoRemoval my-2">\
<img src="' + themeLogo + '?t=' + d.getTime() + '" class="brand-image">\
<a class="btn btn-xs btn-danger m-1" id="removeThemeLogo">\
<i class="fas fa-trash-alt mr-1"></i>Remove ' + langConsts['OGP_LANG_theme'] + ' Logo\
</a>\
</div>\
');
$('#removeThemeLogo').click(function()
{
$.ajax({
async: true,
type: 'GET',
url: 'themes/AdminLTE/dist/php/settings.php?m=settings&p=themeLogo&v=remove',
success: function(data)
{
// remove themeLogoRemoval div
$('.themeLogoRemoval').remove();
// remove themeLogo from localStorage
localStorage.removeItem('themeLogo');
// change theme for image updates
themeChanger(localStorage.getItem('theme'));
toastr.success('Successfully removed '+langConsts['OGP_LANG_theme']+' Logo');
}
});
});
}