Kategorien- Button Funktion

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
@@ -2524,3 +2529,196 @@ function hideNodeInfo() {
         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 ...