chore: Änderungen commited

templates/edit_mindmap.html

@@ -263,6 +263,20 @@
             </button>
           </div>
         </form>
+
+        <!-- Mindmap-Editor -->
+        <div class="mt-8">
+          <h3 class="text-xl font-semibold mb-4">Mindmap bearbeiten</h3>
+          <div class="mindmap-container">
+            <div id="cy" class="w-full h-[600px] rounded-xl border"
+                 x-bind:class="darkMode ? 'border-gray-700' : 'border-gray-200'">
+            </div>
+          </div>
+          <!-- Bearbeitungshinweise -->
+          <div class="mt-4 text-sm opacity-80">
+            <p><i class="fas fa-info-circle mr-2"></i>Klicke auf Knoten zum Bearbeiten, ziehe sie zum Neuanordnen oder nutze die Toolbar für weitere Funktionen.</p>
+          </div>
+        </div>
       </div>
     </div>
     
@@ -288,6 +302,8 @@
 {% endblock %}
 
 {% block extra_js %}
+<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.26.0/cytoscape.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape-cose-bilkent/4.1.0/cytoscape-cose-bilkent.min.js"></script>
 <script nonce="{{ csp_nonce }}">
   document.addEventListener('DOMContentLoaded', function() {
     // Einfache Animationen für die Eingabefelder
@@ -313,6 +329,95 @@
       submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Wird gespeichert...';
       submitBtn.disabled = true;
     });
+
+    // Mindmap initialisieren
+    const mindmap = new MindMap.Visualization('cy', {
+      enableEditing: true,
+      apiEndpoint: '/api/mindmap/{{ mindmap.id }}',
+      onNodeClick: function(nodeData) {
+        console.log("Knoten ausgewählt:", nodeData);
+      },
+      onChange: function(data) {
+        // Automatisches Speichern bei Änderungen
+        fetch('/api/mindmap/{{ mindmap.id }}/update', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'X-CSRFToken': '{{ csrf_token() }}'
+          },
+          body: JSON.stringify(data)
+        }).then(response => {
+          if (!response.ok) {
+            throw new Error('Netzwerkfehler beim Speichern');
+          }
+          console.log('Änderungen gespeichert');
+        }).catch(error => {
+          console.error('Fehler beim Speichern:', error);
+          alert('Fehler beim Speichern der Änderungen');
+        });
+      }
+    });
+
+    // Formularfelder mit Mindmap verbinden
+    const nameInput = document.getElementById('name');
+    const descriptionInput = document.getElementById('description');
+
+    // Aktualisiere Mindmap wenn sich die Eingaben ändern
+    nameInput.addEventListener('input', function() {
+      if (mindmap.cy) {
+        const rootNode = mindmap.cy.$('#root');
+        if (rootNode.length > 0) {
+          rootNode.data('name', this.value || 'Mindmap');
+          mindmap.saveToServer();
+        }
+      }
+    });
+
+    // Initialisiere die Mindmap mit existierenden Daten
+    mindmap.initialize().then(() => {
+      console.log("Mindmap-Editor initialisiert");
+      
+      // Lade existierende Daten
+      fetch('/api/mindmap/{{ mindmap.id }}/data')
+        .then(response => response.json())
+        .then(data => {
+          mindmap.loadData(data);
+          console.log("Mindmap-Daten geladen");
+        })
+        .catch(error => {
+          console.error("Fehler beim Laden der Mindmap-Daten:", error);
+          alert("Fehler beim Laden der Mindmap");
+        });
+    }).catch(error => {
+      console.error("Fehler bei der Initialisierung des Editors:", error);
+    });
+
+    // Autosave-Status Anzeige
+    const statusIndicator = document.createElement('div');
+    statusIndicator.className = 'fixed bottom-4 right-4 px-4 py-2 rounded-full text-sm transition-all duration-300';
+    document.body.appendChild(statusIndicator);
+
+    // Zeige Speicherstatus
+    function showStatus(message, isError = false) {
+      statusIndicator.textContent = message;
+      statusIndicator.className = `fixed bottom-4 right-4 px-4 py-2 rounded-full text-sm transition-all duration-300 ${
+        isError
+          ? 'bg-red-500 text-white'
+          : 'bg-green-500 text-white'
+      }`;
+      setTimeout(() => {
+        statusIndicator.className = 'fixed bottom-4 right-4 px-4 py-2 rounded-full text-sm transition-all duration-300 opacity-0';
+      }, 2000);
+    }
+
+    // Event-Listener für Speicherstatus
+    document.addEventListener('mindmapSaved', () => {
+      showStatus('Änderungen gespeichert');
+    });
+
+    document.addEventListener('mindmapError', (event) => {
+      showStatus(event.detail.message, true);
+    });
   });
 </script>
 {% endblock %}