marwinm/website
3
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mindmap wird nicht initialisiert ! :(

Browse Source
This commit is contained in:
Marwin
2025-05-06 21:58:27 +01:00
parent aeb829e36a
commit 58a5ea00bd
5 changed files with 976 additions and 983 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
static/js/mindmap.js
View File

@@ -156,8 +156,8 @@ function handleContextMenuAction(action, node) {
} }
} }
/* 2. Hilfs-Funktionen für API-Zugriffe */ /* 2. Hilfs-Funktionen für API-Zugriffe */
const get = async endpoint => { const get = async endpoint => {
try { try {
const response = await fetch(endpoint); const response = await fetch(endpoint);
if (!response.ok) { if (!response.ok) {
@@ -169,9 +169,9 @@ const get = async endpoint => {
console.error(`Fehler beim Abrufen von ${endpoint}:`, error); console.error(`Fehler beim Abrufen von ${endpoint}:`, error);
return []; // Leeres Array zurückgeben bei Netzwerkfehlern return []; // Leeres Array zurückgeben bei Netzwerkfehlern
} }
}; };
const post = async (endpoint, body) => { const post = async (endpoint, body) => {
try { try {
const response = await fetch(endpoint, { const response = await fetch(endpoint, {
method: 'POST', method: 'POST',
@@ -187,9 +187,9 @@ const post = async (endpoint, body) => {
console.error(`Fehler beim POST zu ${endpoint}:`, error); console.error(`Fehler beim POST zu ${endpoint}:`, error);
return {}; // Leeres Objekt zurückgeben bei Netzwerkfehlern return {}; // Leeres Objekt zurückgeben bei Netzwerkfehlern
} }
}; };
const del = async endpoint => { const del = async endpoint => {
try { try {
const response = await fetch(endpoint, { method: 'DELETE' }); const response = await fetch(endpoint, { method: 'DELETE' });
if (!response.ok) { if (!response.ok) {
@@ -201,13 +201,13 @@ const del = async endpoint => {
console.error(`Fehler beim DELETE zu ${endpoint}:`, error); console.error(`Fehler beim DELETE zu ${endpoint}:`, error);
return {}; // Leeres Objekt zurückgeben bei Netzwerkfehlern return {}; // Leeres Objekt zurückgeben bei Netzwerkfehlern
} }
}; };
/* 3. Kategorien laden für Style-Informationen */ /* 3. Kategorien laden für Style-Informationen */
let categories = await get('/api/categories'); let categories = await get('/api/categories');
/* 4. Daten laden und Rendering */ /* 4. Daten laden und Rendering */
const loadMindmap = async () => { const loadMindmap = async () => {
try { try {
// Nodes und Beziehungen parallel laden // Nodes und Beziehungen parallel laden
const [nodes, relationships] = await Promise.all([ const [nodes, relationships] = await Promise.all([
@@ -320,15 +320,15 @@ const loadMindmap = async () => {
console.error('Fehler beim Laden der Mindmap:', error); console.error('Fehler beim Laden der Mindmap:', error);
alert('Die Mindmap konnte nicht geladen werden. Bitte prüfen Sie die Konsole für Details.'); alert('Die Mindmap konnte nicht geladen werden. Bitte prüfen Sie die Konsole für Details.');
} }
}; };
// Initial laden // Initial laden
await loadMindmap(); await loadMindmap();
/* 5. Socket.IO für Echtzeit-Synchronisation */ /* 5. Socket.IO für Echtzeit-Synchronisation */
const socket = io(); const socket = io();
socket.on('node_added', async (node) => { socket.on('node_added', async (node) => {
// Kategorie-Informationen für Styling abrufen // Kategorie-Informationen für Styling abrufen
const category = categories.find(c => c.id === node.category_id) || {}; const category = categories.find(c => c.id === node.category_id) || {};
@@ -347,9 +347,9 @@ socket.on('node_added', async (node) => {
if (!node.x || !node.y) { if (!node.x || !node.y) {
cy.layout({ name: 'breadthfirst', directed: true, padding: 30 }).run(); cy.layout({ name: 'breadthfirst', directed: true, padding: 30 }).run();
} }
}); });
socket.on('node_updated', (node) => { socket.on('node_updated', (node) => {
const cyNode = cy.$id(node.id.toString()); const cyNode = cy.$id(node.id.toString());
if (cyNode.length > 0) { if (cyNode.length > 0) {
// Kategorie-Informationen für Styling abrufen // Kategorie-Informationen für Styling abrufen
@@ -367,16 +367,16 @@ socket.on('node_updated', (node) => {
cyNode.position({ x: node.x, y: node.y }); cyNode.position({ x: node.x, y: node.y });
} }
} }
}); });
socket.on('node_deleted', (nodeId) => { socket.on('node_deleted', (nodeId) => {
const cyNode = cy.$id(nodeId.toString()); const cyNode = cy.$id(nodeId.toString());
if (cyNode.length > 0) { if (cyNode.length > 0) {
cy.remove(cyNode); cy.remove(cyNode);
} }
}); });
socket.on('relationship_added', (rel) => { socket.on('relationship_added', (rel) => {
cy.add({ cy.add({
data: { data: {
id: `${rel.parent_id}_${rel.child_id}`, id: `${rel.parent_id}_${rel.child_id}`,
@@ -384,17 +384,17 @@ socket.on('relationship_added', (rel) => {
target: rel.child_id.toString() target: rel.child_id.toString()
} }
}); });
}); });
socket.on('relationship_deleted', (rel) => { socket.on('relationship_deleted', (rel) => {
const edgeId = `${rel.parent_id}_${rel.child_id}`; const edgeId = `${rel.parent_id}_${rel.child_id}`;
const cyEdge = cy.$id(edgeId); const cyEdge = cy.$id(edgeId);
if (cyEdge.length > 0) { if (cyEdge.length > 0) {
cy.remove(cyEdge); cy.remove(cyEdge);
} }
}); });
socket.on('category_updated', async () => { socket.on('category_updated', async () => {
// Kategorien neu laden // Kategorien neu laden
categories = await get('/api/categories'); categories = await get('/api/categories');
// Nodes aktualisieren, die diese Kategorie verwenden // Nodes aktualisieren, die diese Kategorie verwenden
@@ -408,12 +408,12 @@ socket.on('category_updated', async () => {
} }
} }
}); });
}); });
/* 6. UI-Interaktionen */ /* 6. UI-Interaktionen */
// Knoten hinzufügen // Knoten hinzufügen
const btnAddNode = document.getElementById('addNode'); const btnAddNode = document.getElementById('addNode');
if (btnAddNode) { if (btnAddNode) {
btnAddNode.addEventListener('click', async () => { btnAddNode.addEventListener('click', async () => {
const name = prompt('Knotenname eingeben:'); const name = prompt('Knotenname eingeben:');
if (!name) return; if (!name) return;
@@ -445,11 +445,11 @@ if (btnAddNode) {
}); });
// Darstellung wird durch Socket.IO Event übernommen // Darstellung wird durch Socket.IO Event übernommen
}); });
} }
// Verbindung hinzufügen // Verbindung hinzufügen
const btnAddEdge = document.getElementById('addEdge'); const btnAddEdge = document.getElementById('addEdge');
if (btnAddEdge) { if (btnAddEdge) {
btnAddEdge.addEventListener('click', async () => { btnAddEdge.addEventListener('click', async () => {
const sel = cy.$('node:selected'); const sel = cy.$('node:selected');
if (sel.length !== 2) { if (sel.length !== 2) {
@@ -464,11 +464,11 @@ if (btnAddEdge) {
}); });
// Darstellung wird durch Socket.IO Event übernommen // Darstellung wird durch Socket.IO Event übernommen
}); });
} }
// Knoten bearbeiten // Knoten bearbeiten
const btnEditNode = document.getElementById('editNode'); const btnEditNode = document.getElementById('editNode');
if (btnEditNode) { if (btnEditNode) {
btnEditNode.addEventListener('click', async () => { btnEditNode.addEventListener('click', async () => {
const sel = cy.$('node:selected'); const sel = cy.$('node:selected');
if (sel.length !== 1) { if (sel.length !== 1) {
@@ -509,11 +509,11 @@ if (btnEditNode) {
}); });
// Darstellung wird durch Socket.IO Event übernommen // Darstellung wird durch Socket.IO Event übernommen
}); });
} }
// Knoten löschen // Knoten löschen
const btnDeleteNode = document.getElementById('deleteNode'); const btnDeleteNode = document.getElementById('deleteNode');
if (btnDeleteNode) { if (btnDeleteNode) {
btnDeleteNode.addEventListener('click', async () => { btnDeleteNode.addEventListener('click', async () => {
const sel = cy.$('node:selected'); const sel = cy.$('node:selected');
if (sel.length !== 1) { if (sel.length !== 1) {
@@ -527,11 +527,11 @@ if (btnDeleteNode) {
// Darstellung wird durch Socket.IO Event übernommen // Darstellung wird durch Socket.IO Event übernommen
} }
}); });
} }
// Verbindung löschen // Verbindung löschen
const btnDeleteEdge = document.getElementById('deleteEdge'); const btnDeleteEdge = document.getElementById('deleteEdge');
if (btnDeleteEdge) { if (btnDeleteEdge) {
btnDeleteEdge.addEventListener('click', async () => { btnDeleteEdge.addEventListener('click', async () => {
const sel = cy.$('edge:selected'); const sel = cy.$('edge:selected');
if (sel.length !== 1) { if (sel.length !== 1) {
@@ -548,11 +548,11 @@ if (btnDeleteEdge) {
// Darstellung wird durch Socket.IO Event übernommen // Darstellung wird durch Socket.IO Event übernommen
} }
}); });
} }
// Layout aktualisieren // Layout aktualisieren
const btnReLayout = document.getElementById('reLayout'); const btnReLayout = document.getElementById('reLayout');
if (btnReLayout) { if (btnReLayout) {
btnReLayout.addEventListener('click', () => { btnReLayout.addEventListener('click', () => {
cy.layout({ cy.layout({
name: 'breadthfirst', name: 'breadthfirst',
@@ -561,10 +561,10 @@ if (btnReLayout) {
spacingFactor: 1.2 spacingFactor: 1.2
}).run(); }).run();
}); });
} }
/* 7. Position speichern bei Drag & Drop */ /* 7. Position speichern bei Drag & Drop */
cy.on('dragfree', 'node', async (e) => { cy.on('dragfree', 'node', async (e) => {
const node = e.target; const node = e.target;
const position = node.position(); const position = node.position();
@@ -574,11 +574,11 @@ cy.on('dragfree', 'node', async (e) => {
}); });
// Andere Benutzer erhalten die Position über den node_updated Event // Andere Benutzer erhalten die Position über den node_updated Event
}); });
/* 8. Export-Funktion (optional) */ /* 8. Export-Funktion (optional) */
const btnExport = document.getElementById('exportMindmap'); const btnExport = document.getElementById('exportMindmap');
if (btnExport) { if (btnExport) {
btnExport.addEventListener('click', () => { btnExport.addEventListener('click', () => {
const elements = cy.json().elements; const elements = cy.json().elements;
const exportData = { const exportData = {
@@ -606,10 +606,10 @@ if (btnExport) {
document.body.removeChild(a); document.body.removeChild(a);
URL.revokeObjectURL(url); URL.revokeObjectURL(url);
}); });
} }
/* 10. Filter-Funktion nach Kategorien (optional) */ /* 10. Filter-Funktion nach Kategorien (optional) */
const setupCategoryFilters = () => { const setupCategoryFilters = () => {
const filterContainer = document.getElementById('category-filters'); const filterContainer = document.getElementById('category-filters');
if (!filterContainer || !categories.length) return; if (!filterContainer || !categories.length) return;
@@ -648,14 +648,14 @@ const setupCategoryFilters = () => {
}; };
filterContainer.appendChild(btn); filterContainer.appendChild(btn);
}); });
}; };
// Filter-Funktionalität aktivieren (optional) // Filter-Funktionalität aktivieren (optional)
// setupCategoryFilters(); // setupCategoryFilters();
/* 11. Suchfunktion (optional) */ /* 11. Suchfunktion (optional) */
const searchInput = document.getElementById('search-mindmap'); const searchInput = document.getElementById('search-mindmap');
if (searchInput) { if (searchInput) {
searchInput.addEventListener('input', (e) => { searchInput.addEventListener('input', (e) => {
const searchTerm = e.target.value.toLowerCase(); const searchTerm = e.target.value.toLowerCase();
@@ -684,7 +684,7 @@ if (searchInput) {
} }
}); });
}); });
} }
console.log('Mindmap erfolgreich initialisiert'); console.log('Mindmap erfolgreich initialisiert');
})(); })();

44
static/js/modules/mindmap-page.js
View File

@@ -236,12 +236,12 @@ function resetSelection(cy) {
if (sidebar) { if (sidebar) {
sidebar.innerHTML = ''; sidebar.innerHTML = '';
} }
} }
/** /**
* Generiert Standarddaten für die Mindmap als Fallback * Generiert Standarddaten für die Mindmap als Fallback
*/ */
function generateDefaultData() { function generateDefaultData() {
return { return {
nodes: [ nodes: [
{ id: 'root', name: 'Wissen', description: 'Zentrale Wissensbasis', category: 'Zentral', color_code: '#4299E1' }, { id: 'root', name: 'Wissen', description: 'Zentrale Wissensbasis', category: 'Zentral', color_code: '#4299E1' },
@@ -252,12 +252,12 @@ function generateDefaultData() {
{ id: 'psychology', name: 'Psychologie', description: 'Menschliches Verhalten und Geist', category: 'Psychologie', color_code: '#4299E1', parent_id: 'root' } { id: 'psychology', name: 'Psychologie', description: 'Menschliches Verhalten und Geist', category: 'Psychologie', color_code: '#4299E1', parent_id: 'root' }
] ]
}; };
} }
/** /**
* Rendert die Mindmap mit Cytoscape.js * Rendert die Mindmap mit Cytoscape.js
*/ */
function renderMindmap(data) { function renderMindmap(data) {
console.log('Rendere Mindmap mit Daten:', data); console.log('Rendere Mindmap mit Daten:', data);
// Konvertiere Backend-Daten in Cytoscape-Format // Konvertiere Backend-Daten in Cytoscape-Format
@@ -394,12 +394,12 @@ function renderMindmap(data) {
mindmap.fit(); mindmap.fit();
mindmap.center(); mindmap.center();
}, 100); }, 100);
} }
/** /**
* Konvertiert die Backend-Daten ins Cytoscape-Format * Konvertiert die Backend-Daten ins Cytoscape-Format
*/ */
function convertToCytoscapeFormat(data) { function convertToCytoscapeFormat(data) {
const elements = { const elements = {
nodes: [], nodes: [],
edges: [] edges: []
@@ -445,12 +445,12 @@ function convertToCytoscapeFormat(data) {
} }
return elements; return elements;
} }
/** /**
* Aktualisiert das Informations-Panel mit den Knotendaten * Aktualisiert das Informations-Panel mit den Knotendaten
*/ */
function updateNodeInfoPanel(nodeData) { function updateNodeInfoPanel(nodeData) {
if (nodeInfoPanel && nodeDescription) { if (nodeInfoPanel && nodeDescription) {
// Panel anzeigen // Panel anzeigen
nodeInfoPanel.style.display = 'block'; nodeInfoPanel.style.display = 'block';
@@ -465,12 +465,12 @@ function updateNodeInfoPanel(nodeData) {
nodeDescription.textContent = nodeData.description || 'Keine Beschreibung verfügbar'; nodeDescription.textContent = nodeData.description || 'Keine Beschreibung verfügbar';
} }
} }
} }
/** /**
* Aktualisiert die Liste der verbundenen Knoten * Aktualisiert die Liste der verbundenen Knoten
*/ */
function updateConnectedNodes(node) { function updateConnectedNodes(node) {
if (connectedNodes) { if (connectedNodes) {
// Leere den Container // Leere den Container
connectedNodes.innerHTML = ''; connectedNodes.innerHTML = '';
@@ -506,12 +506,12 @@ function updateConnectedNodes(node) {
connectedNodes.appendChild(nodeLink); connectedNodes.appendChild(nodeLink);
}); });
} }
} }
/** /**
* Aktualisiert die Styles bei Dark Mode-Änderungen * Aktualisiert die Styles bei Dark Mode-Änderungen
*/ */
function updateDarkModeStyles(isDark) { function updateDarkModeStyles(isDark) {
if (!mindmap) return; if (!mindmap) return;
const textColor = isDark ? '#f1f5f9' : '#334155'; const textColor = isDark ? '#f1f5f9' : '#334155';
@@ -530,12 +530,12 @@ function updateDarkModeStyles(isDark) {
'target-arrow-color': edgeColor 'target-arrow-color': edgeColor
}) })
.update(); .update();
} }
/** /**
* Generiert eine zufällige Farbe * Generiert eine zufällige Farbe
*/ */
function getRandomColor() { function getRandomColor() {
const colors = [ const colors = [
'#4299E1', // Blau '#4299E1', // Blau
'#9F7AEA', // Lila '#9F7AEA', // Lila
@@ -545,7 +545,7 @@ function getRandomColor() {
'#F56565' // Rot '#F56565' // Rot
]; ];
return colors[Math.floor(Math.random() * colors.length)]; return colors[Math.floor(Math.random() * colors.length)];
} }
// Initialisiere die Mindmap-Seite // Initialisiere die Mindmap-Seite
initMindmapPage(); initMindmapPage();

15
templates/base.html
View File

@@ -112,12 +112,6 @@
<!-- ChatGPT Assistant --> <!-- ChatGPT Assistant -->
<script src="{{ url_for('static', filename='js/modules/chatgpt-assistant.js') }}"></script> <script src="{{ url_for('static', filename='js/modules/chatgpt-assistant.js') }}"></script>
<!-- MindMap Visualization Module -->
<script src="{{ url_for('static', filename='js/modules/mindmap.js') }}"></script>
<!-- MindMap Page Module -->
<script src="{{ url_for('static', filename='js/modules/mindmap-page.js') }}"></script>
<!-- Neural Network Background Script --> <!-- Neural Network Background Script -->
<script src="{{ url_for('static', filename='neural-network-background.js') }}"></script> <script src="{{ url_for('static', filename='neural-network-background.js') }}"></script>
@@ -741,9 +735,10 @@
<!-- Hilfsscripts --> <!-- Hilfsscripts -->
{% block scripts %}{% endblock %} {% block scripts %}{% endblock %}
<!-- KI-Chat Initialisierung --> <!-- ChatGPT Initialisierung -->
<script> <script>
// ChatGPT-Assistent Klasse // Prüfe, ob ChatGPTAssistant bereits existiert
if (typeof ChatGPTAssistant === 'undefined') {
class ChatGPTAssistant { class ChatGPTAssistant {
constructor() { constructor() {
this.chatContainer = null; this.chatContainer = null;
@@ -923,8 +918,7 @@
} }
} }
// Initialisiere den ChatGPT-Assistenten direkt, um sicherzustellen, // Initialisiere den ChatGPT-Assistenten direkt
// dass er auf jeder Seite verfügbar ist, selbst wenn MindMap nicht geladen ist
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
// Prüfen, ob der Assistent bereits durch MindMap initialisiert wurde // Prüfen, ob der Assistent bereits durch MindMap initialisiert wurde
if (!window.MindMap || !window.MindMap.assistant) { if (!window.MindMap || !window.MindMap.assistant) {
@@ -939,6 +933,7 @@
window.MindMap.assistant = assistant; window.MindMap.assistant = assistant;
} }
}); });
}
</script> </script>
<!-- Dark/Light-Mode vereinheitlicht --> <!-- Dark/Light-Mode vereinheitlicht -->

2
templates/mindmap.html
View File

@@ -228,7 +228,5 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape-cose-bilkent/4.1.0/cytoscape-cose-bilkent.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape-cose-bilkent/4.1.0/cytoscape-cose-bilkent.min.js"></script>
<!-- Unsere JavaScript-Dateien --> <!-- Unsere JavaScript-Dateien -->
<script src="{{ url_for('static', filename='js/mindmap-interaction.js') }}"></script>
<script src="{{ url_for('static', filename='js/mindmap-init.js') }}"></script>
<script src="{{ url_for('static', filename='js/update_mindmap.js') }}"></script> <script src="{{ url_for('static', filename='js/update_mindmap.js') }}"></script>
{% endblock %} {% endblock %}