fhem-tablet-ui
fhem-tablet-ui copied to clipboard
Published
20 hours ago •
knowthelist
knowthelist
classchanger-widget not correctly working for pagetab
In my menu bar I would like to hide/show certain buttons based on the overall status of fhem. E.g. if a battery is low, I would like to see a red icon whereas for all batteries ok, a green check-icon would be desired.
I have setup my menu.html as follows:
<body>
<header>MENU</header>
<div class='row'>
:
<div class="cell" data-type='classchanger' data-device='status' data-get='overallStatus' data-get-on='notOk' data-get-off='ok' data-on-class='hide'>
<div data-type="pagetab" data-url="status.html" data-icon="fa-check" data-on-color="green" data-off-color="green"></div>
</div>
<div class="cell" data-type='classchanger' data-device='status' data-get='overallStatus' data-get-on='ok' data-get-off='notOk' data-on-class='hide'>
<div data-type="pagetab" data-url="status.html" data-icon="fa-times" data-on-color="red" data-off-color="red"></div>
</div>
</div>
</body>
However, this approach did not work, as only the classchanger-div gets the "hide" added as class attribute. I tried modifiying the children-attribues as well in widget-classchanger.js in function update() and this seems to work ok but I have not yet tested other cases.
if (value == elem.data('get-on')) {
elem.removeClass(elem.data('off-class'));
elem.addClass(elem.data('on-class'));
// modify children as well
elem.children().removeClass(elem.data('off-class'));
elem.children().addClass(elem.data('on-class'));
} else {
elem.removeClass(elem.data('on-class'));
elem.addClass(elem.data('off-class'));
// modify children as well
elem.children().removeClass(elem.data('on-class'));
elem.children().addClass(elem.data('off-class'));
}
