mirror of
https://github.com/fhem/fhem-mirror.git
synced 2024-11-22 09:49:50 +00:00
fhemweb_iconButtons.js:new widget for FHEMWEB (Forum:#75696)
git-svn-id: https://svn.fhem.de/fhem/trunk@15195 2b470e98-0d58-463d-a4d8-8e2adae1ed80
This commit is contained in:
Ellert
parent
4b3dc4ad84
commit
37bd539649
@ -1,5 +1,7 @@
|
||||
# Add changes at the top of the list. Keep it in ASCII, and 80-char wide.
|
||||
# Do not insert empty lines here, update check depends on it.
|
||||
- new /www/pgm2/fhemweb_icon*.js: new widgets for FHEMWEB iconButtons,
|
||||
iconLabel, iconRadio, iconSwitch (Forum:#75696)
|
||||
- bugfix: 93_DbRep: V5.6.3, crash due to wrong timestamp calc (Forum:#77328)
|
||||
- change: 01_FHEMWEB.js: on demand loading of fhemweb_*.js (Forum #76868)
|
||||
- bugfix: 73_GardenaSmartBridge: fix part of code
|
||||
|
||||
@ -526,6 +526,10 @@ www/jscolor/* justme1968 Frontends
|
||||
www/pgm2/* rudolfkoenig Frontends/FHEMWEB
|
||||
www/pgm2/dashboard/* svenson08 Frontends
|
||||
www/pgm2/fhemweb_fbcalllist.js markusbloch Frontends
|
||||
www/pgm2/fhemweb_iconButtons.js Ellert Frontends
|
||||
www/pgm2/fhemweb_iconLabel.js Ellert Frontends
|
||||
www/pgm2/fhemweb_iconRadio.js Ellert Frontends
|
||||
www/pgm2/fhemweb_iconSwitch.js Ellert Frontends
|
||||
www/pgm2/fhemweb_readingsGroup.js justme1968 Frontends/readingsGroup readingsHistory
|
||||
www/pgm2/fhemweb_readingsHistory.js justme1968 Frontends/readingsGroup readingsHistory
|
||||
www/pgm2/fhemweb_sortable.js markusbloch Frontends
|
||||
|
||||
122
fhem/www/pgm2/fhemweb_iconButtons.js
Normal file
122
fhem/www/pgm2/fhemweb_iconButtons.js
Normal file
@ -0,0 +1,122 @@
|
||||
|
||||
FW_version["fhemweb_iconButtons.js"] = "$Id$";
|
||||
|
||||
FW_widgets['iconButtons'] = {
|
||||
createFn:FW_iconButtonsCreate,
|
||||
};
|
||||
|
||||
/********* iconButtons *********/
|
||||
function
|
||||
FW_iconButtonsCreate(elName, devName, vArr, currVal, set, params, cmd)
|
||||
{
|
||||
if( 0 ) {
|
||||
console.log( "elName: "+elName );
|
||||
console.log( "devName: "+devName );
|
||||
console.log( "vArr: "+vArr );
|
||||
console.log( "currVal: "+currVal );
|
||||
console.log( "set: "+set );
|
||||
console.log( "params: "+params );
|
||||
console.log( "cmd: "+cmd );
|
||||
}
|
||||
|
||||
if(!vArr.length || vArr[0] != "iconButtons")
|
||||
return undefined;
|
||||
var ipar = 2;
|
||||
|
||||
if( vArr[1].match(/^[A-F0-9]{6}$/))
|
||||
vArr[1] = "#"+vArr[1];
|
||||
|
||||
var newEl = $("<div style='display:inline-block;'>").get(0);
|
||||
$(newEl).addClass(vArr[0]);
|
||||
|
||||
var hidden;
|
||||
if(elName)
|
||||
hidden = $('<input type="hidden" name="'+elName+'" value="'+currVal+'">');
|
||||
$(newEl).append(hidden);
|
||||
|
||||
var clicked = function(arg) { var new_val=newEl.getValueFn(arg);
|
||||
newEl.setValueFn( new_val );
|
||||
if( cmd )
|
||||
cmd(new_val);
|
||||
};
|
||||
|
||||
var buttons = [];
|
||||
for( var i = 2; i < (vArr.length); i+=ipar ) {
|
||||
var button = $('<input type="checkbox">').uniqueId();
|
||||
var label = $('<label for="'+button.attr("id")+'" name="'+vArr[i+1]+'" title="'+vArr[i]+'" >'+vArr[i]+'</label>');
|
||||
buttons.push(button);
|
||||
|
||||
$(newEl).append(button);
|
||||
$(newEl).append(label);
|
||||
|
||||
$(button).change(clicked);
|
||||
}
|
||||
|
||||
$(newEl).buttonset();
|
||||
$(newEl).find("label").css({"margin":"0","border":"0","border-radius":"4px","background":"inherit"});
|
||||
$(newEl).find("span").css({"padding":"0.0em 0.3em"});
|
||||
|
||||
$(newEl).find("Label").each(function(ind,val){
|
||||
$(val).addClass("iconButtons_widget")
|
||||
|
||||
var ico = vArr[ind*ipar+3];
|
||||
FW_cmd(FW_root+"?cmd={FW_makeImage('"+ico+"')}&XHR=1",function(data){
|
||||
data = data.replace(/\n$/,'');
|
||||
$(newEl).find("label").each(function(ind,val){
|
||||
var re = new RegExp("\"\s?"+$(val).attr("name")+"(\s?|\")","i");
|
||||
if (!(data.match(re) === null) && ($(val).find("span").html().match(re) === null)) {
|
||||
$(val).find("span").addClass("iconButtons_widget").html(data);
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
if( !currVal )
|
||||
currVal = ",";
|
||||
|
||||
newEl.getValueFn = function(arg) { var new_val="";
|
||||
for( var i = 0; i < buttons.length; ++i ) {
|
||||
var button = buttons[i];
|
||||
if( $(button).prop("checked") ) {
|
||||
button.next().css({"background-color":vArr[1]});
|
||||
if( new_val ) new_val += ',';
|
||||
new_val += $(button).button( "option", "label")
|
||||
}
|
||||
}
|
||||
if( !new_val ) return ',';
|
||||
return new_val;
|
||||
};
|
||||
|
||||
newEl.setValueFn = function(arg){ if( !arg ) arg = ',';
|
||||
if( hidden )
|
||||
hidden.attr("value", arg);
|
||||
for( var i = 0; i < buttons.length; ++i ) {
|
||||
var button = buttons[i];
|
||||
button.prop("checked", arg.match(new RegExp('(^|,)'+vArr[i*ipar+2]+'($|,)') ) );
|
||||
if (button.prop("checked")==true){
|
||||
button.next().css({"background-color":vArr[1]});
|
||||
} else {
|
||||
button.next().css({"background-color":"inherit"});
|
||||
}
|
||||
button.button("refresh");
|
||||
}
|
||||
};
|
||||
|
||||
newEl.setValueFn( currVal );
|
||||
|
||||
return newEl;
|
||||
}
|
||||
|
||||
/*
|
||||
=pod
|
||||
=begin html
|
||||
|
||||
=end html
|
||||
|
||||
=begin html_DE
|
||||
|
||||
=end html_DE
|
||||
=cut
|
||||
*/
|
||||
105
fhem/www/pgm2/fhemweb_iconLabel.js
Normal file
105
fhem/www/pgm2/fhemweb_iconLabel.js
Normal file
@ -0,0 +1,105 @@
|
||||
|
||||
FW_version["fhemweb_iconLabel.js"] = "$Id$";
|
||||
|
||||
FW_widgets['iconLabel'] = {
|
||||
createFn:FW_IconLabelCreate,
|
||||
};
|
||||
|
||||
/********* iconLabel *********/
|
||||
function
|
||||
FW_IconLabelCreate(elName, devName, vArr, currVal, set, params, cmd)
|
||||
{
|
||||
if( 0 ) {
|
||||
console.log( "elName: "+elName );
|
||||
console.log( "devName: "+devName );
|
||||
console.log( "vArr: "+vArr );
|
||||
console.log( "currVal: "+currVal );
|
||||
console.log( "set: "+set );
|
||||
console.log( "params: "+params );
|
||||
console.log( "cmd: "+cmd );
|
||||
}
|
||||
|
||||
if(vArr.length<1 || vArr[0] != "iconLabel")
|
||||
return undefined;
|
||||
var newEl = $("<div style='display:inline-block;'>").get(0);
|
||||
|
||||
var ipar = 2;
|
||||
for( var i = 1; i < (vArr.length); i+=ipar ) {
|
||||
vArr[i] = vArr[i].replace(/#/g," ");
|
||||
}
|
||||
var hidden;
|
||||
if(elName)
|
||||
hidden = $('<input type="hidden" name="'+elName+'" value="'+currVal+'">');
|
||||
$(newEl).append(hidden);
|
||||
|
||||
var button = $('<input type="checkbox">').uniqueId();
|
||||
|
||||
var label = $('<label for="'+button.attr("id")+'">');
|
||||
|
||||
$(newEl).append(button);
|
||||
$(newEl).append(label);
|
||||
|
||||
button.button();
|
||||
|
||||
newEl.setValueFn = function(arg){ if( !arg )
|
||||
arg = "???";
|
||||
if( hidden )
|
||||
hidden.attr("value", arg);
|
||||
$(newEl).find("label").attr("style","background:none; border:none; font-size: inherit;");
|
||||
$(newEl).find("span").attr("style","padding:0.0em 0.3em;");
|
||||
var ilast = 0,ico, col;
|
||||
for (var i=1;i < vArr.length;i+=ipar) {
|
||||
var re = new RegExp(vArr[i],"i");
|
||||
if (!isNaN(parseFloat(vArr[i])) && parseFloat(arg) <= parseFloat(vArr[i]) || isNaN(parseFloat(vArr[i])) && !(arg.match(re) === null)) {
|
||||
ilast = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if(ilast > 0) { //text only with color
|
||||
if (vArr[i+1] && vArr[i+1].indexOf("@") == 0) {
|
||||
col = vArr[i+1].replace(/@/,'');
|
||||
$(newEl).find("span").html(arg+"")
|
||||
.attr("style","color: "+col+" !important; padding:0.0em 0.3em ")
|
||||
.attr("title",arg);
|
||||
$(newEl).find("label").attr("style","border-style:solid; background-color:#f6f6f6; background-image:none; font-size: inherit;");
|
||||
} else if( vArr[i+1] && vArr[i+1].indexOf("@") == -1) { //text or image no color
|
||||
ico = vArr[i+1];
|
||||
FW_cmd(FW_root+"?cmd={FW_makeImage('"+ico+"','"+arg+"')}&XHR=1",function(data){
|
||||
data = data.replace(/\n$/,'');
|
||||
$(newEl).find("span").html(data+"");
|
||||
if (data.indexOf("<svg") == -1 && data.indexOf("<img") == -1)
|
||||
$(newEl).find("label").attr("style","border-style:solid; background-color:#f6f6f6; background-image:none;font-size: inherit;");
|
||||
});
|
||||
} else if (vArr[i+1] && vArr[i+1].indexOf("@") > 0) { //text or image with color
|
||||
ico = vArr[i+1].split("@");
|
||||
FW_cmd(FW_root+"?cmd={FW_makeImage('"+vArr[i+1]+"','"+arg+"')}&XHR=1",function(data){
|
||||
data = data.replace(/\n$/,'');
|
||||
$(newEl).find("span").html((vArr[i+1] == data ? ico[0] : data )+"")
|
||||
.attr("title",arg)
|
||||
.attr("style","color: "+ico[1]+" !important; padding:0.0em 0.3em");
|
||||
if (data.indexOf("<svg") == -1 && data.indexOf("<img") == -1)
|
||||
$(newEl).find("label").attr("style","border-style:solid; background-color:#f6f6f6; background-image:none;font-size: inherit;");
|
||||
});
|
||||
} else { //text only
|
||||
$(newEl).find("span").html(arg+"")
|
||||
.attr("title",arg);
|
||||
$(newEl).find("label").attr("style","border-style:solid; color:inherit; background-color:#f6f6f6; background-image:none;font-size: inherit;");
|
||||
}
|
||||
}
|
||||
button.button("refresh");
|
||||
}
|
||||
newEl.setValueFn( currVal );
|
||||
return newEl;
|
||||
}
|
||||
|
||||
/*
|
||||
=pod
|
||||
=begin html
|
||||
|
||||
=end html
|
||||
|
||||
=begin html_DE
|
||||
|
||||
=end html_DE
|
||||
=cut
|
||||
*/
|
||||
207
fhem/www/pgm2/fhemweb_iconRadio.js
Normal file
207
fhem/www/pgm2/fhemweb_iconRadio.js
Normal file
@ -0,0 +1,207 @@
|
||||
|
||||
FW_version["fhemweb_iconRadio.js"] = "$Id$";
|
||||
|
||||
FW_widgets['iconRadio'] = {
|
||||
createFn:FW_iconRadioCreate,
|
||||
};
|
||||
|
||||
/********* iconRadio *********/
|
||||
function
|
||||
FW_iconRadioCreate(elName, devName, vArr, currVal, set, params, cmd)
|
||||
{
|
||||
if( 0 ) {
|
||||
console.log( "elName: "+elName );
|
||||
console.log( "devName: "+devName );
|
||||
console.log( "vArr: "+vArr );
|
||||
console.log( "currVal: "+currVal );
|
||||
console.log( "set: "+set );
|
||||
console.log( "params: "+params );
|
||||
console.log( "cmd: "+cmd );
|
||||
}
|
||||
|
||||
if(!vArr.length || vArr[0] != "iconRadio")
|
||||
return undefined;
|
||||
var ipar = 2;
|
||||
|
||||
if( vArr[1].match(/^[A-F0-9]{6}$/))
|
||||
vArr[1] = "#"+vArr[1];
|
||||
var newEl = $("<div style='display:inline-block;'>").get(0);
|
||||
$(newEl).addClass(vArr[0]);
|
||||
|
||||
var hidden;
|
||||
if(elName)
|
||||
hidden = $('<input type="hidden" name="'+elName+'" value="'+currVal+'">');
|
||||
$(newEl).append(hidden);
|
||||
|
||||
var clicked = function(arg) { var new_val=newEl.getValueFn(arg);
|
||||
newEl.setValueFn( new_val );
|
||||
if( cmd )
|
||||
cmd(new_val);
|
||||
};
|
||||
|
||||
var buttons = [];
|
||||
for( var i = 2; i < (vArr.length); i+=ipar ) {
|
||||
vArr[i] = vArr[i].replace(/#/g," ");
|
||||
var button = $('<input type="radio" name="radio">').uniqueId();
|
||||
var label = $('<label for="'+button.attr("id")+'" name="'+vArr[i+1]+'" title="'+vArr[i]+'" >'+vArr[i]+'</label>');
|
||||
buttons.push(button);
|
||||
|
||||
$(newEl).append(button);
|
||||
$(newEl).append(label);
|
||||
|
||||
$(button).change(clicked);
|
||||
|
||||
if( currVal )
|
||||
button.prop("checked", currVal == vArr[i] );
|
||||
}
|
||||
|
||||
$(newEl).buttonset();
|
||||
$(newEl).find("label").css({"margin":"0","border":"0","border-radius":"4px","background":"inherit"});
|
||||
$(newEl).find("span").css({"padding":"0.0em 0.3em"});
|
||||
|
||||
$(newEl).find("label").each(function(ind,val){
|
||||
$(val).addClass("iconRadio_widget")
|
||||
|
||||
var ico = vArr[ind*ipar+3];
|
||||
FW_cmd(FW_root+"?cmd={FW_makeImage('"+ico+"')}&XHR=1",function(data){
|
||||
data = data.replace(/\n$/,'');
|
||||
$(newEl).find("label").each(function(ind,val){
|
||||
var re = new RegExp("\"\s?"+$(val).attr("name")+"(\s?|\")","i");
|
||||
if (!(data.match(re) === null) && ($(val).find("span").html().match(re) === null)) {
|
||||
$(val).find("span").addClass("iconRadio_widget").html(data);
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
if( !currVal )
|
||||
currVal = ",";
|
||||
|
||||
newEl.getValueFn = function(arg) { var new_val="";
|
||||
for( var i = 0; i < buttons.length; ++i ) {
|
||||
var button = buttons[i];
|
||||
if( $(button).prop("checked") ) {
|
||||
button.next().css({"background-color":vArr[1]});
|
||||
if( new_val ) new_val += ',';
|
||||
new_val += $(button).button( "option", "label")
|
||||
}
|
||||
}
|
||||
if( !new_val ) return ',';
|
||||
return new_val;
|
||||
};
|
||||
|
||||
newEl.setValueFn = function(arg){ if( !arg ) arg = ',';
|
||||
if( hidden )
|
||||
hidden.attr("value", arg);
|
||||
for( var i = 0; i < buttons.length; ++i ) {
|
||||
var button = buttons[i];
|
||||
button.prop("checked", (arg == vArr[i*ipar+2]) );
|
||||
if (button.prop("checked")==true){
|
||||
button.next().css({"background-color":vArr[1]});
|
||||
} else {
|
||||
button.next().css({"background-color":"inherit"});
|
||||
}
|
||||
button.button("refresh");
|
||||
}
|
||||
};
|
||||
|
||||
newEl.setValueFn( currVal );
|
||||
|
||||
return newEl;
|
||||
}
|
||||
|
||||
/*
|
||||
=pod
|
||||
=begin html
|
||||
|
||||
<br>
|
||||
<u>To the icon.* widgets listed below applies:</u><br>
|
||||
<color> is specified by a color name or a color number without leading <b>#</b> e.g. FFA500 or orange. Depending on the context <b>@</b> has to be escaped <b>\@</b>.<br>
|
||||
<icon> is the icon name.<br>
|
||||
Examples for import with raw definition, will be found in <a href="https://wiki.fhem.de/wiki/FHEMWEB/Widgets">FHEMWEB-Widgets</a>
|
||||
<li>iconRadio,<select color>,<value>,<icon>[@<color>][,<value>,<icon>[@<color>]]...
|
||||
- displays Icons as radio button and returns value if pushed.
|
||||
<value> return value.<br>
|
||||
<select color> the background color of the selected icon.<br>
|
||||
The widget contains a CSS-class "iconRadio_widget".
|
||||
<br>
|
||||
</li>
|
||||
<li>
|
||||
iconButtons,<select color>,<value>,<icon>[@<color>][,<value>,<icon>[@<color>]]...
|
||||
- displays Icons as button bar and returns comma separated values of pushed buttons.
|
||||
<value> return value.<br>
|
||||
<select color> the background color of the selected icon.<br>
|
||||
The widget contains a CSS-class "iconButtons_widget".
|
||||
<br>
|
||||
</li>
|
||||
<li>iconLabel[,<reference value>,[<icon>][@<color>]][,<reference value>,[<icon>][@<color>]]...
|
||||
- displays states by colorized values, labels and icons, if the current
|
||||
value fits to the reference value. A state is described by a parameter peer.
|
||||
The number of peers is arbitrarily. A peer consists of a <reference
|
||||
value> and an optional display value with an optional color value
|
||||
<reference value> is a number or a regular expression.<br>
|
||||
If <icon> is no icon name, the text will be displayed, otherwise
|
||||
the icon. If nothing is specified, the current value will be displayed.<br>
|
||||
<br>
|
||||
</li>
|
||||
<li>iconSwitch,<reference value>,[<icon>][@<color>][,<reference value>,[<icon>][@<color>]]...
|
||||
- switches cyclic after actuation to the diplayed state and the actual
|
||||
value is set to the reference Value. A state is described by a
|
||||
parameter peer. The number of peers is arbitrarily. A peer consists
|
||||
of a <reference value> and an optional display value with an
|
||||
optional color value [<icon>][@<color>].<br>
|
||||
<reference value> is a number or a string.<br>
|
||||
If <icon> is no icon name, the text will be displayed, otherwise
|
||||
the icon. If nothing is specified, the reference value will be displayed.<br>
|
||||
<br>
|
||||
</li>
|
||||
=end html
|
||||
=begin html_DE
|
||||
|
||||
<br>
|
||||
<u>Für die folgenden icon.* Widgets gilt:</u><br>
|
||||
<color> kann ein Farbname oder eine Farbnummer ohne führende <b>#</b> sein, z.B. orange oder FFA500. Abhängig vom Kontext ist <b>@</b> zu escapen <b>\@</b>.<br>
|
||||
<icon> ist der Iconname.<br>
|
||||
Beispiele zum Import über Raw definition findet man im FHEM-Wiki unter <a href="https://wiki.fhem.de/wiki/FHEMWEB/Widgets">FHEMWEB-Widgets</a>
|
||||
<li>iconRadio,<select color>,<value>,<icon>[@<color>][,<value>,<icon>[@<color>]]...
|
||||
- zeigt Icons als Radiobutton an und gibt Value bei Betätigung zurück.<br>
|
||||
<value> ist der Rückgabewert.<br>
|
||||
<select color> die Hintergrundfarbe des gewählten Icons.<br>
|
||||
Das Widget enthält eine CSS-Klasse "iconRadio_widget".<br>
|
||||
</li>
|
||||
<li>iconButtons,<select color>,<value>,<icon>[@<color>][,<value>,<icon>[@<color>]]...
|
||||
- zeigt Icons als Tastenleiste an und gibt durch Komma getrennte Werte der betätigten Tasten zurück.<br>
|
||||
<value> ist der Rückgabewert.<br>
|
||||
<select color> die Hintergrundfarbe des gewählten Icons.<br>
|
||||
Das Widget enthält eine CSS-Klasse "iconButton_widget".<br>
|
||||
</li>
|
||||
<li>iconLabel[,<reference value>,[<icon>][@<color>]][,<reference value>,[<icon>][@<color>]]...
|
||||
- zeigt Zustände durch colorierte Werte, Beschriftungen und Icons an, wenn
|
||||
der aktuelle Wert zum Vergleichswert passt. Ein Zustand wird durch
|
||||
ein Parameterpaar beschrieben. Es können beliebig viele Paare angegeben
|
||||
werden. Ein Paar besteht aus einem Vergleichswert <reference
|
||||
value> und einem optionalen Anzeigewert mit optionaler mit
|
||||
Farbangabe [,<reference value>,[<icon>][@<color>]].<br>
|
||||
<reference value> kann eine Zahl oder ein regulärer Ausdruck sein.<br>
|
||||
Wenn <icon> keinem Iconnamen entspricht, wird der Text angezeigt,
|
||||
sonst das Icon. Wird <icon> nicht angegeben, wird der aktuelle
|
||||
Wert angezeigt.<br>
|
||||
</li>
|
||||
<li>iconSwitch,<reference value>,[<icon>][@<color>][,<reference value>,[<icon>][@<color>]]...
|
||||
- schaltet zyklisch nach jeder Betätigung in den angezeigten
|
||||
Zustand, dabei wird der aktuelle Wert auf den Vergleichswert
|
||||
gesetzt. Ein Zustand wird durch ein Parameterpaar beschrieben.
|
||||
Es können beliebig viele Paare angegeben werden. Ein Paar
|
||||
besteht aus einem Vergleichswert <reference value> und einem
|
||||
optionalen Anzeigewert mit optionaler mit Farbangabe [,<reference
|
||||
value>,[<icon>][@<color>]].<br>
|
||||
<reference value> kann eine Zahl oder eine Zeichenkette sein.<br>
|
||||
Wenn <icon> keinem Iconnamen entspricht, wird der Text
|
||||
angezeigt, sonst das Icon. Wird <icon> nicht angegeben,
|
||||
wird der Vergleichwert angezeigt.<br>
|
||||
</li>
|
||||
=end html_DE
|
||||
=cut
|
||||
*/
|
||||
141
fhem/www/pgm2/fhemweb_iconSwitch.js
Normal file
141
fhem/www/pgm2/fhemweb_iconSwitch.js
Normal file
@ -0,0 +1,141 @@
|
||||
|
||||
FW_version["fhemweb_iconSwitch.js"] = "$Id$";
|
||||
|
||||
FW_widgets['iconSwitch'] = {
|
||||
createFn:FW_iconSwitchCreate,
|
||||
};
|
||||
|
||||
/********* iconSwitch *********/
|
||||
function
|
||||
FW_iconSwitchCreate(elName, devName, vArr, currVal, set, params, cmd)
|
||||
{
|
||||
if( 0 ) {
|
||||
console.log( "elName: "+elName );
|
||||
console.log( "devName: "+devName );
|
||||
console.log( "vArr: "+vArr );
|
||||
console.log( "currVal: "+currVal );
|
||||
console.log( "set: "+set );
|
||||
console.log( "params: "+params );
|
||||
console.log( "cmd: "+cmd );
|
||||
}
|
||||
|
||||
if(vArr.length<1 || vArr[0] != "iconSwitch")
|
||||
return undefined;
|
||||
var newEl = $("<div style='display:inline-block;'>").get(0);
|
||||
|
||||
var ipar = 2;
|
||||
for( var i = 1; i < (vArr.length); i+=ipar ) {
|
||||
vArr[i] = vArr[i].replace(/#/g," ");
|
||||
}
|
||||
var hidden;
|
||||
if(elName)
|
||||
hidden = $('<input type="hidden" name="'+elName+'" value="'+currVal+'">');
|
||||
$(newEl).append(hidden);
|
||||
|
||||
var button = $('<input type="checkbox">').uniqueId();
|
||||
|
||||
var label = $('<label for="'+button.attr("id")+'">');
|
||||
|
||||
$(newEl).append(button);
|
||||
$(newEl).append(label);
|
||||
|
||||
button.button();
|
||||
$(newEl).change(function(arg) { var new_val = newEl.getValueFn();
|
||||
newEl.setValueFn( new_val );
|
||||
if( cmd )
|
||||
cmd(new_val);
|
||||
} );
|
||||
|
||||
newEl.getValueFn = function(arg){ if( !currVal )
|
||||
currVal = vArr[1] ? vArr[1] : "???";
|
||||
var imax = vArr.length - 2;
|
||||
var istart = 1;
|
||||
var ilast = 0;
|
||||
for (var i=1;i < vArr.length-1;i+=ipar) {
|
||||
if (isNaN(parseFloat(vArr[i])) && currVal === vArr[i] || !isNaN(parseFloat(vArr[i])) && parseFloat(currVal) <= parseFloat(vArr[i])) {
|
||||
ilast = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if(ilast > 0) {
|
||||
if(ilast + ipar > imax) {
|
||||
i = istart;
|
||||
} else {
|
||||
i+= ipar;
|
||||
}
|
||||
currVal = vArr[i];
|
||||
return vArr[i];
|
||||
} else {
|
||||
currVal = ilast > 0 ? vArr[ilast] : vArr[istart];
|
||||
return ilast > 0 ? vArr[ilast] : vArr[istart];
|
||||
}
|
||||
};
|
||||
|
||||
newEl.setValueFn = function(arg){ if( !arg )
|
||||
arg = vArr[1] ? vArr[1] : "???";
|
||||
if( hidden )
|
||||
hidden.attr("value", arg);
|
||||
$(newEl).find("span").attr("style","padding:0.0em 0.3em;");
|
||||
$(newEl).find("label").attr("style","background:none; border:none; font-size: inherit;");
|
||||
var imax = vArr.length - 2, istart = 1, ilast = 0,ico, col;
|
||||
for (var i=1;i < vArr.length-1;i+=ipar) {
|
||||
if (isNaN(parseFloat(vArr[i])) && arg === vArr[i] || !isNaN(parseFloat(vArr[i])) && parseFloat(arg) <= parseFloat(vArr[i])) {
|
||||
ilast = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if(ilast > 0) {
|
||||
if(ilast + ipar > imax) {
|
||||
i = istart;
|
||||
} else {
|
||||
i += ipar;
|
||||
}
|
||||
if (vArr[i+1] && vArr[i+1].indexOf("@") == 0) { //text only with color
|
||||
col = vArr[i+1].replace(/@/,'');
|
||||
$(newEl).find("span").html(vArr[i]+"")
|
||||
.attr("style","color: "+col+" !important; padding:0.0em 0.3em ")
|
||||
.attr("title",arg);
|
||||
$(newEl).find("label").attr("style","border-style:solid; background-color:#f6f6f6; background-image:none; font-size: inherit;");
|
||||
} else if( vArr[i+1] && vArr[i+1].indexOf("@") == -1) { //text or image no color
|
||||
ico = vArr[i+1];
|
||||
FW_cmd(FW_root+"?cmd={FW_makeImage('"+ico+"','"+arg+"')}&XHR=1",function(data){
|
||||
data = data.replace(/\n$/,'');
|
||||
$(newEl).find("span").html(data+"")
|
||||
.attr("title",arg);
|
||||
if (data.indexOf("<svg") == -1 && data.indexOf("<img") == -1)
|
||||
$(newEl).find("label").attr("style","border-style:solid; background-color:#f6f6f6; background-image:none;font-size: inherit;");
|
||||
});
|
||||
} else if (vArr[i+1] && vArr[i+1].indexOf("@") > 0) { //text or image with color
|
||||
ico = vArr[i+1].split("@");
|
||||
FW_cmd(FW_root+"?cmd={FW_makeImage('"+vArr[i+1]+"','"+arg+"')}&XHR=1",function(data){
|
||||
data = data.replace(/\n$/,'');
|
||||
$(newEl).find("span").html((vArr[i+1] == data ? ico[0] : data )+"")
|
||||
.attr("title",arg)
|
||||
.attr("style","color: "+ico[1]+" !important; padding:0.0em 0.3em");
|
||||
if (data.indexOf("<svg") == -1 && data.indexOf("<img") == -1)
|
||||
$(newEl).find("label").attr("style","border-style:solid; background-color:#f6f6f6; background-image:none;font-size: inherit;");
|
||||
});
|
||||
} else { // text only
|
||||
$(newEl).find("span").html(vArr[i])
|
||||
.attr("title", arg);
|
||||
$(newEl).find("label").attr("style","border-style:solid; background-color:#f6f6f6; background-image:none;font-size: inherit;");
|
||||
}
|
||||
}
|
||||
button.button("refresh");
|
||||
};
|
||||
|
||||
newEl.setValueFn( currVal );
|
||||
|
||||
return newEl;
|
||||
}
|
||||
|
||||
/*
|
||||
=pod
|
||||
=begin html
|
||||
|
||||
=end html
|
||||
=begin html_DE
|
||||
|
||||
=end html_DE
|
||||
=cut
|
||||
*/
|
||||
Loading…
Reference in New Issue
Block a user