iobroker.mywebui 1.42.46 → 1.42.47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iobroker.mywebui",
-  "version": "1.42.46",
+  "version": "1.42.47",
   "description": "ioBroker mywebui - Custom edited mywebui by gokturk413 with 3D Editor",
   "type": "module",
   "main": "dist/backend/main.js",

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

@@ -2151,35 +2151,28 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
 
     // ── 3D Screen Properties Mode ──────────────────────────────────────────────
 
-    _3dPropsActive = false;
-    _3dPropsPanel  = null;
-    _3dProjPanel   = null;
+    _3dPropsActive  = false;
+    _3dPropsPanel   = null;
+    _3dSettPanel    = null;
 
     _activate3DPropertiesMode(editor3DEl) {
         if (this._3dPropsActive) return;
         this._3dPropsActive = true;
 
-        const attrDock = this._getDomElement('attributeDock');
-        const projDock = this._getDomElement('effectsDock');
+        const attrDock  = this._getDomElement('attributeDock');
+        const settiDock = this._getDomElement('settingsDock');
 
-        // Hide existing children of attributeDock only
-        if (attrDock) {
-            for (const c of attrDock.children) {
-                c.__3d_prev_display = c.style.display;
-                c.style.display = 'none';
-            }
-        }
-        if (projDock) {
-            for (const c of projDock.children) {
-                c.__3d_prev_display = c.style.display;
-                c.style.display = 'none';
-            }
-        }
+        // Hide existing children of attributeDock and settingsDock
+        const hideChildren = el => {
+            if (!el) return;
+            for (const c of el.children) { c.__3d_prev_display = c.style.display; c.style.display = 'none'; }
+        };
+        hideChildren(attrDock);
+        hideChildren(settiDock);
 
         const tryConnect = () => {
             if (!editor3DEl._editor) { setTimeout(tryConnect, 200); return; }
             const ed = editor3DEl._editor;
-            const base = new URL('../../../3d-editor/js/', import.meta.url).href;
 
             // ── attributeDock: 3D Bindings panel ──────────────────────────
             if (attrDock) {
@@ -2191,24 +2184,106 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
                 this._3dPropsPanel = propPanel;
             }
 
-            // ── effectsDock: SidebarProject (Geometries / Materials / Textures) ──
-            if (projDock) {
+            // ── settingsDock: Screen Visibility Control ────────────────────
+            if (settiDock) {
                 const wrap = document.createElement('div');
-                wrap.id = '__3d_proj';
-                wrap.style.cssText = 'width:100%;height:100%;overflow:auto;background:#1a1a1a;';
-                import(/* @vite-ignore */ base + 'Sidebar.Project.js').then(({ SidebarProject }) => {
-                    const p = new SidebarProject(ed);
-                    p.dom.style.cssText = 'padding:8px;';
-                    wrap.appendChild(p.dom);
-                });
-                projDock.appendChild(wrap);
-                this._3dProjPanel = wrap;
+                wrap.id = '__3d_setti';
+                wrap.style.cssText = 'width:100%;height:100%;overflow-y:auto;box-sizing:border-box;';
+                this._build3DVisibilityPanel(wrap, editor3DEl);
+                settiDock.appendChild(wrap);
+                this._3dSettPanel = wrap;
             }
         };
 
         tryConnect();
     }
 
+    _build3DVisibilityPanel(container, editor3DEl) {
+        const sceneData = editor3DEl.sceneData ?? {};
+        editor3DEl.sceneData = sceneData;
+        const settings = sceneData.settings ?? {};
+        sceneData.settings = settings;
+        if (!settings.visibilityEnabled)       settings.visibilityEnabled = false;
+        if (!settings.visibilityGroups)        settings.visibilityGroups  = [];
+        if (!settings.visibilityAction)        settings.visibilityAction  = 'hide';
+        if (!settings.visibilityRedirectScreen) settings.visibilityRedirectScreen = '';
+
+        container.innerHTML = `
+            <div style="padding:15px;border:3px solid #2196F3;background:linear-gradient(135deg,#e3f2fd 0%,#bbdefb 100%);margin:10px;border-radius:8px;box-shadow:0 4px 6px rgba(0,0,0,.1);">
+                <h3 style="margin:0 0 15px;font-size:16px;font-weight:bold;color:#1565C0;">🔒 Screen Visibility Control</h3>
+                <div id="__3dvis_content"></div>
+            </div>`;
+
+        const content = container.querySelector('#__3dvis_content');
+
+        content.innerHTML = `
+            <div style="padding:10px;background:#fff3cd;border:1px solid #ffc107;border-radius:4px;margin-bottom:15px;font-size:12px;color:#856404;">
+                💡 <strong>Tip:</strong> Don't forget to save (Ctrl+S) after changing settings!
+            </div>
+            <div style="margin-bottom:15px;">
+                <label style="display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;font-weight:500;">
+                    <input type="checkbox" id="__3dv_en" ${settings.visibilityEnabled ? 'checked' : ''} style="width:16px;height:16px;cursor:pointer;"/>
+                    <span>Enable Screen Visibility Control</span>
+                </label>
+            </div>
+            <div style="margin:15px 0;">
+                <label style="font-size:13px;font-weight:600;display:block;margin-bottom:10px;color:#555;">Only for groups:</label>
+                <div id="__3dv_groups" style="border:1px solid #ccc;padding:10px;background:#fff;border-radius:4px;max-height:150px;overflow-y:auto;">
+                    <p style="font-size:12px;color:#999;">⏳ Loading groups...</p>
+                </div>
+            </div>
+            <div style="margin:15px 0;">
+                <label style="font-size:13px;font-weight:600;display:block;margin-bottom:8px;color:#555;">If user not in group:</label>
+                <select id="__3dv_act" style="width:100%;padding:8px;font-size:13px;border:1px solid #ccc;border-radius:4px;background:#fff;">
+                    <option value="hide" ${settings.visibilityAction === 'hide' ? 'selected' : ''}>Show "Access Denied" message</option>
+                    <option value="redirect" ${settings.visibilityAction === 'redirect' ? 'selected' : ''}>Redirect to another screen</option>
+                </select>
+            </div>
+            <div id="__3dv_rdiv" style="margin:15px 0;display:${settings.visibilityAction === 'redirect' ? 'block' : 'none'};">
+                <label style="font-size:13px;font-weight:600;display:block;margin-bottom:8px;color:#555;">Redirect to screen:</label>
+                <input type="text" id="__3dv_redir" placeholder="Enter screen name"
+                    value="${settings.visibilityRedirectScreen || ''}"
+                    style="width:100%;padding:8px;font-size:13px;border:1px solid #ccc;border-radius:4px;background:#fff;box-sizing:border-box;"/>
+            </div>`;
+
+        content.querySelector('#__3dv_en')?.addEventListener('change', e => { settings.visibilityEnabled = e.target.checked; });
+        const actEl = content.querySelector('#__3dv_act');
+        const rdDiv = content.querySelector('#__3dv_rdiv');
+        actEl?.addEventListener('change', e => {
+            settings.visibilityAction = e.target.value;
+            if (rdDiv) rdDiv.style.display = e.target.value === 'redirect' ? 'block' : 'none';
+        });
+        content.querySelector('#__3dv_redir')?.addEventListener('input', e => { settings.visibilityRedirectScreen = e.target.value; });
+
+        // Load groups async
+        const grpEl = content.querySelector('#__3dv_groups');
+        iobrokerHandler.getUserGroups?.().then(groups => {
+            if (!grpEl) return;
+            if (!groups?.length) { grpEl.innerHTML = '<div style="padding:10px;color:#f44336;">⚠️ No groups found!</div>'; return; }
+            let html = '';
+            groups.forEach(g => {
+                const id  = g.id ?? g._id ?? g.name ?? g;
+                const lbl = g.name ?? id;
+                const chk = (settings.visibilityGroups || []).includes(id);
+                html += `<div style="padding:8px;margin:4px 0;background:#f9f9f9;border-radius:3px;">
+                    <label style="display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;">
+                        <input type="checkbox" ${chk ? 'checked' : ''} data-gid="${id}" style="width:16px;height:16px;cursor:pointer;"/>
+                        <span>${lbl}</span>
+                    </label></div>`;
+            });
+            grpEl.innerHTML = html;
+            grpEl.querySelectorAll('input[data-gid]').forEach(cb => {
+                cb.addEventListener('change', e => {
+                    const gid = cb.dataset.gid;
+                    let arr = settings.visibilityGroups || [];
+                    if (e.target.checked) { if (!arr.includes(gid)) arr.push(gid); }
+                    else arr = arr.filter(x => x !== gid);
+                    settings.visibilityGroups = arr;
+                });
+            });
+        }).catch(() => { if (grpEl) grpEl.innerHTML = '<div style="padding:10px;color:#f44336;">⚠️ Error loading groups</div>'; });
+    }
+
     _deactivate3DPropertiesMode() {
         if (!this._3dPropsActive) return;
         this._3dPropsActive = false;
@@ -2226,10 +2301,10 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
         };
 
         restore('attributeDock', this._3dPropsPanel);
-        restore('effectsDock',   this._3dProjPanel);
+        restore('settingsDock',  this._3dSettPanel);
 
         this._3dPropsPanel = null;
-        this._3dProjPanel  = null;
+        this._3dSettPanel  = null;
     }
 }
 window.customElements.define('iobroker-webui-app-shell', IobrokerWebuiAppShell);