iobroker.mywebui 1.37.31 → 1.37.33

package/io-package.json

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

package/package.json

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

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

@@ -388,231 +388,72 @@ 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 = {
-            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) || []
-        };
-        
-        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');
-            }
-            
-            console.log('🔒 [Visibility] Config updated via DesignItem:', config);
-        };
-        
+
+        const designItem = selectedItems[0];
+        const element = designItem.element;
+
+        // Read existing visible binding from bind-visible: attribute
+        const existingBindingAttr = element.getAttribute('bind-visible:');
+        let existingBinding = null;
+        if (existingBindingAttr != null) {
+            const parsed = bindingsHelper.parseBinding(element, 'bind-visible:', existingBindingAttr, 'visible', 'bind-visible:');
+            if (parsed) existingBinding = parsed[1];
+        }
+
         content.innerHTML = '';
-        
-        // Enable checkbox
-        const enableDiv = document.createElement('div');
-        enableDiv.style.cssText = 'margin-bottom:10px;';
-        const enableLabel = document.createElement('label');
-        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);
-        enableLabel.appendChild(enableCheck);
-        enableLabel.appendChild(document.createTextNode('Enable 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
-        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 || [];
-        
-        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;';
-            const groupCheck = document.createElement('input');
-            groupCheck.type = 'checkbox';
-            groupCheck.checked = selectedGroups.includes(group.id);
-            groupCheck.onchange = () => {
-                let groups = config.groups || [];
-                if (groupCheck.checked) {
-                    if (!groups.includes(group.id)) groups.push(group.id);
-                } else {
-                    groups = groups.filter(g => g !== group.id);
-                }
-                updateConfig('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;';
-        const actionLabel = document.createElement('label');
-        actionLabel.style.cssText = 'font-size:11px;font-weight:600;display:block;margin-bottom:3px;color:#555;';
-        actionLabel.textContent = 'If user not in group:';
-        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);
-        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);
-            }
+
+        // Property row: label + current signal + bind button + clear button
+        const row = document.createElement('div');
+        row.style.cssText = 'display:flex;align-items:center;gap:6px;padding:4px 0;';
+
+        const label = document.createElement('span');
+        label.textContent = 'Visibility';
+        label.style.cssText = 'font-size:12px;font-weight:600;flex:1;';
+        row.appendChild(label);
+
+        if (existingBinding) {
+            const statusSpan = document.createElement('span');
+            const sig = existingBinding.signal || (existingBinding.expression ? 'expr' : '?');
+            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;';
+            row.appendChild(statusSpan);
+        }
+
+        const bindBtn = document.createElement('button');
+        bindBtn.textContent = '□';
+        bindBtn.title = 'Open binding editor';
+        bindBtn.style.cssText = '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: 'visible' };
+            serviceContainer.config.openBindingsEditor(property, [designItem], existingBinding, 'visible');
         };
-        
-        inputContainer.appendChild(input);
-        inputContainer.appendChild(btn);
-        div.appendChild(labelEl);
-        div.appendChild(inputContainer);
-        return div;
+        row.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-visible:');
+                this._updateVisibilityPanel();
+            };
+            row.appendChild(clearBtn);
+        }
+
+        content.appendChild(row);
     }
     /* Move to a Dock Spawn Helper */
     activateDockById(name) {

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

@@ -3,15 +3,11 @@ import { iobrokerHandler } from "../common/IobrokerHandler.js";
 
 export class IobrokerWebuiPropertyGrid extends VisualizationPropertyGrid {
     saveCallback;
-    _visibilityPanel;
-    _visibilityPanelCreated = false;
     _screenVisibilityPanel;
     _screenVisibilityPanelCreated = false;
-    
+
     constructor() {
         super();
-        
-        // Watch for property grid changes without breaking parent
         this._setupScreenVisibilityObserver();
     }
     
@@ -47,166 +43,6 @@ export class IobrokerWebuiPropertyGrid extends VisualizationPropertyGrid {
         }, 200); // Check every 200ms
     }
     
-    _ensureVisibilityPanel() {
-        if (!this._visibilityPanelCreated) {
-            this._visibilityPanel = document.createElement('div');
-            this._visibilityPanel.id = 'visibility-panel';
-            this._visibilityPanel.style.cssText = 'padding:10px;border-top:2px solid #ccc;background:#fff;';
-            this._visibilityPanel.innerHTML = `
-                <h3 style="margin:5px 0 10px 0;font-size:13px;font-weight:bold;">🔒 Visibility</h3>
-                <div id="visibility-content"></div>
-            `;
-            
-            // Find property grid container and append
-            const container = this.shadowRoot || this;
-            if (container.querySelector) {
-                const target = container.querySelector('.property-grid-container') || container;
-                target.appendChild(this._visibilityPanel);
-            } else {
-                this.appendChild(this._visibilityPanel);
-            }
-            
-            this._visibilityPanelCreated = true;
-            console.log('✅ [Visibility] Panel created and appended');
-        }
-    }
-    
-    set selectedElements(value) {
-        super.selectedElements = value;
-        
-        // Ensure panel exists
-        setTimeout(() => {
-            this._ensureVisibilityPanel();
-            this._updateVisibilityPanel(value);
-        }, 50);
-    }
-    
-    async _updateVisibilityPanel(elements) {
-        if (!this._visibilityPanel) {
-            return;
-        }
-        
-        if (!elements || elements.length !== 1) {
-            this._visibilityPanel.style.display = 'none';
-            return;
-        }
-        
-        const element = elements[0].element;
-        this._visibilityPanel.style.display = 'block';
-        
-        const content = this._visibilityPanel.querySelector('#visibility-content');
-        content.innerHTML = '';
-        
-        // Get current config
-        const visibilityAttr = element.getAttribute('data-visibility');
-        let config = {};
-        if (visibilityAttr) {
-            try {
-                config = JSON.parse(visibilityAttr);
-            } catch (err) {}
-        }
-        
-        // Create UI
-        const updateConfig = (key, value) => {
-            config[key] = value;
-            element.setAttribute('data-visibility', JSON.stringify(config));
-            console.log('🔒 [Visibility] Updated:', config);
-        };
-        
-        // Enable checkbox
-        const enableContainer = document.createElement('label');
-        enableContainer.style.cssText = 'display:flex;align-items:center;gap:5px;margin-bottom:10px;cursor:pointer;';
-        const enableCheck = document.createElement('input');
-        enableCheck.type = 'checkbox';
-        enableCheck.checked = config.enabled || false;
-        enableCheck.onchange = () => updateConfig('enabled', enableCheck.checked);
-        enableContainer.appendChild(enableCheck);
-        enableContainer.appendChild(document.createTextNode('Enable Visibility Control'));
-        content.appendChild(enableContainer);
-        
-        // Object ID
-        const objContainer = document.createElement('div');
-        objContainer.style.cssText = 'margin-bottom:10px;';
-        objContainer.innerHTML = '<label style="font-size:11px;font-weight:bold;display:block;margin-bottom:3px;">Object ID:</label>';
-        const objInput = document.createElement('input');
-        objInput.type = 'text';
-        objInput.value = config.objectId || '';
-        objInput.placeholder = '0_userdata.0.test';
-        objInput.style.cssText = 'width:100%;padding:5px;font-size:11px;';
-        objInput.oninput = () => updateConfig('objectId', objInput.value);
-        objContainer.appendChild(objInput);
-        content.appendChild(objContainer);
-        
-        // Condition
-        const condContainer = document.createElement('div');
-        condContainer.style.cssText = 'margin-bottom:10px;';
-        condContainer.innerHTML = '<label style="font-size:11px;font-weight:bold;display:block;margin-bottom:3px;">Condition:</label>';
-        const condSelect = document.createElement('select');
-        condSelect.style.cssText = 'width:100%;padding:5px;font-size:11px;';
-        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);
-        condContainer.appendChild(condSelect);
-        content.appendChild(condContainer);
-        
-        // Value
-        const valContainer = document.createElement('div');
-        valContainer.style.cssText = 'margin-bottom:10px;';
-        valContainer.innerHTML = '<label style="font-size:11px;font-weight:bold;display:block;margin-bottom:3px;">Value:</label>';
-        const valInput = document.createElement('input');
-        valInput.type = 'text';
-        valInput.value = config.conditionValue || '';
-        valInput.placeholder = '1';
-        valInput.style.cssText = 'width:100%;padding:5px;font-size:11px;';
-        valInput.oninput = () => updateConfig('conditionValue', valInput.value);
-        valContainer.appendChild(valInput);
-        content.appendChild(valContainer);
-        
-        // User Groups
-        const groupsContainer = document.createElement('div');
-        groupsContainer.style.cssText = 'margin-bottom:10px;';
-        groupsContainer.innerHTML = '<label style="font-size:11px;font-weight:bold;display:block;margin-bottom:3px;">Only for groups:</label>';
-        const groupsList = document.createElement('div');
-        groupsList.style.cssText = 'max-height:100px;overflow-y:auto;border:1px solid #ccc;padding:5px;background:#f9f9f9;';
-        
-        const userGroups = await iobrokerHandler.getUserGroups();
-        const selectedGroups = config.groups || [];
-        
-        userGroups.forEach(group => {
-            const label = document.createElement('label');
-            label.style.cssText = 'display:flex;align-items:center;gap:5px;font-size:11px;padding:2px;cursor:pointer;';
-            const checkbox = document.createElement('input');
-            checkbox.type = 'checkbox';
-            checkbox.checked = selectedGroups.includes(group.id);
-            checkbox.onchange = () => {
-                let groups = config.groups || [];
-                if (checkbox.checked) {
-                    if (!groups.includes(group.id)) groups.push(group.id);
-                } else {
-                    groups = groups.filter(g => g !== group.id);
-                }
-                updateConfig('groups', groups);
-            };
-            label.appendChild(checkbox);
-            label.appendChild(document.createTextNode(group.name));
-            groupsList.appendChild(label);
-        });
-        
-        groupsContainer.appendChild(groupsList);
-        content.appendChild(groupsContainer);
-        
-        // Action
-        const actionContainer = document.createElement('div');
-        actionContainer.innerHTML = '<label style="font-size:11px;font-weight:bold;display:block;margin-bottom:3px;">If not in group:</label>';
-        const actionSelect = document.createElement('select');
-        actionSelect.style.cssText = 'width:100%;padding:5px;font-size:11px;';
-        actionSelect.innerHTML = '<option value="hide">Hide</option><option value="disable">Disable</option>';
-        actionSelect.value = config.action || 'hide';
-        actionSelect.onchange = () => updateConfig('action', actionSelect.value);
-        actionContainer.appendChild(actionSelect);
-        content.appendChild(actionContainer);
-    }
-    
     _ensureScreenVisibilityPanel() {
         if (!this._screenVisibilityPanelCreated) {
             this._screenVisibilityPanel = document.createElement('div');

package/www/dist/frontend/services/IobrokerWebuiVisibilityPropertiesService.js

@@ -37,12 +37,6 @@ export class IobrokerWebuiVisibilityPropertiesService {
                 type: 'boolean',
                 service: this,
                 propertyType: PropertyType.propertyAndAttribute
-            },
-            {
-                name: 'data-visibility',
-                type: 'string',
-                service: this,
-                propertyType: PropertyType.propertyAndAttribute
             }
         ];