iobroker.mywebui 1.37.33 → 1.37.34

package/io-package.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iobroker.mywebui",
-  "version": "1.37.33",
+  "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

@@ -403,43 +403,52 @@ 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;';
 
-        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);
+            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.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: 'visible' };
-            serviceContainer.config.openBindingsEditor(property, [designItem], existingBinding, 'visible');
+            const property = { name: 'hidden', propertyType: 'propertyAndAttribute' };
+            serviceContainer.config.openBindingsEditor(property, [designItem], existingBinding, 'property');
         };
-        row.appendChild(bindBtn);
+        bindRow.appendChild(bindBtn);
 
         if (existingBinding) {
             const clearBtn = document.createElement('button');
@@ -447,13 +456,94 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
             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:');
+                designItem.removeAttribute('bind-prop:hidden');
                 this._updateVisibilityPanel();
             };
-            row.appendChild(clearBtn);
+            bindRow.appendChild(clearBtn);
         }
 
-        content.appendChild(row);
+        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');
+            }
+        };
+
+        // 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);
+            };
+            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 = 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) {