iobroker.mywebui 1.37.40 → 1.37.41

package/io-package.json

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

package/package.json

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

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

@@ -4,6 +4,7 @@ class VisibilityService {
     static instance = new VisibilityService();
 
     #originalDisplayStyles = new WeakMap();
+    #cleanupFns = new WeakMap();
 
     #applyResult(element, result) {
         if (!result.visible) {
@@ -14,7 +15,6 @@ class VisibilityService {
             element.style.display = orig;
             element.style.visibility = '';
         }
-
         if (!result.enabled) {
             element.style.pointerEvents = 'none';
             element.style.opacity = '0.5';
@@ -24,93 +24,118 @@ class VisibilityService {
         }
     }
 
-    async #checkAndApply(element, visibilityConfig, currentStateVal) {
-        try {
-            const action = visibilityConfig.action || 'hide';
+    async applyVisibility(element, visibilityConfig, relativeSignalPath, root) {
+        if (!visibilityConfig || !visibilityConfig.enabled) return;
 
-            // Step 1: Group access check (if groups configured)
-            if (visibilityConfig.groups && visibilityConfig.groups.length > 0) {
-                const groupResult = await iobrokerHandler.checkVisibility({
-                    enabled: true,
-                    groups: visibilityConfig.groups,
-                    action: action
-                });
-                // If user is not in allowed groups, apply restriction and stop
-                if (!groupResult.visible || !groupResult.enabled) {
-                    this.#applyResult(element, groupResult);
-                    return;
-                }
-            }
+        if (!this.#originalDisplayStyles.has(element)) {
+            this.#originalDisplayStyles.set(element, element.style.display || '');
+        }
 
-            // Step 2: Signal/state check (if objectId configured)
-            if (visibilityConfig.objectId) {
-                // objectId may be a plain signal string or JSON like {"signal":"...","expression":"...","converter":{...},"historic":{...}}
-                let signalId = visibilityConfig.objectId;
-                let expression = null;
-                let converter = null;
-                if (typeof signalId === 'string' && signalId.startsWith('{')) {
-                    try {
-                        const parsed = JSON.parse(signalId);
-                        signalId = parsed.signal || signalId;
-                        expression = parsed.expression || null;
-                        converter = parsed.converter || null;
-                    } catch (e) { /* keep raw */ }
-                }
+        // Clean up any previous binding subscription
+        const prevCleanup = this.#cleanupFns.get(element);
+        if (prevCleanup) { prevCleanup(); this.#cleanupFns.delete(element); }
 
-                let stateVal = currentStateVal;
-                if (stateVal === undefined) {
-                    const state = await iobrokerHandler.connection.getState(signalId);
-                    stateVal = state?.val;
-                }
+        // 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;
+            }
+        }
 
-                // Evaluate expression if present
-                if (expression) {
-                    try { stateVal = new Function('__0', expression)(stateVal); } catch (e) { console.warn('[Visibility] Expression error:', e); }
-                }
+        // Step 2: Signal binding
+        if (visibilityConfig.objectId) {
+            const action = visibilityConfig.action || 'hide';
 
-                // Apply converter if present (object map like {"true":"1","false":"0"} or inverse)
-                if (converter && typeof converter === 'object') {
-                    const key = String(stateVal);
-                    if (key in converter) stateVal = converter[key];
+            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 = {};
+            }
 
-                // Truthy state value → apply action
-                const isActive = stateVal !== null && stateVal !== undefined && stateVal !== false && stateVal !== 0 && stateVal !== '';
+            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 }
                 );
-                return;
-            }
+            };
+
+            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]; }
+                });
 
-            // No restrictions active → show/enable
+                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 });
-        } catch (err) {
-            console.error('[Visibility] Check failed:', err);
         }
     }
 
-    async applyVisibility(element, visibilityConfig) {
-        if (!visibilityConfig || !visibilityConfig.enabled) return;
-
-        if (!this.#originalDisplayStyles.has(element)) {
-            this.#originalDisplayStyles.set(element, element.style.display || '');
-        }
-
-        await this.#checkAndApply(element, visibilityConfig, undefined);
-
-        if (visibilityConfig.objectId) {
-            let signalId = visibilityConfig.objectId;
-            if (typeof signalId === 'string' && signalId.startsWith('{')) {
-                try { signalId = JSON.parse(signalId).signal || signalId; } catch (e) { /* keep raw */ }
+    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); }
             }
-            await iobrokerHandler.subscribeState(signalId, (_id, state) => {
-                this.#checkAndApply(element, visibilityConfig, state?.val);
-            });
-        }
+            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;
@@ -122,7 +147,11 @@ class VisibilityService {
     }
 
     async scanAndApply(container = document.body) {
-        // Collect all elements needing visibility handling (group control OR signal binding)
+        // 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();
@@ -137,7 +166,7 @@ class VisibilityService {
                     action: element.getAttribute('data-visibility-action') || 'hide',
                     groups: element.getAttribute('data-visibility-groups')?.split(',').filter(g => g) || []
                 };
-                await this.applyVisibility(element, visibilityConfig);
+                await this.applyVisibility(element, visibilityConfig, relativeSignalPath, root);
             } catch (err) {
                 console.error('[Visibility] Error:', err);
             }