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 */
const get = async endpoint => {
/* 2. Hilfs-Funktionen für API-Zugriffe */
const get = async endpoint => {
try {
const response = await fetch(endpoint);
if (!response.ok) {
@@ -169,9 +169,9 @@ const get = async endpoint => {
console.error(`Fehler beim Abrufen von ${endpoint}:`, error);
return []; // Leeres Array zurückgeben bei Netzwerkfehlern
}
};
};
const post = async (endpoint, body) => {
const post = async (endpoint, body) => {
try {
const response = await fetch(endpoint, {
method: 'POST',
@@ -187,9 +187,9 @@ const post = async (endpoint, body) => {
console.error(`Fehler beim POST zu ${endpoint}:`, error);
return {}; // Leeres Objekt zurückgeben bei Netzwerkfehlern
}
};
};
const del = async endpoint => {
const del = async endpoint => {
try {
const response = await fetch(endpoint, { method: 'DELETE' });
if (!response.ok) {
@@ -201,13 +201,13 @@ const del = async endpoint => {
console.error(`Fehler beim DELETE zu ${endpoint}:`, error);
return {}; // Leeres Objekt zurückgeben bei Netzwerkfehlern
}
};
};
/* 3. Kategorien laden für Style-Informationen */
let categories = await get('/api/categories');
/* 3. Kategorien laden für Style-Informationen */
let categories = await get('/api/categories');
/* 4. Daten laden und Rendering */
const loadMindmap = async () => {
/* 4. Daten laden und Rendering */
const loadMindmap = async () => {
try {
// Nodes und Beziehungen parallel laden
const [nodes, relationships] = await Promise.all([
@@ -320,15 +320,15 @@ const loadMindmap = async () => {
console.error('Fehler beim Laden der Mindmap:', error);
alert('Die Mindmap konnte nicht geladen werden. Bitte prüfen Sie die Konsole für Details.');
}
};
};
// Initial laden
await loadMindmap();
// Initial laden
await loadMindmap();
/* 5. Socket.IO für Echtzeit-Synchronisation */
const socket = io();
/* 5. Socket.IO für Echtzeit-Synchronisation */
const socket = io();
socket.on('node_added', async (node) => {
socket.on('node_added', async (node) => {
// Kategorie-Informationen für Styling abrufen
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) {
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());
if (cyNode.length > 0) {
// Kategorie-Informationen für Styling abrufen
@@ -367,16 +367,16 @@ socket.on('node_updated', (node) => {
cyNode.position({ x: node.x, y: node.y });
}
}
});
});
socket.on('node_deleted', (nodeId) => {
socket.on('node_deleted', (nodeId) => {
const cyNode = cy.$id(nodeId.toString());
if (cyNode.length > 0) {
cy.remove(cyNode);
}
});
});
socket.on('relationship_added', (rel) => {
socket.on('relationship_added', (rel) => {
cy.add({
data: {
id: `${rel.parent_id}_${rel.child_id}`,
@@ -384,17 +384,17 @@ socket.on('relationship_added', (rel) => {
target: rel.child_id.toString()
}
});
});
});
socket.on('relationship_deleted', (rel) => {
socket.on('relationship_deleted', (rel) => {
const edgeId = `${rel.parent_id}_${rel.child_id}`;
const cyEdge = cy.$id(edgeId);
if (cyEdge.length > 0) {
cy.remove(cyEdge);
}
});
});
socket.on('category_updated', async () => {
socket.on('category_updated', async () => {
// Kategorien neu laden
categories = await get('/api/categories');
// Nodes aktualisieren, die diese Kategorie verwenden
@@ -408,12 +408,12 @@ socket.on('category_updated', async () => {
}
}
});
});
});
/* 6. UI-Interaktionen */
// Knoten hinzufügen
const btnAddNode = document.getElementById('addNode');
if (btnAddNode) {
/* 6. UI-Interaktionen */
// Knoten hinzufügen
const btnAddNode = document.getElementById('addNode');
if (btnAddNode) {
btnAddNode.addEventListener('click', async () => {
const name = prompt('Knotenname eingeben:');
if (!name) return;
@@ -445,11 +445,11 @@ if (btnAddNode) {
});
// Darstellung wird durch Socket.IO Event übernommen
});
}
}
// Verbindung hinzufügen
const btnAddEdge = document.getElementById('addEdge');
if (btnAddEdge) {
// Verbindung hinzufügen
const btnAddEdge = document.getElementById('addEdge');
if (btnAddEdge) {
btnAddEdge.addEventListener('click', async () => {
const sel = cy.$('node:selected');
if (sel.length !== 2) {
@@ -464,11 +464,11 @@ if (btnAddEdge) {
});
// Darstellung wird durch Socket.IO Event übernommen
});
}
}
// Knoten bearbeiten
const btnEditNode = document.getElementById('editNode');
if (btnEditNode) {
// Knoten bearbeiten
const btnEditNode = document.getElementById('editNode');
if (btnEditNode) {
btnEditNode.addEventListener('click', async () => {
const sel = cy.$('node:selected');
if (sel.length !== 1) {
@@ -509,11 +509,11 @@ if (btnEditNode) {
});
// Darstellung wird durch Socket.IO Event übernommen
});
}
}
// Knoten löschen
const btnDeleteNode = document.getElementById('deleteNode');
if (btnDeleteNode) {
// Knoten löschen
const btnDeleteNode = document.getElementById('deleteNode');
if (btnDeleteNode) {
btnDeleteNode.addEventListener('click', async () => {
const sel = cy.$('node:selected');
if (sel.length !== 1) {
@@ -527,11 +527,11 @@ if (btnDeleteNode) {
// Darstellung wird durch Socket.IO Event übernommen
}
});
}
}
// Verbindung löschen
const btnDeleteEdge = document.getElementById('deleteEdge');
if (btnDeleteEdge) {
// Verbindung löschen
const btnDeleteEdge = document.getElementById('deleteEdge');
if (btnDeleteEdge) {
btnDeleteEdge.addEventListener('click', async () => {
const sel = cy.$('edge:selected');
if (sel.length !== 1) {
@@ -548,11 +548,11 @@ if (btnDeleteEdge) {
// Darstellung wird durch Socket.IO Event übernommen
}
});
}
}
// Layout aktualisieren
const btnReLayout = document.getElementById('reLayout');
if (btnReLayout) {
// Layout aktualisieren
const btnReLayout = document.getElementById('reLayout');
if (btnReLayout) {
btnReLayout.addEventListener('click', () => {
cy.layout({
name: 'breadthfirst',
@@ -561,10 +561,10 @@ if (btnReLayout) {
spacingFactor: 1.2
}).run();
});
}
}
/* 7. Position speichern bei Drag & Drop */
cy.on('dragfree', 'node', async (e) => {
/* 7. Position speichern bei Drag & Drop */
cy.on('dragfree', 'node', async (e) => {
const node = e.target;
const position = node.position();
@@ -574,11 +574,11 @@ cy.on('dragfree', 'node', async (e) => {
});
// Andere Benutzer erhalten die Position über den node_updated Event
});
});
/* 8. Export-Funktion (optional) */
const btnExport = document.getElementById('exportMindmap');
if (btnExport) {
const btnExport = document.getElementById('exportMindmap');
if (btnExport) {
btnExport.addEventListener('click', () => {
const elements = cy.json().elements;
const exportData = {
@@ -606,10 +606,10 @@ if (btnExport) {
document.body.removeChild(a);
URL.revokeObjectURL(url);
});
}
}
/* 10. Filter-Funktion nach Kategorien (optional) */
const setupCategoryFilters = () => {
/* 10. Filter-Funktion nach Kategorien (optional) */
const setupCategoryFilters = () => {
const filterContainer = document.getElementById('category-filters');
if (!filterContainer || !categories.length) return;
@@ -648,14 +648,14 @@ const setupCategoryFilters = () => {
};
filterContainer.appendChild(btn);
});
};
};
// Filter-Funktionalität aktivieren (optional)
// setupCategoryFilters();
// Filter-Funktionalität aktivieren (optional)
// setupCategoryFilters();
/* 11. Suchfunktion (optional) */
const searchInput = document.getElementById('search-mindmap');
if (searchInput) {
/* 11. Suchfunktion (optional) */
const searchInput = document.getElementById('search-mindmap');
if (searchInput) {
searchInput.addEventListener('input', (e) => {
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) {
sidebar.innerHTML = '';
}
}
}
/**
/**
* Generiert Standarddaten für die Mindmap als Fallback
*/
function generateDefaultData() {
function generateDefaultData() {
return {
nodes: [
{ 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' }
]
};
}
}
/**
/**
* Rendert die Mindmap mit Cytoscape.js
*/
function renderMindmap(data) {
function renderMindmap(data) {
console.log('Rendere Mindmap mit Daten:', data);
// Konvertiere Backend-Daten in Cytoscape-Format
@@ -394,12 +394,12 @@ function renderMindmap(data) {
mindmap.fit();
mindmap.center();
}, 100);
}
}
/**
/**
* Konvertiert die Backend-Daten ins Cytoscape-Format
*/
function convertToCytoscapeFormat(data) {
function convertToCytoscapeFormat(data) {
const elements = {
nodes: [],
edges: []
@@ -445,12 +445,12 @@ function convertToCytoscapeFormat(data) {
}
return elements;
}
}
/**
/**
* Aktualisiert das Informations-Panel mit den Knotendaten
*/
function updateNodeInfoPanel(nodeData) {
function updateNodeInfoPanel(nodeData) {
if (nodeInfoPanel && nodeDescription) {
// Panel anzeigen
nodeInfoPanel.style.display = 'block';
@@ -465,12 +465,12 @@ function updateNodeInfoPanel(nodeData) {
nodeDescription.textContent = nodeData.description || 'Keine Beschreibung verfügbar';
}
}
}
}
/**
/**
* Aktualisiert die Liste der verbundenen Knoten
*/
function updateConnectedNodes(node) {
function updateConnectedNodes(node) {
if (connectedNodes) {
// Leere den Container
connectedNodes.innerHTML = '';
@@ -506,12 +506,12 @@ function updateConnectedNodes(node) {
connectedNodes.appendChild(nodeLink);
});
}
}
}
/**
/**
* Aktualisiert die Styles bei Dark Mode-Änderungen
*/
function updateDarkModeStyles(isDark) {
function updateDarkModeStyles(isDark) {
if (!mindmap) return;
const textColor = isDark ? '#f1f5f9' : '#334155';
@@ -530,12 +530,12 @@ function updateDarkModeStyles(isDark) {
'target-arrow-color': edgeColor
})
.update();
}
}
/**
/**
* Generiert eine zufällige Farbe
*/
function getRandomColor() {
function getRandomColor() {
const colors = [
'#4299E1', // Blau
'#9F7AEA', // Lila
@@ -545,7 +545,7 @@ function getRandomColor() {
'#F56565' // Rot
];
return colors[Math.floor(Math.random() * colors.length)];
}
}
// Initialisiere die Mindmap-Seite
initMindmapPage();

15
templates/base.html
View File

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