iobroker.mywebui 1.37.34 → 1.37.36

package/io-package.json

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

package/package.json

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

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

@@ -424,6 +424,59 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
         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');
+        };
+
+        // 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], null, '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 bindLabel = document.createElement('span');
         bindLabel.textContent = 'Visibility';
         bindLabel.style.cssText = 'font-size:12px;font-weight:600;flex:1;';
@@ -434,34 +487,10 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
             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;';
+            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 = 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 ---

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

@@ -1,271 +1,76 @@
 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;
+            const result = await iobrokerHandler.checkVisibility(visibilityConfig);
 
-            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);
-            }
-
-            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);
+        } catch (err) {
+            console.error('[Visibility] Check failed:', 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);
-            }
+
+    async applyVisibility(element, visibilityConfig) {
+        if (!visibilityConfig || !visibilityConfig.enabled) return;
+
+        if (!this.#originalDisplayStyles.has(element)) {
+            this.#originalDisplayStyles.set(element, element.style.display || '');
         }
-        catch (err) {
-            console.error('[Visibility] Revalidation error:', err);
+
+        await this.#checkAndApply(element, visibilityConfig);
+
+        if (visibilityConfig.objectId) {
+            await iobrokerHandler.subscribeState(visibilityConfig.objectId, () => {
+                this.#checkAndApply(element, visibilityConfig);
+            });
         }
     }
-    
-    /**
-     * 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);
-        }
-        
-        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;
+            this.#originalDisplayStyles.delete(element);
         }
         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);
             }
         }