iobroker.mywebui 1.37.36 → 1.37.38

package/io-package.json

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

package/package.json

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

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

@@ -27,6 +27,7 @@ import { IobrokerWebuiScreenEditor } from './IobrokerWebuiScreenEditor.js';
 import { IobrokerWebuiConfirmationWrapper } from './IobrokerWebuiConfirmationWrapper.js';
 import { getPanelContainerForElement } from './DockHelper.js';
 import { IobrokerWebuiPropertyGrid } from './IobrokerWebuiPropertyGrid.js';
+import { IobrokerWebuiBindingsEditor } from './IobrokerWebuiBindingsEditor.js';
 import { typeInfoFromJsonSchema } from '@gokturk413/propertygrid.webcomponent';
 import { openSelectIdDialog } from "@iobroker/webcomponent-selectid-dialog/dist/selectIdHelper.js";
 import "./IobrokerWebuiTranslationEditor.js";
@@ -403,12 +404,22 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
         const designItem = selectedItems[0];
         const element = designItem.element;
 
-        // Read existing binding from bind-prop:hidden attribute
-        const bindAttr = element.getAttribute('bind-prop:hidden');
+        // Read existing signal from data-visibility-signal (may be plain signal string or JSON with signal+expression)
+        const existingSignalAttr = element.getAttribute('data-visibility-signal') || null;
+        let existingSignal = existingSignalAttr;
         let existingBinding = null;
-        if (bindAttr != null) {
-            const parsed = bindingsHelper.parseBinding(element, 'bind-prop:hidden', bindAttr, 'property', 'bind-prop:');
-            if (parsed) existingBinding = parsed[1];
+        if (existingSignalAttr) {
+            if (existingSignalAttr.startsWith('{')) {
+                try {
+                    const parsed = JSON.parse(existingSignalAttr);
+                    existingSignal = parsed.signal || existingSignalAttr;
+                    existingBinding = { ...parsed, target: 'property' };
+                } catch (e) {
+                    existingBinding = { signal: existingSignalAttr, target: 'property' };
+                }
+            } else {
+                existingBinding = { signal: existingSignalAttr, target: 'property' };
+            }
         }
 
         // Read group access control config from data attributes
@@ -420,25 +431,54 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
 
         content.innerHTML = '';
 
+        // Helper: open IobrokerWebuiBindingsEditor directly (pre-populates with existingBinding, saves to data-visibility-signal)
+        const openVisibilityBindingEditor = () => {
+            const dynEdt = new IobrokerWebuiBindingsEditor(
+                { name: 'visibility', propertyType: 'propertyAndAttribute' },
+                existingBinding,
+                'property',
+                serviceContainer,
+                designItem.instanceServiceContainer,
+                this
+            );
+            const cw = new IobrokerWebuiConfirmationWrapper();
+            cw.title = 'Edit Visibility Signal Binding';
+            cw.appendChild(dynEdt);
+            const dlg = this.openDialog(cw, { x: 200, y: 200, width: 700, height: 460 });
+            cw.cancelClicked.on(() => dlg.close());
+            cw.okClicked.on(() => {
+                dlg.close();
+                const signal = dynEdt.objectNames;
+                if (signal) {
+                    const bnd = { signal };
+                    if (dynEdt.expression) bnd.expression = dynEdt.expression;
+                    if (dynEdt.inverted) bnd.inverted = true;
+                    if (dynEdt.twoWay) bnd.twoWay = true;
+                    const attrValue = (bnd.expression || bnd.inverted || bnd.twoWay)
+                        ? JSON.stringify(bnd)
+                        : signal;
+                    designItem.setAttribute('data-visibility-signal', attrValue);
+                } else {
+                    designItem.removeAttribute('data-visibility-signal');
+                }
+                designItem.removeAttribute('bind-prop:hidden');
+                this._updateVisibilityPanel();
+            });
+        };
+
         // --- BINDING ROW ---
         const bindRow = document.createElement('div');
         bindRow.style.cssText = 'display:flex;align-items:center;gap:6px;padding:4px 0;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid #ddd;';
 
-        // □ button on the LEFT (like Properties panel style)
-        const bindBtn = document.createElement('button');
-        bindBtn.textContent = '□';
-        bindBtn.title = 'Right-click for binding options';
-        bindBtn.style.cssText = existingBinding
-            ? 'width:16px;height:16px;padding:0;font-size:11px;line-height:1;border:1px solid #888;background:#ffd700;cursor:pointer;flex-shrink:0;'
-            : 'width:16px;height:16px;padding:0;font-size:11px;line-height:1;border:1px solid #888;background:#f0f0f0;cursor:pointer;flex-shrink:0;';
-
-        // Left-click: open binding editor (pass null so openBindingsEditor doesn't reject on service check)
-        bindBtn.onclick = () => {
-            const property = { name: 'hidden', propertyType: 'propertyAndAttribute' };
-            serviceContainer.config.openBindingsEditor(property, [designItem], null, 'property');
-        };
+        // Bind indicator — styled exactly like PropertyGridPropertyList's isSetElement
+        const bindBtn = document.createElement('div');
+        bindBtn.title = existingSignal ? 'Visibility: ' + existingSignal + ' (click / right-click)' : 'Click to bind visibility signal';
+        bindBtn.style.cssText = 'width:7px;height:7px;border:1px solid white;cursor:pointer;flex-shrink:0;box-sizing:border-box;'
+            + (existingSignal ? 'background:orange;' : 'background:transparent;');
+
+        bindBtn.onclick = openVisibilityBindingEditor;
 
-        // Right-click: context menu (like Properties panel)
+        // Right-click: context menu
         bindBtn.oncontextmenu = (e) => {
             e.preventDefault();
             const existing = document.getElementById('__vis-ctx-menu');
@@ -461,14 +501,12 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
                 menu.appendChild(item);
             };
 
-            addItem('edit binding', () => {
-                const property = { name: 'hidden', propertyType: 'propertyAndAttribute' };
-                serviceContainer.config.openBindingsEditor(property, [designItem], null, 'property');
-            });
+            addItem('edit binding', openVisibilityBindingEditor);
             addItem('clear binding', () => {
+                designItem.removeAttribute('data-visibility-signal');
                 designItem.removeAttribute('bind-prop:hidden');
                 this._updateVisibilityPanel();
-            }, !existingBinding);
+            }, !existingSignal);
 
             document.body.appendChild(menu);
             const close = (ev) => { if (!menu.contains(ev.target)) { menu.remove(); document.removeEventListener('mousedown', close); } };
@@ -482,11 +520,10 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
         bindLabel.style.cssText = 'font-size:12px;font-weight:600;flex:1;';
         bindRow.appendChild(bindLabel);
 
-        if (existingBinding) {
-            const sig = existingBinding.signal || (existingBinding.expression ? 'expr' : '?');
+        if (existingSignal) {
             const statusSpan = document.createElement('span');
-            statusSpan.textContent = sig;
-            statusSpan.title = JSON.stringify(existingBinding);
+            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;';
             bindRow.appendChild(statusSpan);
         }

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

@@ -5,26 +5,78 @@ class VisibilityService {
 
     #originalDisplayStyles = new WeakMap();
 
-    async #checkAndApply(element, visibilityConfig) {
+    #applyResult(element, result) {
+        if (!result.visible) {
+            element.style.display = 'none';
+            element.style.visibility = 'hidden';
+        } else {
+            const orig = this.#originalDisplayStyles.get(element) || '';
+            element.style.display = orig;
+            element.style.visibility = '';
+        }
+
+        if (!result.enabled) {
+            element.style.pointerEvents = 'none';
+            element.style.opacity = '0.5';
+        } else {
+            element.style.pointerEvents = '';
+            element.style.opacity = '';
+        }
+    }
+
+    async #checkAndApply(element, visibilityConfig, currentStateVal) {
         try {
-            const result = await iobrokerHandler.checkVisibility(visibilityConfig);
-
-            if (!result.visible) {
-                element.style.display = 'none';
-                element.style.visibility = 'hidden';
-            } else {
-                const orig = this.#originalDisplayStyles.get(element) || '';
-                element.style.display = orig;
-                element.style.visibility = '';
+            const action = visibilityConfig.action || 'hide';
+
+            // 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 (!result.enabled) {
-                element.style.pointerEvents = 'none';
-                element.style.opacity = '0.5';
-            } else {
-                element.style.pointerEvents = '';
-                element.style.opacity = '';
+            // Step 2: Signal/state check (if objectId configured)
+            if (visibilityConfig.objectId) {
+                // objectId may be a plain signal string or JSON like {"signal":"...","expression":"..."}
+                let signalId = visibilityConfig.objectId;
+                let expression = null;
+                if (typeof signalId === 'string' && signalId.startsWith('{')) {
+                    try {
+                        const parsed = JSON.parse(signalId);
+                        signalId = parsed.signal || signalId;
+                        expression = parsed.expression || null;
+                    } catch (e) { /* keep raw */ }
+                }
+
+                let stateVal = currentStateVal;
+                if (stateVal === undefined) {
+                    const state = await iobrokerHandler.connection.getState(signalId);
+                    stateVal = state?.val;
+                }
+
+                // Evaluate expression if present (same pattern as bind-content:text)
+                if (expression) {
+                    try { stateVal = new Function('__0', expression)(stateVal); } catch (e) { console.warn('[Visibility] Expression error:', e); }
+                }
+
+                // Truthy state value → apply action
+                const isActive = stateVal !== null && stateVal !== undefined && stateVal !== false && stateVal !== 0 && stateVal !== '';
+                this.#applyResult(element, isActive
+                    ? { visible: action !== 'hide', enabled: action !== 'disable' }
+                    : { visible: true, enabled: true }
+                );
+                return;
             }
+
+            // No restrictions active → show/enable
+            this.#applyResult(element, { visible: true, enabled: true });
         } catch (err) {
             console.error('[Visibility] Check failed:', err);
         }
@@ -37,11 +89,15 @@ class VisibilityService {
             this.#originalDisplayStyles.set(element, element.style.display || '');
         }
 
-        await this.#checkAndApply(element, visibilityConfig);
+        await this.#checkAndApply(element, visibilityConfig, undefined);
 
         if (visibilityConfig.objectId) {
-            await iobrokerHandler.subscribeState(visibilityConfig.objectId, () => {
-                this.#checkAndApply(element, visibilityConfig);
+            let signalId = visibilityConfig.objectId;
+            if (typeof signalId === 'string' && signalId.startsWith('{')) {
+                try { signalId = JSON.parse(signalId).signal || signalId; } catch (e) { /* keep raw */ }
+            }
+            await iobrokerHandler.subscribeState(signalId, (_id, state) => {
+                this.#checkAndApply(element, visibilityConfig, state?.val);
             });
         }
     }
@@ -58,20 +114,24 @@ class VisibilityService {
     }
 
     async scanAndApply(container = document.body) {
-        const elements = container.querySelectorAll('[data-visibility-enabled="true"]');
-        for (const element of elements) {
+        // Collect all elements needing visibility handling (group control OR signal binding)
+        const groupElements = container.querySelectorAll('[data-visibility-enabled="true"]');
+        const signalElements = container.querySelectorAll('[data-visibility-signal]');
+        const seen = new Set();
+
+        for (const element of [...groupElements, ...signalElements]) {
+            if (seen.has(element)) continue;
+            seen.add(element);
             try {
                 const visibilityConfig = {
                     enabled: true,
-                    objectId: element.getAttribute('data-visibility-signal'),
-                    condition: element.getAttribute('data-visibility-condition') || '==',
-                    conditionValue: element.getAttribute('data-visibility-value') || '',
+                    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);
             } catch (err) {
-                console.error('[Visibility] Error parsing visibility config:', err);
+                console.error('[Visibility] Error:', err);
             }
         }
     }