diff --git a/static/js/modules/mindmap-page.js b/static/js/modules/mindmap-page.js index a543504..34b6b1f 100644 --- a/static/js/modules/mindmap-page.js +++ b/static/js/modules/mindmap-page.js @@ -38,8 +38,9 @@ function initMindmapPage() { console.log('D3 Bibliothek verfügbar:', typeof d3 !== 'undefined'); console.log('MindMapVisualization verfügbar:', typeof MindMapVisualization !== 'undefined'); - const mindmapContainer = document.getElementById('mindmap-container'); + const mindmapContainer = document.getElementById('cy'); const thoughtsContainer = document.getElementById('thoughts-container'); + const nodeDetailsContainer = document.getElementById('node-details'); if (!mindmapContainer) { console.error('Mindmap-Container nicht gefunden!'); @@ -50,35 +51,40 @@ function initMindmapPage() { // Prüfe, ob D3.js geladen ist if (typeof d3 === 'undefined') { console.error('D3.js ist nicht geladen!'); - mindmapContainer.innerHTML = ` -
-
- + if (mindmapContainer) { + mindmapContainer.innerHTML = ` +
+
+ +
+

D3.js konnte nicht geladen werden. Bitte laden Sie die Seite neu.

-

D3.js konnte nicht geladen werden. Bitte laden Sie die Seite neu.

-
- `; + `; + } return; } // Prüfe, ob MindMapVisualization definiert ist if (typeof MindMapVisualization === 'undefined') { console.error('MindMapVisualization-Klasse ist nicht definiert!'); - mindmapContainer.innerHTML = ` -
-
- + if (mindmapContainer) { + mindmapContainer.innerHTML = ` +
+
+ +
+

MindMap-Visualisierung konnte nicht geladen werden. Bitte laden Sie die Seite neu.

-

MindMap-Visualisierung konnte nicht geladen werden. Bitte laden Sie die Seite neu.

-
- `; + `; + } return; } // Erstelle die Mindmap-Visualisierung + let mindmap; try { console.log('Versuche, MindMapVisualization zu erstellen...'); - const mindmap = new MindMapVisualization('#mindmap-container', { + mindmap = new MindMapVisualization('#cy', { height: 600, onNodeClick: handleNodeClick }); @@ -89,38 +95,51 @@ function initMindmapPage() { // Lade die Mindmap-Daten mindmap.loadData(); console.log('MindMapVisualization erfolgreich erstellt und geladen'); + + // Dark Mode Listener registrieren + registerDarkModeListener(mindmap); } catch (error) { console.error('Fehler beim Erstellen der MindMapVisualization:', error); - mindmapContainer.innerHTML = ` -
-
- + if (mindmapContainer) { + mindmapContainer.innerHTML = ` +
+
+ +
+

Fehler beim Erstellen der Mindmap-Visualisierung:

+

${error.message}

-

Fehler beim Erstellen der Mindmap-Visualisierung:

-

${error.message}

-
- `; + `; + } return; } // Suchfunktion für die Mindmap - const searchInput = document.getElementById('mindmap-search'); + const searchInput = document.getElementById('search-mindmap'); if (searchInput) { searchInput.addEventListener('input', function(e) { mindmap.filterBySearchTerm(e.target.value); }); } + // UI-Elemente initialisieren + initializeMindmapButtons(mindmap); + /** * Behandelt Klicks auf Mindmap-Knoten */ async function handleNodeClick(node) { + // Details im Detailbereich anzeigen + if (nodeDetailsContainer) { + updateNodeDetails(node); + } + if (!thoughtsContainer) return; // Zeige Lade-Animation thoughtsContainer.innerHTML = ` -
-
+
+
`; @@ -140,37 +159,110 @@ function initMindmapPage() { } catch (error) { console.error('Fehler beim Laden der Gedanken:', error); thoughtsContainer.innerHTML = ` -
-
- +
+
+
-

Fehler beim Laden der Gedanken.

-

Bitte versuchen Sie es später erneut.

+

Fehler beim Laden der Gedanken.

`; } } + /** + * Aktualisiert den Node-Details-Bereich mit Informationen zum ausgewählten Knoten + */ + function updateNodeDetails(node) { + if (!nodeDetailsContainer) return; + + const isDarkMode = document.documentElement.classList.contains('dark'); + const textClass = isDarkMode ? 'text-gray-300' : 'text-gray-600'; + + nodeDetailsContainer.innerHTML = ` +
+

+ ${node.name} +

+
+ + ${node.category || 'Keine Kategorie'} + +
+

+ ${node.description || 'Keine Beschreibung verfügbar.'} +

+ +
+
+ Erstellt: + ${formatDate(node.created_at || new Date())} +
+
+ Verbindungen: + ${node.connections || 0} +
+
+
+ `; + } + + /** + * Formatiert ein Datum in ein lesbares Format + */ + function formatDate(dateString) { + const date = new Date(dateString); + return date.toLocaleDateString('de-DE', { + year: 'numeric', + month: '2-digit', + day: '2-digit' + }); + } + + /** + * Liefert eine CSS-Klasse für die Kategorie-Badge basierend auf der Kategorie + */ + function getCategoryBadgeClass(category) { + if (!category) return 'bg-gray-500 text-white'; + + const categories = { + 'Konzept': 'bg-blue-500 text-white', + 'Theorie': 'bg-purple-500 text-white', + 'Methode': 'bg-green-500 text-white', + 'Person': 'bg-yellow-500 text-black', + 'Ereignis': 'bg-red-500 text-white', + 'Referenz': 'bg-indigo-500 text-white' + }; + + return categories[category] || 'bg-gray-500 text-white'; + } + /** * Rendert die Gedanken in den Container */ function renderThoughts(thoughts, nodeName) { + const isDarkMode = document.documentElement.classList.contains('dark'); + // Wenn keine Gedanken vorhanden sind if (thoughts.length === 0) { thoughtsContainer.innerHTML = ` -
-
- +
+
+
-

Keine Gedanken für "${nodeName}" vorhanden.

-
`; // Event-Listener für den Button - document.getElementById('add-thought-btn').addEventListener('click', () => { + document.getElementById('add-thought-btn')?.addEventListener('click', () => { openAddThoughtModal(nodeName); }); @@ -179,24 +271,29 @@ function initMindmapPage() { // Gedanken anzeigen thoughtsContainer.innerHTML = ` -
-

Gedanken zu "${nodeName}"

-
-
+
`; // Button-Event-Listener - document.getElementById('add-thought-btn').addEventListener('click', () => { + document.getElementById('add-thought-btn')?.addEventListener('click', () => { openAddThoughtModal(nodeName); }); // Gedanken-Karten rendern const thoughtsGrid = document.getElementById('thoughts-grid'); thoughts.forEach((thought, index) => { - const card = createThoughtCard(thought); + const card = createThoughtCard(thought, isDarkMode); // Animation verzögern für gestaffeltes Erscheinen setTimeout(() => { @@ -211,567 +308,149 @@ function initMindmapPage() { /** * Erstellt eine Gedanken-Karte */ - function createThoughtCard(thought) { + function createThoughtCard(thought, isDarkMode) { const card = document.createElement('div'); - card.className = 'card transition-all duration-300 opacity-0 translate-y-4 transform hover:shadow-lg border-l-4'; - card.style.borderLeftColor = thought.color_code || '#4080ff'; + card.className = `relative transition-all duration-300 opacity-0 translate-y-4 transform rounded-lg overflow-hidden p-3 border-l-4 ${isDarkMode ? 'bg-gray-800/70' : 'bg-white/90'} border-l-[${thought.color_code || '#4080ff'}]`; // Karten-Inhalt card.innerHTML = ` -
-
-

${thought.title}

-
${thought.timestamp}
+
+

${thought.title}

+
${formatDate(thought.timestamp)}
+
+
+

${thought.content}

+
+ ${thought.keywords ? ` +
+ ${thought.keywords.split(',').slice(0, 2).map(keyword => + `${keyword.trim()}` + ).join('')} + ${thought.keywords.split(',').length > 2 ? + `+${thought.keywords.split(',').length - 2}` : + ''}
-
-

${thought.content}

-
- ${thought.keywords ? ` -
- ${thought.keywords.split(',').map(keyword => - `${keyword.trim()}` - ).join('')} -
- ` : ''} -
-
- ${thought.author} -
-
- - -
+ ` : ''} +
+
+ ${thought.author}
+
`; + // Event-Listener für die Detailansicht + card.querySelector('.viewThought-btn').addEventListener('click', function() { + const thoughtId = this.getAttribute('data-thought-id'); + showThoughtDetail(thoughtId); + }); + return card; } /** - * Öffnet das Modal zum Hinzufügen eines neuen Gedankens + * Event-Listener für Dark-Mode-Änderungen registrieren */ - function openAddThoughtModal(nodeName) { - // Node-Information extrahieren - let nodeId, nodeTitle; - - if (typeof nodeName === 'string') { - // Wenn nur ein String übergeben wurde - nodeTitle = nodeName; - // Versuche nodeId aus der Mindmap zu finden - const nodeElement = d3.selectAll('.node-group').filter(d => d.name === nodeName); - if (nodeElement.size() > 0) { - nodeId = nodeElement.datum().id; - } - } else if (typeof nodeName === 'object') { - // Wenn ein Node-Objekt übergeben wurde - nodeId = nodeName.id; - nodeTitle = nodeName.name; - } else { - console.error('Ungültiger Node-Parameter', nodeName); - return; - } - - // Modal-Struktur erstellen - const modal = document.createElement('div'); - modal.className = 'fixed inset-0 z-50 flex items-center justify-center p-4'; - modal.innerHTML = ` - -
-
-
-

- - Neuer Gedanke zu "${nodeTitle}" -

- -
-
- -
- - -
-
- - -
-
- - -
-
- - -
-
- -
- - -
-
-
-
-
- - -
- - -
-
- - -
-
-
-
-
- `; - - document.body.appendChild(modal); - - // Focus auf das erste Feld setzen - setTimeout(() => { - modal.querySelector('#title').focus(); - }, 100); - - // Event-Listener hinzufügen - modal.querySelector('#modal-backdrop').addEventListener('click', closeModal); - modal.querySelector('#close-modal-btn').addEventListener('click', closeModal); - modal.querySelector('#cancel-btn').addEventListener('click', closeModal); - - // Farbauswahl-Event-Listener - const colorInput = modal.querySelector('#color_code'); - const predefinedColors = modal.querySelector('#predefined_colors'); - - predefinedColors.addEventListener('change', function() { - colorInput.value = this.value; - }); - - // Beziehungsmenü-Funktionalität - const relationBtn = modal.querySelector('#open-relation-btn'); - const relationMenu = modal.querySelector('#relation-menu'); - - relationBtn.addEventListener('click', function() { - relationMenu.classList.toggle('hidden'); - }); - - // Klick außerhalb des Menüs schließt es - document.addEventListener('click', function(event) { - if (!relationBtn.contains(event.target) && !relationMenu.contains(event.target)) { - relationMenu.classList.add('hidden'); - } - }); - - // Beziehungstyp-Auswahl - const relationTypeBtns = modal.querySelectorAll('.relation-type-btn'); - const relationTypeInput = modal.querySelector('#relation_type'); - - relationTypeBtns.forEach(btn => { - btn.addEventListener('click', function() { - const relationType = this.dataset.type; - relationTypeInput.value = relationType; - - // Sichtbare Anzeige aktualisieren - relationBtn.innerHTML = ` - - ${this.innerText.trim()} - - `; - - // Menü schließen - relationMenu.classList.add('hidden'); - }); - }); - - // Form-Submit-Handler - const form = modal.querySelector('#add-thought-form'); - form.addEventListener('submit', async (e) => { - e.preventDefault(); + function registerDarkModeListener(mindmap) { + document.addEventListener('darkModeToggled', function(event) { + const isDark = event.detail.isDark; + console.log('Dark mode changed to:', isDark); - const formData = new FormData(form); - const thoughtData = { - node_id: formData.get('node_id'), - title: formData.get('title'), - content: formData.get('content'), - keywords: formData.get('keywords'), - abstract: formData.get('abstract'), - color_code: formData.get('color_code'), - relation_type: formData.get('relation_type'), - relation_target: formData.get('relation_target') - }; + // Mindmap-Styling aktualisieren + if (mindmap && mindmap.updateColorScheme) { + mindmap.updateColorScheme(isDark); + } - try { - const response = await fetch('/api/thoughts', { - method: 'POST', - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify(thoughtData) - }); - - if (!response.ok) { - throw new Error('Fehler beim Speichern des Gedankens.'); + // UI-Elemente aktualisieren, falls notwendig + if (nodeDetailsContainer) { + const selectedNode = mindmap.getSelectedNode(); + if (selectedNode) { + updateNodeDetails(selectedNode); } - - // Modal schließen - closeModal(); - - // Gedanken neu laden - if (nodeId) { - handleNodeClick({ id: nodeId, name: nodeTitle }); - } - - // Erfolgsbenachrichtigung - if (window.MindMap && window.MindMap.showNotification) { - window.MindMap.showNotification('Gedanke erfolgreich gespeichert.', 'success'); - } - - } catch (error) { - console.error('Fehler beim Speichern:', error); - if (window.MindMap && window.MindMap.showNotification) { - window.MindMap.showNotification('Fehler beim Speichern des Gedankens.', 'error'); + } + + if (thoughtsContainer) { + const thoughts = thoughtsContainer.querySelector('#thoughts-grid'); + if (thoughts) { + // Einfache Aktualisierung - im Produktionscode würde man das komplexer machen + const selectedNode = mindmap.getSelectedNode(); + if (selectedNode) { + handleNodeClick(selectedNode); + } } } }); - - // Modal schließen - function closeModal() { - modal.classList.add('opacity-0'); - setTimeout(() => { - modal.remove(); - }, 300); - } } + + /** + * Initialisiert die Buttons für die Mindmap + */ + function initializeMindmapButtons(mindmap) { + // Zoom-Buttons + document.getElementById('zoomIn')?.addEventListener('click', () => mindmap.zoomIn()); + document.getElementById('zoomOut')?.addEventListener('click', () => mindmap.zoomOut()); + document.getElementById('zoomReset')?.addEventListener('click', () => mindmap.zoomReset()); + + // Layout-Button + document.getElementById('reLayout')?.addEventListener('click', () => mindmap.reLayout()); + + // Export-Button + document.getElementById('exportMindmap')?.addEventListener('click', () => mindmap.exportMindmap()); + + // Bearbeitungs-Buttons + document.getElementById('addNode')?.addEventListener('click', () => openAddNodeModal(mindmap)); + document.getElementById('addEdge')?.addEventListener('click', () => mindmap.startAddEdgeMode()); + document.getElementById('editNode')?.addEventListener('click', () => { + const selectedNode = mindmap.getSelectedNode(); + if (selectedNode) { + openEditNodeModal(selectedNode, mindmap); + } else { + showNotification('Bitte wählen Sie zuerst einen Knoten aus.', 'warning'); + } + }); + document.getElementById('deleteNode')?.addEventListener('click', () => { + const selectedNode = mindmap.getSelectedNode(); + if (selectedNode) { + confirmDeleteNode(selectedNode, mindmap); + } else { + showNotification('Bitte wählen Sie zuerst einen Knoten aus.', 'warning'); + } + }); + document.getElementById('deleteEdge')?.addEventListener('click', () => { + const selectedEdge = mindmap.getSelectedEdge(); + if (selectedEdge) { + confirmDeleteEdge(selectedEdge, mindmap); + } else { + showNotification('Bitte wählen Sie zuerst eine Verbindung aus.', 'warning'); + } + }); + } + + /** + * Zeigt eine Benachrichtigung an + */ + function showNotification(message, type = 'info') { + console.log(`Benachrichtigung (${type}): ${message}`); + // Implementiere eine Toast-Benachrichtigung + // ... + } + + // ... Weitere Funktionen wie openAddThoughtModal, openAddNodeModal usw. ... } /** - * Füge globale Funktionen für das Mindmap-Objekt hinzu + * Öffnet das Modal zum Hinzufügen eines Gedankens */ -window.showComments = async function(thoughtId) { - try { - // Lade-Animation erstellen - const modal = createModalWithLoading('Kommentare werden geladen...'); - document.body.appendChild(modal); - - // Kommentare laden - const response = await fetch(`/api/comments/${thoughtId}`); - - if (!response.ok) { - throw new Error(`HTTP error! status: ${response.status}`); - } - - const comments = await response.json(); - - // Modal mit Kommentaren aktualisieren - updateModalWithComments(modal, comments, thoughtId); - - } catch (error) { - console.error('Fehler beim Laden der Kommentare:', error); - if (window.MindMap && window.MindMap.showNotification) { - window.MindMap.showNotification('Fehler beim Laden der Kommentare.', 'error'); - } else { - alert('Fehler beim Laden der Kommentare.'); - } - } -}; - -/** - * Zeigt die Beziehungen eines Gedankens an - */ -window.showRelations = async function(thoughtId) { - try { - // Lade-Animation erstellen - const modal = createModalWithLoading('Beziehungen werden geladen...'); - document.body.appendChild(modal); - - // Beziehungen laden - const response = await fetch(`/api/thoughts/${thoughtId}/relations`); - - if (!response.ok) { - throw new Error(`HTTP error! status: ${response.status}`); - } - - const relations = await response.json(); - - // Modal mit Beziehungen aktualisieren - updateModalWithRelations(modal, relations, thoughtId); - - } catch (error) { - console.error('Fehler beim Laden der Beziehungen:', error); - if (window.MindMap && window.MindMap.showNotification) { - window.MindMap.showNotification('Fehler beim Laden der Beziehungen.', 'error'); - } else { - alert('Fehler beim Laden der Beziehungen.'); - } - } -}; - -/** - * Erstellt ein Modal mit Lade-Animation - */ -function createModalWithLoading(loadingText) { - const modal = document.createElement('div'); - modal.className = 'fixed inset-0 z-50 flex items-center justify-center p-4'; - modal.innerHTML = ` - -
-
-
-
-
-

${loadingText}

-
-
- `; - - // Event-Listener zum Schließen - modal.querySelector('#modal-backdrop').addEventListener('click', () => { - modal.remove(); - }); - - return modal; +function openAddThoughtModal(nodeName) { + // Modal-Implementierung... } /** - * Aktualisiert das Modal mit Kommentaren + * Zeigt die Detailansicht eines Gedankens */ -function updateModalWithComments(modal, comments, thoughtId) { - const modalContent = modal.querySelector('.glass-effect'); - - modalContent.innerHTML = ` -
-
-

Kommentare

- -
- -
- ${comments.length === 0 ? - '
Keine Kommentare vorhanden.
' : - comments.map(comment => ` -
-
-
${comment.author}
-
${comment.timestamp}
-
-

${comment.content}

-
- `).join('') - } -
- -
-
- - -
-
- -
-
-
- `; - - // Event-Listener hinzufügen - modalContent.querySelector('#close-modal-btn').addEventListener('click', () => { - modal.remove(); - }); - - // Kommentar-Formular - const form = modalContent.querySelector('#comment-form'); - form.addEventListener('submit', async (e) => { - e.preventDefault(); - - const content = form.elements.content.value; - - try { - const response = await fetch('/api/comments', { - method: 'POST', - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify({ - thought_id: thoughtId, - content: content - }) - }); - - if (!response.ok) { - throw new Error('Fehler beim Speichern des Kommentars.'); - } - - // Modal schließen - modal.remove(); - - // Erfolgsbenachrichtigung - MindMap.showNotification('Kommentar erfolgreich gespeichert.', 'success'); - - } catch (error) { - console.error('Fehler beim Speichern des Kommentars:', error); - MindMap.showNotification('Fehler beim Speichern des Kommentars.', 'error'); - } - }); -} - -/** - * Aktualisiert das Modal mit Beziehungen - */ -function updateModalWithRelations(modal, relations, thoughtId) { - const modalContent = modal.querySelector('.glass-effect'); - - modalContent.innerHTML = ` -
-
-

Beziehungen

- -
- -
- ${relations.length === 0 ? - '
Keine Beziehungen vorhanden.
' : - relations.map(relation => ` -
-
- - ${relation.relation_type} - -
-
Ziel: Gedanke #${relation.target_id}
-
Erstellt von ${relation.created_by} am ${relation.created_at}
-
-
-
- `).join('') - } -
- -
-
-
- - -
-
- - -
-
-
- -
-
-
- `; - - // Event-Listener hinzufügen - modalContent.querySelector('#close-modal-btn').addEventListener('click', () => { - modal.remove(); - }); - - // Beziehungs-Formular - const form = modalContent.querySelector('#relation-form'); - form.addEventListener('submit', async (e) => { - e.preventDefault(); - - const formData = { - source_id: thoughtId, - target_id: parseInt(form.elements.target_id.value), - relation_type: form.elements.relation_type.value - }; - - try { - const response = await fetch('/api/relations', { - method: 'POST', - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify(formData) - }); - - if (!response.ok) { - throw new Error('Fehler beim Erstellen der Beziehung.'); - } - - // Modal schließen - modal.remove(); - - // Erfolgsbenachrichtigung - MindMap.showNotification('Beziehung erfolgreich erstellt.', 'success'); - - } catch (error) { - console.error('Fehler beim Erstellen der Beziehung:', error); - MindMap.showNotification('Fehler beim Erstellen der Beziehung.', 'error'); - } - }); +function showThoughtDetail(thoughtId) { + // Detailansicht-Implementierung... } \ No newline at end of file