iobroker.mywebui 1.42.43 → 1.42.44

package/io-package.json

@@ -1,7 +1,7 @@
 {
   "common": {
     "name": "mywebui",
-    "version": "1.42.43",
+    "version": "1.42.44",
     "titleLang": {
       "en": "mywebui",
       "de": "mywebui",
@@ -29,6 +29,13 @@
       "zh-cn": "使用万维网传送器的高锰用户接口"
     },
     "news": {
+      "1.42.44": {
+        "en": "feature: multi-project support - project selector with create/delete in solution explorer; existing data stays as 'default' project, new projects under projects/<name>/; runtime preview passes ?project=, plain runtime.html always shows default (kiosk safe)",
+        "az": "yenilik: multi-proyekt dəstəyi - solution explorer-də yarat/sil düymələri ilə proyekt seçici; mövcud data 'default' proyekt kimi qalır, yeni proyektlər projects/<ad>/ altında; runtime önizləmə ?project= ötürür, parametrsiz runtime.html həmişə default göstərir (kiosk təhlükəsiz)",
+        "tr": "yenilik: çoklu proje desteği - solution explorer'da oluştur/sil düğmeleriyle proje seçici; mevcut veri 'default' proje olarak kalır, yeni projeler projects/<ad>/ altında; runtime önizleme ?project= geçirir, parametresiz runtime.html her zaman default gösterir (kiosk güvenli)",
+        "ru": "новое: поддержка нескольких проектов - селектор проектов с созданием/удалением в solution explorer; существующие данные остаются проектом 'default', новые проекты в projects/<имя>/; предпросмотр runtime передаёт ?project=, runtime.html без параметра всегда показывает default (безопасно для киосков)",
+        "de": "Neu: Multi-Projekt-Unterstützung - Projektauswahl mit Erstellen/Löschen im Solution Explorer; bestehende Daten bleiben als 'default'-Projekt, neue Projekte unter projects/<name>/; Runtime-Vorschau übergibt ?project=, runtime.html ohne Parameter zeigt immer default (kiosksicher)"
+      },
       "1.42.43": {
         "en": "refactor: all @gokturk413/@node-projects fork packages vendored into www/libs (edited directly in repo, removed from npm dependencies); build script made safe (gulp delAll no longer deletes www frontend sources)",
         "az": "refaktor: bütün @gokturk413/@node-projects fork paketləri www/libs-ə vendorlandı (birbaşa repo-da redaktə olunur, npm asılılıqlarından çıxarıldı); build scripti təhlükəsiz edildi (gulp delAll artıq www frontend mənbələrini silmir)",

package/package.json

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

package/www/dist/frontend/common/IobrokerHandler.js

@@ -7,12 +7,24 @@ export class IobrokerHandler {
     host;
     connection;
     adapterName = "mywebui";
-    configPath = "config/";
     namespace = "mywebui.0";
     namespaceFiles = this.namespace + '.data';
     namespaceWidgets = this.namespace + '.widgets';
-    imagePrefix = '/' + this.namespaceFiles + '/config/images/';
-    additionalFilePrefix = '/' + this.namespaceFiles + '/config/additionalfiles/';
+    // multi project support: the 'default' project is the legacy flat 'config/' folder,
+    // every other project lives under 'projects/<name>/config/' with the same structure
+    #currentProject = 'default';
+    get currentProject() {
+        return this.#currentProject;
+    }
+    get configPath() {
+        return this.#currentProject === 'default' ? 'config/' : 'projects/' + this.#currentProject + '/config/';
+    }
+    get imagePrefix() {
+        return '/' + this.namespaceFiles + '/' + this.configPath + 'images/';
+    }
+    get additionalFilePrefix() {
+        return '/' + this.namespaceFiles + '/' + this.configPath + 'additionalfiles/';
+    }
     config;
     globalStylesheet;
     fontDeclarationsStylesheet;
@@ -38,6 +50,75 @@ export class IobrokerHandler {
         this.#cache.set('control', new Map());
         this.#cache.set('3dscreen', new Map());
         this.#cache.set('3dcontrol', new Map());
+        // active project: explicit ?project= url parameter wins (used by runtime/kiosk links),
+        // otherwise the config editor remembers the last selection per browser.
+        // plain runtime.html without parameter always shows the 'default' project,
+        // so kiosk displays are not affected by what is edited in the designer.
+        try {
+            const urlProject = new URLSearchParams(window.location.search).get('project');
+            if (urlProject)
+                this.#currentProject = this._cleanProjectName(urlProject);
+            else if (!window.location.pathname.endsWith('runtime.html'))
+                this.#currentProject = this._cleanProjectName(localStorage.getItem('webui-current-project') ?? 'default');
+        }
+        catch (e) {
+            console.warn('could not determine current project', e);
+        }
+    }
+    _cleanProjectName(name) {
+        name = (name ?? '').toString().trim().toLowerCase().replaceAll(' ', '-');
+        if (!/^[a-z0-9_-]+$/.test(name))
+            return 'default';
+        return name;
+    }
+    async getProjects() {
+        if (this._readyPromises)
+            await this.waitForReady();
+        try {
+            const list = await this._getObjectFromFile('projects.json');
+            if (Array.isArray(list?.projects)) {
+                const projects = list.projects.filter(x => /^[a-z0-9_-]+$/.test(x));
+                if (!projects.includes('default'))
+                    projects.unshift('default');
+                return projects;
+            }
+        }
+        catch (e) { }
+        return ['default'];
+    }
+    async createProject(name) {
+        name = (name ?? '').toString().trim().toLowerCase().replaceAll(' ', '-');
+        if (!/^[a-z0-9_-]+$/.test(name))
+            throw new Error('invalid project name (use a-z, 0-9, -, _): ' + name);
+        const projects = await this.getProjects();
+        if (projects.includes(name))
+            throw new Error('project already exists: ' + name);
+        projects.push(name);
+        await this._saveObjectToFile({ projects: projects.filter(x => x !== 'default') }, 'projects.json');
+        await this._saveObjectToFile({ globalStyle: null, globalScript: null, globalConfig: null, fontDeclarations: null }, 'projects/' + name + '/config/config.json');
+        return name;
+    }
+    async removeProject(name) {
+        if (name === 'default')
+            throw new Error("the 'default' project cannot be deleted");
+        const projects = (await this.getProjects()).filter(x => x !== name && x !== 'default');
+        await this._saveObjectToFile({ projects }, 'projects.json');
+        try {
+            await this.connection.deleteFolder(this.namespaceFiles, '/projects/' + name);
+        }
+        catch (e) {
+            console.warn('error deleting project folder', e);
+        }
+        if (this.#currentProject === name)
+            this.setCurrentProject('default');
+    }
+    // switching reloads the page: global style/script/translations/custom controls
+    // are all project scoped, a clean reload is the only safe way to swap them
+    setCurrentProject(name) {
+        localStorage.setItem('webui-current-project', this._cleanProjectName(name));
+        const url = new URL(window.location.href);
+        url.searchParams.delete('project');
+        window.location.href = url.toString();
     }
     getNormalizedSignalName(id, relativeSignalPath, element) {
         return (relativeSignalPath ?? '') + id;

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

@@ -14,16 +14,18 @@ export class CommandHandling {
         let commandName = button.dataset['command'];
         let commandParameter = button.dataset['commandParameter'];
         if (commandName === 'runtime') {
+            // preview always opens the project currently active in the editor
+            const projectParam = iobrokerHandler.currentProject !== 'default' ? '?project=' + iobrokerHandler.currentProject : '';
             let target = this.dockManager?.activeDocument?.resolvedElementContent;
             if (target instanceof IobrokerWebuiScreenEditor) {
-                window.open("runtime.html#screenName=" + target.name);
+                window.open("runtime.html" + projectParam + "#screenName=" + target.name);
             }
             else if (target instanceof IobrokerWebui3DScreenEditor) {
                 const scName = target.sceneData?.name || target.getAttribute?.('scene-name') || '';
-                window.open("runtime.html#3dscreen=" + encodeURIComponent(scName));
+                window.open("runtime.html" + projectParam + "#3dscreen=" + encodeURIComponent(scName));
             }
             else {
-                window.open("runtime.html");
+                window.open("runtime.html" + projectParam);
             }
         }
         else if (commandName === 'new') {

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

@@ -26,7 +26,14 @@ import { IobrokerWebuiScreensView } from "./IobrokerWebuiScreensView.js";
 import { convertToXml, parseXml } from "../helper/XmlHelper.js";
 export class IobrokerWebuiSolutionExplorer extends BaseCustomWebComponentConstructorAppend {
     static template = html `
-        <div id="treeDiv" class="" style="overflow: auto; width:100%; height: 100%;">
+        <div style="display: flex; flex-direction: column; width: 100%; height: 100%;">
+            <div id="projectBar">
+                <select id="projectSelect" title="active project"></select>
+                <button id="projectAdd" title="create new project">＋</button>
+                <button id="projectDel" title="delete current project">✕</button>
+            </div>
+            <div id="treeDiv" class="" style="overflow: auto; width:100%; flex: 1;">
+            </div>
         </div>`;
     static style = css `
         * {
@@ -34,6 +41,36 @@ export class IobrokerWebuiSolutionExplorer extends BaseCustomWebComponentConstru
             -webkit-user-select: none;
             cursor: pointer;
         }
+
+        #projectBar {
+            display: flex;
+            gap: 3px;
+            padding: 3px 4px;
+            align-items: center;
+            border-bottom: 1px solid #d0d0d0;
+            background: #f2f2f2;
+            flex-shrink: 0;
+        }
+
+        #projectBar select {
+            flex: 1;
+            min-width: 0;
+            font-size: 12px;
+        }
+
+        #projectBar button {
+            border: 1px solid #b0b0b0;
+            background: white;
+            border-radius: 3px;
+            font-size: 12px;
+            line-height: 16px;
+            width: 22px;
+            padding: 0;
+        }
+
+        #projectBar button:hover {
+            background: #e0e8f0;
+        }
         
         div.wunderbaum span.wb-node i.wb-indent::before {
             content: "";
@@ -85,9 +122,64 @@ export class IobrokerWebuiSolutionExplorer extends BaseCustomWebComponentConstru
     constructor() {
         super();
         this._treeDiv = this._getDomElement('treeDiv');
+        this._projectSelect = this._getDomElement('projectSelect');
+        this._projectAdd = this._getDomElement('projectAdd');
+        this._projectDel = this._getDomElement('projectDel');
         this.shadowRoot.adoptedStyleSheets = [wunderbaumStyle, defaultStyle, IobrokerWebuiSolutionExplorer.style];
         this._createThumbnailTooltip();
     }
+    async _initProjectBar() {
+        const fillSelect = async () => {
+            const projects = await iobrokerHandler.getProjects();
+            this._projectSelect.innerHTML = '';
+            for (const p of projects) {
+                const opt = document.createElement('option');
+                opt.value = p;
+                opt.textContent = p;
+                if (p === iobrokerHandler.currentProject)
+                    opt.selected = true;
+                this._projectSelect.appendChild(opt);
+            }
+            // if the stored project does not exist anymore, fall back to default
+            if (!projects.includes(iobrokerHandler.currentProject))
+                iobrokerHandler.setCurrentProject('default');
+        };
+        await fillSelect();
+        this._projectSelect.onchange = () => {
+            if (this._projectSelect.value !== iobrokerHandler.currentProject)
+                iobrokerHandler.setCurrentProject(this._projectSelect.value);
+        };
+        this._projectAdd.onclick = async () => {
+            const name = prompt('New project name (a-z, 0-9, -, _):');
+            if (!name)
+                return;
+            try {
+                const created = await iobrokerHandler.createProject(name);
+                if (confirm("Project '" + created + "' created. Switch to it now?"))
+                    iobrokerHandler.setCurrentProject(created);
+                else
+                    await fillSelect();
+            }
+            catch (err) {
+                alert(err.message ?? err);
+            }
+        };
+        this._projectDel.onclick = async () => {
+            const current = iobrokerHandler.currentProject;
+            if (current === 'default') {
+                alert("The 'default' project cannot be deleted.");
+                return;
+            }
+            if (!confirm("Delete project '" + current + "' with ALL its screens, controls and files? This cannot be undone!"))
+                return;
+            try {
+                await iobrokerHandler.removeProject(current);
+            }
+            catch (err) {
+                alert(err.message ?? err);
+            }
+        };
+    }
     _createThumbnailTooltip() {
         this._thumbnailTooltip = document.createElement('div');
         this._thumbnailTooltip.className = 'control-thumbnail-tooltip';
@@ -102,6 +194,7 @@ export class IobrokerWebuiSolutionExplorer extends BaseCustomWebComponentConstru
         });
         iobrokerHandler.imagesChanged.on(() => this._refreshNode('images'));
         iobrokerHandler.additionalFilesChanged.on(() => this._refreshAdditionalFilesNode());
+        this._initProjectBar();
         await sleep(100);
         this._loadTree();
         //Preload after a timeout