mirror of
https://github.com/fhem/fhem-mirror.git
synced 2025-02-07 16:59:18 +00:00
271 lines
12 KiB
JavaScript
271 lines
12 KiB
JavaScript
//########################################################################################
|
|
// dashboard.js
|
|
//########################################################################################
|
|
// Released : 14.11.2013 @svenson08
|
|
// Version : 1.00
|
|
// Revisions:
|
|
// 0001: Released to testers
|
|
// 0002: Add DebugMsg. Fix independent Groupsize adjustment after set & siterefresh. Fix
|
|
// wrong set of +Toogle Icon on Siderefresh
|
|
//
|
|
// Known Bugs/Todo's
|
|
// See 95_Dashboard.pm
|
|
//########################################################################################
|
|
//########################################################################################
|
|
|
|
function saveOrder() {
|
|
var SaveResult = "";
|
|
//------------- Build new Position string ---------------
|
|
$(".dashboard_column").each(function(index, value){
|
|
var colid = value.id;
|
|
var order = $('#' + colid).sortable("toArray");
|
|
for ( var i = 0, n = order.length; i < n; i++ ) {
|
|
var v = $('#' + order[i]).find('.dashboard_content').is(':visible');
|
|
var w = $('#' + order[i]).outerWidth();
|
|
if ( $('#' + order[i]).find(".dashboard_content").data("userheight") == null ) {
|
|
var h = $('#' + order[i]).outerHeight();
|
|
} else {
|
|
var h = $('#' + order[i]).find(".dashboard_content").data("userheight");
|
|
if (h.length == 0) { var h = $('#' + order[i]).outerHeight(); }
|
|
}
|
|
order[i] = order[i]+","+v+","+h+","+w;
|
|
}
|
|
SaveResult = SaveResult + index+','+order+':';
|
|
//Result: <ColumNumber>,<portlet-1>,<status>,<height>,<width>,<portlet-n>,<status>,<height>,<width>:<columNumber.....
|
|
});
|
|
//-------------------------------------------------------
|
|
//------------ Set the new href String ------------------
|
|
document.getElementById("dashboard_currentsorting").value = SaveResult;
|
|
if (document.getElementById("dashboard_button_set")) {
|
|
document.getElementById("dashboard_button_set").classList.add('dashboard_button_changed'); //Mark that the Changes are not saved
|
|
}
|
|
//-------------------------------------------------------
|
|
}
|
|
|
|
function restoreOrder() {
|
|
$(".dashboard_column").each(function(index, value) {
|
|
var params = (document.getElementById("dashboard_attr").value).split(","); //get current Configuration
|
|
var coldata = (document.getElementById("dashboard_currentsorting").value).split(":"); //get the position string from the hiddenfield
|
|
var rowwidth = params[7] * params[1];
|
|
//------------------------------------------------------------
|
|
|
|
$(".dashboard_column").width(params[1]); //Set Columwidth
|
|
$(".ui-row").width(rowwidth); //Set Rowwidth
|
|
if (value.id == "sortablecolumn100") { //Set RowHeight
|
|
$('#' + value.id).height(params[8]);
|
|
$('#' + value.id).width(rowwidth);
|
|
var widgetmaxwidth = rowwidth;
|
|
} else {
|
|
if (value.id == "sortablecolumn200") {
|
|
$('#' + value.id).height(params[9]);
|
|
$('#' + value.id).width(rowwidth);
|
|
var widgetmaxwidth = rowwidth;
|
|
} else {
|
|
$('#' + value.id).height(params[5]);
|
|
var widgetmaxwidth = params[1];
|
|
}
|
|
}
|
|
|
|
if (params[2] == 1) { $(".dashboard_column").addClass("dashboard_columnhelper"); } else { $(".dashboard_column").removeClass("dashboard_columnhelper"); }//set helperclass
|
|
|
|
for (var i = 0, n = coldata.length; i < n; i++ ) { //for each column (Value = 1,name1,state1,name2,state2)
|
|
var portletsdata = coldata[i].split(","); //protlet array / all portlets in this (=index) column
|
|
|
|
//alert("Load Event (1) \nColumn="+index+"\nSaveResult="+coldata+"\nColumndata=("+i+"/"+coldata.length+") "+portletsdata);
|
|
for (var j = 1, m = portletsdata.length; j < m; j += 4 ) {
|
|
//alert("Load Event (2) \nColumn="+index+"\nSaveResult="+coldata+"\nColumndata=("+i+"/"+coldata.length+"|"+j+"/"+portletsdata.length+") "+portletsdata+
|
|
//"\n\nPortletdata (ID)="+portletsdata[j]+"\nPortletdata (Visible)="+portletsdata[j+1]+"\nPortletheight (Height)="+portletsdata[j+2]+"\nPortletwidth (Width)="+portletsdata[j+3]);
|
|
if (portletsdata[0] == index && portletsdata[0] != '' && portletsdata[j] != '' && portletsdata[j+1] != '') {
|
|
var portletID = portletsdata[j];
|
|
var visible = portletsdata[j+1];
|
|
var height = portletsdata[j+2]-5; //( limited -5 by CSS)
|
|
var width = portletsdata[j+3]-5; //( limited -5 by CSS)
|
|
|
|
if (width > widgetmaxwidth) {width = widgetmaxwidth}; //Fix with ist widget width > current column width.
|
|
var portlet = $(".dashboard_column").find('#' + portletID);
|
|
portlet.appendTo($('#' + value.id));
|
|
portlet.outerHeight(height);
|
|
portlet.outerWidth(width);
|
|
if (params[2] == 1) { portlet.addClass("dashboard_widgethelper"); } else { portlet.removeClass("dashboard_widgethelper"); }//Show Widget-Helper Frame
|
|
if (visible === 'false') {
|
|
|
|
if (portlet.find(".dashboard_widgetheader").find(".dashboard_button_icon").hasClass("dashboard_button_iconminus")) {
|
|
portlet.find(".dashboard_widgetheader").find(".dashboard_button_icon").removeClass( "dashboard_button_iconminus" );
|
|
portlet.find(".dashboard_widgetheader").find(".dashboard_button_icon").addClass( "dashboard_button_iconplus" );
|
|
}
|
|
|
|
var currHeigth = Math.round(portlet.height());
|
|
portlet.find(".dashboard_content").data("userheight", currHeigth);
|
|
portlet.find(".dashboard_content").hide();
|
|
var newHeigth = portlet.find(".dashboard_widgetinner").height()+5;
|
|
portlet.height(newHeigth);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
//Only use for debugging
|
|
function showdebugMessage(msg){
|
|
document.getElementById("dashboard_jsdebug").value = document.getElementById("dashboard_jsdebug").value+" "+msg;
|
|
}
|
|
|
|
function dashboard_tooglelock(){
|
|
var params = (document.getElementById("dashboard_attr").value).split(","); //get current Configuration
|
|
if (params[3] == "lock"){ //current state lock, do unlock
|
|
params[3] = "unlock";
|
|
$("#dashboard_button_lock").button( "option", "label", "Lock" );
|
|
dashboard_unsetlock();
|
|
} else { //current state unlock, set lock
|
|
params[3] = "lock";
|
|
$("#dashboard_button_lock").button( "option", "label", "Unlock" );
|
|
dashboard_setlock();
|
|
}
|
|
document.getElementById("dashboard_attr").value = params;
|
|
FW_cmd(document.location.pathname+'?XHR=1&cmd.'+params[0]+'=attr '+params[0]+' dashboard_lockstate '+params[3]);
|
|
}
|
|
|
|
function dashboard_setlock(){
|
|
$("#dashboard_button_lock").prepend('<span class="dashboard_button_icon dashboard_button_iconlock"></span>');
|
|
//############################################################
|
|
$( ".dashboard_column" ).sortable( "option", "disabled", true );
|
|
$( ".dashboard_widget" ).removeClass("dashboard_widgethelper");
|
|
if ($( ".dashboard_widget" ).hasClass("ui-resizable")) { $( ".dashboard_widget" ).resizable("destroy"); };
|
|
$( ".dashboard_column" ).removeClass("dashboard_columnhelper");
|
|
//############################################################
|
|
}
|
|
|
|
function dashboard_unsetlock(){
|
|
var params = (document.getElementById("dashboard_attr").value).split(","); //get current Configuration
|
|
|
|
$("#dashboard_button_lock").prepend('<span class="dashboard_button_icon dashboard_button_iconunlock"></span>');
|
|
//############################################################
|
|
$( ".dashboard_column" ).sortable( "option", "disabled", false );
|
|
if (params[2] == 1) { $( ".dashboard_widget" ).addClass("dashboard_widgethelper"); } else { $( ".dashboard_widget" ).removeClass("dashboard_widgethelper"); }//Show Widget-Helper Frame
|
|
if (params[2] == 1) { $( ".dashboard_column" ).addClass("dashboard_columnhelper"); } else { $( ".dashboard_column" ).removeClass("dashboard_columnhelper"); }//Show Widget-Helper Frame
|
|
dashboard_modifyWidget();
|
|
//############################################################
|
|
}
|
|
|
|
function dashboard_setposition(){
|
|
var params = (document.getElementById("dashboard_attr").value).split(","); //get current Configuration
|
|
var sorting = document.getElementById("dashboard_currentsorting").value;
|
|
FW_cmd(document.location.pathname+'?XHR=1&cmd.'+params[0]+'=attr '+params[0]+' dashboard_sorting '+sorting);
|
|
document.getElementById("dashboard_button_set").classList.remove('dashboard_button_changed');
|
|
}
|
|
|
|
function dashboard_modifyWidget(){
|
|
$( ".dashboard_widget" ).resizable({
|
|
'grid': 1,
|
|
'minWidth': 150,
|
|
start: function(e, ui) {
|
|
var params = (document.getElementById("dashboard_attr").value).split(","); //get current Configuration
|
|
//-------- Widgetbegrenzung festlegen -------------------
|
|
var rowid = $(this).parent().attr("id");
|
|
if (rowid == "sortablecolumn100") {
|
|
var widgetmaxwidth = (params[7] * params[1]) - 5;
|
|
var widgetmaxheight = params[8] - 5;
|
|
}
|
|
else { if (rowid == "sortablecolumn200") {
|
|
var widgetmaxwidth = (params[7] * params[1]) - 5;
|
|
var widgetmaxheight = params[9] -5 ;
|
|
}
|
|
else {
|
|
var widgetmaxwidth = params[1] - 5;
|
|
var widgetmaxheight = params[5] -5;
|
|
}
|
|
}
|
|
//-------------------------------------------------------
|
|
|
|
maxWidthOffset = widgetmaxwidth;
|
|
$(this).resizable("option","maxWidth",widgetmaxwidth);
|
|
$(this).resizable("option","maxHeight",widgetmaxheight);
|
|
},
|
|
resize: function(e, ui) {
|
|
minHeightOffset = $(this).find(".dashboard_widgetinner").height()+5;
|
|
ui.size.width = Math.round(ui.size.width);
|
|
if (ui.size.width > (maxWidthOffset)) { $(this).resizable("option","maxWidth",maxWidthOffset); }
|
|
if (ui.size.height < (minHeightOffset)) { $(this).resizable("option","minHeight",minHeightOffset); }
|
|
},
|
|
stop: function() {
|
|
minHeightOffset = $(this).find(".dashboard_widgetinner").height()+5;
|
|
$(this).resizable("option","minHeight",minHeightOffset);
|
|
saveOrder();
|
|
}
|
|
});
|
|
}
|
|
|
|
$(document).ready( function () {
|
|
var params = (document.getElementById("dashboard_attr").value).split(","); //get current Configuration
|
|
|
|
$(".dashboard_column").sortable({
|
|
connectWith: ['.dashboard_column', '.ui-row'],
|
|
stop: function() { saveOrder(); }
|
|
});
|
|
|
|
if (params[4] == 0){ //set if buttonbar not show
|
|
dashboard_modifyWidget();
|
|
dashboard_setlock();
|
|
}
|
|
|
|
if (params[6] == 1){ //ToogleButton show/hide
|
|
$(".dashboard_widget")
|
|
.addClass( "dashboard_widget dashboard_content ui-corner-all" )
|
|
.find(".dashboard_widgetheader")
|
|
.addClass( "dashboard_widgetheader ui-corner-all" )
|
|
.prepend('<span class="dashboard_button_icon dashboard_button_iconminus"></span>')
|
|
.end();
|
|
|
|
$(".dashboard_widgetheader .dashboard_button_icon").click(function(event) {
|
|
if ($(this).hasClass("dashboard_button_iconplus")) {
|
|
$(this).removeClass( "dashboard_button_iconplus" );
|
|
$(this).addClass( "dashboard_button_iconminus" );
|
|
$(this).parents(".dashboard_widget:first").find(".dashboard_content").show();
|
|
var newHeigth = $(this).parents(".dashboard_widget:first").find(".dashboard_content").data("userheight");
|
|
} else {
|
|
$(this).removeClass( "dashboard_button_iconminus" );
|
|
$(this).addClass( "dashboard_button_iconplus" );
|
|
var currHeigth = Math.round($(this).parents(".dashboard_widget:first").height());
|
|
$(this).parents(".dashboard_widget:first").find(".dashboard_content").data("userheight", currHeigth);
|
|
$(this).parents(".dashboard_widget:first").find(".dashboard_content").hide();
|
|
var newHeigth = $(this).parents(".dashboard_widget:first").find(".dashboard_widgetinner").height()+5;
|
|
}
|
|
$(this).parents(".dashboard_widget:first").height(newHeigth);
|
|
saveOrder();
|
|
event.stopImmediatePropagation();
|
|
});
|
|
}
|
|
|
|
$("#dashboard_button_set").button({
|
|
create: function( event, ui ) {
|
|
$(this).addClass("dashboard_button_iconset");
|
|
}
|
|
});
|
|
|
|
$("#dashboard_button_detail").button({
|
|
create: function( event, ui ) {
|
|
$(this).addClass("dashboard_button_icondetail");
|
|
}
|
|
});
|
|
|
|
$("#dashboard_button_lock").button({
|
|
create: function( event, ui ) {
|
|
dashboard_modifyWidget();
|
|
if (params[3] == "lock") {
|
|
$(this).button( "option", "label", "Unlock" );
|
|
dashboard_setlock();
|
|
} else {
|
|
$(this).button( "option", "label", "Lock" );
|
|
dashboard_unsetlock();
|
|
}
|
|
}
|
|
});
|
|
|
|
restoreOrder();
|
|
});
|
|
|
|
|
|
|
|
|