chore: Änderungen commited

logs/app.log

@@ -425,3 +425,6 @@ werkzeug.exceptions.NotFound: 404 Not Found: The requested URL was not found on
 2025-05-14 12:13:05,415 INFO: Anwendung gestartet [in C:\Users\TTOMCZA.EMEA\Dev\website\app.py:77]
 2025-05-14 12:13:07,885 INFO: Anwendung gestartet [in C:\Users\TTOMCZA.EMEA\Dev\website\app.py:77]
 2025-05-14 12:13:07,885 INFO: Anwendung gestartet [in C:\Users\TTOMCZA.EMEA\Dev\website\app.py:77]
+2025-05-14 12:13:20,274 INFO: Anwendung gestartet [in C:\Users\TTOMCZA.EMEA\Dev\website\app.py:77]
+2025-05-14 12:13:22,949 INFO: Anwendung gestartet [in C:\Users\TTOMCZA.EMEA\Dev\website\app.py:77]
+2025-05-14 12:13:22,949 INFO: Anwendung gestartet [in C:\Users\TTOMCZA.EMEA\Dev\website\app.py:77]

templates/mindmap.html

@@ -31,6 +31,9 @@
     backdrop-filter: blur(10px);
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     z-index: 10;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
   }
 
   .mindmap-title {
@@ -43,6 +46,47 @@
     -webkit-text-fill-color: transparent;
   }
 
+  /* Aktionsmenü im Header */
+  .mindmap-actions {
+    display: flex;
+    gap: 0.75rem;
+  }
+
+  .action-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+    background: rgba(255, 255, 255, 0.1);
+    color: white;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 0.5rem;
+    font-size: 0.9rem;
+    cursor: pointer;
+    transition: all 0.3s ease;
+  }
+
+  .action-button:hover {
+    background: rgba(255, 255, 255, 0.2);
+  }
+
+  .action-button.primary {
+    background: rgba(139, 92, 246, 0.3);
+  }
+
+  .action-button.primary:hover {
+    background: rgba(139, 92, 246, 0.5);
+  }
+
+  .action-button.danger {
+    background: rgba(220, 38, 38, 0.3);
+  }
+
+  .action-button.danger:hover {
+    background: rgba(220, 38, 38, 0.5);
+  }
+
   /* Kontrollpanel */
   .control-panel {
     position: absolute;
@@ -79,6 +123,85 @@
     margin-right: 0.75rem;
   }
 
+  /* CRUD Panel */
+  .crud-panel {
+    position: absolute;
+    bottom: 2rem;
+    left: 50%;
+    transform: translateX(-50%);
+    background: rgba(15, 23, 42, 0.9);
+    border-radius: 1rem;
+    padding: 1rem;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+    z-index: 10;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    display: flex;
+    gap: 0.75rem;
+    backdrop-filter: blur(8px);
+  }
+
+  .crud-button {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 4rem;
+    height: 4rem;
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 0.75rem;
+    color: white;
+    cursor: pointer;
+    transition: all 0.3s ease;
+  }
+
+  .crud-button:hover {
+    background: rgba(255, 255, 255, 0.2);
+    transform: translateY(-5px);
+  }
+
+  .crud-button i {
+    font-size: 1.25rem;
+    margin-bottom: 0.25rem;
+  }
+
+  .crud-button span {
+    font-size: 0.7rem;
+    text-align: center;
+  }
+
+  .crud-button.create {
+    background: rgba(16, 185, 129, 0.3);
+  }
+
+  .crud-button.create:hover {
+    background: rgba(16, 185, 129, 0.5);
+  }
+
+  .crud-button.edit {
+    background: rgba(245, 158, 11, 0.3);
+  }
+
+  .crud-button.edit:hover {
+    background: rgba(245, 158, 11, 0.5);
+  }
+
+  .crud-button.delete {
+    background: rgba(220, 38, 38, 0.3);
+  }
+
+  .crud-button.delete:hover {
+    background: rgba(220, 38, 38, 0.5);
+  }
+
+  .crud-button.save {
+    background: rgba(59, 130, 246, 0.3);
+  }
+
+  .crud-button.save:hover {
+    background: rgba(59, 130, 246, 0.5);
+  }
+
   /* Info-Panel */
   .info-panel {
     position: absolute;
@@ -194,6 +317,53 @@
     text-align: center;
     max-width: 80%;
   }
+  
+  /* Bearbeitungsmodus-Hinweis */
+  .edit-mode-indicator {
+    position: fixed;
+    bottom: 1rem;
+    left: 1rem;
+    background: rgba(245, 158, 11, 0.8);
+    color: white;
+    padding: 0.5rem 1rem;
+    border-radius: 0.5rem;
+    font-size: 0.9rem;
+    z-index: 1000;
+    display: none;
+  }
+  
+  .edit-mode-indicator.active {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  
+  /* Kontext-Menü */
+  .context-menu {
+    position: absolute;
+    background: rgba(30, 41, 59, 0.95);
+    border-radius: 8px;
+    padding: 8px 0;
+    min-width: 160px;
+    z-index: 2000;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    backdrop-filter: blur(8px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+  }
+  
+  .context-menu-item {
+    padding: 8px 16px;
+    color: white;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  
+  .context-menu-item:hover {
+    background: rgba(255, 255, 255, 0.1);
+  }
 </style>
 {% endblock %}
 
@@ -202,6 +372,22 @@
   <!-- Header -->
   <div class="mindmap-header">
     <h1 class="mindmap-title">Interaktive Wissenslandkarte</h1>
+    
+    <!-- Aktionsmenü -->
+    <div class="mindmap-actions">
+      <button id="toggleEditMode" class="action-button primary">
+        <i class="fas fa-edit"></i>
+        <span>Bearbeiten</span>
+      </button>
+      <button id="saveChanges" class="action-button" style="display: none;">
+        <i class="fas fa-save"></i>
+        <span>Speichern</span>
+      </button>
+      <button id="cancelEdit" class="action-button danger" style="display: none;">
+        <i class="fas fa-times"></i>
+        <span>Abbrechen</span>
+      </button>
+    </div>
   </div>
 
   <!-- Ladeanzeige -->
@@ -209,6 +395,12 @@
   
   <!-- Status-Meldung -->
   <div id="statusMessage" class="status-message" style="display: none;">Lade Mindmap...</div>
+  
+  <!-- Bearbeitungsmodus-Hinweis -->
+  <div id="editModeIndicator" class="edit-mode-indicator">
+    <i class="fas fa-pencil-alt"></i>
+    <span>Bearbeitungsmodus</span>
+  </div>
 
   <!-- Hauptvisualisierung -->
   <div id="cy"></div>
@@ -233,6 +425,30 @@
     </button>
   </div>
 
+  <!-- CRUD Buttons (anfänglich ausgeblendet) -->
+  <div id="crudPanel" class="crud-panel" style="display: none;">
+    <button id="createNode" class="crud-button create">
+      <i class="fas fa-plus-circle"></i>
+      <span>Knoten erstellen</span>
+    </button>
+    <button id="createEdge" class="crud-button create">
+      <i class="fas fa-link"></i>
+      <span>Verbindung</span>
+    </button>
+    <button id="editNode" class="crud-button edit" disabled>
+      <i class="fas fa-edit"></i>
+      <span>Bearbeiten</span>
+    </button>
+    <button id="deleteElement" class="crud-button delete" disabled>
+      <i class="fas fa-trash-alt"></i>
+      <span>Löschen</span>
+    </button>
+    <button id="saveMindmap" class="crud-button save">
+      <i class="fas fa-save"></i>
+      <span>Speichern</span>
+    </button>
+  </div>
+
   <!-- Info-Panel -->
   <div id="infoPanel" class="info-panel">
     <h3 class="info-title">Knotendetails</h3>
@@ -281,6 +497,23 @@ document.addEventListener('DOMContentLoaded', function() {
   const cyContainer = document.getElementById('cy');
   const loader = document.getElementById('loader');
   const statusMessage = document.getElementById('statusMessage');
+  const crudPanel = document.getElementById('crudPanel');
+  const editModeIndicator = document.getElementById('editModeIndicator');
+  
+  // CRUD Buttons
+  const createNodeBtn = document.getElementById('createNode');
+  const createEdgeBtn = document.getElementById('createEdge');
+  const editNodeBtn = document.getElementById('editNode');
+  const deleteElementBtn = document.getElementById('deleteElement');
+  const saveMindmapBtn = document.getElementById('saveMindmap');
+  
+  // Header Action Buttons
+  const toggleEditModeBtn = document.getElementById('toggleEditMode');
+  const saveChangesBtn = document.getElementById('saveChanges');
+  const cancelEditBtn = document.getElementById('cancelEdit');
+  
+  let isEditMode = false;
+  let selectedElement = null;
   
   if (cyContainer) {
     console.log('Container gefunden:', cyContainer);
@@ -299,6 +532,56 @@ document.addEventListener('DOMContentLoaded', function() {
         // Erfolg: Loader und Statusmeldung ausblenden
         loader.style.display = 'none';
         statusMessage.style.display = 'none';
+        
+        // Event-Listener für Knotenauswahl
+        window.cy.on('select', 'node', function(event) {
+          selectedElement = event.target;
+          editNodeBtn.disabled = false;
+          deleteElementBtn.disabled = false;
+          
+          // Knotendetails im Info-Panel anzeigen
+          showNodeInfo(selectedElement);
+        });
+        
+        window.cy.on('select', 'edge', function(event) {
+          selectedElement = event.target;
+          editNodeBtn.disabled = true;
+          deleteElementBtn.disabled = false;
+        });
+        
+        window.cy.on('unselect', function() {
+          selectedElement = null;
+          editNodeBtn.disabled = true;
+          deleteElementBtn.disabled = true;
+          
+          // Info-Panel ausblenden
+          hideNodeInfo();
+        });
+        
+        // Rechtsklick-Menü
+        window.cy.on('cxttap', 'node', function(event) {
+          // Kontextmenü für Knoten anzeigen
+          if (isEditMode) {
+            const node = event.target;
+            const position = event.renderedPosition;
+            showNodeContextMenu(node, {
+              x: event.originalEvent.clientX,
+              y: event.originalEvent.clientY
+            });
+            event.preventDefault();
+          }
+        });
+        
+        window.cy.on('cxttap', function(event) {
+          // Kontextmenü zum Hinzufügen eines Knotens
+          if (isEditMode && event.target === window.cy) {
+            showAddNodeMenu({
+              x: event.originalEvent.clientX,
+              y: event.originalEvent.clientY
+            });
+            event.preventDefault();
+          }
+        });
       }).catch(error => {
         // Fehler: Fehlermeldung anzeigen
         console.error('Mindmap-Initialisierung fehlgeschlagen', error);
@@ -318,6 +601,96 @@ document.addEventListener('DOMContentLoaded', function() {
     console.error('Container #cy nicht gefunden');
   }
   
+  // Bearbeitungsmodus umschalten
+  toggleEditModeBtn.addEventListener('click', function() {
+    isEditMode = !isEditMode;
+    
+    if (isEditMode) {
+      // Bearbeitungsmodus aktivieren
+      crudPanel.style.display = 'flex';
+      editModeIndicator.classList.add('active');
+      toggleEditModeBtn.style.display = 'none';
+      saveChangesBtn.style.display = 'inline-flex';
+      cancelEditBtn.style.display = 'inline-flex';
+      window.cy.container().classList.add('editing-mode');
+      
+      // Aktiviere Knotenbewegung (dragging)
+      window.cy.nodes().unlock();
+    } else {
+      // Bearbeitungsmodus deaktivieren
+      crudPanel.style.display = 'none';
+      editModeIndicator.classList.remove('active');
+      toggleEditModeBtn.style.display = 'inline-flex';
+      saveChangesBtn.style.display = 'none';
+      cancelEditBtn.style.display = 'none';
+      window.cy.container().classList.remove('editing-mode');
+      
+      // Deaktiviere Knotenbewegung
+      window.cy.nodes().lock();
+    }
+  });
+  
+  // Änderungen speichern
+  saveChangesBtn.addEventListener('click', function() {
+    saveMindmapChanges(window.cy);
+  });
+  
+  // Bearbeitungsmodus abbrechen
+  cancelEditBtn.addEventListener('click', function() {
+    if (confirm('Möchten Sie den Bearbeitungsmodus wirklich verlassen? Nicht gespeicherte Änderungen gehen verloren.')) {
+      isEditMode = false;
+      crudPanel.style.display = 'none';
+      editModeIndicator.classList.remove('active');
+      toggleEditModeBtn.style.display = 'inline-flex';
+      saveChangesBtn.style.display = 'none';
+      cancelEditBtn.style.display = 'none';
+      window.cy.container().classList.remove('editing-mode');
+      
+      // Neuinitialisierung der Mindmap
+      initializeMindmap().then(() => {
+        loader.style.display = 'none';
+        statusMessage.style.display = 'none';
+      });
+    }
+  });
+  
+  // CRUD-Funktionen
+  createNodeBtn.addEventListener('click', function() {
+    if (isEditMode) {
+      addNewNode(window.cy);
+    }
+  });
+  
+  createEdgeBtn.addEventListener('click', function() {
+    if (isEditMode) {
+      enableEdgeCreationMode(window.cy);
+    }
+  });
+  
+  editNodeBtn.addEventListener('click', function() {
+    if (isEditMode && selectedElement && selectedElement.isNode()) {
+      editNodeProperties(selectedElement);
+    }
+  });
+  
+  deleteElementBtn.addEventListener('click', function() {
+    if (isEditMode && selectedElement) {
+      if (selectedElement.isNode()) {
+        deleteNode(selectedElement);
+      } else if (selectedElement.isEdge()) {
+        if (confirm('Möchten Sie diese Verbindung wirklich löschen?')) {
+          selectedElement.remove();
+        }
+      }
+    }
+  });
+  
+  saveMindmapBtn.addEventListener('click', function() {
+    if (isEditMode) {
+      saveMindmapChanges(window.cy);
+    }
+  });
+  
   // Zoom-Funktionen
   document.getElementById('zoomIn').addEventListener('click', function() {
     if (window.cy) window.cy.zoom(window.cy.zoom() * 1.2);
@@ -335,6 +708,36 @@ document.addEventListener('DOMContentLoaded', function() {
     const legend = document.getElementById('categoryLegend');
     legend.style.display = legend.style.display === 'none' ? 'flex' : 'none';
   });
+  
+  // Funktionen für Knoteninfo-Panel
+  function showNodeInfo(node) {
+    if (!node || !node.isNode()) return;
+    
+    const infoPanel = document.getElementById('infoPanel');
+    const infoTitle = infoPanel.querySelector('.info-title');
+    const infoContent = infoPanel.querySelector('.info-content');
+    
+    const data = node.data();
+    
+    infoTitle.textContent = data.label || 'Knotendetails';
+    
+    let contentHTML = `
+      <p><strong>Kategorie:</strong> ${data.category || 'Nicht kategorisiert'}</p>
+      <p><strong>Beschreibung:</strong> ${data.description || 'Keine Beschreibung verfügbar'}</p>
+    `;
+    
+    if (data.hasChildren) {
+      contentHTML += `<p><i class="fas fa-sitemap"></i> Hat Unterknoten</p>`;
+    }
+    
+    infoContent.innerHTML = contentHTML;
+    infoPanel.classList.add('visible');
+  }
+  
+  function hideNodeInfo() {
+    const infoPanel = document.getElementById('infoPanel');
+    infoPanel.classList.remove('visible');
+  }
 });
 </script>
 {% endblock %}