Add JSON exposure and dynamic toolbox content reload

Implemented `SetJsonItems` to handle JSON serialization and expose toolbox items to JavaScript. Enhanced the webview with new JS-exposed functions and added frontend support for dynamic toolbox reloading.

inc/toolboxWindow.h

@@ -45,6 +45,8 @@ private:
     std::thread m_threadMonitor;
     std::atomic<bool> m_runningMonitor = true;
 
+    std::string jsonString;
+
 #ifdef _WIN32
     std::filesystem::path userPath = std::getenv("USERPROFILE");  // Windows
 #else
@@ -68,4 +70,6 @@ private:
     void monitor_focus();
 
     void open_file_system();
+
+    void SetJsonItems();
 };

res/html/index.html

@@ -187,6 +187,52 @@
         saucer.exposed.open_file_system();
     }
 
+    function reloadContent() {
+        const toolbox = document.getElementById('toolbox');
+
+        // Toolbox leeren
+        toolbox.innerHTML = '';
+
+        // Toolbox-Daten neu abrufen
+        saucer.exposed.getToolboxItems().then(jsonString => {
+            const m_toolboxItems = JSON.parse(jsonString);
+
+            m_toolboxItems.forEach(item => {
+                const iconSrc = item.icon.startsWith('data:image/png;base64,')
+                    ? item.icon
+                    : `data:image/png;base64,${item.icon}`;
+
+                const toolCardHTML = `
+                <a href="${item.url}" class="tool-card"
+                data-tool-id="${item.id}"
+                onclick="runLuaWithId(event)">
+                <img src="${iconSrc}" alt="${item.name}">
+                <div class="tool-info">
+                    <h3>${item.name}</h3>
+                    <p>${item.description}</p>
+                </div>
+                <div class="tool-action">
+                    <button>Einst</button>
+                </div>
+                </a>
+            `;
+
+                toolbox.innerHTML += toolCardHTML;
+            });
+
+            // Überprüfen und Wiederherstellen des Zustands der Buttons
+            document.querySelectorAll('.tool-card').forEach(card => {
+                const toolId = card.getAttribute('data-tool-id');
+                const button = card.querySelector('button');
+                if (sessionStorage.getItem(`toolButtonDisabled_${toolId}`) === 'true') {
+                    button.disabled = true;
+                    button.classList.add('running');
+                    button.textContent = 'Wird ausgeführt...';
+                }
+            });
+        }).catch(error => console.error('Fehler beim Abrufen der Toolbox-Elemente:', error));
+    }
+
     function enableButtonByToolId(toolId) {
         saucer.exposed.debug_print();
         // Finden Sie den Button mit dem entsprechenden data-tool-id

src/toolboxWindow.cpp

@@ -13,14 +13,13 @@ void ToolboxWindow::initialize() {
     fillToolboxMenu();
     configureWindow();
     loadResources();
+    SetJsonItems();
     ExposeToJs();
     m_webview.set_always_on_top(true);
     m_webview.set_decorations(false);
 #ifdef _DEBUG
     m_webview.set_dev_tools(true);
 #endif
-    //m_webview.set_decorations(false);
-    //m_webview.set_always_on_top(true);
 
     m_threadMonitor = std::thread([&]() {
         monitor_focus();
@@ -92,7 +91,25 @@ void ToolboxWindow::hide() {
 }
 
 void ToolboxWindow::ExposeToJs() {
-    // Konvertierung des Vektors in JSON
+    // Funktion, die JSON-Code an das JavaScript exponiert
+    m_webview.expose("getToolboxItems", [&]() -> std::string {
+        return jsonString;
+    }, saucer::launch::async);
+
+    m_webview.expose("run_lua", [&](int id) {
+        run_lua(id);
+    }, saucer::launch::async);
+
+    m_webview.expose("debug_print", [&]() {
+        debug_print();
+    }, saucer::launch::async);
+
+    m_webview.expose("open_file_system", [&]() {
+        open_file_system();
+    },saucer::launch::async);
+}
+
+void ToolboxWindow::SetJsonItems() {// Konvertierung des Vektors in JSON
     nlohmann::json jsonArray = nlohmann::json::array();
 
     for (const auto& item : m_toolboxItems) {
@@ -110,26 +127,9 @@ void ToolboxWindow::ExposeToJs() {
         };
         jsonArray.push_back(jsonItem);
     }
-
+    jsonString = "";
     // Konvertiere den JSON-Array in einen String
-    std::string jsonString = jsonArray.dump();
-
-    // Funktion, die JSON-Code an das JavaScript exponiert
-    m_webview.expose("getToolboxItems", [jsonString]() -> std::string {
-        return jsonString;
-    }, saucer::launch::async);
-
-    m_webview.expose("run_lua", [&](int id) {
-        run_lua(id);
-    }, saucer::launch::async);
-
-    m_webview.expose("debug_print", [&]() {
-        debug_print();
-    }, saucer::launch::async);
-
-    m_webview.expose("open_file_system", [&]() {
-        open_file_system();
-    },saucer::launch::async);
+    jsonString = jsonArray.dump();
 }
 
 void ToolboxWindow::OptionWindow() {
@@ -200,6 +200,8 @@ void encodeImageToBase64(const std::filesystem::path& imagePath, ToolboxWindow::
 }
 
 void ToolboxWindow::fillToolboxMenu() {
+
+    m_toolboxItems.clear();
     // Bestimme das Benutzerverzeichnis abhängig vom Betriebssystem
 
     std::filesystem::path toolboxDir = userPath / ".Toolbox";
@@ -310,5 +312,9 @@ void ToolboxWindow::open_file_system() {
     } else {
         std::cerr << "Fehler: Das Verzeichnis .Toolbox existiert nicht." << std::endl;
     }
+
+    fillToolboxMenu();
+    SetJsonItems();
+    m_webview.execute("reloadContent({})",saucer::make_args());
 }