chore: Änderungen commited

templates/mindmap.html

@@ -157,6 +157,43 @@
   .pulse {
     animation: pulse 2s infinite;
   }
+  
+  /* Ladeanzeige */
+  .loader {
+    border: 4px solid rgba(255, 255, 255, 0.1);
+    border-radius: 50%;
+    border-top: 4px solid #60a5fa;
+    width: 40px;
+    height: 40px;
+    animation: spin 1s linear infinite;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-top: -20px;
+    margin-left: -20px;
+    z-index: 5;
+  }
+  
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+  
+  /* Status-Meldung */
+  .status-message {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: rgba(15, 23, 42, 0.9);
+    padding: 1rem 2rem;
+    border-radius: 0.5rem;
+    color: white;
+    font-size: 1rem;
+    z-index: 15;
+    text-align: center;
+    max-width: 80%;
+  }
 </style>
 {% endblock %}
 
@@ -167,6 +204,12 @@
     <h1 class="mindmap-title">Interaktive Wissenslandkarte</h1>
   </div>
 
+  <!-- Ladeanzeige -->
+  <div id="loader" class="loader"></div>
+  
+  <!-- Status-Meldung -->
+  <div id="statusMessage" class="status-message" style="display: none;">Lade Mindmap...</div>
+
   <!-- Hauptvisualisierung -->
   <div id="cy"></div>
 
@@ -199,23 +242,23 @@
   <!-- Kategorie-Legende -->
   <div id="categoryLegend" class="category-legend">
     <div class="category-item">
-      <div class="category-color" style="background-color: #60a5fa;"></div>
+      <div class="category-color" style="background-color: #9F7AEA;"></div>
       <span>Philosophie</span>
     </div>
     <div class="category-item">
-      <div class="category-color" style="background-color: #8b5cf6;"></div>
+      <div class="category-color" style="background-color: #60A5FA;"></div>
       <span>Wissenschaft</span>
     </div>
     <div class="category-item">
-      <div class="category-color" style="background-color: #10b981;"></div>
+      <div class="category-color" style="background-color: #10B981;"></div>
       <span>Technologie</span>
     </div>
     <div class="category-item">
-      <div class="category-color" style="background-color: #f59e0b;"></div>
+      <div class="category-color" style="background-color: #F59E0B;"></div>
       <span>Künste</span>
     </div>
     <div class="category-item">
-      <div class="category-color" style="background-color: #ef4444;"></div>
+      <div class="category-color" style="background-color: #EF4444;"></div>
       <span>Psychologie</span>
     </div>
   </div>
@@ -229,4 +272,69 @@
 
 <!-- Unsere JavaScript-Dateien -->
 <script src="{{ url_for('static', filename='js/update_mindmap.js') }}"></script>
+
+<!-- Initialisierung -->
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+  console.log('DOMContentLoaded Event ausgelöst');
+  
+  const cyContainer = document.getElementById('cy');
+  const loader = document.getElementById('loader');
+  const statusMessage = document.getElementById('statusMessage');
+  
+  if (cyContainer) {
+    console.log('Container gefunden:', cyContainer);
+    
+    // Loader und Statusmeldung anzeigen
+    loader.style.display = 'block';
+    statusMessage.textContent = 'Lade Mindmap...';
+    statusMessage.style.display = 'block';
+    
+    // Prüfen, ob Cytoscape vorhanden ist
+    if (typeof cytoscape !== 'undefined') {
+      console.log('Cytoscape ist verfügbar');
+      
+      // Initialisieren der Mindmap
+      initializeMindmap().then(() => {
+        // Erfolg: Loader und Statusmeldung ausblenden
+        loader.style.display = 'none';
+        statusMessage.style.display = 'none';
+      }).catch(error => {
+        // Fehler: Fehlermeldung anzeigen
+        console.error('Mindmap-Initialisierung fehlgeschlagen', error);
+        loader.style.display = 'none';
+        statusMessage.textContent = 'Mindmap konnte nicht initialisiert werden: ' + error.message;
+        statusMessage.style.backgroundColor = 'rgba(220, 38, 38, 0.9)';
+        statusMessage.style.display = 'block';
+      });
+    } else {
+      console.error('Cytoscape ist nicht verfügbar');
+      loader.style.display = 'none';
+      statusMessage.textContent = 'Cytoscape-Bibliothek konnte nicht geladen werden';
+      statusMessage.style.backgroundColor = 'rgba(220, 38, 38, 0.9)';
+      statusMessage.style.display = 'block';
+    }
+  } else {
+    console.error('Container #cy nicht gefunden');
+  }
+  
+  // Zoom-Funktionen
+  document.getElementById('zoomIn').addEventListener('click', function() {
+    if (window.cy) window.cy.zoom(window.cy.zoom() * 1.2);
+  });
+  
+  document.getElementById('zoomOut').addEventListener('click', function() {
+    if (window.cy) window.cy.zoom(window.cy.zoom() * 0.8);
+  });
+  
+  document.getElementById('resetView').addEventListener('click', function() {
+    if (window.cy) window.cy.fit();
+  });
+  
+  document.getElementById('toggleLegend').addEventListener('click', function() {
+    const legend = document.getElementById('categoryLegend');
+    legend.style.display = legend.style.display === 'none' ? 'flex' : 'none';
+  });
+});
+</script>
 {% endblock %}