Add card.html support to embedded resources

This commit includes `card.html` in the embedded files by updating the `all.hpp` file. It modifies the function to map and include the `card.html` resource. Additionally, `index.html` was updated to ensure the latest content is embedded.
2024-12-04 22:14:30 +01:00
parent 0b04ea0ac2
commit c1f3ece454
7 changed files with 112 additions and 69 deletions
--- a/CMakeLists.txt
+++ b/CMakeLists.txt
@@ -4,16 +4,17 @@ project(Toolbox)
 set(CMAKE_CXX_STANDARD 23)
 set(saucer_no_version_check ON)
 set(BUILD_SHARED_LIBS OFF)
-
+option(BUILD_SHARED_LIBS "Build as shared library" ON)

 add_subdirectory(lib/saucer)
 add_subdirectory(lib/lua)
 add_subdirectory(lib/sol2)

 include_directories(inc)
-include_directories(out_embed)
+#include_directories(out_embed)
 file(GLOB_RECURSE SOURCES "src/*.cpp" "inc/*.h")

 add_executable(Toolbox main.cpp ${SOURCES})

+target_include_directories(${PROJECT_NAME} PRIVATE "out_embed")
 target_link_libraries(Toolbox PRIVATE saucer::saucer sol2::sol2 lua)
--- a/main.cpp
+++ b/main.cpp
@@ -13,27 +13,22 @@ int main(int argc, char** argv)
    .id = "example",
 });

-    // Lade alle eingebetteten Dateien
-    auto resources = saucer::embedded::all();
-
-    // Überprüfen, ob die "index.html"-Ressource verfügbar ist
-    auto it = resources.find("index.html");
-    if (it == resources.end())
-    {
-        std::cerr << "Fehler: 'index.html' wurde nicht gefunden!" << std::endl;
-        return 1;
-    }
-
    saucer::smartview<saucer::default_serializer, hwnd_module> webview({
        .application = app,
    });

-    webview.set_size(400, 600);
-    webview.set_force_dark_mode(true);
    int screenWidth = GetSystemMetrics(SM_CXSCREEN);
    int screenHeight = GetSystemMetrics(SM_CYSCREEN);
-    int xPos = screenWidth - 400; // 400 ist die Fensterbreite
-    int yPos = screenHeight - 42 - 600; // 600 ist die Fensterhöhe
+
+    // Berechne die relativen Fenstermaße
+    int windowWidth = static_cast<int>(screenWidth * (400.0 / 1920.0));
+    int windowHeight = static_cast<int>(screenHeight * (600.0 / 1080.0));
+
+    webview.set_size(windowWidth, windowHeight);
+    webview.set_force_dark_mode(true);
+
+    int xPos = screenWidth - windowWidth; // 400 ist die Fensterbreite
+    int yPos = screenHeight - 42 - windowHeight; // 600 ist die Fensterhöhe

    // Zugriff auf das native Fenster-Handle
    HWND hwnd = webview.module<hwnd_module>().get_hwnd();
@@ -54,8 +49,24 @@ int main(int argc, char** argv)
        saucer::launch::async);

    // Lade die eingebettete "index.html" aus den Ressourcen
-    webview.embed(saucer::embedded::all());
-    webview.serve("index.html");
+    auto resources = saucer::embedded::all();
+
+    if (resources.find("card.html") == resources.end()) {
+        std::cerr << "Fehler: 'card.html' wurde nicht gefunden!" << std::endl;
+        return 1;
+    }
+    // Überprüfen, ob die "index.html"-Ressource verfügbar ist
+    auto it = resources.find("index.html");
+    if (it == resources.end())
+    {
+        std::cerr << "Fehler: 'index.html' wurde nicht gefunden!" << std::endl;
+        return 1;
+    }
+    webview.embed(resources); // Bindet alle eingebetteten Ressourcen ein
+    webview.serve("index.html"); // Stellt "index.html" bereit
+
+
+    webview.set_context_menu(false);

    // Zeige das Fenster an
    webview.show();
--- a/out_embed/Card.html.hpp
+++ b/out_embed/Card.html.hpp
@@ -0,0 +1,10 @@
+#pragma once
+
+#include <array>
+#include <cstdint>
+
+namespace saucer::embedded
+{
+    static constexpr std::array<std::uint8_t, 253> fIMvMxLtCtgaCyOWT9Sq2cpZQFAUlr60fpjd781IKV2QwoDk = {
+        0x3c, 0x61, 0x20, 0x68, 0x72, 0x65, 0x66, 0x3d, 0x22, 0x23, 0x22, 0x20, 0x63, 0x6c, 0x61, 0x73, 0x73, 0x3d, 0x22, 0x74, 0x6f, 0x6f, 0x6c, 0x2d, 0x63, 0x61, 0x72, 0x64, 0x22, 0x3e, 0xd, 0xa, 0x20, 0x20, 0x3c, 0x69, 0x6d, 0x67, 0x20, 0x73, 0x72, 0x63, 0x3d, 0x22, 0x7b, 0x7b, 0x69, 0x6d, 0x67, 0x53, 0x72, 0x63, 0x7d, 0x7d, 0x22, 0x20, 0x61, 0x6c, 0x74, 0x3d, 0x22, 0x7b, 0x7b, 0x74, 0x6f, 0x6f, 0x6c, 0x4e, 0x61, 0x6d, 0x65, 0x7d, 0x7d, 0x22, 0x3e, 0xd, 0xa, 0x20, 0x20, 0x3c, 0x64, 0x69, 0x76, 0x20, 0x63, 0x6c, 0x61, 0x73, 0x73, 0x3d, 0x22, 0x74, 0x6f, 0x6f, 0x6c, 0x2d, 0x69, 0x6e, 0x66, 0x6f, 0x22, 0x3e, 0xd, 0xa, 0x20, 0x20, 0x20, 0x20, 0x3c, 0x68, 0x33, 0x3e, 0x7b, 0x7b, 0x74, 0x6f, 0x6f, 0x6c, 0x4e, 0x61, 0x6d, 0x65, 0x7d, 0x7d, 0x3c, 0x2f, 0x68, 0x33, 0x3e, 0xd, 0xa, 0x20, 0x20, 0x20, 0x20, 0x3c, 0x70, 0x3e, 0x7b, 0x7b, 0x74, 0x6f, 0x6f, 0x6c, 0x44, 0x65, 0x73, 0x63, 0x72, 0x69, 0x70, 0x74, 0x69, 0x6f, 0x6e, 0x7d, 0x7d, 0x3c, 0x2f, 0x70, 0x3e, 0xd, 0xa, 0x20, 0x20, 0x3c, 0x2f, 0x64, 0x69, 0x76, 0x3e, 0xd, 0xa, 0x20, 0x20, 0x3c, 0x64, 0x69, 0x76, 0x20, 0x63, 0x6c, 0x61, 0x73, 0x73, 0x3d, 0x22, 0x74, 0x6f, 0x6f, 0x6c, 0x2d, 0x61, 0x63, 0x74, 0x69, 0x6f, 0x6e, 0x22, 0x3e, 0xd, 0xa, 0x20, 0x20, 0x20, 0x20, 0x3c, 0x62, 0x75, 0x74, 0x74, 0x6f, 0x6e, 0x3e, 0x7b, 0x7b, 0x62, 0x75, 0x74, 0x74, 0x6f, 0x6e, 0x54, 0x65, 0x78, 0x74, 0x7d, 0x7d, 0x3c, 0x2f, 0x62, 0x75, 0x74, 0x74, 0x6f, 0x6e, 0x3e, 0xd, 0xa, 0x20, 0x20, 0x3c, 0x2f, 0x64, 0x69, 0x76, 0x3e, 0xd, 0xa, 0x3c, 0x2f, 0x61, 0x3e    };
+} // namespace saucer::embedded
--- a/out_embed/all.hpp
+++ b/out_embed/all.hpp
@@ -5,6 +5,7 @@

 #include <saucer/webview.hpp>

+#include "card.html.hpp"
 #include "index.html.hpp"

 namespace saucer::embedded
@@ -13,7 +14,8 @@ namespace saucer::embedded
    {
        std::unordered_map<std::string, embedded_file> rtn;

-        rtn.emplace("index.html", embedded_file{saucer::stash<>::view(f1Dqesn4NxFvpVB4P1U5D6IgLugdGaqMvuMcidTvXLCgieH9Dg), "text/html"});
+        rtn.emplace("card.html", embedded_file{saucer::stash<>::view(fIMvMxLtCtgaCyOWT9Sq2cpZQFAUlr60fpjd781IKV2QwoDk), "text/html"});
+        rtn.emplace("index.html", embedded_file{saucer::stash<>::view(f1Dqesn4NxFvpVZNG4N54sqKwGMdL3bEomjcPeIDDbCgBnsxvo), "text/html"});

        return rtn;
    }
--- a/out_embed/index.html.hpp
+++ b/out_embed/index.html.hpp
--- a/res/html/card.html
+++ b/res/html/card.html
@@ -0,0 +1,10 @@
+<a href="#" class="tool-card">
+  <img src="{{imgSrc}}" alt="{{toolName}}">
+  <div class="tool-info">
+    <h3>{{toolName}}</h3>
+    <p>{{toolDescription}}</p>
+  </div>
+  <div class="tool-action">
+    <button>{{buttonText}}</button>
+  </div>
+</a>
--- a/res/html/index.html
+++ b/res/html/index.html
@@ -31,7 +31,7 @@
            padding: 15px;
            overflow-y: auto;
            scrollbar-width: thin; /* Firefox */
-            scrollbar-color: #ff79c6 #2b2c3b; /* Thumb and track color */
+            scrollbar-color: #ff79c6 #2b2c3b;
        }
        .main::-webkit-scrollbar {
            width: 8px;
@@ -43,45 +43,54 @@
        .main::-webkit-scrollbar-thumb {
            background-color: #ff79c6;
            border-radius: 4px;
-            border: 2px solid #2b2c3b; /* Adds some padding around the thumb */
+            border: 2px solid #2b2c3b;
        }
        .tool-card {
            display: flex;
            align-items: center;
            background: #2b2c3b;
-            padding: 15px;
+            padding: 10px;
            border-radius: 8px;
-            margin-bottom: 15px;
+            margin-bottom: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
            transition: transform 0.2s;
-            flex-direction: column; /* Vertikale Ausrichtung */
-            text-align: center;
+            color: inherit; /* Vererbt die Textfarbe */
+            text-decoration: none; /* Entfernt die Unterstreichung */
        }
+
        .tool-card:hover {
            transform: scale(1.02);
+            background-color: #32334a;
        }
+
        .tool-card img {
            width: 60px;
            height: 60px;
-            margin-bottom: 10px;
+            margin-right: 10px;
            border-radius: 5px;
        }
+
        .tool-info {
-            flex: 1;
-        }
-        .tool-info h3 {
-            margin: 5px 0 5px;
-            font-size: 16px;
+            flex-grow: 1;
            color: #ff79c6;
+            text-align: left;
        }
-        .tool-info p {
+
+        .tool-info h3 {
            margin: 0;
+            font-size: 16px;
+        }
+
+        .tool-info p {
+            margin: 5px 0 0;
            font-size: 14px;
            color: #bbb;
        }
+
        .tool-action {
-            margin-top: 10px;
+            margin-left: auto;
        }
+
        .tool-action button {
            background: #ff79c6;
            border: none;
@@ -91,6 +100,7 @@
            cursor: pointer;
            transition: background 0.3s;
        }
+
        .tool-action button:hover {
            background: #ff47b4;
        }
@@ -107,41 +117,40 @@
 <div class="header">
    <h1>Toolbox</h1>
 </div>
-<div class="main">
-    <div class="tool-card">
-        <img src="https://via.placeholder.com/60" alt="ReSharper Tools">
-        <div class="tool-info">
-            <h3>ReSharper Tools</h3>
-            <p>Version: 2024.3</p>
-        </div>
-        <div class="tool-action">
-            <button>Update</button>
-        </div>
-    </div>
-    <div class="tool-card">
-        <img src="https://via.placeholder.com/60" alt="Visual Studio 2022">
-        <div class="tool-info">
-            <h3>Visual Studio 2022</h3>
-            <p>Professional Edition</p>
-        </div>
-        <div class="tool-action">
-            <button>Open</button>
-        </div>
-    </div>
-    <div class="tool-card">
-        <img src="https://via.placeholder.com/60" alt="CLion">
-        <div class="tool-info">
-            <h3>CLion</h3>
-            <p>Version: 2024.3</p>
-        </div>
-        <div class="tool-action">
-            <button>Update</button>
-        </div>
-    </div>
-    <!-- Add more tool cards as needed -->
+<div class="main" id="toolbox">
+    <!-- Tool Cards werden hier dynamisch geladen -->
 </div>
 <div class="footer">
    <!--Schmidti.Digital &copy; 2024-->
 </div>
+
+<script>
+    const tools = [
+        { imgSrc: 'https://via.placeholder.com/60', toolName: 'ReSharper Tools', toolDescription: 'Version: 2024.3', buttonText: 'Einst' },
+        { imgSrc: 'https://via.placeholder.com/60', toolName: 'Visual Studio 2022', toolDescription: 'Professional Edition', buttonText: 'Einst' },
+        { imgSrc: 'https://via.placeholder.com/60', toolName: 'CLion', toolDescription: 'Version: 2024.3', buttonText: 'Einst' },
+        { imgSrc: 'https://via.placeholder.com/60', toolName: 'IntelliJ IDEA', toolDescription: 'Ultimate Edition 2024', buttonText: 'Einst' },
+        { imgSrc: 'https://via.placeholder.com/60', toolName: 'PyCharm', toolDescription: 'Community Edition 2024', buttonText: 'Einst' },
+        { imgSrc: 'https://via.placeholder.com/60', toolName: 'Rider', toolDescription: 'For .NET Development', buttonText: 'Einst' }
+    ];
+
+    document.addEventListener('DOMContentLoaded', () => {
+        const toolbox = document.getElementById('toolbox');
+        tools.forEach(tool => {
+            fetch('card.html')
+                .then(response => response.text())
+                .then(template => {
+                    const cardHTML = template
+                        .replace(/{{imgSrc}}/g, tool.imgSrc)
+                        .replace(/{{toolName}}/g, tool.toolName)
+                        .replace(/{{toolDescription}}/g, tool.toolDescription)
+                        .replace(/{{buttonText}}/g, tool.buttonText);
+
+                    toolbox.innerHTML += cardHTML;
+                })
+                .catch(error => console.error('Error fetching card template:', error));
+        });
+    });
+</script>
 </body>
-</html>
+</html>