styles and startmenuItems

2026-04-23 15:01:32 +02:00
parent 12d7de5065
commit 0876e754eb
11 changed files with 458 additions and 233 deletions
--- a/public/javascript/JSON.js
+++ b/public/javascript/JSON.js
@@ -2,14 +2,17 @@
 createJsonTree({
    container: domElement,
    data: jsonData,
+    expandInitially = true // optional: expand all nodes
    onChange: (data) => { }, // optional: callback on change
    onSave: (data) => { } // optional: if set, a save button will be added
 });
-*/function createJsonTree({
+*/
+function createJsonTree({
    container,
    data,
    onChange = () => {},
-    onSave = null
+    onSave = null,
+    expandInitially = true
 }) {
    container.innerHTML = "";
    container.classList.add("json-tree-root");
@@ -19,6 +22,8 @@ createJsonTree({

    let lastSnapshot = clone(data);

+    const expandedPaths = new Set();
+
    function clone(obj) {
        return JSON.parse(JSON.stringify(obj));
    }
@@ -104,9 +109,28 @@ createJsonTree({
        render();
    }

+    function collectPaths(obj, path = "root") {
+        if (typeof obj !== "object" || obj === null) return;
+
+        expandedPaths.add(path);
+
+        const entries = Array.isArray(obj)
+            ? obj.map((v, i) => [i, v])
+            : Object.entries(obj);
+
+        for (const [k, v] of entries) {
+            collectPaths(v, `${path}.${k}`);
+        }
+    }
+
+    if (expandInitially) {
+        collectPaths(data);
+    }
+
    function render() {
        container.innerHTML = "";

+        if (onSave) {
            const controls = document.createElement("div");
            controls.className = "json-controls";

@@ -120,18 +144,18 @@ createJsonTree({
            redoBtn.textContent = "Redo";
            redoBtn.onclick = redo;

-        controls.appendChild(undoBtn);
-        controls.appendChild(redoBtn);
-
-        if (onSave) {
            const saveBtn = document.createElement("button");
            saveBtn.className = "monolyth";
            saveBtn.textContent = "Save";
            saveBtn.onclick = save;
+
+            controls.appendChild(undoBtn);
+            controls.appendChild(redoBtn);
            controls.appendChild(saveBtn);
-        }

            container.appendChild(controls);
+        }
+
        container.appendChild(renderNode(data, null, null, "root", 0));
    }

@@ -177,10 +201,24 @@ createJsonTree({
            const children = document.createElement("div");
            children.className = "json-children";

-            keyLabel.onclick = toggle.onclick = () => {
-                children.classList.toggle("collapsed");
+            const toggleState = () => {
+                if (expandedPaths.has(path)) {
+                    expandedPaths.delete(path);
+                    children.classList.add("collapsed");
+                } else {
+                    expandedPaths.add(path);
+                    children.classList.remove("collapsed");
+                }
            };

+            keyLabel.onclick = toggle.onclick = toggleState;
+
+            if (expandedPaths.has(path)) {
+                children.classList.remove("collapsed");
+            } else {
+                children.classList.add("collapsed");
+            }
+
            addBtn.onclick = () => {
                let newKey = "";
                let newValue;
@@ -210,7 +248,6 @@ createJsonTree({
                                if (!isArray) {
                                    const input = document.querySelector('#newJsonKeyName');
                                    newKey = input?.value?.trim();
-
                                    if (!newKey) return;
                                }

@@ -331,6 +368,7 @@ createJsonTree({

        wrapper.appendChild(keySpan);
        wrapper.appendChild(span);
+
        if (key !== null) wrapper.appendChild(removeBtn);

        return wrapper;
--- a/public/styles/os.css
+++ b/public/styles/os.css
@@ -14,16 +14,19 @@ body, html { margin:0; padding:0; height:100%; overflow: hidden; font-family: va
 .window-content { display: flex; flex-direction: column; flex:1; padding:8px; overflow: auto; }
 .window[class="max"] .window-resize-handle { display: none; }

-.window-resize-n, .window-resize-s { position: absolute; left: 8px; right: 8px; height: 8px; z-index: 10; }
+.window-resize-s { position: absolute; left: 8px; right: 8px; height: 8px; z-index: 10; }
+.window-resize-n { position: absolute; left: 8px; right: 16px; height: 8px; z-index: 10; }
 .window-resize-n { top: -4px;cursor: var(--theme-cursor-resize-vertical); }
 .window-resize-s { bottom: -4px;cursor: var(--theme-cursor-resize-vertical); }

-.window-resize-e, .window-resize-w { position: absolute;top: 8px;bottom: 8px;width: 8px;z-index: 10; }
+.window-resize-w { position: absolute;top: 8px;bottom: 8px;width: 8px;z-index: 10; }
+.window-resize-e { position: absolute;top: 16px;bottom: 8px;width: 8px;z-index: 10; }
 .window-resize-e { right: -4px;cursor: var(--theme-cursor-resize-horizontal); }
 .window-resize-w { left: -4px;cursor: var(--theme-cursor-resize-horizontal); }

-.window-resize-ne, .window-resize-nw, .window-resize-se, .window-resize-sw { position: absolute;width: 16px;height: 16px;z-index: 11; }
-.window-resize-ne { top: -6px;right: -6px;cursor: var(--theme-cursor-resize-45); }
+.window-resize-nw, .window-resize-se, .window-resize-sw { position: absolute;width: 16px;height: 16px;z-index: 11; }
+.window-resize-ne { position: absolute;width: 8px;height: 8x;z-index: 11; }
+.window-resize-ne { top: -3px;right: -3px;cursor: var(--theme-cursor-resize-45); }
 .window-resize-nw { top: -6px;left: -6px;cursor: var(--theme-cursor-resize-270); }
 .window-resize-se { bottom: -6px;right: -6px;cursor: var(--theme-cursor-resize-270); }
 .window-resize-sw { bottom: -6px;left: -6px;cursor: var(--theme-cursor-resize-45); }
--- a/public/styles/table.css
+++ b/public/styles/table.css
@@ -17,7 +17,7 @@ table.border * { border:1px solid white; }


 /* #region performance optimizing */
-table thead { position:sticky; top:0; z-index:20; will-change:transform; transform:translateZ(0);}
+table thead { position:sticky; top:0; z-index:20; }


 /* #endregion */
--- a/public/views/integrated/serverinfo.hbs
+++ b/public/views/integrated/serverinfo.hbs
@@ -8,8 +8,8 @@
            <span class="copy-icon" onclick="copyToClipboard(`${document.getElementById('pid').textContent}`)">⧉</span>
        </div>
    </div>
-    <div class="card">
-        <div class="table-wrapper" style="max-height: 350px;">
+    <div class="card" styles="max-height:350px;">
+        <div class="table-wrapper">
            <table id="releaseNotes">
                <thead>
                    <tr>
@@ -24,7 +24,7 @@
            </table>
        </div>
    </div>
-    <div class="card">
+    <div class="card static" style="min-height:150px">
        <div id="package"  style="overflow:auto"></div>  
    </div>
 </div>
@@ -88,14 +88,13 @@
    });

    vt.addData(json.releaseNotes)
-        document.querySelector('#package').innerHTML = JSON.stringify(json.package).split(',').join('<br>');
-/*
+        //document.querySelector('#package').innerHTML = JSON.stringify(json.package).split(',').join('<br>');
+
        createJsonTree({
-            container: document.getElementById("package-json"),
-            data: json,
-            expandInitially: true,
-            onSave: () => { }
+            container: document.getElementById("package"),
+            data: json.package,
+            expandInitially: true
        });
-*/
+
    });
 </script>
--- a/public/views/plugindashboard.hbs
+++ b/public/views/plugindashboard.hbs
@@ -21,7 +21,7 @@
  </div>
 </body>

-<script type="text/javascript">
+<script defer type="text/javascript">

  createNewPlugin.onclick = () => {
    feedbox({
@@ -62,16 +62,42 @@
      "active":true
  }
  }*/
+  fetch('/api/plugins/integrated', { method: 'POST' })
+  .then(res => res.json())
+  .then(data => {
+
+    createTab(pluginTabs, 'Integrierte Plugins', { onclick: 
+      async (tabElement) => {
+        pluginsTabWrapper.innerHTML = '';
+
+        const objectsContainer = document.createElement('div');
+        objectsContainer.className = 'card';
+        
+        createJsonTree({
+          container: objectsContainer,
+          data: data,
+          expandInitially: true,
+          onSave: () => {}
+        })
+        pluginsTabWrapper.appendChild(objectsContainer);
+      }
+    })
+  })
+    
+  
+
+
  
  fetch('/api/plugins/getAll', { method: 'POST' })
    .then(res => res.json())
    .then(data => {
       data.forEach(async metaData => {
-        createTab(pluginTabs, metaData.name, async (tabElement) => {
+        createTab(pluginTabs, metaData.name, { onclick: 
+        async (tabElement) => {
          pluginsTabWrapper.innerHTML = '';

          const objectsContainer = document.createElement('div');
-          objectsContainer.className = 'card grid';
+          objectsContainer.className = 'card static';
          objectsContainer.style = ``;
          const card = document.createElement('div');
          card.className = 'card static row';
@@ -140,8 +166,8 @@

              if(typeof value === 'object') {
                const objectCard = document.createElement('div');
-                  objectCard.className = 'card';
-                  objectCard.style = `height:100%`;
+                  objectCard.className = 'card static';
+                  objectCard.style = `min-height:400px;`;
                  objectCard.innerHTML = `
                    <label style="font-weight:bold">${key}</label>
                    <div style="overflow:auto" id="${metaData.name}-${key}"></div>
@@ -151,9 +177,6 @@
                  const menu = createJsonTree({
                    container: document.getElementById(`${metaData.name}-${key}`),
                    data: metaData[key],
-                    schema: {
-                      "active": { type: "boolean" }
-                    },
                    onChange: (data) => { },
                    onSave: async (data) => {
                      await pluginAPI.update(metaData.name, { [key]: data });
@@ -163,80 +186,10 @@
            }
          }
          pluginsTabWrapper.appendChild(objectsContainer);
-
-          
-         
-
-          /*pluginsTabWrapper.innerHTML = `
-          <div class="card static row" style="grid-column: span 3;height:50px;">
-            <label class="cb cb-modern">
-              <label for="plugin-${plugin.name}" style="font-weight:bold">Aktiv</label>
-              <input onchange="pluginAPI.activation('${plugin.name}', this.checked);" id="plugin-${plugin.name}" data-status="${plugin.name}" type="checkbox" ${plugin.active ? 'checked' : ''}>
-              <span class="cb-box" aria-hidden="true"></span> 
-            </label>
-          </div>
-
-          <div class="card static row" style="gap:0 10px;min-height:fit-content;">
-            <div style="flex:0 0 auto">
-              <label style="font-weight:bold">Name</label>
-              <input type="text" data-name="${plugin.name}" data-field="name" value="${plugin.name}" />
-            </div>
-
-            <div style="flex:0 0 auto">
-              <label style="font-weight:bold">Version</label>
-              <input type="text" data-name="${plugin.name}" data-field="version" value="${plugin.version}" />
-            </div>
-            
-            <div style="flex:1 1 auto">
-              <label style="font-weight:bold">Beschreibung</label>
-              <input type="text" data-name="${plugin.name}" data-field="description" style="width:100%" value="${plugin.description}" />
-            </div>
-          </div>
-
-          <div class="card static" style="grid-column: span 3;">
-            <label style="font-weight:bold">Startmenüeinträge</label>
-            <div style="overflow:auto" id="${plugin.name}-menu"></div>
-          </div>
-          `;
-          createJsonTree({
-            container: document.getElementById(`${plugin.name}-menu`),
-            data: plugin,
-            schema: {
-              "active": { type: "boolean" }
        }
      });
-          */
-          
-        });
-
-/*
-{
-  "name": "TEST",
-  "description": "Remote Desktop Verbindungen über MSRA realisieren",
-  "version": "0.2025.11.07",
-  "config": {},
-  "menu": {
-    "label": "TEST",
-    "items": [
-      {
-        "label": "Remoteunterstützung",
-        "view": "index",
-        "icon": "remoteServer.png",
-        "permissions": [
-          "Administration"
-        ]
-      }
-    ]
-  },
-  "active": true
-}
-*/
-/*
-        new AttachOnBlurChange(document.querySelector(`[data-name="${plugin.name}"][data-field="name"]`), async (newValue, oldValue) => { await pluginAPI.rename(`${plugin.name}`, newValue); });
-        new AttachOnBlurChange(document.querySelector(`[data-name="${plugin.name}"][data-field="version"]`), async (newValue, oldValue) => await pluginAPI.update(`${plugin.name}`, { version: newValue }))
-        new AttachOnBlurChange(document.querySelector(`[data-name="${plugin.name}"][data-field="description"]`), async (newValue, oldValue) => await pluginAPI.update(`${plugin.name}`, { description: newValue }))
-        */
    });
+    pluginTabs.querySelectorAll('.tab')[0]?.click();
  })
 </script>
 </html>
--- a/src/models/removeintegratedStartmenuItems.js
+++ b/src/models/removeintegratedStartmenuItems.js
@@ -48,7 +48,7 @@ module.exports = ([
                {
                    label: 'Plugins',
                    view: 'plugindashboard',
-                    defaultSize: { width: "1000px", height: "400px" },
+                    defaultSize: { width: "900px", height: "800px" },
                    icon: "plugins.png", 
                    permissions: [ 'Administration' ]
                }
--- a/src/models/integratedStartMenuItems.json
+++ b/src/models/integratedStartMenuItems.json
@@ -0,0 +1,154 @@
+[
+  {
+    "section": "System",
+    "name": "Server",
+    "active": true,
+    "menu": {
+      "label": "Server",
+      "items": [
+        {
+          "label": "Styles",
+          "view": "styleconfig",
+          "icon": "brush.png",
+          "permissions": [
+            "Administration"
+          ]
+        },
+        {
+          "label": "Configs",
+          "view": "serverconfig",
+          "icon": "app.png",
+          "permissions": [
+            "Administration"
+          ]
+        }
+      ]
+    },
+    "defaultSize": {
+      "width": 800,
+      "height": 600
+    }
+  },
+  {
+    "section": "System",
+    "name": "EventLog",
+    "active": true,
+    "menu": {
+      "label": "EventLog",
+      "items": [
+        {
+          "label": "EventLog",
+          "view": "eventlog",
+          "defaultSize": {
+            "width": "1200px",
+            "height": "1200px"
+          },
+          "icon": "eventlog.ico",
+          "permissions": [
+            "Administration"
+          ]
+        }
+      ]
+    },
+    "defaultSize": {
+      "width": "1200px",
+      "height": "1200px"
+    }
+  },
+  {
+    "section": "System",
+    "name": "Plugins",
+    "active": true,
+    "menu": {
+      "label": "Plugins",
+      "items": [
+        {
+          "label": "Plugins",
+          "view": "plugindashboard",
+          "defaultSize": {
+            "width": "900px",
+            "height": "800px"
+          },
+          "icon": "plugins.png",
+          "permissions": [
+            "Administration"
+          ]
+        }
+      ]
+    },
+    "defaultSize": {
+      "width": "900px",
+      "height": "800px"
+    }
+  },
+  {
+    "section": "System",
+    "name": "Info",
+    "active": true,
+    "menu": {
+      "label": "Info",
+      "items": [
+        {
+          "label": "Info",
+          "view": "serverinfo",
+          "defaultSize": {
+            "width": "900px",
+            "height": "500px"
+          },
+          "icon": "serverinfo.png",
+          "permissions": [
+            "Administration"
+          ]
+        }
+      ]
+    },
+    "defaultSize": {
+      "width": "900px",
+      "height": "500px"
+    }
+  },
+  {
+    "section": "Benutzer",
+    "name": "Einstellungen",
+    "active": true,
+    "menu": {
+      "label": "Einstellungen",
+      "items": [
+        {
+          "label": "Einstellungen",
+          "view": "usersettings",
+          "defaultSize": {
+            "width": "460px",
+            "height": "515px"
+          },
+          "icon": "app.png",
+          "permissions": [
+            "*"
+          ]
+        }
+      ]
+    },
+    "defaultSize": {
+      "width": "460px",
+      "height": "515px"
+    }
+  },
+  {
+    "section": "Benutzer",
+    "name": "Hilfe",
+    "active": true,
+    "menu": {
+      "label": "Hilfe",
+      "items": [
+        {
+          "label": "Hilfe",
+          "view": "help",
+          "icon": "help.png",
+          "permissions": [
+            "*"
+          ]
+        }
+      ]
+    }
+  }
+]
--- a/src/routes/adminRoutes.js
+++ b/src/routes/adminRoutes.js
@@ -122,6 +122,13 @@ module.exports = {
            }   
        });

+        app.post('/api/plugins/integrated', async (req, res) => {
+            try {
+                res.status(200).json(global.json.startMenuItems.live);
+            } catch (error) {                
+                res.status(500).json({ error: error.message });
+            }   
+        });

        app.post('/api/plugins/:name/update', async (req, res) => {
            const { name } = req.params;
--- a/src/services/fileSystemManager.js
+++ b/src/services/fileSystemManager.js
@@ -89,9 +89,6 @@ class FileSystemManager {
    }


-
-
-
    /**
     * Sammelt verschiedene Pattern-Ergebnisse aus Dateien mehrerer Ordner.
     *
@@ -160,6 +157,8 @@ collectFromFiles({



+
+
    // JSON-Datei laden
    loadJSON(path) {
        try {
@@ -171,6 +170,16 @@ collectFromFiles({
        }
    }

+    loadFile(path) {
+        try {
+            const rawData = fs.readFileSync(path, 'utf8');
+            return rawData;
+        } catch (err) {
+            console.log(err)
+            return err
+        }
+    }
+

    // Check file-/path
    exists(path) {
--- a/src/sockets/mainSocket.js
+++ b/src/sockets/mainSocket.js
@@ -1,6 +1,6 @@
 const path = require('path');
 const fs = require('fs');
-const startMenuItemContext = require('@models/integratedStartmenuItems.js')
+

 module.exports = (app, socketManager, namespace, pluginManager, authenticationModel, fileSystemManager, eventManager, activeDirectory) => {    
    const mainSocket = socketManager.namespaces.get(namespace);
--- a/utils.js
+++ b/utils.js
@@ -4,7 +4,7 @@ const { permission } = require('process');
 const { dirname } = require('path');
 const { File: HotReload } = require(`@services/hotReload.js`);
 const { service } = require(`@root/server.js`);
-let integratedStartmenuItems = require('@models/integratedStartmenuItems');
+// let integratedStartmenuItems = require('@models/integratedStartmenuItems');


 global.path = {
@@ -20,17 +20,17 @@ global.json = {
  configuration: new HotReload(path.join(global.path.source, 'models', 'configuration.json')),
  stylesheet: new HotReload(path.join(global.path.source, 'models', 'stylesheet.json')),
  indexRoutes: new HotReload(path.join(global.path.source, 'routes', 'indexRoutes.js'), { historyLimit: 50, fileType: 'js' }),
-  startMenuItems: new HotReload(path.join(global.path.source, 'models', 'integratedStartmenuItems.js'), { historyLimit: 50, fileType: 'js' })
+  startMenuItems: new HotReload(path.join(global.path.source, 'models', 'integratedStartMenuItems.json'))
 }


 module.exports = startMenuItems = async function (app, sAMAccountName) {
+
  function safeClone(obj) {
    return JSON.parse(JSON.stringify(obj));
  }
-  delete integratedStartmenuItems;

-  integratedStartmenuItems = safeClone(json.startMenuItems.live);
+  const integratedStartmenuItems = safeClone(global.json.startMenuItems.live);

  const plugins = service
    .get('pluginManager')
@@ -50,13 +50,18 @@ function safeClone(obj) {
        const authorized =
          item.label === 'hr' ||
          item.permissions.includes('Administration')
-            ? global.json.configuration.live.administration.some(name => name.toLowerCase() === sAMAccountName.toLowerCase())
+            ? global.json.configuration.live.administration.some(
+                name => name.toLowerCase() === sAMAccountName.toLowerCase()
+              )
            : item.permissions.includes('*') ||
              (
                await Promise.all(
                  item.permissions.map(async permission =>
                    (await service.get('activeDirectoryManager').getGroup(permission)) &&
-                    (await service.get('activeDirectoryManager').isUserMemberOfRecursive(sAMAccountName, permission))
+                    (await service.get('activeDirectoryManager').isUserMemberOfRecursive(
+                      sAMAccountName,
+                      permission
+                    ))
                  )
                )
              ).some(Boolean);
@@ -81,6 +86,63 @@ function safeClone(obj) {

  return [...getAllPlugins];
 };
+// module.exports = startMenuItems = async function(app, sAMAccountName) {
+// function safeClone(obj) {
+//   return JSON.parse(JSON.stringify(obj));
+// }
+//   delete integratedStartmenuItems;
+
+//   integratedStartmenuItems = safeClone(json.startMenuItems.live);
+
+//   const plugins = service
+//     .get('pluginManager')
+//     .getStatus()
+//     .map(({ config, ...plugin }) => ({
+//       ...safeClone(plugin),
+//       section: 'Plugin'
+//     }));
+
+//   let getAllPlugins = [...plugins, ...integratedStartmenuItems];
+
+//   for (const plugin of getAllPlugins) {
+
+//     plugin.menu.items = await Promise.all(
+//       (plugin.menu.items || []).map(async item => {
+
+//         const authorized =
+//           item.label === 'hr' ||
+//           item.permissions.includes('Administration')
+//             ? global.json.configuration.live.administration.some(name => name.toLowerCase() === sAMAccountName.toLowerCase())
+//             : item.permissions.includes('*') ||
+//               (
+//                 await Promise.all(
+//                   item.permissions.map(async permission =>
+//                     (await service.get('activeDirectoryManager').getGroup(permission)) &&
+//                     (await service.get('activeDirectoryManager').isUserMemberOfRecursive(sAMAccountName, permission))
+//                   )
+//                 )
+//               ).some(Boolean);
+
+//         return {
+//           ...safeClone(item),
+//           authorized
+//         };
+//       })
+//     );
+
+//     plugin.onlyAdministration =
+//       plugin.menu.items.every(item => !item.authorized) &&
+//       !global.json.configuration.live.administration.includes(sAMAccountName);
+//   }
+
+//   getAllPlugins = getAllPlugins
+//     .filter(plugin => !plugin.onlyAdministration)
+//     .filter(plugin => plugin.active);
+
+//   app.locals.startMenuItems = getAllPlugins;
+
+//   return [...getAllPlugins];
+// };


 /**