719 lines
27 KiB
JavaScript
719 lines
27 KiB
JavaScript
/**
|
|
* Mindmap-Seite JavaScript
|
|
* Spezifische Funktionen für die Mindmap-Seite
|
|
*/
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Registriere den Initialisierer im MindMap-Objekt
|
|
if (window.MindMap) {
|
|
window.MindMap.pageInitializers.mindmap = initMindmapPage;
|
|
}
|
|
|
|
// Prüfe, ob wir auf der Mindmap-Seite sind und initialisiere
|
|
if (document.body.dataset.page === 'mindmap') {
|
|
initMindmapPage();
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Initialisiert die Mindmap-Seite
|
|
*/
|
|
function initMindmapPage() {
|
|
const mindmapContainer = document.getElementById('mindmap-container');
|
|
const thoughtsContainer = document.getElementById('thoughts-container');
|
|
|
|
if (!mindmapContainer) {
|
|
console.error('Mindmap-Container nicht gefunden!');
|
|
return;
|
|
}
|
|
|
|
// Prüfe, ob D3.js geladen ist
|
|
if (typeof d3 === 'undefined') {
|
|
console.error('D3.js ist nicht geladen!');
|
|
mindmapContainer.innerHTML = `
|
|
<div class="glass-effect p-6 text-center">
|
|
<div class="text-red-500 mb-4">
|
|
<i class="fa-solid fa-triangle-exclamation text-4xl"></i>
|
|
</div>
|
|
<p class="text-xl">D3.js konnte nicht geladen werden. Bitte laden Sie die Seite neu.</p>
|
|
</div>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
// Erstelle die Mindmap-Visualisierung
|
|
const mindmap = new MindMapVisualization('#mindmap-container', {
|
|
height: 600,
|
|
onNodeClick: handleNodeClick
|
|
});
|
|
|
|
// Globale Referenz für die Zoom-Buttons erstellen
|
|
window.mindmapInstance = mindmap;
|
|
|
|
// Lade die Mindmap-Daten
|
|
mindmap.loadData();
|
|
|
|
// Suchfunktion für die Mindmap
|
|
const searchInput = document.getElementById('mindmap-search');
|
|
if (searchInput) {
|
|
searchInput.addEventListener('input', function(e) {
|
|
mindmap.filterBySearchTerm(e.target.value);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Behandelt Klicks auf Mindmap-Knoten
|
|
*/
|
|
async function handleNodeClick(node) {
|
|
if (!thoughtsContainer) return;
|
|
|
|
// Zeige Lade-Animation
|
|
thoughtsContainer.innerHTML = `
|
|
<div class="flex justify-center items-center p-12">
|
|
<div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary-400"></div>
|
|
</div>
|
|
`;
|
|
|
|
try {
|
|
// Lade Gedanken für den ausgewählten Knoten
|
|
const response = await fetch(`/api/nodes/${node.id}/thoughts`);
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP error! status: ${response.status}`);
|
|
}
|
|
|
|
const thoughts = await response.json();
|
|
|
|
// Gedanken anzeigen
|
|
renderThoughts(thoughts, node.name);
|
|
|
|
} catch (error) {
|
|
console.error('Fehler beim Laden der Gedanken:', error);
|
|
thoughtsContainer.innerHTML = `
|
|
<div class="glass-effect p-6 text-center">
|
|
<div class="text-red-500 mb-4">
|
|
<i class="fa-solid fa-triangle-exclamation text-4xl"></i>
|
|
</div>
|
|
<p class="text-xl">Fehler beim Laden der Gedanken.</p>
|
|
<p class="text-gray-300">Bitte versuchen Sie es später erneut.</p>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Rendert die Gedanken in den Container
|
|
*/
|
|
function renderThoughts(thoughts, nodeName) {
|
|
// Wenn keine Gedanken vorhanden sind
|
|
if (thoughts.length === 0) {
|
|
thoughtsContainer.innerHTML = `
|
|
<div class="glass-effect p-6 text-center">
|
|
<div class="text-blue-400 mb-4">
|
|
<i class="fa-solid fa-info-circle text-4xl"></i>
|
|
</div>
|
|
<p class="text-xl">Keine Gedanken für "${nodeName}" vorhanden.</p>
|
|
<button id="add-thought-btn" class="btn-primary mt-4">
|
|
<i class="fa-solid fa-plus mr-2"></i> Gedanke hinzufügen
|
|
</button>
|
|
</div>
|
|
`;
|
|
|
|
// Event-Listener für den Button
|
|
document.getElementById('add-thought-btn').addEventListener('click', () => {
|
|
openAddThoughtModal(nodeName);
|
|
});
|
|
|
|
return;
|
|
}
|
|
|
|
// Gedanken anzeigen
|
|
thoughtsContainer.innerHTML = `
|
|
<div class="flex justify-between items-center mb-6">
|
|
<h2 class="text-xl font-bold text-white">Gedanken zu "${nodeName}"</h2>
|
|
<button id="add-thought-btn" class="btn-primary">
|
|
<i class="fa-solid fa-plus mr-2"></i> Neuer Gedanke
|
|
</button>
|
|
</div>
|
|
<div class="grid grid-cols-1 gap-4" id="thoughts-grid"></div>
|
|
`;
|
|
|
|
// Button-Event-Listener
|
|
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);
|
|
|
|
// Animation verzögern für gestaffeltes Erscheinen
|
|
setTimeout(() => {
|
|
card.classList.add('opacity-100');
|
|
card.classList.remove('opacity-0', 'translate-y-4');
|
|
}, index * 100);
|
|
|
|
thoughtsGrid.appendChild(card);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Erstellt eine Gedanken-Karte
|
|
*/
|
|
function createThoughtCard(thought) {
|
|
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';
|
|
|
|
// Karten-Inhalt
|
|
card.innerHTML = `
|
|
<div class="p-4">
|
|
<div class="flex justify-between items-start">
|
|
<h3 class="text-lg font-bold text-white">${thought.title}</h3>
|
|
<div class="text-sm text-gray-400">${thought.timestamp}</div>
|
|
</div>
|
|
<div class="prose dark:prose-invert mt-2">
|
|
<p>${thought.content}</p>
|
|
</div>
|
|
${thought.keywords ? `
|
|
<div class="flex flex-wrap gap-1 mt-3">
|
|
${thought.keywords.split(',').map(keyword =>
|
|
`<span class="px-2 py-1 text-xs rounded-full bg-secondary-700 text-white">${keyword.trim()}</span>`
|
|
).join('')}
|
|
</div>
|
|
` : ''}
|
|
<div class="mt-4 flex justify-between items-center">
|
|
<div class="text-sm text-gray-400">
|
|
<i class="fa-solid fa-user mr-1"></i> ${thought.author}
|
|
</div>
|
|
<div class="flex space-x-2">
|
|
<button class="text-sm px-2 py-1 rounded hover:bg-white/10 transition-colors"
|
|
onclick="showComments(${thought.id})">
|
|
<i class="fa-solid fa-comments mr-1"></i> Kommentare
|
|
</button>
|
|
<button class="text-sm px-2 py-1 rounded hover:bg-white/10 transition-colors"
|
|
onclick="showRelations(${thought.id})">
|
|
<i class="fa-solid fa-diagram-project mr-1"></i> Beziehungen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
return card;
|
|
}
|
|
|
|
/**
|
|
* Öffnet das Modal zum Hinzufügen eines neuen Gedankens
|
|
*/
|
|
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 = `
|
|
<div class="absolute inset-0 bg-black/50 backdrop-blur-sm" id="modal-backdrop"></div>
|
|
<div class="glass-effect relative rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto z-10 transform transition-all">
|
|
<div class="p-6">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h3 class="text-xl font-bold text-white flex items-center">
|
|
<span class="w-3 h-3 rounded-full bg-primary-400 mr-2"></span>
|
|
Neuer Gedanke zu "${nodeTitle}"
|
|
</h3>
|
|
<button id="close-modal-btn" class="text-gray-400 hover:text-white transition-colors">
|
|
<i class="fa-solid fa-xmark text-xl"></i>
|
|
</button>
|
|
</div>
|
|
<form id="add-thought-form" class="space-y-4">
|
|
<input type="hidden" id="node_id" name="node_id" value="${nodeId || ''}">
|
|
<div>
|
|
<label for="title" class="block text-sm font-medium text-gray-300">Titel</label>
|
|
<input type="text" id="title" name="title" required
|
|
class="mt-1 block w-full rounded-md bg-dark-700 border border-dark-500 text-white p-2.5 focus:ring-2 focus:ring-primary-500 focus:border-transparent">
|
|
</div>
|
|
<div>
|
|
<label for="content" class="block text-sm font-medium text-gray-300">Inhalt</label>
|
|
<textarea id="content" name="content" rows="5" required
|
|
class="mt-1 block w-full rounded-md bg-dark-700 border border-dark-500 text-white p-2.5 focus:ring-2 focus:ring-primary-500 focus:border-transparent"></textarea>
|
|
</div>
|
|
<div>
|
|
<label for="keywords" class="block text-sm font-medium text-gray-300">Schlüsselwörter (kommagetrennt)</label>
|
|
<input type="text" id="keywords" name="keywords"
|
|
class="mt-1 block w-full rounded-md bg-dark-700 border border-dark-500 text-white p-2.5 focus:ring-2 focus:ring-primary-500 focus:border-transparent">
|
|
</div>
|
|
<div>
|
|
<label for="abstract" class="block text-sm font-medium text-gray-300">Zusammenfassung (optional)</label>
|
|
<textarea id="abstract" name="abstract" rows="2"
|
|
class="mt-1 block w-full rounded-md bg-dark-700 border border-dark-500 text-white p-2.5 focus:ring-2 focus:ring-primary-500 focus:border-transparent"></textarea>
|
|
</div>
|
|
<div>
|
|
<label for="color_code" class="block text-sm font-medium text-gray-300">Farbcode</label>
|
|
<div class="flex space-x-2 mt-1">
|
|
<input type="color" id="color_code" name="color_code" value="#4080ff"
|
|
class="h-10 w-10 rounded bg-dark-700 border border-dark-500">
|
|
<select id="predefined_colors"
|
|
class="block flex-grow rounded-md bg-dark-700 border border-dark-500 text-white p-2.5">
|
|
<option value="#4080ff">Blau</option>
|
|
<option value="#a040ff">Lila</option>
|
|
<option value="#40bf80">Grün</option>
|
|
<option value="#ff4080">Rot</option>
|
|
<option value="#ffaa00">Orange</option>
|
|
<option value="#00ccff">Türkis</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-between pt-4">
|
|
<div class="flex items-center">
|
|
<div class="relative">
|
|
<button type="button" id="open-relation-btn" class="btn-outline text-sm pl-3 pr-9">
|
|
<i class="fa-solid fa-diagram-project mr-2"></i> Verbindung
|
|
<i class="fa-solid fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2"></i>
|
|
</button>
|
|
<div id="relation-menu" class="absolute left-0 mt-2 w-60 rounded-md shadow-lg bg-dark-800 ring-1 ring-black ring-opacity-5 z-10 hidden">
|
|
<div class="py-1">
|
|
<div class="px-3 py-2 text-xs font-semibold text-gray-400 border-b border-dark-600">BEZIEHUNGSTYPEN</div>
|
|
<div class="max-h-48 overflow-y-auto">
|
|
<button type="button" class="relation-type-btn w-full text-left px-4 py-2 text-sm text-white hover:bg-dark-600" data-type="supports">
|
|
<i class="fa-solid fa-circle-arrow-up text-green-400 mr-2"></i> Stützt
|
|
</button>
|
|
<button type="button" class="relation-type-btn w-full text-left px-4 py-2 text-sm text-white hover:bg-dark-600" data-type="contradicts">
|
|
<i class="fa-solid fa-circle-arrow-down text-red-400 mr-2"></i> Widerspricht
|
|
</button>
|
|
<button type="button" class="relation-type-btn w-full text-left px-4 py-2 text-sm text-white hover:bg-dark-600" data-type="builds_upon">
|
|
<i class="fa-solid fa-arrow-right text-blue-400 mr-2"></i> Baut auf auf
|
|
</button>
|
|
<button type="button" class="relation-type-btn w-full text-left px-4 py-2 text-sm text-white hover:bg-dark-600" data-type="generalizes">
|
|
<i class="fa-solid fa-arrow-up-wide-short text-purple-400 mr-2"></i> Verallgemeinert
|
|
</button>
|
|
<button type="button" class="relation-type-btn w-full text-left px-4 py-2 text-sm text-white hover:bg-dark-600" data-type="specifies">
|
|
<i class="fa-solid fa-arrow-down-wide-short text-yellow-400 mr-2"></i> Spezifiziert
|
|
</button>
|
|
<button type="button" class="relation-type-btn w-full text-left px-4 py-2 text-sm text-white hover:bg-dark-600" data-type="inspires">
|
|
<i class="fa-solid fa-lightbulb text-amber-400 mr-2"></i> Inspiriert
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<input type="hidden" id="relation_type" name="relation_type" value="">
|
|
<input type="hidden" id="relation_target" name="relation_target" value="">
|
|
</div>
|
|
<div class="flex space-x-3">
|
|
<button type="button" id="cancel-btn" class="btn-outline">Abbrechen</button>
|
|
<button type="submit" class="btn-primary">
|
|
<i class="fa-solid fa-save mr-2"></i> Speichern
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
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 = `
|
|
<i class="fa-solid fa-diagram-project mr-2"></i>
|
|
${this.innerText.trim()}
|
|
<i class="fa-solid fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2"></i>
|
|
`;
|
|
|
|
// Menü schließen
|
|
relationMenu.classList.add('hidden');
|
|
});
|
|
});
|
|
|
|
// Form-Submit-Handler
|
|
const form = modal.querySelector('#add-thought-form');
|
|
form.addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
|
|
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')
|
|
};
|
|
|
|
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.');
|
|
}
|
|
|
|
// Modal schließen
|
|
closeModal();
|
|
|
|
// Gedanken neu laden
|
|
if (nodeId) {
|
|
handleNodeClick({ id: nodeId, name: nodeTitle });
|
|
}
|
|
|
|
// Erfolgsbenachrichtigung
|
|
if (window.MindMap && window.MindMap.showNotification) {
|
|
MindMap.showNotification('Gedanke erfolgreich gespeichert.', 'success');
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('Fehler beim Speichern:', error);
|
|
if (window.MindMap && window.MindMap.showNotification) {
|
|
MindMap.showNotification('Fehler beim Speichern des Gedankens.', 'error');
|
|
}
|
|
}
|
|
});
|
|
|
|
// Modal schließen
|
|
function closeModal() {
|
|
modal.classList.add('opacity-0');
|
|
setTimeout(() => {
|
|
modal.remove();
|
|
}, 300);
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Zeigt die Kommentare zu einem Gedanken an
|
|
*/
|
|
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);
|
|
MindMap.showNotification('Fehler beim Laden der Kommentare.', 'error');
|
|
}
|
|
};
|
|
|
|
/**
|
|
* 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);
|
|
MindMap.showNotification('Fehler beim Laden der Beziehungen.', 'error');
|
|
}
|
|
};
|
|
|
|
/**
|
|
* 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 = `
|
|
<div class="absolute inset-0 bg-black/50" id="modal-backdrop"></div>
|
|
<div class="glass-effect relative rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto z-10">
|
|
<div class="p-6 text-center">
|
|
<div class="flex justify-center mb-4">
|
|
<div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary-400"></div>
|
|
</div>
|
|
<p class="text-lg text-white">${loadingText}</p>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
// Event-Listener zum Schließen
|
|
modal.querySelector('#modal-backdrop').addEventListener('click', () => {
|
|
modal.remove();
|
|
});
|
|
|
|
return modal;
|
|
}
|
|
|
|
/**
|
|
* Aktualisiert das Modal mit Kommentaren
|
|
*/
|
|
function updateModalWithComments(modal, comments, thoughtId) {
|
|
const modalContent = modal.querySelector('.glass-effect');
|
|
|
|
modalContent.innerHTML = `
|
|
<div class="p-6">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h3 class="text-xl font-bold text-white">Kommentare</h3>
|
|
<button id="close-modal-btn" class="text-gray-400 hover:text-white">
|
|
<i class="fa-solid fa-xmark text-xl"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="comments-list mb-6 space-y-4">
|
|
${comments.length === 0 ?
|
|
'<div class="text-center text-gray-400 py-4">Keine Kommentare vorhanden.</div>' :
|
|
comments.map(comment => `
|
|
<div class="glass-effect p-3 rounded">
|
|
<div class="flex justify-between items-start">
|
|
<div class="font-medium text-white">${comment.author}</div>
|
|
<div class="text-xs text-gray-400">${comment.timestamp}</div>
|
|
</div>
|
|
<p class="mt-2 text-gray-200">${comment.content}</p>
|
|
</div>
|
|
`).join('')
|
|
}
|
|
</div>
|
|
|
|
<form id="comment-form" class="space-y-3">
|
|
<div>
|
|
<label for="comment-content" class="block text-sm font-medium text-gray-300">Neuer Kommentar</label>
|
|
<textarea id="comment-content" name="content" rows="3" required
|
|
class="mt-1 block w-full rounded-md bg-dark-700 border-dark-500 text-white"></textarea>
|
|
</div>
|
|
<div class="flex justify-end pt-2">
|
|
<button type="submit" class="btn-primary">
|
|
<i class="fa-solid fa-paper-plane mr-2"></i> Senden
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
`;
|
|
|
|
// 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 = `
|
|
<div class="p-6">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h3 class="text-xl font-bold text-white">Beziehungen</h3>
|
|
<button id="close-modal-btn" class="text-gray-400 hover:text-white">
|
|
<i class="fa-solid fa-xmark text-xl"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="relations-list mb-6 space-y-4">
|
|
${relations.length === 0 ?
|
|
'<div class="text-center text-gray-400 py-4">Keine Beziehungen vorhanden.</div>' :
|
|
relations.map(relation => `
|
|
<div class="glass-effect p-3 rounded">
|
|
<div class="flex items-center">
|
|
<span class="inline-block px-2 py-1 rounded-full text-xs font-medium bg-primary-600 text-white">
|
|
${relation.relation_type}
|
|
</span>
|
|
<div class="ml-3">
|
|
<div class="text-white">Ziel: Gedanke #${relation.target_id}</div>
|
|
<div class="text-xs text-gray-400">Erstellt von ${relation.created_by} am ${relation.created_at}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`).join('')
|
|
}
|
|
</div>
|
|
|
|
<form id="relation-form" class="space-y-3">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label for="target_id" class="block text-sm font-medium text-gray-300">Ziel-Gedanke ID</label>
|
|
<input type="number" id="target_id" name="target_id" required
|
|
class="mt-1 block w-full rounded-md bg-dark-700 border-dark-500 text-white">
|
|
</div>
|
|
<div>
|
|
<label for="relation_type" class="block text-sm font-medium text-gray-300">Beziehungstyp</label>
|
|
<select id="relation_type" name="relation_type" required
|
|
class="mt-1 block w-full rounded-md bg-dark-700 border-dark-500 text-white">
|
|
<option value="SUPPORTS">Stützt</option>
|
|
<option value="CONTRADICTS">Widerspricht</option>
|
|
<option value="BUILDS_UPON">Baut auf auf</option>
|
|
<option value="GENERALIZES">Verallgemeinert</option>
|
|
<option value="SPECIFIES">Spezifiziert</option>
|
|
<option value="INSPIRES">Inspiriert</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-end pt-2">
|
|
<button type="submit" class="btn-primary">
|
|
<i class="fa-solid fa-plus mr-2"></i> Beziehung erstellen
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
`;
|
|
|
|
// 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');
|
|
}
|
|
});
|
|
}
|