iobroker.mywebui 1.37.44 → 1.37.47

package/io-package.json

@@ -1,7 +1,7 @@
 {
   "common": {
     "name": "mywebui",
-    "version": "1.37.44",
+    "version": "1.37.47",
     "titleLang": {
       "en": "mywebui",
       "de": "mywebui",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iobroker.mywebui",
-  "version": "1.37.44",
+  "version": "1.37.47",
   "description": "ioBroker mywebui - Custom edited mywebui by gokturk413",
   "type": "module",
   "main": "dist/backend/main.js",

package/www/dist/frontend/config/IobrokerWebuiAppShell.js

@@ -404,29 +404,28 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
         const designItem = selectedItems[0];
         const element = designItem.element;
 
-        // Read existing signal from data-visibility-signal (may be plain signal string or JSON with signal+expression+historic+converter)
-        const existingSignalAttr = element.getAttribute('data-visibility-signal') || null;
-        let existingSignal = existingSignalAttr;
+        // Read existing signal binding — bind-prop:hidden (hide) or bind-prop:disable (disable)
+        const hiddenAttr = element.getAttribute('bind-prop:hidden') || null;
+        const disableAttr = element.getAttribute('bind-prop:disable') || null;
+        const existingBindPropAttr = hiddenAttr || disableAttr;
+        let existingSignalAction = hiddenAttr ? 'hide' : (disableAttr ? 'disable' : 'hide');
+        let existingSignal = null;
         let existingBinding = null;
-        if (existingSignalAttr) {
-            if (existingSignalAttr.startsWith('{')) {
-                try {
-                    const parsed = JSON.parse(existingSignalAttr);
-                    existingSignal = parsed.signal || existingSignalAttr;
-                    // BindingsEditor expects bindableObjectNames array, not signal string
-                    existingBinding = {
-                        bindableObjectNames: parsed.signal ? [parsed.signal] : [],
-                        expression: parsed.expression || '',
-                        historic: parsed.historic || null,
-                        converter: parsed.converter || null,
-                        invert: parsed.invert || false,
-                        target: 'property'
-                    };
-                } catch (e) {
-                    existingBinding = { bindableObjectNames: [existingSignalAttr], target: 'property' };
-                }
-            } else {
-                existingBinding = { bindableObjectNames: [existingSignalAttr], target: 'property' };
+        if (existingBindPropAttr) {
+            try {
+                const parsed = JSON.parse(existingBindPropAttr);
+                existingSignal = parsed.signal || null;
+                existingBinding = {
+                    bindableObjectNames: parsed.signal ? [parsed.signal] : [],
+                    expression: parsed.expression || '',
+                    historic: parsed.historic || null,
+                    converter: parsed.converter || null,
+                    invert: parsed.inverted || false,
+                    target: 'property'
+                };
+            } catch (e) {
+                existingSignal = existingBindPropAttr;
+                existingBinding = { bindableObjectNames: [existingBindPropAttr], target: 'property' };
             }
         }
 
@@ -439,7 +438,18 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
 
         content.innerHTML = '';
 
-        // Helper: open IobrokerWebuiBindingsEditor directly (pre-populates with existingBinding, saves to data-visibility-signal)
+        // Signal action selector (hide / disable) — referenced by openVisibilityBindingEditor
+        const signalActionSelect = document.createElement('select');
+        signalActionSelect.style.cssText = 'font-size:11px;padding:2px 4px;border:1px solid #ccc;border-radius:3px;background:#fff;';
+        ['hide', 'disable'].forEach(a => {
+            const opt = document.createElement('option');
+            opt.value = a;
+            opt.textContent = a;
+            opt.selected = a === existingSignalAction;
+            signalActionSelect.appendChild(opt);
+        });
+
+        // Helper: open IobrokerWebuiBindingsEditor
         const openVisibilityBindingEditor = () => {
             const dynEdt = new IobrokerWebuiBindingsEditor(
                 { name: 'visibility', propertyType: 'propertyAndAttribute' },
@@ -457,24 +467,32 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
             cw.okClicked.on(() => {
                 dlg.close();
                 const signal = dynEdt.objectNames;
+                const action = signalActionSelect.value;
                 if (signal) {
                     const bnd = { signal };
                     if (dynEdt.expression) bnd.expression = dynEdt.expression;
                     if (dynEdt.historic) bnd.historic = dynEdt.historic;
-                    if (dynEdt.invert) bnd.invert = true;
-                    // converters: array of {key,value} objects → plain object, or named converter string
+                    if (dynEdt.invert) bnd.inverted = true;
                     if (dynEdt.converters && dynEdt.converters.length > 0) {
                         bnd.converter = {};
                         for (const c of dynEdt.converters) bnd.converter[c.key] = c.value;
                     } else if (dynEdt.convertersString) {
                         bnd.converter = dynEdt.convertersString;
                     }
-                    const needsJson = bnd.expression || bnd.historic || bnd.converter || bnd.invert;
-                    designItem.setAttribute('data-visibility-signal', needsJson ? JSON.stringify(bnd) : signal);
+                    if (action === 'disable') {
+                        designItem.setAttribute('bind-prop:disable', JSON.stringify(bnd));
+                        designItem.removeAttribute('bind-prop:hidden');
+                    } else {
+                        designItem.setAttribute('bind-prop:hidden', JSON.stringify(bnd));
+                        designItem.removeAttribute('bind-prop:disable');
+                    }
+                    designItem.setAttribute('data-visibility-action', action);
                 } else {
-                    designItem.removeAttribute('data-visibility-signal');
+                    designItem.removeAttribute('bind-prop:hidden');
+                    designItem.removeAttribute('bind-prop:disable');
+                    designItem.removeAttribute('data-visibility-action');
                 }
-                designItem.removeAttribute('bind-prop:hidden');
+                designItem.removeAttribute('data-visibility-signal');
                 this._updateVisibilityPanel();
             });
         };
@@ -516,8 +534,9 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
 
             addItem('edit binding', openVisibilityBindingEditor);
             addItem('clear binding', () => {
-                designItem.removeAttribute('data-visibility-signal');
                 designItem.removeAttribute('bind-prop:hidden');
+                designItem.removeAttribute('bind-prop:disable');
+                designItem.removeAttribute('data-visibility-signal');
                 this._updateVisibilityPanel();
             }, !existingSignal);
 
@@ -529,15 +548,17 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
         bindRow.appendChild(bindBtn);
 
         const bindLabel = document.createElement('span');
-        bindLabel.textContent = 'Visibility';
-        bindLabel.style.cssText = 'font-size:12px;font-weight:600;flex:1;';
+        bindLabel.textContent = 'Signal';
+        bindLabel.style.cssText = 'font-size:12px;font-weight:600;';
         bindRow.appendChild(bindLabel);
 
+        bindRow.appendChild(signalActionSelect);
+
         if (existingSignal) {
             const statusSpan = document.createElement('span');
             statusSpan.textContent = existingSignal;
             statusSpan.title = existingSignal;
-            statusSpan.style.cssText = 'font-size:10px;color:#aaa;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right;';
+            statusSpan.style.cssText = 'font-size:10px;color:#aaa;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right;';
             bindRow.appendChild(statusSpan);
         }
 
@@ -566,7 +587,10 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
         const enableCheck = document.createElement('input');
         enableCheck.type = 'checkbox';
         enableCheck.checked = dataConfig.enabled || false;
-        enableCheck.onchange = () => updateGroupConfig('enabled', enableCheck.checked);
+        enableCheck.onchange = () => {
+            updateGroupConfig('enabled', enableCheck.checked);
+            if (enableCheck.checked) updateGroupConfig('action', actionSelect.value);
+        };
         enableLabel.appendChild(enableCheck);
         enableLabel.appendChild(document.createTextNode('Enable Group Visibility Control'));
         enableDiv.appendChild(enableLabel);

package/www/dist/frontend/runtime/ScreenViewer.js

@@ -345,6 +345,17 @@ let ScreenViewer = class ScreenViewer extends BaseCustomWebComponentConstructorA
                 fragment.appendChild(n);
             this._rootShadow.appendChild(fragment);
         }
+        // Custom bind-prop:disable handler — sets pointer-events+opacity when value is truthy
+        for (const el of this._rootShadow.querySelectorAll('[bind-prop\\:disable]')) {
+            Object.defineProperty(el, 'disable', {
+                configurable: true,
+                set(val) {
+                    el.style.pointerEvents = val ? 'none' : '';
+                    el.style.opacity = val ? '0.5' : '';
+                },
+                get() { return el.style.pointerEvents === 'none'; }
+            });
+        }
         const res = window.appShell.bindingsHelper.applyAllBindings(this._rootShadow, this.relativeSignalsPath, this);
         if (this._iobBindings)
             this._iobBindings.push(...res);

package/www/dist/frontend/runtime/VisibilityService.js

@@ -4,7 +4,6 @@ class VisibilityService {
     static instance = new VisibilityService();
 
     #originalDisplayStyles = new WeakMap();
-    #cleanupFns = new WeakMap();
 
     #applyResult(element, result) {
         if (!result.visible) {
@@ -24,118 +23,27 @@ class VisibilityService {
         }
     }
 
-    async applyVisibility(element, visibilityConfig, relativeSignalPath, root) {
-        if (!visibilityConfig || !visibilityConfig.enabled) return;
+    // Signal-based visibility is handled by applyAllBindings via bind-prop:hidden.
+    // VisibilityService only handles group access control.
+    async applyGroupVisibility(element, groups, action) {
+        if (!groups || groups.length === 0) return;
 
         if (!this.#originalDisplayStyles.has(element)) {
             this.#originalDisplayStyles.set(element, element.style.display || '');
         }
 
-        // Clean up any previous binding subscription
-        const prevCleanup = this.#cleanupFns.get(element);
-        if (prevCleanup) { prevCleanup(); this.#cleanupFns.delete(element); }
+        const result = await iobrokerHandler.checkVisibility({
+            enabled: true,
+            groups,
+            action: action || 'hide'
+        });
 
-        // Step 1: Group access check (if configured)
-        if (visibilityConfig.groups && visibilityConfig.groups.length > 0) {
-            const groupResult = await iobrokerHandler.checkVisibility({
-                enabled: true,
-                groups: visibilityConfig.groups,
-                action: visibilityConfig.action || 'hide'
-            });
-            if (!groupResult.visible || !groupResult.enabled) {
-                this.#applyResult(element, groupResult);
-                return;
-            }
-        }
-
-        // Step 2: Signal binding
-        if (visibilityConfig.objectId) {
-            const action = visibilityConfig.action || 'hide';
-
-            let signalStr, bindingConfig;
-            const raw = visibilityConfig.objectId;
-            if (typeof raw === 'string' && raw.startsWith('{')) {
-                try {
-                    const parsed = JSON.parse(raw);
-                    signalStr = parsed.signal;
-                    bindingConfig = parsed;
-                } catch (e) {
-                    signalStr = raw;
-                    bindingConfig = {};
-                }
-            } else {
-                signalStr = raw;
-                bindingConfig = {};
-            }
-
-            const onValue = (v) => {
-                const isActive = v !== null && v !== undefined && v !== false && v !== 0 && v !== '';
-                this.#applyResult(element, isActive
-                    ? { visible: action !== 'hide', enabled: action !== 'disable' }
-                    : { visible: true, enabled: true }
-                );
-            };
-
-            const bindingsHelper = window.appShell?.bindingsHelper;
-            if (bindingsHelper && root) {
-                // Use BindingsHelper.applyBinding — supports ?, ??, {combined}, expression, converter, historic
-                // A Proxy intercepts the final evaluated value written to element.__vis
-                const proxy = new Proxy(element, {
-                    set(target, prop, value) {
-                        if (prop === '__vis') {
-                            onValue(value);
-                        } else {
-                            target[prop] = value;
-                        }
-                        return true;
-                    },
-                    get(target, prop) { return target[prop]; }
-                });
-
-                const bindingObj = {
-                    signal: signalStr,
-                    target: 'property'
-                };
-                if (bindingConfig.expression) bindingObj.expression = bindingConfig.expression;
-                if (bindingConfig.converter) bindingObj.converter = bindingConfig.converter;
-                if (bindingConfig.historic) bindingObj.historic = bindingConfig.historic;
-                if (bindingConfig.invert) bindingObj.inverted = bindingConfig.invert;
-
-                // Format: [propertyName, bindingOptions]
-                const binding = ['__vis', bindingObj];
-                const cleanup = bindingsHelper.applyBinding(proxy, binding, relativeSignalPath || '', root);
-                if (cleanup) this.#cleanupFns.set(element, cleanup);
-            } else {
-                // Fallback: direct subscription (no ?, ?? or {combined} support)
-                await this.#applyDirect(signalStr, bindingConfig, onValue);
-            }
-        } else {
-            this.#applyResult(element, { visible: true, enabled: true });
+        if (!result.visible || !result.enabled) {
+            this.#applyResult(element, result);
         }
     }
 
-    async #applyDirect(signalId, bindingConfig, onValue) {
-        const evaluate = (raw) => {
-            let v = raw;
-            if (bindingConfig.expression) {
-                try { v = new Function('__0', bindingConfig.expression)(v); } catch (e) { console.warn('[Visibility] Expression error:', e); }
-            }
-            if (bindingConfig.converter && typeof bindingConfig.converter === 'object') {
-                const k = String(v);
-                if (k in bindingConfig.converter) v = bindingConfig.converter[k];
-            }
-            onValue(v);
-        };
-
-        const state = await iobrokerHandler.connection.getState(signalId);
-        evaluate(state?.val);
-        await iobrokerHandler.subscribeState(signalId, (_id, state) => evaluate(state?.val));
-    }
-
     removeVisibility(element) {
-        const prevCleanup = this.#cleanupFns.get(element);
-        if (prevCleanup) { prevCleanup(); this.#cleanupFns.delete(element); }
-
         const originalDisplay = this.#originalDisplayStyles.get(element);
         if (originalDisplay !== undefined) {
             element.style.display = originalDisplay;
@@ -147,28 +55,17 @@ class VisibilityService {
     }
 
     async scanAndApply(container = document.body) {
-        // Get ScreenViewer context from shadow root host — needed for ?, ??, {} pattern resolution
-        const screenViewer = container.host || null;
-        const relativeSignalPath = screenViewer?.relativeSignalsPath || '';
-        const root = screenViewer || null;
-
-        const groupElements = container.querySelectorAll('[data-visibility-enabled="true"]');
-        const signalElements = container.querySelectorAll('[data-visibility-signal]');
-        const seen = new Set();
+        // Signal-based visibility: handled automatically by applyAllBindings (bind-prop:hidden).
+        // Here we only apply group access control.
+        const groupElements = container.querySelectorAll('[data-visibility-groups]');
 
-        for (const element of [...groupElements, ...signalElements]) {
-            if (seen.has(element)) continue;
-            seen.add(element);
+        for (const element of groupElements) {
             try {
-                const visibilityConfig = {
-                    enabled: true,
-                    objectId: element.getAttribute('data-visibility-signal') || null,
-                    action: element.getAttribute('data-visibility-action') || 'hide',
-                    groups: element.getAttribute('data-visibility-groups')?.split(',').filter(g => g) || []
-                };
-                await this.applyVisibility(element, visibilityConfig, relativeSignalPath, root);
+                const groups = element.getAttribute('data-visibility-groups')?.split(',').filter(g => g) || [];
+                const action = element.getAttribute('data-visibility-action') || 'hide';
+                await this.applyGroupVisibility(element, groups, action);
             } catch (err) {
-                console.error('[Visibility] Error:', err);
+                console.error('[Visibility] Group check error:', err);
             }
         }
     }