iobroker.mywebui 1.37.32 → 1.37.34

package/io-package.json

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

package/package.json

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

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

@@ -388,74 +388,97 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
     
     async _updateVisibilityPanel() {
         const visibilityDock = this._getDomElement('visibilityDock');
-        if (!visibilityDock) {
-            console.warn('⚠️ [Visibility] visibilityDock not found');
-            return;
-        }
-        
+        if (!visibilityDock) return;
+
         const content = visibilityDock.querySelector('#visibility-panel-content');
-        if (!content) {
-            console.warn('⚠️ [Visibility] Panel content not found');
-            return;
-        }
-        
-        // Use _selectedItems instead of selectedElements
+        if (!content) return;
+
         const selectedItems = this.propertyGrid.propertyGrid._selectedItems;
-        
-        console.log('🔍 [Visibility] Update called, selected:', selectedItems?.length || 0);
-        
+
         if (!selectedItems || selectedItems.length !== 1) {
             content.innerHTML = '<p style="color:#999;font-style:italic;">Select an element to configure visibility...</p>';
-            console.log('👁️ [Visibility] No selection');
             return;
         }
-        
-        console.log('👁️ [Visibility] Rendering UI for selected element...');
-        
-        const element = selectedItems[0].element;
-        
-        // Get current config from separate attributes
-        let config = {
+
+        const designItem = selectedItems[0];
+        const element = designItem.element;
+
+        // Read existing binding from bind-prop:hidden attribute
+        const bindAttr = element.getAttribute('bind-prop:hidden');
+        let existingBinding = null;
+        if (bindAttr != null) {
+            const parsed = bindingsHelper.parseBinding(element, 'bind-prop:hidden', bindAttr, 'property', 'bind-prop:');
+            if (parsed) existingBinding = parsed[1];
+        }
+
+        // Read group access control config from data attributes
+        const dataConfig = {
             enabled: element.getAttribute('data-visibility-enabled') === 'true',
-            objectId: element.getAttribute('data-visibility-signal') || '',
-            condition: element.getAttribute('data-visibility-condition') || '==',
-            conditionValue: element.getAttribute('data-visibility-value') || '',
-            action: element.getAttribute('data-visibility-action') || 'hide',
-            groups: element.getAttribute('data-visibility-groups')?.split(',').filter(g => g) || []
+            groups: element.getAttribute('data-visibility-groups')?.split(',').filter(g => g) || [],
+            action: element.getAttribute('data-visibility-action') || 'hide'
         };
-        
-        const updateConfig = (key, value) => {
-            config[key] = value;
-            
-            // Use DesignItem's setAttribute to properly persist in HTML
-            const designItem = selectedItems[0];
-            
-            designItem.setAttribute('data-visibility-enabled', config.enabled ? 'true' : 'false');
-            if (config.objectId) {
-                designItem.setAttribute('data-visibility-signal', config.objectId);
-            } else {
-                designItem.removeAttribute('data-visibility-signal');
-            }
-            if (config.condition) {
-                designItem.setAttribute('data-visibility-condition', config.condition);
-            }
-            if (config.conditionValue) {
-                designItem.setAttribute('data-visibility-value', config.conditionValue);
-            }
-            if (config.action) {
-                designItem.setAttribute('data-visibility-action', config.action);
-            }
-            if (config.groups && config.groups.length > 0) {
-                designItem.setAttribute('data-visibility-groups', config.groups.join(','));
-            } else {
-                designItem.removeAttribute('data-visibility-groups');
+
+        content.innerHTML = '';
+
+        // --- 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;';
+
+        const bindLabel = document.createElement('span');
+        bindLabel.textContent = 'Visibility';
+        bindLabel.style.cssText = 'font-size:12px;font-weight:600;flex:1;';
+        bindRow.appendChild(bindLabel);
+
+        if (existingBinding) {
+            const sig = existingBinding.signal || (existingBinding.expression ? 'expr' : '?');
+            const statusSpan = document.createElement('span');
+            statusSpan.textContent = sig;
+            statusSpan.title = JSON.stringify(existingBinding);
+            statusSpan.style.cssText = 'font-size:10px;color:#555;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;';
+            bindRow.appendChild(statusSpan);
+        }
+
+        const bindBtn = document.createElement('button');
+        bindBtn.textContent = '□';
+        bindBtn.title = 'Open binding editor';
+        bindBtn.style.cssText = existingBinding
+            ? 'width:20px;height:20px;padding:0;font-size:13px;line-height:1;border:1px solid #888;background:#ff0;cursor:pointer;flex-shrink:0;'
+            : 'width:20px;height:20px;padding:0;font-size:13px;line-height:1;border:1px solid #888;background:#f0f0f0;cursor:pointer;flex-shrink:0;';
+        bindBtn.onclick = () => {
+            const property = { name: 'hidden', propertyType: 'propertyAndAttribute' };
+            serviceContainer.config.openBindingsEditor(property, [designItem], existingBinding, 'property');
+        };
+        bindRow.appendChild(bindBtn);
+
+        if (existingBinding) {
+            const clearBtn = document.createElement('button');
+            clearBtn.textContent = '✕';
+            clearBtn.title = 'Remove binding';
+            clearBtn.style.cssText = 'width:20px;height:20px;padding:0;font-size:11px;line-height:1;border:1px solid #c66;background:#fee;cursor:pointer;color:#c00;flex-shrink:0;';
+            clearBtn.onclick = () => {
+                designItem.removeAttribute('bind-prop:hidden');
+                this._updateVisibilityPanel();
+            };
+            bindRow.appendChild(clearBtn);
+        }
+
+        content.appendChild(bindRow);
+
+        // --- GROUP ACCESS CONTROL ---
+        const updateGroupConfig = (key, value) => {
+            dataConfig[key] = value;
+            if (key === 'enabled') {
+                if (value) designItem.setAttribute('data-visibility-enabled', 'true');
+                else designItem.removeAttribute('data-visibility-enabled');
+            } else if (key === 'groups') {
+                if (value && value.length > 0) designItem.setAttribute('data-visibility-groups', value.join(','));
+                else designItem.removeAttribute('data-visibility-groups');
+            } else if (key === 'action') {
+                if (value) designItem.setAttribute('data-visibility-action', value);
+                else designItem.removeAttribute('data-visibility-action');
             }
-            
-            console.log('🔒 [Visibility] Config updated via DesignItem:', config);
         };
-        
-        content.innerHTML = '';
-        
+
         // Enable checkbox
         const enableDiv = document.createElement('div');
         enableDiv.style.cssText = 'margin-bottom:10px;';
@@ -463,51 +486,27 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
         enableLabel.style.cssText = 'display:flex;align-items:center;gap:5px;cursor:pointer;font-size:12px;';
         const enableCheck = document.createElement('input');
         enableCheck.type = 'checkbox';
-        enableCheck.checked = config.enabled || false;
-        enableCheck.onchange = () => updateConfig('enabled', enableCheck.checked);
+        enableCheck.checked = dataConfig.enabled || false;
+        enableCheck.onchange = () => updateGroupConfig('enabled', enableCheck.checked);
         enableLabel.appendChild(enableCheck);
-        enableLabel.appendChild(document.createTextNode('Enable Visibility Control'));
+        enableLabel.appendChild(document.createTextNode('Enable Group Visibility Control'));
         enableDiv.appendChild(enableLabel);
         content.appendChild(enableDiv);
-        
-        // Object ID with IOB selector button
-        const objIdField = this._createFieldWithButton('Object ID:', 'text', config.objectId || '', '0_userdata.0.test', 
-            (val) => updateConfig('objectId', val));
-        content.appendChild(objIdField);
-        
-        // Condition
-        const condDiv = document.createElement('div');
-        condDiv.style.cssText = 'margin-bottom:10px;';
-        const condLabel = document.createElement('label');
-        condLabel.style.cssText = 'font-size:11px;font-weight:600;display:block;margin-bottom:3px;color:#555;';
-        condLabel.textContent = 'Condition:';
-        const condSelect = document.createElement('select');
-        condSelect.style.cssText = 'width:100%;padding:6px;font-size:12px;border:1px solid #ccc;border-radius:3px;';
-        condSelect.innerHTML = '<option>==</option><option>!=</option><option>&gt;</option><option>&lt;</option><option>&gt;=</option><option>&lt;=</option>';
-        condSelect.value = config.condition || '==';
-        condSelect.onchange = () => updateConfig('condition', condSelect.value);
-        condDiv.appendChild(condLabel);
-        condDiv.appendChild(condSelect);
-        content.appendChild(condDiv);
-        
-        // Value for condition
-        content.appendChild(this._createField('Value for condition:', 'text', config.conditionValue || '', '1', 
-            (val) => updateConfig('conditionValue', val)));
-        
-        // User Groups
+
+        // Groups
         const groupsDiv = document.createElement('div');
         groupsDiv.style.cssText = 'margin-bottom:10px;';
         const groupsLabel = document.createElement('label');
         groupsLabel.style.cssText = 'font-size:11px;font-weight:600;display:block;margin-bottom:3px;color:#555;';
         groupsLabel.textContent = 'Only for groups:';
         groupsDiv.appendChild(groupsLabel);
-        
+
         const groupsList = document.createElement('div');
         groupsList.style.cssText = 'max-height:100px;overflow-y:auto;border:1px solid #ccc;padding:6px;background:#fff;border-radius:3px;';
-        
+
         const userGroups = await iobrokerHandler.getUserGroups();
-        const selectedGroups = config.groups || [];
-        
+        const selectedGroups = dataConfig.groups || [];
+
         userGroups.forEach(group => {
             const groupLabel = document.createElement('label');
             groupLabel.style.cssText = 'display:flex;align-items:center;gap:5px;font-size:11px;padding:3px;cursor:pointer;';
@@ -515,22 +514,22 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
             groupCheck.type = 'checkbox';
             groupCheck.checked = selectedGroups.includes(group.id);
             groupCheck.onchange = () => {
-                let groups = config.groups || [];
+                let groups = [...dataConfig.groups];
                 if (groupCheck.checked) {
                     if (!groups.includes(group.id)) groups.push(group.id);
                 } else {
                     groups = groups.filter(g => g !== group.id);
                 }
-                updateConfig('groups', groups);
+                updateGroupConfig('groups', groups);
             };
             groupLabel.appendChild(groupCheck);
             groupLabel.appendChild(document.createTextNode(group.name));
             groupsList.appendChild(groupLabel);
         });
-        
+
         groupsDiv.appendChild(groupsList);
         content.appendChild(groupsDiv);
-        
+
         // Action
         const actionDiv = document.createElement('div');
         actionDiv.style.cssText = 'margin-bottom:5px;';
@@ -540,80 +539,12 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
         const actionSelect = document.createElement('select');
         actionSelect.style.cssText = 'width:100%;padding:6px;font-size:12px;border:1px solid #ccc;border-radius:3px;';
         actionSelect.innerHTML = '<option value="hide">hide</option><option value="disable">disable</option>';
-        actionSelect.value = config.action || 'hide';
-        actionSelect.onchange = () => updateConfig('action', actionSelect.value);
+        actionSelect.value = dataConfig.action || 'hide';
+        actionSelect.onchange = () => updateGroupConfig('action', actionSelect.value);
         actionDiv.appendChild(actionLabel);
         actionDiv.appendChild(actionSelect);
         content.appendChild(actionDiv);
     }
-    
-    _createField(label, type, value, placeholder, onChange) {
-        const div = document.createElement('div');
-        div.style.cssText = 'margin-bottom:10px;';
-        const labelEl = document.createElement('label');
-        labelEl.style.cssText = 'font-size:11px;font-weight:600;display:block;margin-bottom:3px;color:#555;';
-        labelEl.textContent = label;
-        const input = document.createElement('input');
-        input.type = type;
-        input.value = value;
-        input.placeholder = placeholder;
-        input.style.cssText = 'width:100%;padding:6px;font-size:12px;border:1px solid #ccc;border-radius:3px;';
-        input.oninput = () => onChange(input.value);
-        div.appendChild(labelEl);
-        div.appendChild(input);
-        return div;
-    }
-    
-    _createFieldWithButton(label, type, value, placeholder, onChange) {
-        const div = document.createElement('div');
-        div.style.cssText = 'margin-bottom:10px;';
-        const labelEl = document.createElement('label');
-        labelEl.style.cssText = 'font-size:11px;font-weight:600;display:block;margin-bottom:3px;color:#555;';
-        labelEl.textContent = label;
-        
-        // Container for input + button
-        const inputContainer = document.createElement('div');
-        inputContainer.style.cssText = 'display:flex;gap:5px;';
-        
-        const input = document.createElement('input');
-        input.type = type;
-        input.value = value;
-        input.placeholder = placeholder;
-        input.style.cssText = 'flex:1;padding:6px;font-size:12px;border:1px solid #ccc;border-radius:3px;';
-        input.oninput = () => onChange(input.value);
-        
-        // IOB Button
-        const btn = document.createElement('button');
-        btn.textContent = 'IOB';
-        btn.title = 'ioBroker object selector';
-        btn.style.cssText = 'padding:6px 12px;font-size:11px;font-weight:bold;background:#2196f3;color:#fff;border:none;border-radius:3px;cursor:pointer;white-space:nowrap;';
-        btn.onmouseover = () => btn.style.background = '#1976d2';
-        btn.onmouseout = () => btn.style.background = '#2196f3';
-        btn.onclick = async () => {
-            try {
-                const res = await openSelectIdDialog({ 
-                    host: window.iobrokerHost, 
-                    port: window.iobrokerPort, 
-                    protocol: window.location.protocol, 
-                    language: 'en', 
-                    selected: input.value, 
-                    allowAll: true 
-                });
-                if (res) {
-                    input.value = res;
-                    onChange(res);
-                }
-            } catch (err) {
-                console.error('❌ [Visibility] Object selector error:', err);
-            }
-        };
-        
-        inputContainer.appendChild(input);
-        inputContainer.appendChild(btn);
-        div.appendChild(labelEl);
-        div.appendChild(inputContainer);
-        return div;
-    }
     /* Move to a Dock Spawn Helper */
     activateDockById(name) {
         this.activateDock(this._getDomElement(name));