Kategorien- Button Funktion

logs/app.log

@@ -1211,3 +1211,9 @@ werkzeug.exceptions.NotFound: 404 Not Found: The requested URL was not found on
 2025-05-17 18:25:52,266 INFO: Anwendung gestartet [in C:\Users\TTOMCZA.EMEA\Dev\website\app.py:77]
 2025-05-17 18:25:52,266 INFO: Anwendung gestartet [in C:\Users\TTOMCZA.EMEA\Dev\website\app.py:77]
 >>>>>>> cab8d28aeb809d900fa18048b286cb729bd2e8c9
+2025-05-20 09:22:38,103 INFO: Anwendung gestartet [in C:\Users\firem\Desktop\111\Systades\website\app.py:77]
+2025-05-20 09:22:40,063 INFO: Anwendung gestartet [in C:\Users\firem\Desktop\111\Systades\website\app.py:77]
+2025-05-20 09:22:40,063 INFO: Anwendung gestartet [in C:\Users\firem\Desktop\111\Systades\website\app.py:77]
+2025-05-20 09:22:45,491 INFO: Anwendung gestartet [in C:\Users\firem\Desktop\111\Systades\website\app.py:77]
+2025-05-20 09:22:46,984 INFO: Anwendung gestartet [in C:\Users\firem\Desktop\111\Systades\website\app.py:77]
+2025-05-20 09:22:46,984 INFO: Anwendung gestartet [in C:\Users\firem\Desktop\111\Systades\website\app.py:77]

static/css/mindmap.css

@@ -360,4 +360,78 @@ body:not(.dark) .mindmap-toolbar button {
 .dark .mindmap-tooltip {
     background: rgba(30, 41, 59, 0.9);
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+/* Kategorien-Panel */
+.categories-panel {
+    position: absolute;
+    top: 80px;
+    left: 20px;
+    width: 300px;
+    max-height: calc(100vh - 120px);
+    background: rgba(15, 23, 42, 0.95);
+    border-radius: 12px;
+    padding: 16px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+    z-index: 1000;
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transform: translateX(-320px);
+    transition: transform 0.3s ease-in-out;
+    overflow-y: auto;
+}
+
+.categories-panel.visible {
+    transform: translateX(0);
+}
+
+.categories-panel h3 {
+    color: white;
+    font-size: 1.2rem;
+    margin: 0 0 16px 0;
+    padding-bottom: 8px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.category-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.category-item {
+    display: flex;
+    align-items: center;
+    padding: 8px 12px;
+    margin: 4px 0;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    color: white;
+}
+
+.category-item:hover {
+    background: rgba(255, 255, 255, 0.1);
+    transform: translateX(4px);
+}
+
+.category-color {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    margin-right: 12px;
+    flex-shrink: 0;
+}
+
+.category-name {
+    flex-grow: 1;
+    font-size: 0.95rem;
+}
+
+.category-count {
+    background: rgba(255, 255, 255, 0.1);
+    padding: 2px 8px;
+    border-radius: 12px;
+    font-size: 0.8rem;
+    margin-left: 8px;
 }

static/js/update_mindmap.js

@@ -499,6 +499,11 @@ document.addEventListener('DOMContentLoaded', function() {
                 details: error.message
             }, 'error');
         });
+
+    // Initialisiere das Kategorien-Panel
+    document.addEventListener('mindmap-loaded', function() {
+        initializeCategoriesPanel();
+    });
 });
 
 // Funktion zum Initialisieren des neuronalen Designs
@@ -2523,4 +2528,197 @@ function hideNodeInfo() {
     if (infoPanel) {
         infoPanel.classList.remove('visible');
     }
-}
+}
+
+// Funktion zum Erstellen und Verwalten des Kategorien-Panels
+function initializeCategoriesPanel() {
+    const toggleCategoriesBtn = document.getElementById('toggleCategories');
+    if (toggleCategoriesBtn) {
+        toggleCategoriesBtn.addEventListener('click', function() {
+            // Hier können Sie die gewünschte Funktionalität für den Kategorien-Button implementieren
+            console.log('Kategorien-Button wurde geklickt');
+        });
+    }
+}
+
+// Neue, vereinfachte Version der initializeCategoriesPanel Funktion
+function initializeCategoriesPanel() {
+    const toggleCategoriesBtn = document.getElementById('toggleCategories');
+    if (toggleCategoriesBtn) {
+        toggleCategoriesBtn.addEventListener('click', function() {
+            // Hier können Sie die gewünschte Funktionalität für den Kategorien-Button implementieren
+            console.log('Kategorien-Button wurde geklickt');
+        });
+    }
+}
+
+// Neue Funktionen für das Kategorien-Popup
+function showCategoriesPopup(event) {
+    // Entferne existierendes Popup falls vorhanden
+    const existingPopup = document.querySelector('.categories-popup');
+    if (existingPopup) {
+        existingPopup.remove();
+    }
+
+    // Erstelle neues Popup
+    const popup = document.createElement('div');
+    popup.className = 'categories-popup';
+    
+    // Sammle Kategorien und deren Knoten
+    const categories = new Map();
+    cy.nodes().forEach(node => {
+        const category = node.data('category');
+        if (category) {
+            if (!categories.has(category)) {
+                categories.set(category, {
+                    color: node.data('color'),
+                    icon: mindmapConfig.categories[category]?.icon || 'fa-solid fa-circle',
+                    nodes: []
+                });
+            }
+            categories.get(category).nodes.push({
+                id: node.id(),
+                name: node.data('label') || node.data('name'),
+                description: node.data('description')
+            });
+        }
+    });
+
+    // Generiere HTML für das Popup
+    let html = '';
+    categories.forEach((data, category) => {
+        html += `
+            <div class="category-group">
+                <div class="category-header" style="color: ${data.color}">
+                    <i class="${data.icon}"></i>
+                    <span>${category}</span>
+                    <span class="node-count">(${data.nodes.length})</span>
+                </div>
+                <div class="category-nodes">
+                    ${data.nodes.map(node => `
+                        <div class="category-node" data-node-id="${node.id}">
+                            <span class="node-name">${node.name}</span>
+                            ${node.description ? `<span class="node-description">${node.description}</span>` : ''}
+                        </div>
+                    `).join('')}
+                </div>
+            </div>
+        `;
+    });
+
+    popup.innerHTML = html;
+
+    // Positioniere das Popup
+    const buttonRect = event.target.getBoundingClientRect();
+    popup.style.position = 'fixed';
+    popup.style.top = `${buttonRect.bottom + 10}px`;
+    popup.style.left = `${buttonRect.left}px`;
+
+    // Füge Event-Listener für Knoten-Klicks hinzu
+    popup.querySelectorAll('.category-node').forEach(nodeElement => {
+        nodeElement.addEventListener('click', () => {
+            const nodeId = nodeElement.getAttribute('data-node-id');
+            const node = cy.getElementById(nodeId);
+            if (node.length > 0) {
+                cy.center(node);
+                cy.fit(node);
+                node.select();
+                popup.remove();
+            }
+        });
+    });
+
+    // Füge Event-Listener für Klicks außerhalb des Popups hinzu
+    document.addEventListener('click', function closePopup(e) {
+        if (!popup.contains(e.target) && e.target !== event.target) {
+            popup.remove();
+            document.removeEventListener('click', closePopup);
+        }
+    });
+
+    // Füge das Popup zum DOM hinzu
+    document.body.appendChild(popup);
+}
+
+// Aktualisiere die initializeCategoriesPanel Funktion
+function initializeCategoriesPanel() {
+    const toggleCategoriesBtn = document.getElementById('toggleCategories');
+    if (toggleCategoriesBtn) {
+        toggleCategoriesBtn.addEventListener('click', showCategoriesPopup);
+    }
+}
+
+// Füge CSS-Styles für das Popup hinzu
+const categoriesPopupStyles = document.createElement('style');
+categoriesPopupStyles.textContent = `
+    .categories-popup {
+        position: fixed;
+        background: rgba(15, 23, 42, 0.95);
+        border-radius: 0.5rem;
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+        z-index: 1000;
+        backdrop-filter: blur(10px);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        max-width: 400px;
+        max-height: 80vh;
+        overflow-y: auto;
+        padding: 1rem;
+    }
+
+    .category-group {
+        margin-bottom: 1rem;
+    }
+
+    .category-header {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.5rem;
+        font-weight: 600;
+        border-radius: 0.25rem;
+        background: rgba(255, 255, 255, 0.05);
+    }
+
+    .category-header i {
+        font-size: 1rem;
+    }
+
+    .node-count {
+        margin-left: auto;
+        font-size: 0.9rem;
+        opacity: 0.7;
+    }
+
+    .category-nodes {
+        margin-top: 0.5rem;
+        margin-left: 1rem;
+    }
+
+    .category-node {
+        padding: 0.5rem;
+        margin: 0.25rem 0;
+        border-radius: 0.25rem;
+        cursor: pointer;
+        transition: all 0.2s ease;
+    }
+
+    .category-node:hover {
+        background: rgba(255, 255, 255, 0.1);
+    }
+
+    .node-name {
+        display: block;
+        color: white;
+        font-weight: 500;
+    }
+
+    .node-description {
+        display: block;
+        font-size: 0.9rem;
+        color: rgba(255, 255, 255, 0.7);
+        margin-top: 0.25rem;
+    }
+`;
+document.head.appendChild(categoriesPopupStyles);
+
+// ... existing code ...