iobroker.mywebui 1.37.33 → 1.37.35

package/io-package.json

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

package/package.json

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

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

@@ -403,57 +403,176 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
         const designItem = selectedItems[0];
         const element = designItem.element;
 
-        // Read existing visible binding from bind-visible: attribute
-        const existingBindingAttr = element.getAttribute('bind-visible:');
+        // Read existing binding from bind-prop:hidden attribute
+        const bindAttr = element.getAttribute('bind-prop:hidden');
         let existingBinding = null;
-        if (existingBindingAttr != null) {
-            const parsed = bindingsHelper.parseBinding(element, 'bind-visible:', existingBindingAttr, 'visible', 'bind-visible:');
+        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',
+            groups: element.getAttribute('data-visibility-groups')?.split(',').filter(g => g) || [],
+            action: element.getAttribute('data-visibility-action') || 'hide'
+        };
+
         content.innerHTML = '';
 
-        // 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;';
+        // --- 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
+        bindBtn.onclick = () => {
+            const property = { name: 'hidden', propertyType: 'propertyAndAttribute' };
+            serviceContainer.config.openBindingsEditor(property, [designItem], existingBinding, 'property');
+        };
+
+        // Right-click: context menu (like Properties panel)
+        bindBtn.oncontextmenu = (e) => {
+            e.preventDefault();
+            const existing = document.getElementById('__vis-ctx-menu');
+            if (existing) existing.remove();
+
+            const menu = document.createElement('div');
+            menu.id = '__vis-ctx-menu';
+            menu.style.cssText = `position:fixed;left:${e.clientX}px;top:${e.clientY}px;background:#2d2d2d;color:#ddd;
+                font-size:12px;border:1px solid #555;border-radius:3px;z-index:99999;min-width:130px;box-shadow:2px 2px 6px rgba(0,0,0,0.5);`;
+
+            const addItem = (text, cb, disabled = false) => {
+                const item = document.createElement('div');
+                item.textContent = text;
+                item.style.cssText = `padding:6px 12px;cursor:${disabled ? 'default' : 'pointer'};color:${disabled ? '#666' : '#ddd'};`;
+                if (!disabled) {
+                    item.onmouseenter = () => item.style.background = '#3e6db4';
+                    item.onmouseleave = () => item.style.background = '';
+                    item.onclick = () => { menu.remove(); cb(); };
+                }
+                menu.appendChild(item);
+            };
+
+            addItem('edit binding', () => {
+                const property = { name: 'hidden', propertyType: 'propertyAndAttribute' };
+                serviceContainer.config.openBindingsEditor(property, [designItem], existingBinding, 'property');
+            });
+            addItem('clear binding', () => {
+                designItem.removeAttribute('bind-prop:hidden');
+                this._updateVisibilityPanel();
+            }, !existingBinding);
+
+            document.body.appendChild(menu);
+            const close = (ev) => { if (!menu.contains(ev.target)) { menu.remove(); document.removeEventListener('mousedown', close); } };
+            setTimeout(() => document.addEventListener('mousedown', close), 0);
+        };
+
+        bindRow.appendChild(bindBtn);
 
-        const label = document.createElement('span');
-        label.textContent = 'Visibility';
-        label.style.cssText = 'font-size:12px;font-weight:600;flex:1;';
-        row.appendChild(label);
+        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 statusSpan = document.createElement('span');
             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;';
-            row.appendChild(statusSpan);
+            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);
         }
 
-        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');
+        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');
+            }
         };
-        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();
+        // 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 = dataConfig.enabled || false;
+        enableCheck.onchange = () => updateGroupConfig('enabled', enableCheck.checked);
+        enableLabel.appendChild(enableCheck);
+        enableLabel.appendChild(document.createTextNode('Enable Group Visibility Control'));
+        enableDiv.appendChild(enableLabel);
+        content.appendChild(enableDiv);
+
+        // 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 = 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;';
+            const groupCheck = document.createElement('input');
+            groupCheck.type = 'checkbox';
+            groupCheck.checked = selectedGroups.includes(group.id);
+            groupCheck.onchange = () => {
+                let groups = [...dataConfig.groups];
+                if (groupCheck.checked) {
+                    if (!groups.includes(group.id)) groups.push(group.id);
+                } else {
+                    groups = groups.filter(g => g !== group.id);
+                }
+                updateGroupConfig('groups', groups);
             };
-            row.appendChild(clearBtn);
-        }
+            groupLabel.appendChild(groupCheck);
+            groupLabel.appendChild(document.createTextNode(group.name));
+            groupsList.appendChild(groupLabel);
+        });
+
+        groupsDiv.appendChild(groupsList);
+        content.appendChild(groupsDiv);
 
-        content.appendChild(row);
+        // 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 = dataConfig.action || 'hide';
+        actionSelect.onchange = () => updateGroupConfig('action', actionSelect.value);
+        actionDiv.appendChild(actionLabel);
+        actionDiv.appendChild(actionSelect);
+        content.appendChild(actionDiv);
     }
     /* Move to a Dock Spawn Helper */
     activateDockById(name) {

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

@@ -1,271 +1,65 @@
 import { iobrokerHandler } from '../common/IobrokerHandler.js';
 
-/**
- * Visibility Service - Handles element visibility based on user groups and conditions
- * Provides protection against browser manipulation
- */
 class VisibilityService {
     static instance = new VisibilityService();
-    
-    #intervalChecks = new Map();
-    #originalDisplayStyles = new WeakMap();
-    #configs = new WeakMap();
-    #tampering = false;
-    
-    constructor() {
-        this.#setupAntiTampering();
-    }
-    
-    /**
-     * Setup anti-tampering detection
-     */
-    #setupAntiTampering() {
-        // Detect DevTools opening
-        const detectDevTools = () => {
-            const threshold = 160;
-            const widthThreshold = window.outerWidth - window.innerWidth > threshold;
-            const heightThreshold = window.outerHeight - window.innerHeight > threshold;
-            
-            if (widthThreshold || heightThreshold) {
-                if (!this.#tampering) {
-                    this.#tampering = true;
-                    console.warn('⚠️ [Visibility] Developer tools detected - visibility checks will be re-validated');
-                    this.#revalidateAll();
-                }
-            } else {
-                this.#tampering = false;
-            }
-        };
-        
-        setInterval(detectDevTools, 1000);
-        
-        // Detect element.style modifications
-        this.#setupMutationObserver();
-    }
-    
-    /**
-     * Setup mutation observer to detect tampering
-     */
-    #setupMutationObserver() {
-        const observer = new MutationObserver((mutations) => {
-            for (const mutation of mutations) {
-                const element = mutation.target;
-
-                if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
-                    if (element.hasAttribute('data-visibility-controlled')) {
-                        console.warn('🚨 [Visibility] Style tampered:', element);
-                        this.#revalidateElement(element);
-                    }
-                }
 
-                // data-visibility-controlled silinib — bypass cəhdi
-                if (mutation.type === 'attributes' && mutation.attributeName === 'data-visibility-controlled') {
-                    if (!element.hasAttribute('data-visibility-controlled') && this.#configs.has(element)) {
-                        console.warn('🚨 [Visibility] Controlled attribute removed — restoring');
-                        element.setAttribute('data-visibility-controlled', 'true');
-                        this.#revalidateElement(element);
-                    }
-                }
-            }
-        });
-        
-        observer.observe(document.body, {
-            attributes: true,
-            subtree: true,
-            attributeFilter: ['style', 'data-visibility-controlled']
-        });
-    }
-    
-    /**
-     * Apply visibility rules to an element
-     * @param {HTMLElement} element 
-     * @param {object} visibilityConfig 
-     */
-    async applyVisibility(element, visibilityConfig) {
-        if (!visibilityConfig || !visibilityConfig.enabled) {
-            return;
-        }
-        
-        console.log('🔍 [Visibility] Applying visibility rules to:', element.tagName, visibilityConfig);
-        
-        // Store original display style
-        if (!this.#originalDisplayStyles.has(element)) {
-            this.#originalDisplayStyles.set(element, element.style.display || '');
-        }
-        
-        // Config-i memory-də saxla — DOM-da sensitiv məlumat saxlama
-        this.#configs.set(element, visibilityConfig);
-
-        // Yalnız "izlənilir" işarəsi
-        element.setAttribute('data-visibility-controlled', 'true');
+    #originalDisplayStyles = new WeakMap();
 
-        // Initial check
-        await this.#checkAndApply(element, visibilityConfig);
-        
-        // Subscribe to datapoint changes if objectId specified
-        if (visibilityConfig.objectId) {
-            console.log('📡 [Visibility] Subscribing to state changes:', visibilityConfig.objectId);
-            await iobrokerHandler.subscribeState(visibilityConfig.objectId, (id, state) => {
-                console.log('🔔 [Visibility] State changed:', id, 'new value:', state?.val);
-                this.#checkAndApply(element, visibilityConfig);
-            });
-        }
-        
-        // Periodic re-validation (protection against tampering)
-        const intervalId = setInterval(() => {
-            this.#checkAndApply(element, visibilityConfig);
-        }, 30000); // Check every 30 seconds (subscription handles real-time updates)
-        
-        this.#intervalChecks.set(element, intervalId);
-    }
-    
-    /**
-     * Check visibility and apply
-     */
     async #checkAndApply(element, visibilityConfig) {
         try {
-            let result;
-
-            if (visibilityConfig.groups && visibilityConfig.groups.length > 0) {
-                // Qrup yoxlaması → backend-ə sendTo: qrupları backend DB-dən oxuyur, frontend-ə inanmır
-                const username = await iobrokerHandler.connection.getCurrentUser();
-                if (username) {
-                    result = await iobrokerHandler.connection.sendTo(
-                        'mywebui.0',
-                        'checkVisibility',
-                        { username, allowedGroups: visibilityConfig.groups }
-                    );
-                    result = result ?? { visible: false };
-                } else {
-                    // User alınmadı → fallback
-                    result = await iobrokerHandler.checkVisibility(visibilityConfig);
-                }
-            } else {
-                // Qrup yoxlaması yoxdur → datapoint condition yoxlaması (frontend)
-                result = await iobrokerHandler.checkVisibility(visibilityConfig);
-            }
+            const result = await iobrokerHandler.checkVisibility(visibilityConfig);
 
-            console.log('✅ [Visibility] Check result for', element.tagName, ':', { visible: result.visible, enabled: result.enabled });
-            
-            // Apply visibility
             if (!result.visible) {
                 element.style.display = 'none';
                 element.style.visibility = 'hidden';
-                element.setAttribute('aria-hidden', 'true');
             } else {
-                const originalDisplay = this.#originalDisplayStyles.get(element) || '';
-                element.style.display = originalDisplay;
-                element.style.visibility = 'visible';
-                element.removeAttribute('aria-hidden');
+                const orig = this.#originalDisplayStyles.get(element) || '';
+                element.style.display = orig;
+                element.style.visibility = '';
             }
-            
-            // Apply enabled/disabled
+
             if (!result.enabled) {
                 element.style.pointerEvents = 'none';
                 element.style.opacity = '0.5';
-                element.setAttribute('disabled', 'true');
-                if (element.setAttribute) {
-                    element.setAttribute('data-disabled-by-visibility', 'true');
-                }
             } else {
                 element.style.pointerEvents = '';
                 element.style.opacity = '';
-                element.removeAttribute('disabled');
-                element.removeAttribute('data-disabled-by-visibility');
-            }
-            
-            // Store encrypted hash to detect tampering
-            this.#storeElementHash(element, result);
-        }
-        catch (err) {
-            console.error('❌ [Visibility] Failed to check visibility:', err);
-        }
-    }
-    
-    /**
-     * Store element hash for tampering detection
-     */
-    #storeElementHash(element, result) {
-        const hash = btoa(JSON.stringify({ 
-            visible: result.visible, 
-            enabled: result.enabled,
-            timestamp: Date.now() 
-        }));
-        element.setAttribute('data-visibility-hash', hash);
-    }
-    
-    /**
-     * Validate element hasn't been tampered
-     */
-    async #revalidateElement(element) {
-        try {
-            // DOM-dan deyil, WeakMap-dan oxu — attribute dəyişdirilsə belə orijinal config qalır
-            const config = this.#configs.get(element);
-            if (config?.enabled) {
-                await this.#checkAndApply(element, config);
             }
-        }
-        catch (err) {
-            console.error('[Visibility] Revalidation error:', err);
+        } catch (err) {
+            console.error('[Visibility] Check failed:', err);
         }
     }
-    
-    /**
-     * Revalidate all controlled elements
-     */
-    #revalidateAll() {
-        const controlled = document.querySelectorAll('[data-visibility-controlled="true"]');
-        controlled.forEach(element => {
-            this.#revalidateElement(element);
-        });
-    }
-    
-    /**
-     * Remove visibility control from element
-     */
-    removeVisibility(element) {
-        const intervalId = this.#intervalChecks.get(element);
-        if (intervalId) {
-            clearInterval(intervalId);
-            this.#intervalChecks.delete(element);
+
+    async applyVisibility(element, visibilityConfig) {
+        if (!visibilityConfig || !visibilityConfig.enabled) return;
+
+        if (!this.#originalDisplayStyles.has(element)) {
+            this.#originalDisplayStyles.set(element, element.style.display || '');
         }
-        
-        this.#configs.delete(element);
-        element.removeAttribute('data-visibility-controlled');
-        element.removeAttribute('data-visibility-hash');
-        
-        // Restore original style
-        const originalDisplay = this.#originalDisplayStyles.get(element);
-        if (originalDisplay !== undefined) {
-            element.style.display = originalDisplay;
+
+        await this.#checkAndApply(element, visibilityConfig);
+
+        if (visibilityConfig.objectId) {
+            await iobrokerHandler.subscribeState(visibilityConfig.objectId, () => {
+                this.#checkAndApply(element, visibilityConfig);
+            });
         }
-        element.style.visibility = '';
-        element.style.pointerEvents = '';
-        element.style.opacity = '';
     }
-    
-    /**
-     * Scan and apply visibility to all elements with visibility config
-     */
+
     async scanAndApply(container = document.body) {
         const elements = container.querySelectorAll('[data-visibility-enabled="true"]');
-        console.log(`🔍 [Visibility] Scanning ${elements.length} elements with visibility config`);
-        
         for (const element of elements) {
             try {
-                // Read config from separate attributes
                 const visibilityConfig = {
-                    enabled: element.getAttribute('data-visibility-enabled') === 'true',
+                    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) || []
                 };
-                
                 await this.applyVisibility(element, visibilityConfig);
-            }
-            catch (err) {
+            } catch (err) {
                 console.error('[Visibility] Error parsing visibility config:', err);
             }
         }