mirror of
https://github.com/hyperion-project/hyperion.ng.git
synced 2023-10-10 13:36:59 +02:00
* Feat: Add image sender to webui This PR adds a new image sending feature to the webui and extends the api accordingly. In javascript the processing of images is horrible slow (without WASM), so the solution is at the API side with out-of-the-box power of Qt. - The image cmd accepts now a raw image that is encoded with base64. Supported are all image formats that qt supports (enough) - There is no real size limit. It will be automatically scaled down to max 2000px width or height according to aspect ratio - It's possible to scale down through a new "scale" property if developer wants that. - Test were successfull until 3MP pictues, 4k+ closes the websocket on browser side, so 2k is a decent value - Adds a new image streaming feature from browser (tabs/applications/complete desktop as target). This works just if used with HTTPS PR#612 AND with a recent version of Firefox/Chrome
865 lines
23 KiB
JavaScript
865 lines
23 KiB
JavaScript
var prevTag;
|
||
|
||
function removeOverlay()
|
||
{
|
||
$("#loading_overlay").removeClass("overlay");
|
||
}
|
||
|
||
function reload()
|
||
{
|
||
location.reload();
|
||
}
|
||
|
||
function storageComp()
|
||
{
|
||
if (typeof(Storage) !== "undefined")
|
||
return true;
|
||
return false;
|
||
}
|
||
|
||
function getStorage(item, session)
|
||
{
|
||
if(storageComp())
|
||
{
|
||
if(session === true)
|
||
return sessionStorage.getItem(item);
|
||
else
|
||
return localStorage.getItem(item);
|
||
}
|
||
return null;
|
||
}
|
||
|
||
function setStorage(item, value, session)
|
||
{
|
||
if(storageComp())
|
||
{
|
||
if(session === true)
|
||
sessionStorage.setItem(item, value);
|
||
else
|
||
localStorage.setItem(item, value);
|
||
}
|
||
}
|
||
|
||
function debugMessage(msg)
|
||
{
|
||
if (window.debugMessagesActive)
|
||
{
|
||
console.log(msg);
|
||
}
|
||
}
|
||
|
||
function updateSessions()
|
||
{
|
||
var sess = window.serverInfo.sessions;
|
||
if (sess.length)
|
||
{
|
||
window.wSess = [];
|
||
for(var i = 0; i<sess.length; i++)
|
||
{
|
||
if(sess[i].type == "_hyperiond-http._tcp.")
|
||
{
|
||
window.wSess.push(sess[i]);
|
||
}
|
||
}
|
||
|
||
if (window.wSess.length > 1)
|
||
$('#btn_instanceswitch').toggle(true);
|
||
else
|
||
$('#btn_instanceswitch').toggle(false);
|
||
}
|
||
}
|
||
|
||
function validateDuration(d)
|
||
{
|
||
if(typeof d === "undefined" || d < 0)
|
||
return 0;
|
||
else
|
||
return d *= 1000;
|
||
}
|
||
|
||
function getHashtag()
|
||
{
|
||
if(getStorage('lasthashtag', true) != null)
|
||
return getStorage('lasthashtag', true);
|
||
else
|
||
{
|
||
var tag = document.URL;
|
||
tag = tag.substr(tag.indexOf("#") + 1);
|
||
if(tag == "" || typeof tag === "undefined" || tag.startsWith("http"))
|
||
tag = "dashboard"
|
||
return tag;
|
||
}
|
||
}
|
||
|
||
function loadContent(event, forceRefresh)
|
||
{
|
||
var tag;
|
||
|
||
if(typeof event != "undefined")
|
||
{
|
||
tag = event.currentTarget.hash;
|
||
tag = tag.substr(tag.indexOf("#") + 1);
|
||
setStorage('lasthashtag', tag, true);
|
||
}
|
||
else
|
||
tag = getHashtag();
|
||
|
||
if(forceRefresh || prevTag != tag)
|
||
{
|
||
prevTag = tag;
|
||
$("#page-content").off();
|
||
$("#page-content").load("/content/"+tag+".html", function(response,status,xhr){
|
||
if(status == "error")
|
||
{
|
||
$("#page-content").html('<h3>'+$.i18n('info_404')+'</h3>');
|
||
removeOverlay();
|
||
}
|
||
updateUiOnInstance(window.currentHyperionInstance);
|
||
});
|
||
}
|
||
}
|
||
|
||
function getInstanceNameByIndex(index)
|
||
{
|
||
var instData = window.serverInfo.instance
|
||
for(var key in instData)
|
||
{
|
||
if(instData[key].instance == index)
|
||
return instData[key].friendly_name;
|
||
}
|
||
return "unknown"
|
||
}
|
||
|
||
function updateHyperionInstanceListing()
|
||
{
|
||
var data = window.serverInfo.instance.filter(entry => entry.running);
|
||
$('#hyp_inst_listing').html("");
|
||
for(var key in data)
|
||
{
|
||
var currInstMarker = (data[key].instance == window.currentHyperionInstance) ? "component-on" : "";
|
||
|
||
var html = '<li id="hyperioninstance_'+data[key].instance+'"> \
|
||
<a> \
|
||
<div> \
|
||
<i class="fa fa-circle fa-fw '+currInstMarker+'"></i> \
|
||
<span>'+data[key].friendly_name+'</span> \
|
||
</div> \
|
||
</a> \
|
||
</li> '
|
||
|
||
if(data.length-1 > key)
|
||
html += '<li class="divider"></li>'
|
||
|
||
$('#hyp_inst_listing').append(html);
|
||
|
||
$('#hyperioninstance_'+data[key].instance).off().on("click",function(e){
|
||
var inst = e.currentTarget.id.split("_")[1]
|
||
requestInstanceSwitch(inst)
|
||
window.currentHyperionInstance = inst;
|
||
window.currentHyperionInstanceName = getInstanceNameByIndex(inst);
|
||
updateHyperionInstanceListing()
|
||
});
|
||
}
|
||
}
|
||
|
||
function updateUiOnInstance(inst)
|
||
{
|
||
if(inst != 0)
|
||
{
|
||
var currentURL = $(location).attr("href");
|
||
if(currentURL.indexOf('#conf_network') != -1 || currentURL.indexOf('#update') != -1 || currentURL.indexOf('#conf_webconfig') != -1 || currentURL.indexOf('#conf_grabber') != -1 || currentURL.indexOf('#conf_logging') != -1)
|
||
$("#hyperion_global_setting_notify").fadeIn("fast");
|
||
else
|
||
$("#hyperion_global_setting_notify").attr("style", "display:none");
|
||
}
|
||
else
|
||
{
|
||
$("#hyperion_global_setting_notify").fadeOut("fast");
|
||
}
|
||
}
|
||
|
||
function loadContentTo(containerId, fileName)
|
||
{
|
||
$(containerId).load("/content/"+fileName+".html");
|
||
}
|
||
|
||
function toggleClass(obj,class1,class2)
|
||
{
|
||
if ( $(obj).hasClass(class1))
|
||
{
|
||
$(obj).removeClass(class1);
|
||
$(obj).addClass(class2);
|
||
}
|
||
else
|
||
{
|
||
$(obj).removeClass(class2);
|
||
$(obj).addClass(class1);
|
||
}
|
||
}
|
||
|
||
|
||
function setClassByBool(obj,enable,class1,class2)
|
||
{
|
||
if (enable)
|
||
{
|
||
$(obj).removeClass(class1);
|
||
$(obj).addClass(class2);
|
||
}
|
||
else
|
||
{
|
||
$(obj).removeClass(class2);
|
||
$(obj).addClass(class1);
|
||
}
|
||
}
|
||
|
||
function showInfoDialog(type,header,message)
|
||
{
|
||
if (type=="success")
|
||
{
|
||
$('#id_body').html('<i style="margin-bottom:20px" class="fa fa-check modal-icon-check">');
|
||
if(header == "")
|
||
$('#id_body').append('<h4 style="font-weight:bold;text-transform:uppercase;">'+$.i18n('infoDialog_general_success_title')+'</h4>');
|
||
$('#id_footer').html('<button type="button" class="btn btn-success" data-dismiss="modal">'+$.i18n('general_btn_ok')+'</button>');
|
||
}
|
||
else if (type=="warning")
|
||
{
|
||
$('#id_body').html('<i style="margin-bottom:20px" class="fa fa-warning modal-icon-warning">');
|
||
if(header == "")
|
||
$('#id_body').append('<h4 style="font-weight:bold;text-transform:uppercase;">'+$.i18n('infoDialog_general_warning_title')+'</h4>');
|
||
$('#id_footer').html('<button type="button" class="btn btn-warning" data-dismiss="modal">'+$.i18n('general_btn_ok')+'</button>');
|
||
}
|
||
else if (type=="error")
|
||
{
|
||
$('#id_body').html('<i style="margin-bottom:20px" class="fa fa-warning modal-icon-error">');
|
||
if(header == "")
|
||
$('#id_body').append('<h4 style="font-weight:bold;text-transform:uppercase;">'+$.i18n('infoDialog_general_error_title')+'</h4>');
|
||
$('#id_footer').html('<button type="button" class="btn btn-danger" data-dismiss="modal">'+$.i18n('general_btn_ok')+'</button>');
|
||
}
|
||
else if (type == "select")
|
||
{
|
||
$('#id_body').html('<img style="margin-bottom:20px" src="img/hyperion/hyperionlogo.png" alt="Redefine ambient light!">');
|
||
$('#id_footer').html('<button type="button" id="id_btn_saveset" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-fw fa-save"></i>'+$.i18n('general_btn_saveandreload')+'</button>');
|
||
$('#id_footer').append('<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-fw fa-close"></i>'+$.i18n('general_btn_cancel')+'</button>');
|
||
}
|
||
else if (type == "iswitch")
|
||
{
|
||
$('#id_body').html('<img style="margin-bottom:20px" src="img/hyperion/hyperionlogo.png" alt="Redefine ambient light!">');
|
||
$('#id_footer').html('<button type="button" id="id_btn_saveset" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-fw fa-exchange"></i>'+$.i18n('general_btn_iswitch')+'</button>');
|
||
$('#id_footer').append('<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-fw fa-close"></i>'+$.i18n('general_btn_cancel')+'</button>');
|
||
}
|
||
else if (type == "uilock")
|
||
{
|
||
$('#id_body').html('<img src="img/hyperion/hyperionlogo.png" alt="Redefine ambient light!">');
|
||
$('#id_footer').html('<b>'+$.i18n('InfoDialog_nowrite_foottext')+'</b>');
|
||
}
|
||
else if (type == "import")
|
||
{
|
||
$('#id_body').html('<i style="margin-bottom:20px" class="fa fa-warning modal-icon-warning">');
|
||
$('#id_footer').html('<button type="button" id="id_btn_import" class="btn btn-warning" data-dismiss="modal"><i class="fa fa-fw fa-save"></i>'+$.i18n('general_btn_saverestart')+'</button>');
|
||
$('#id_footer').append('<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-fw fa-close"></i>'+$.i18n('general_btn_cancel')+'</button>');
|
||
}
|
||
else if (type == "delInst")
|
||
{
|
||
$('#id_body').html('<i style="margin-bottom:20px" class="fa fa-remove modal-icon-warning">');
|
||
$('#id_footer').html('<button type="button" id="id_btn_yes" class="btn btn-warning" data-dismiss="modal"><i class="fa fa-fw fa-trash"></i>'+$.i18n('general_btn_yes')+'</button>');
|
||
$('#id_footer').append('<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-fw fa-close"></i>'+$.i18n('general_btn_cancel')+'</button>');
|
||
}
|
||
else if (type == "renInst")
|
||
{
|
||
$('#id_body_rename').html('<i style="margin-bottom:20px" class="fa fa-pencil modal-icon-edit"><br>');
|
||
$('#id_body_rename').append('<h4>'+header+'</h4>');
|
||
$('#id_body_rename').append('<input class="form-control" id="renInst_name" type="text" value="'+message+'">');
|
||
$('#id_footer_rename').html('<button type="button" id="id_btn_ok" class="btn btn-success" data-dismiss-modal="#modal_dialog_rename" disabled><i class="fa fa-fw fa-save"></i>'+$.i18n('general_btn_ok')+'</button>');
|
||
$('#id_footer_rename').append('<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-fw fa-close"></i>'+$.i18n('general_btn_cancel')+'</button>');
|
||
}
|
||
else if (type == "checklist")
|
||
{
|
||
$('#id_body').html('<img style="margin-bottom:20px" src="img/hyperion/hyperionlogo.png" alt="Redefine ambient light!">');
|
||
$('#id_body').append('<h4 style="font-weight:bold;text-transform:uppercase;">'+$.i18n('infoDialog_checklist_title')+'</h4>');
|
||
$('#id_body').append(header);
|
||
$('#id_footer').html('<button type="button" class="btn btn-primary" data-dismiss="modal">'+$.i18n('general_btn_ok')+'</button>');
|
||
}
|
||
else if (type == "newToken")
|
||
{
|
||
$('#id_body').html('<img style="margin-bottom:20px" src="img/hyperion/hyperionlogo.png" alt="Redefine ambient light!">');
|
||
$('#id_footer').html('<button type="button" class="btn btn-primary" data-dismiss="modal">'+$.i18n('general_btn_ok')+'</button>');
|
||
}
|
||
else if (type == "grantToken")
|
||
{
|
||
$('#id_body').html('<img style="margin-bottom:20px" src="img/hyperion/hyperionlogo.png" alt="Redefine ambient light!">');
|
||
$('#id_footer').html('<button type="button" class="btn btn-primary" data-dismiss="modal" id="tok_grant_acc">'+$.i18n('general_btn_grantAccess')+'</button>');
|
||
$('#id_footer').append('<button type="button" class="btn btn-danger" data-dismiss="modal" id="tok_deny_acc">'+$.i18n('general_btn_denyAccess')+'</button>');
|
||
}
|
||
|
||
if(type != "renInst")
|
||
{
|
||
$('#id_body').append('<h4 style="font-weight:bold;text-transform:uppercase;">'+header+'</h4>');
|
||
$('#id_body').append(message);
|
||
}
|
||
|
||
if(type == "select" || type == "iswitch")
|
||
$('#id_body').append('<select id="id_select" class="form-control" style="margin-top:10px;width:auto;"></select>');
|
||
|
||
|
||
$(type == "renInst" ? "#modal_dialog_rename" : "#modal_dialog").modal({
|
||
backdrop : "static",
|
||
keyboard: false,
|
||
show: true
|
||
});
|
||
|
||
$(document).on('click', '[data-dismiss-modal]', function () {
|
||
var target = $(this).attr('data-dismiss-modal');
|
||
$(target).modal('hide');
|
||
});
|
||
}
|
||
|
||
function createHintH(type, text, container)
|
||
{
|
||
type = String(type);
|
||
if(type == "intro")
|
||
tclass = "introd";
|
||
|
||
$('#'+container).prepend('<div class="'+tclass+'"><h4 style="font-size:16px">'+text+'</h4><hr/></div>');
|
||
}
|
||
|
||
function createHint(type, text, container, buttonid, buttontxt)
|
||
{
|
||
var fe, tclass;
|
||
|
||
if(type == "intro")
|
||
{
|
||
fe = '';
|
||
tclass = "intro-hint";
|
||
}
|
||
else if(type == "info")
|
||
{
|
||
fe = '<div style="font-size:25px;text-align:center"><i class="fa fa-info"></i></div><div style="text-align:center;font-size:13px">Information</div>';
|
||
tclass = "info-hint";
|
||
}
|
||
else if(type == "wizard")
|
||
{
|
||
fe = '<div style="font-size:25px;text-align:center"><i class="fa fa-magic"></i></div><div style="text-align:center;font-size:13px">Information</div>';
|
||
tclass = "wizard-hint";
|
||
}
|
||
else if(type == "warning")
|
||
{
|
||
fe = '<div style="font-size:25px;text-align:center"><i class="fa fa-info"></i></div><div style="text-align:center;font-size:13px">Information</div>';
|
||
tclass = "warning-hint";
|
||
}
|
||
|
||
if(buttonid)
|
||
buttonid = '<p><button id="'+buttonid+'" class="btn btn-wizard" style="margin-top:15px;">'+text+'</button></p>';
|
||
else
|
||
buttonid = "";
|
||
|
||
if(type == "intro")
|
||
$('#'+container).prepend('<div class="bs-callout bs-callout-primary" style="margin-top:0px"><h4>'+$.i18n("conf_helptable_expl")+'</h4>'+text+'</div>');
|
||
else if(type == "wizard")
|
||
$('#'+container).prepend('<div class="bs-callout bs-callout-wizard" style="margin-top:0px"><h4>'+$.i18n("wiz_wizavail")+'</h4>'+$.i18n('wiz_guideyou',text)+buttonid+'</div>');
|
||
else
|
||
{
|
||
createTable('','htb',container, true, tclass);
|
||
$('#'+container+' .htb').append(createTableRow([fe ,text],false,true));
|
||
}
|
||
}
|
||
|
||
function createEffHint(title, text)
|
||
{
|
||
return '<div class="bs-callout bs-callout-primary" style="margin-top:0px"><h4>'+title+'</h4>'+text+'</div>';
|
||
}
|
||
|
||
function valValue(id,value,min,max)
|
||
{
|
||
if(typeof max === 'undefined' || max == "")
|
||
max = 999999;
|
||
|
||
if(Number(value) > Number(max))
|
||
{
|
||
$('#'+id).val(max);
|
||
showInfoDialog("warning","",$.i18n('edt_msg_error_maximum_incl',max));
|
||
return max;
|
||
}
|
||
else if(Number(value) < Number(min))
|
||
{
|
||
$('#'+id).val(min);
|
||
showInfoDialog("warning","",$.i18n('edt_msg_error_minimum_incl',min));
|
||
return min;
|
||
}
|
||
return value;
|
||
}
|
||
|
||
function readImg(input,cb)
|
||
{
|
||
if (input.files && input.files[0]) {
|
||
var reader = new FileReader();
|
||
// inject fileName property
|
||
reader.fileName = input.files[0].name
|
||
|
||
reader.onload = function (e) {
|
||
cb(e.target.result, e.target.fileName);
|
||
}
|
||
reader.readAsDataURL(input.files[0]);
|
||
}
|
||
}
|
||
|
||
function isJsonString(str)
|
||
{
|
||
try
|
||
{
|
||
JSON.parse(str);
|
||
}
|
||
catch (e)
|
||
{
|
||
return e;
|
||
}
|
||
return "";
|
||
}
|
||
|
||
function createJsonEditor(container,schema,setconfig,usePanel,arrayre)
|
||
{
|
||
$('#'+container).off();
|
||
$('#'+container).html("");
|
||
|
||
if (typeof arrayre === 'undefined')
|
||
arrayre = true;
|
||
|
||
var editor = new JSONEditor(document.getElementById(container),
|
||
{
|
||
theme: 'bootstrap3',
|
||
iconlib: "fontawesome4",
|
||
disable_collapse: 'true',
|
||
form_name_root: 'sa',
|
||
disable_edit_json: true,
|
||
disable_properties: true,
|
||
disable_array_reorder: arrayre,
|
||
no_additional_properties: true,
|
||
disable_array_delete_all_rows: true,
|
||
disable_array_delete_last_row: true,
|
||
access: storedAccess,
|
||
schema: {
|
||
title:'',
|
||
properties: schema
|
||
}
|
||
});
|
||
|
||
if(usePanel)
|
||
{
|
||
$('#'+container+' .well').first().removeClass('well well-sm');
|
||
$('#'+container+' h4').first().remove();
|
||
$('#'+container+' .well').first().removeClass('well well-sm');
|
||
}
|
||
|
||
if (setconfig)
|
||
{
|
||
for(var key in editor.root.editors)
|
||
{
|
||
editor.getEditor("root."+key).setValue( window.serverConfig[key] );
|
||
}
|
||
}
|
||
|
||
return editor;
|
||
}
|
||
|
||
function buildWL(link,linkt,cl)
|
||
{
|
||
var baseLink = "https://docs.hyperion-project.org/";
|
||
var lang;
|
||
|
||
if(typeof linkt == "undefined")
|
||
linkt = "Placeholder";
|
||
|
||
if(storedLang == "de" || navigator.locale == "de")
|
||
lang = "de";
|
||
else
|
||
lang = "en";
|
||
|
||
if(cl === true)
|
||
{
|
||
linkt = $.i18n(linkt);
|
||
return '<div class="bs-callout bs-callout-primary"><h4>'+linkt+'</h4>'+$.i18n('general_wiki_moreto',linkt)+': <a href="'+baseLink+lang+'/'+link+'" target="_blank">'+linkt+'<a></div>'
|
||
}
|
||
else
|
||
return ': <a href="'+baseLink+lang+'/'+link+'" target="_blank">'+linkt+'<a>';
|
||
}
|
||
|
||
function rgbToHex(rgb)
|
||
{
|
||
if(rgb.length == 3)
|
||
{
|
||
return "#" +
|
||
("0" + parseInt(rgb[0],10).toString(16)).slice(-2) +
|
||
("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
|
||
("0" + parseInt(rgb[2],10).toString(16)).slice(-2);
|
||
}
|
||
else
|
||
debugMessage('rgbToHex: Given rgb is no array or has wrong length');
|
||
}
|
||
|
||
function hexToRgb(hex) {
|
||
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||
return result ? {
|
||
r: parseInt(result[1], 16),
|
||
g: parseInt(result[2], 16),
|
||
b: parseInt(result[3], 16)
|
||
} : null;
|
||
}
|
||
|
||
/*
|
||
Show a notification
|
||
@param type Valid types are "info","success","warning","danger"
|
||
@param message The message to show
|
||
@param title A title (optional)
|
||
*/
|
||
function showNotification(type, message, title="")
|
||
{
|
||
if(title == "")
|
||
{
|
||
switch(type)
|
||
{
|
||
case "info":
|
||
title = $.i18n('infoDialog_general_info_title');
|
||
break;
|
||
case "success":
|
||
title = $.i18n('infoDialog_general_success_title');
|
||
break;
|
||
case "warning":
|
||
title = $.i18n('infoDialog_general_warning_title');
|
||
break;
|
||
case "danger":
|
||
title = $.i18n('infoDialog_general_error_title');
|
||
break;
|
||
}
|
||
}
|
||
|
||
$.notify({
|
||
// options
|
||
title: title,
|
||
message: message
|
||
},{
|
||
// settings
|
||
type: type,
|
||
animate: {
|
||
enter: 'animated fadeInRight',
|
||
exit: 'animated fadeOutRight'
|
||
},
|
||
mouse_over : 'pause',
|
||
template: '<div data-notify="container" class="bg-w col-xs-11 col-sm-3 bs-callout bs-callout-{0}" role="alert">' +
|
||
'<button type="button" aria-hidden="true" class="close" data-notify="dismiss">×</button>' +
|
||
'<span data-notify="icon"></span> ' +
|
||
'<h4 data-notify="title">{1}</h4> ' +
|
||
'<span data-notify="message">{2}</span>' +
|
||
'<div class="progress" data-notify="progressbar">' +
|
||
'<div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>' +
|
||
'</div>' +
|
||
'<a href="{3}" target="{4}" data-notify="url"></a>' +
|
||
'</div>'
|
||
});
|
||
}
|
||
|
||
function createCP(id, color, cb)
|
||
{
|
||
if(Array.isArray(color))
|
||
color = rgbToHex(color);
|
||
else if(color == "undefined")
|
||
color = "#AA3399";
|
||
|
||
if(color.startsWith("#"))
|
||
{
|
||
$('#'+id).colorpicker({
|
||
format: 'rgb',
|
||
customClass: 'colorpicker-2x',
|
||
color: color,
|
||
sliders: {
|
||
saturation: {
|
||
maxLeft: 200,
|
||
maxTop: 200
|
||
},
|
||
hue: {
|
||
maxTop: 200
|
||
},
|
||
}
|
||
});
|
||
$('#'+id).colorpicker().on('changeColor', function(e) {
|
||
var rgb = e.color.toRGB();
|
||
var hex = e.color.toHex();
|
||
cb(rgb,hex,e);
|
||
});
|
||
}
|
||
else
|
||
debugMessage('createCP: Given color is not legit');
|
||
}
|
||
|
||
// Creates a table with thead and tbody ids
|
||
// @param string hid : a class for thead
|
||
// @param string bid : a class for tbody
|
||
// @param string cont : a container id to html() the table
|
||
// @param string bless: if true the table is borderless
|
||
function createTable(hid, bid, cont, bless, tclass)
|
||
{
|
||
var table = document.createElement('table');
|
||
var thead = document.createElement('thead');
|
||
var tbody = document.createElement('tbody');
|
||
|
||
table.className = "table";
|
||
if(bless === true)
|
||
table.className += " borderless";
|
||
if(typeof tclass !== "undefined")
|
||
table.className += " "+tclass;
|
||
table.style.marginBottom = "0px";
|
||
if(hid != "")
|
||
thead.className = hid;
|
||
tbody.className = bid;
|
||
if(hid != "")
|
||
table.appendChild(thead);
|
||
table.appendChild(tbody);
|
||
|
||
$('#'+cont).append(table);
|
||
}
|
||
|
||
// Creates a table row <tr>
|
||
// @param array list :innerHTML content for <td>/<th>
|
||
// @param bool head :if null or false it's body
|
||
// @param bool align :if null or false no alignment
|
||
//
|
||
// @return : <tr> with <td> or <th> as child(s)
|
||
function createTableRow(list, head, align)
|
||
{
|
||
var row = document.createElement('tr');
|
||
|
||
for(var i = 0; i < list.length; i++)
|
||
{
|
||
if(head === true)
|
||
var el = document.createElement('th');
|
||
else
|
||
var el = document.createElement('td');
|
||
|
||
if(align)
|
||
el.style.verticalAlign = "middle";
|
||
|
||
el.innerHTML = list[i];
|
||
row.appendChild(el);
|
||
}
|
||
return row;
|
||
}
|
||
|
||
function createRow(id)
|
||
{
|
||
var el = document.createElement('div');
|
||
el.className = "row";
|
||
el.setAttribute('id', id);
|
||
return el;
|
||
}
|
||
|
||
function createOptPanel(phicon, phead, bodyid, footerid)
|
||
{
|
||
phead = '<i class="fa '+phicon+' fa-fw"></i>'+phead;
|
||
var pfooter = document.createElement('button');
|
||
pfooter.className = "btn btn-primary";
|
||
pfooter.setAttribute("id", footerid);
|
||
pfooter.innerHTML = '<i class="fa fa-fw fa-save"></i>'+$.i18n('general_button_savesettings');
|
||
|
||
return createPanel(phead, "", pfooter, "panel-default", bodyid);
|
||
}
|
||
|
||
function sortProperties(list)
|
||
{
|
||
for(var key in list)
|
||
{
|
||
list[key].key = key;
|
||
}
|
||
list = $.map(list, function(value, index) {
|
||
return [value];
|
||
});
|
||
return list.sort(function(a,b) {
|
||
return a.propertyOrder - b.propertyOrder;
|
||
});
|
||
}
|
||
|
||
function createHelpTable(list, phead){
|
||
var table = document.createElement('table');
|
||
var thead = document.createElement('thead');
|
||
var tbody = document.createElement('tbody');
|
||
list = sortProperties(list);
|
||
|
||
phead = '<i class="fa fa-fw fa-info-circle"></i>'+phead+' '+$.i18n("conf_helptable_expl");
|
||
|
||
table.className = 'table table-hover borderless';
|
||
|
||
thead.appendChild(createTableRow([$.i18n('conf_helptable_option'), $.i18n('conf_helptable_expl')], true, false));
|
||
|
||
for (var key in list)
|
||
{
|
||
if(list[key].access != 'system')
|
||
{
|
||
// break one iteration (in the loop), if the schema has the entry hidden=true
|
||
if ("options" in list[key] && "hidden" in list[key].options && (list[key].options.hidden))
|
||
continue;
|
||
if ("access" in list[key] && ((list[key].access == "advanced" && storedAccess == "default") || (list[key].access == "expert" && storedAccess != "expert")))
|
||
continue;
|
||
var text = list[key].title.replace('title', 'expl');
|
||
tbody.appendChild(createTableRow([$.i18n(list[key].title), $.i18n(text)], false, false));
|
||
|
||
if(list[key].items && list[key].items.properties)
|
||
{
|
||
var ilist = sortProperties(list[key].items.properties);
|
||
for (var ikey in ilist)
|
||
{
|
||
// break one iteration (in the loop), if the schema has the entry hidden=true
|
||
if ("options" in ilist[ikey] && "hidden" in ilist[ikey].options && (ilist[ikey].options.hidden))
|
||
continue;
|
||
if ("access" in ilist[ikey] && ((ilist[ikey].access == "advanced" && storedAccess == "default") || (ilist[ikey].access == "expert" && storedAccess != "expert")))
|
||
continue;
|
||
var itext = ilist[ikey].title.replace('title', 'expl');
|
||
tbody.appendChild(createTableRow([$.i18n(ilist[ikey].title), $.i18n(itext)], false, false));
|
||
}
|
||
}
|
||
}
|
||
}
|
||
table.appendChild(thead);
|
||
table.appendChild(tbody);
|
||
|
||
return createPanel(phead, table);
|
||
}
|
||
|
||
function createPanel(head, body, footer, type, bodyid){
|
||
var cont = document.createElement('div');
|
||
var p = document.createElement('div');
|
||
var phead = document.createElement('div');
|
||
var pbody = document.createElement('div');
|
||
var pfooter = document.createElement('div');
|
||
|
||
cont.className = "col-lg-6";
|
||
|
||
if(typeof type == 'undefined')
|
||
type = 'panel-default';
|
||
|
||
p.className = 'panel '+type;
|
||
phead.className = 'panel-heading';
|
||
pbody.className = 'panel-body';
|
||
pfooter.className = 'panel-footer';
|
||
|
||
phead.innerHTML = head;
|
||
|
||
if(typeof bodyid != 'undefined')
|
||
{
|
||
pfooter.style.textAlign = 'right';
|
||
pbody.setAttribute("id", bodyid);
|
||
}
|
||
|
||
if(typeof body != 'undefined' && body != "")
|
||
pbody.appendChild(body);
|
||
|
||
if(typeof footer != 'undefined')
|
||
pfooter.appendChild(footer);
|
||
|
||
p.appendChild(phead);
|
||
p.appendChild(pbody);
|
||
|
||
if(typeof footer != 'undefined')
|
||
{
|
||
pfooter.style.textAlign = "right";
|
||
p.appendChild(pfooter);
|
||
}
|
||
|
||
cont.appendChild(p);
|
||
|
||
return cont;
|
||
}
|
||
|
||
function createSelGroup(group)
|
||
{
|
||
var el = document.createElement('optgroup');
|
||
el.setAttribute('label', group);
|
||
return el;
|
||
}
|
||
|
||
function createSelOpt(opt, title)
|
||
{
|
||
var el = document.createElement('option');
|
||
el.setAttribute('value', opt);
|
||
if (typeof title == 'undefined')
|
||
el.innerHTML = opt;
|
||
else
|
||
el.innerHTML = title;
|
||
return el;
|
||
}
|
||
|
||
function createSel(array, group, split)
|
||
{
|
||
if (array.length != 0)
|
||
{
|
||
var el = createSelGroup(group);
|
||
for(var i=0; i<array.length; i++)
|
||
{
|
||
var opt;
|
||
if(split)
|
||
{
|
||
opt = array[i].split(":")
|
||
opt = createSelOpt(opt[0],opt[1])
|
||
}
|
||
else
|
||
opt = createSelOpt(array[i])
|
||
el.appendChild(opt);
|
||
}
|
||
return el;
|
||
}
|
||
}
|
||
|
||
function performTranslation()
|
||
{
|
||
$('[data-i18n]').i18n();
|
||
}
|
||
|
||
function encode_utf8(s)
|
||
{
|
||
return unescape(encodeURIComponent(s));
|
||
}
|
||
|
||
function getReleases(callback)
|
||
{
|
||
$.ajax({
|
||
url: window.gitHubReleaseApiUrl,
|
||
method: 'get',
|
||
error: function(XMLHttpRequest, textStatus, errorThrown)
|
||
{
|
||
callback(false);
|
||
},
|
||
success: function(releases)
|
||
{
|
||
window.gitHubVersionList = releases;
|
||
|
||
for(var i in releases)
|
||
{
|
||
if(releases[i].prerelease == true)
|
||
{
|
||
window.latestBetaVersion = releases[i];
|
||
break;
|
||
}
|
||
}
|
||
|
||
$.ajax({
|
||
url: window.gitHubReleaseApiUrl + "/latest",
|
||
method: 'get',
|
||
error: function(XMLHttpRequest, textStatus, errorThrown)
|
||
{
|
||
callback(false);
|
||
},
|
||
success: function(latest)
|
||
{
|
||
window.latestStableVersion = latest;
|
||
|
||
if(window.serverConfig.general.watchedVersionBranch == "Beta" && window.latestStableVersion.tag_name.replace(/\./g, '') <= window.latestBetaVersion.tag_name.replace(/\./g, ''))
|
||
{
|
||
window.latestVersion = window.latestBetaVersion;
|
||
}
|
||
else
|
||
{
|
||
window.latestVersion = window.latestStableVersion;
|
||
}
|
||
callback(true);
|
||
}
|
||
});
|
||
}
|
||
})
|
||
}
|