chore: Änderungen commited

templates/create_mindmap.html

@@ -261,6 +261,16 @@
             </button>
           </div>
         </form>
+
+        <!-- Mindmap-Vorschau -->
+        <div class="mt-8">
+          <h3 class="text-xl font-semibold mb-4">Vorschau</h3>
+          <div class="mindmap-container">
+            <div id="cy" class="w-full h-[400px] rounded-xl border"
+                 x-bind:class="darkMode ? 'border-gray-700' : 'border-gray-200'">
+            </div>
+          </div>
+        </div>
       </div>
     </div>
     
@@ -286,6 +296,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
@@ -311,6 +323,43 @@
       submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Wird erstellt...';
       submitBtn.disabled = true;
     });
+
+    // Mindmap-Vorschau initialisieren
+    const mindmap = new MindMap.Visualization('cy', {
+      enableEditing: true,
+      onNodeClick: function(nodeData) {
+        console.log("Knoten ausgewählt:", nodeData);
+      }
+    });
+
+    // 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 || 'Neue Mindmap');
+        }
+      }
+    });
+
+    // Initialisiere die Mindmap
+    mindmap.initialize().then(() => {
+      console.log("Mindmap-Vorschau initialisiert");
+      
+      // Setze initiale Werte
+      if (nameInput.value) {
+        const rootNode = mindmap.cy.$('#root');
+        if (rootNode.length > 0) {
+          rootNode.data('name', nameInput.value);
+        }
+      }
+    }).catch(error => {
+      console.error("Fehler bei der Initialisierung der Mindmap:", error);
+    });
   });
 </script>
 {% endblock %}