website/static/js/main.js

/**
 * MindMap - Hauptdatei für globale JavaScript-Funktionen
 */

// Import des ChatGPT-Assistenten
import ChatGPTAssistant from './modules/chatgpt-assistant.js';

/**
 * Hauptmodul für die MindMap-Anwendung
 * Verwaltet die globale Anwendungslogik
 */

document.addEventListener('DOMContentLoaded', function() {
  // Initialisiere die Anwendung
  MindMap.init();
  
  // Wende Dunkel-/Hellmodus an
  const isDarkMode = localStorage.getItem('darkMode') === 'dark';
  document.documentElement.classList.toggle('dark', isDarkMode);
});

/**
 * Hauptobjekt der MindMap-Anwendung
 */
const MindMap = {
  // App-Status
  initialized: false,
  darkMode: document.documentElement.classList.contains('dark'),
  pageInitializers: {},
  currentPage: document.body.dataset.page,
  
  /**
   * Initialisiert die MindMap-Anwendung
   */
  init() {
    if (this.initialized) return;
    
    console.log('MindMap-Anwendung wird initialisiert...');
    
    // Initialisiere den ChatGPT-Assistenten
    const assistant = new ChatGPTAssistant();
    assistant.init();
    // Speichere als Teil von MindMap
    this.assistant = assistant;
    
    // Seiten-spezifische Initialisierer aufrufen
    if (this.currentPage && this.pageInitializers[this.currentPage]) {
      this.pageInitializers[this.currentPage]();
    }
    
    // Event-Listener einrichten
    this.setupEventListeners();
    
    // Dunkel-/Hellmodus aus LocalStorage wiederherstellen
    if (localStorage.getItem('darkMode') === 'dark') {
      document.documentElement.classList.add('dark');
      this.darkMode = true;
    }
    
    // Mindmap initialisieren, falls auf der richtigen Seite
    this.initializeMindmap();
    
    this.initialized = true;
  },
  
  /**
   * Initialisiert die D3.js Mindmap-Visualisierung
   */
  initializeMindmap() {
    // Prüfe, ob wir auf der Mindmap-Seite sind
    const mindmapContainer = document.getElementById('mindmap-container');
    if (!mindmapContainer) return;

    try {
      console.log('Initialisiere Mindmap...');
      
      // Initialisiere die Mindmap
      const mindmap = new MindMapVisualization('#mindmap-container', {
        height: mindmapContainer.clientHeight || 600,
        nodeRadius: 18,
        selectedNodeRadius: 24,
        linkDistance: 150,
        onNodeClick: this.handleNodeClick.bind(this)
      });
      
      // Globale Referenz für andere Module
      window.mindmapInstance = mindmap;
      
      // Event-Listener für Zoom-Buttons
      const zoomInBtn = document.getElementById('zoom-in-btn');
      if (zoomInBtn) {
        zoomInBtn.addEventListener('click', () => {
          const svg = d3.select('#mindmap-container svg');
          const currentZoom = d3.zoomTransform(svg.node());
          const newScale = currentZoom.k * 1.3;
          svg.transition().duration(300).call(
            d3.zoom().transform,
            d3.zoomIdentity.translate(currentZoom.x, currentZoom.y).scale(newScale)
          );
        });
      }
      
      const zoomOutBtn = document.getElementById('zoom-out-btn');
      if (zoomOutBtn) {
        zoomOutBtn.addEventListener('click', () => {
          const svg = d3.select('#mindmap-container svg');
          const currentZoom = d3.zoomTransform(svg.node());
          const newScale = currentZoom.k / 1.3;
          svg.transition().duration(300).call(
            d3.zoom().transform,
            d3.zoomIdentity.translate(currentZoom.x, currentZoom.y).scale(newScale)
          );
        });
      }
      
      const centerBtn = document.getElementById('center-btn');
      if (centerBtn) {
        centerBtn.addEventListener('click', () => {
          const svg = d3.select('#mindmap-container svg');
          svg.transition().duration(500).call(
            d3.zoom().transform,
            d3.zoomIdentity.scale(1)
          );
        });
      }
      
      // Event-Listener für Add-Thought-Button
      const addThoughtBtn = document.getElementById('add-thought-btn');
      if (addThoughtBtn) {
        addThoughtBtn.addEventListener('click', () => {
          this.showAddThoughtDialog();
        });
      }
      
      // Event-Listener für Connect-Button
      const connectBtn = document.getElementById('connect-btn');
      if (connectBtn) {
        connectBtn.addEventListener('click', () => {
          this.showConnectDialog();
        });
      }
    } catch (error) {
      console.error('Fehler bei der Initialisierung der Mindmap:', error);
    }
  },
  
  /**
   * Handler für Klick auf einen Knoten in der Mindmap
   * @param {Object} node - Der angeklickte Knoten
   */
  handleNodeClick(node) {
    console.log('Knoten wurde angeklickt:', node);
    
    // Hier könnte man Logik hinzufügen, um Detailinformationen anzuzeigen
    // oder den ausgewählten Knoten hervorzuheben
    const detailsContainer = document.getElementById('node-details');
    if (detailsContainer) {
      detailsContainer.innerHTML = `
        <div class="p-4">
          <h3 class="text-xl font-bold mb-2">${node.name}</h3>
          <p class="text-gray-300 mb-4">${node.description || 'Keine Beschreibung verfügbar.'}</p>
          
          <div class="flex items-center justify-between">
            <span class="text-sm">
              <i class="fas fa-brain mr-1"></i> ${node.thought_count || 0} Gedanken
            </span>
            <button class="px-3 py-1 bg-purple-600 bg-opacity-30 rounded-lg text-sm">
              <i class="fas fa-plus mr-1"></i> Gedanke hinzufügen
            </button>
          </div>
        </div>
      `;
      
      // Button zum Hinzufügen eines Gedankens
      const addThoughtBtn = detailsContainer.querySelector('button');
      addThoughtBtn.addEventListener('click', () => {
        this.showAddThoughtDialog(node);
      });
    }
  },
  
  /**
   * Dialog zum Hinzufügen eines neuen Knotens
   */
  showAddNodeDialog() {
    // Diese Funktionalität würde in einer vollständigen Implementierung eingebunden werden
    alert('Diese Funktion steht bald zur Verfügung!');
  },
  
  /**
   * Dialog zum Hinzufügen eines neuen Gedankens zu einem Knoten
   */
  showAddThoughtDialog(node) {
    // Diese Funktionalität würde in einer vollständigen Implementierung eingebunden werden
    alert('Diese Funktion steht bald zur Verfügung!');
  },
  
  /**
   * Dialog zum Verbinden von Knoten
   */
  showConnectDialog() {
    // Diese Funktionalität würde in einer vollständigen Implementierung eingebunden werden
    alert('Diese Funktion steht bald zur Verfügung!');
  },

  /**
   * Richtet Event-Listener für die Benutzeroberfläche ein
   */
  setupEventListeners() {
    // Event-Listener für Dark Mode-Wechsel
    document.addEventListener('darkModeToggled', (event) => {
      this.darkMode = event.detail.isDark;
    });
    
    // Responsive Anpassungen bei Fenstergröße
    window.addEventListener('resize', () => {
      if (window.mindmapInstance) {
        const container = document.getElementById('mindmap-container');
        if (container) {
          window.mindmapInstance.width = container.clientWidth;
          window.mindmapInstance.height = container.clientHeight;
        }
      }
    });
  }
};

// Globale Export für andere Module
window.MindMap = MindMap;