✨ feat: update app logic and improve mindmap functionality
This commit is contained in:
@@ -5,199 +5,260 @@
|
||||
* Implementiert Lazy Loading & Progressive Disclosure
|
||||
*/
|
||||
|
||||
// Mock-Datenbank für Subthemen (später durch echte DB-Abfragen ersetzen)
|
||||
const subthemesDatabase = {
|
||||
'philosophy': [
|
||||
{
|
||||
id: 'epistemology',
|
||||
label: 'Erkenntnistheorie',
|
||||
category: 'Philosophie',
|
||||
description: 'Untersuchung der Natur und Grenzen menschlicher Erkenntnis',
|
||||
hasChildren: true
|
||||
// Neue zentrale Konfiguration
|
||||
const mindmapConfig = {
|
||||
categories: {
|
||||
'Philosophie': {
|
||||
icon: 'fa-solid fa-lightbulb',
|
||||
color: '#b71c1c',
|
||||
description: 'Die Lehre vom Denken und der Erkenntnis'
|
||||
},
|
||||
{
|
||||
id: 'ethics',
|
||||
label: 'Ethik',
|
||||
category: 'Philosophie',
|
||||
description: 'Lehre vom moralisch richtigen Handeln',
|
||||
hasChildren: true
|
||||
'Wissenschaft': {
|
||||
icon: 'fa-solid fa-atom',
|
||||
color: '#f4b400',
|
||||
description: 'Systematische Erforschung der Natur und Gesellschaft'
|
||||
},
|
||||
{
|
||||
id: 'metaphysics',
|
||||
label: 'Metaphysik',
|
||||
category: 'Philosophie',
|
||||
description: 'Grundfragen des Seins und der Wirklichkeit',
|
||||
hasChildren: true
|
||||
'Technologie': {
|
||||
icon: 'fa-solid fa-microchip',
|
||||
color: '#0d47a1',
|
||||
description: 'Anwendung wissenschaftlicher Erkenntnisse'
|
||||
},
|
||||
'Künste': {
|
||||
icon: 'fa-solid fa-palette',
|
||||
color: '#c2185b',
|
||||
description: 'Kreativer Ausdruck und künstlerische Gestaltung'
|
||||
}
|
||||
],
|
||||
'science': [
|
||||
{
|
||||
id: 'physics',
|
||||
label: 'Physik',
|
||||
category: 'Wissenschaft',
|
||||
description: 'Lehre von der Materie und ihren Wechselwirkungen',
|
||||
hasChildren: true
|
||||
},
|
||||
{
|
||||
id: 'biology',
|
||||
label: 'Biologie',
|
||||
category: 'Wissenschaft',
|
||||
description: 'Lehre von den Lebewesen und ihren Lebensprozessen',
|
||||
hasChildren: true
|
||||
},
|
||||
{
|
||||
id: 'chemistry',
|
||||
label: 'Chemie',
|
||||
category: 'Wissenschaft',
|
||||
description: 'Wissenschaft von den Stoffen und ihren Reaktionen',
|
||||
hasChildren: true
|
||||
}
|
||||
],
|
||||
'technology': [
|
||||
{
|
||||
id: 'ai',
|
||||
label: 'Künstliche Intelligenz',
|
||||
category: 'Technologie',
|
||||
description: 'Maschinelles Lernen und intelligente Systeme',
|
||||
hasChildren: true
|
||||
},
|
||||
{
|
||||
id: 'robotics',
|
||||
label: 'Robotik',
|
||||
category: 'Technologie',
|
||||
description: 'Entwicklung und Steuerung von Robotern',
|
||||
hasChildren: true
|
||||
},
|
||||
{
|
||||
id: 'quantum_computing',
|
||||
label: 'Quantencomputing',
|
||||
category: 'Technologie',
|
||||
description: 'Computer basierend auf Quantenmechanik',
|
||||
hasChildren: true
|
||||
}
|
||||
],
|
||||
'arts': [
|
||||
{
|
||||
id: 'visual_arts',
|
||||
label: 'Bildende Kunst',
|
||||
category: 'Künste',
|
||||
description: 'Malerei, Bildhauerei und andere visuelle Kunstformen',
|
||||
hasChildren: true
|
||||
},
|
||||
{
|
||||
id: 'music',
|
||||
label: 'Musik',
|
||||
category: 'Künste',
|
||||
description: 'Tonkunst und musikalische Komposition',
|
||||
hasChildren: true
|
||||
},
|
||||
{
|
||||
id: 'literature',
|
||||
label: 'Literatur',
|
||||
category: 'Künste',
|
||||
description: 'Schriftliche Kunstwerke und Poesie',
|
||||
hasChildren: true
|
||||
}
|
||||
]
|
||||
},
|
||||
defaultNodeStyle: {
|
||||
fontSize: 18,
|
||||
fontColor: '#fff',
|
||||
neuronSize: 8,
|
||||
neuronActivity: 0.8
|
||||
},
|
||||
centerNodeStyle: {
|
||||
fontSize: 22,
|
||||
fontColor: '#222',
|
||||
neuronSize: 12,
|
||||
neuronActivity: 1.0,
|
||||
color: '#f5f5f5',
|
||||
icon: 'fa-solid fa-circle'
|
||||
}
|
||||
};
|
||||
|
||||
// Icon-Definitionen für Kategorien (FontAwesome oder SVG-URL)
|
||||
const categoryIcons = {
|
||||
'Philosophie': 'fa-solid fa-lightbulb',
|
||||
'Wissenschaft': 'fa-solid fa-atom',
|
||||
'Technologie': 'fa-solid fa-microchip',
|
||||
'Künste': 'fa-solid fa-palette',
|
||||
'Psychologie': 'fa-solid fa-brain'
|
||||
};
|
||||
|
||||
// Farben für Kategorien (wie im Bild)
|
||||
const categoryColors = {
|
||||
'Philosophie': '#b71c1c', // Rot
|
||||
'Wissenschaft': '#f4b400', // Gelb
|
||||
'Technologie': '#0d47a1', // Blau
|
||||
'Künste': '#c2185b', // Pink
|
||||
'Psychologie': '#009688' // Türkis
|
||||
};
|
||||
|
||||
// Initiale Mindmap-Daten (nur oberste Ebene, mit Icon und Farbe)
|
||||
const mindmapData = {
|
||||
nodes: [
|
||||
{
|
||||
id: 'center',
|
||||
label: 'Wissenskarte',
|
||||
isCenter: true,
|
||||
color: '#f5f5f5',
|
||||
icon: 'fa-solid fa-circle',
|
||||
fontColor: '#222',
|
||||
fontSize: 22,
|
||||
neuronSize: 12,
|
||||
neuronActivity: 1.0
|
||||
// Zentrale Styling-Konfiguration
|
||||
const mindmapStyles = {
|
||||
node: {
|
||||
base: {
|
||||
'background-color': 'data(color)',
|
||||
'label': 'data(label)',
|
||||
'color': '#ffffff',
|
||||
'text-background-color': 'rgba(0, 0, 0, 0.7)',
|
||||
'text-background-opacity': 0.8,
|
||||
'text-background-padding': '4px',
|
||||
'text-valign': 'center',
|
||||
'text-halign': 'center',
|
||||
'font-size': 16,
|
||||
'width': 'mapData(neuronSize, 3, 10, 30, 60)',
|
||||
'height': 'mapData(neuronSize, 3, 10, 30, 60)',
|
||||
'border-width': 2,
|
||||
'border-color': '#ffffff',
|
||||
'border-opacity': 0.8,
|
||||
'shape': 'ellipse',
|
||||
'background-opacity': 0.85
|
||||
},
|
||||
{
|
||||
id: 'philosophy',
|
||||
label: 'Philosophie',
|
||||
category: 'Philosophie',
|
||||
description: 'Die Lehre vom Denken und der Erkenntnis',
|
||||
hasChildren: true,
|
||||
expanded: false,
|
||||
neuronSize: 8,
|
||||
neuronActivity: 0.8,
|
||||
color: categoryColors['Philosophie'],
|
||||
icon: categoryIcons['Philosophie'],
|
||||
fontColor: '#fff',
|
||||
fontSize: 18
|
||||
center: {
|
||||
'background-color': '#f5f5f5',
|
||||
'color': '#222',
|
||||
'font-size': 20,
|
||||
'border-width': 3,
|
||||
'width': 100,
|
||||
'height': 100
|
||||
},
|
||||
{
|
||||
id: 'science',
|
||||
label: 'Wissenschaft',
|
||||
category: 'Wissenschaft',
|
||||
description: 'Systematische Erforschung der Natur und Gesellschaft',
|
||||
hasChildren: true,
|
||||
expanded: false,
|
||||
neuronSize: 8,
|
||||
neuronActivity: 0.8,
|
||||
color: categoryColors['Wissenschaft'],
|
||||
icon: categoryIcons['Wissenschaft'],
|
||||
fontColor: '#fff',
|
||||
fontSize: 18
|
||||
},
|
||||
{
|
||||
id: 'technology',
|
||||
label: 'Technologie',
|
||||
category: 'Technologie',
|
||||
description: 'Anwendung wissenschaftlicher Erkenntnisse',
|
||||
hasChildren: true,
|
||||
expanded: false,
|
||||
neuronSize: 8,
|
||||
neuronActivity: 0.8,
|
||||
color: categoryColors['Technologie'],
|
||||
icon: categoryIcons['Technologie'],
|
||||
fontColor: '#fff',
|
||||
fontSize: 18
|
||||
},
|
||||
{
|
||||
id: 'arts',
|
||||
label: 'Künste',
|
||||
category: 'Künste',
|
||||
description: 'Kreativer Ausdruck und künstlerische Gestaltung',
|
||||
hasChildren: true,
|
||||
expanded: false,
|
||||
neuronSize: 8,
|
||||
neuronActivity: 0.8,
|
||||
color: categoryColors['Künste'],
|
||||
icon: categoryIcons['Künste'],
|
||||
fontColor: '#fff',
|
||||
fontSize: 18
|
||||
selected: {
|
||||
'border-color': '#f59e42',
|
||||
'border-width': 3,
|
||||
'background-opacity': 1
|
||||
}
|
||||
],
|
||||
edges: [
|
||||
{ source: 'center', target: 'philosophy', strength: 0.9 },
|
||||
{ source: 'center', target: 'science', strength: 0.9 },
|
||||
{ source: 'center', target: 'technology', strength: 0.9 },
|
||||
{ source: 'center', target: 'arts', strength: 0.9 }
|
||||
]
|
||||
},
|
||||
edge: {
|
||||
base: {
|
||||
'width': function(ele) {
|
||||
return ele.data('strength') ? ele.data('strength') * 2 : 1;
|
||||
},
|
||||
'line-color': function(ele) {
|
||||
const sourceColor = ele.source().data('color');
|
||||
return sourceColor || '#8a8aaa';
|
||||
},
|
||||
'line-opacity': function(ele) {
|
||||
return ele.data('strength') ? ele.data('strength') * 0.6 : 0.4;
|
||||
},
|
||||
'curve-style': 'bezier',
|
||||
'target-arrow-shape': 'none',
|
||||
'control-point-distances': [30, -30],
|
||||
'control-point-weights': [0.5, 0.5]
|
||||
}
|
||||
},
|
||||
layout: {
|
||||
base: {
|
||||
name: 'cose',
|
||||
animate: true,
|
||||
animationDuration: 500,
|
||||
refresh: 20,
|
||||
fit: true,
|
||||
padding: 30,
|
||||
nodeRepulsion: 4500,
|
||||
idealEdgeLength: 50,
|
||||
edgeElasticity: 0.45,
|
||||
randomize: true,
|
||||
componentSpacing: 100,
|
||||
nodeOverlap: 20,
|
||||
gravity: 0.25,
|
||||
initialTemp: 1000,
|
||||
coolingFactor: 0.95,
|
||||
minTemp: 1
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Globale Variable für die Mindmap-Daten
|
||||
let mindmapData = null;
|
||||
|
||||
// Funktion zum Laden der Mindmap-Daten aus der Datenbank
|
||||
async function loadMindmapData(nodeId = null) {
|
||||
try {
|
||||
const apiUrl = nodeId ? `/api/mindmap/${nodeId}` : '/api/mindmap/root';
|
||||
console.log('Lade Mindmap-Daten von:', apiUrl);
|
||||
|
||||
const response = await fetch(apiUrl);
|
||||
console.log('API-Antwort Status:', response.status);
|
||||
|
||||
if (!response.ok) {
|
||||
let errorData;
|
||||
try {
|
||||
errorData = await response.json();
|
||||
console.log('API-Fehler Details:', {
|
||||
status: response.status,
|
||||
statusText: response.statusText,
|
||||
errorData
|
||||
});
|
||||
} catch (e) {
|
||||
console.error('Fehler beim Parsen der Fehlerantwort:', e);
|
||||
errorData = {
|
||||
error: `HTTP-Fehler ${response.status}: ${response.statusText}`
|
||||
};
|
||||
}
|
||||
|
||||
// Fehlerobjekt für die Benachrichtigung erstellen
|
||||
const errorMessage = {
|
||||
error: errorData.error || errorData.message || 'Unbekannter Fehler',
|
||||
details: errorData.details || null
|
||||
};
|
||||
|
||||
showUINotification(errorMessage, 'error');
|
||||
throw new Error(errorMessage.error);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
console.log('Geladene Mindmap-Daten:', data);
|
||||
|
||||
if (!data.success) {
|
||||
const errorMessage = {
|
||||
error: data.error || 'Mindmap-Daten konnten nicht geladen werden',
|
||||
details: data.details || null
|
||||
};
|
||||
showUINotification(errorMessage, 'error');
|
||||
throw new Error(errorMessage.error);
|
||||
}
|
||||
|
||||
// Erfolgreiche Antwort
|
||||
mindmapData = data; // Speichere die Daten in der globalen Variable
|
||||
showUINotification('Mindmap-Daten erfolgreich geladen', 'success');
|
||||
return data;
|
||||
} catch (error) {
|
||||
console.error('Fehler beim Laden der Mindmap-Daten:', {
|
||||
message: error.message,
|
||||
stack: error.stack,
|
||||
nodeId
|
||||
});
|
||||
|
||||
// Stelle sicher, dass wir eine aussagekräftige Fehlermeldung haben
|
||||
const errorMessage = {
|
||||
error: error.message || 'Unbekannter Fehler beim Laden der Mindmap-Daten',
|
||||
details: error.stack
|
||||
};
|
||||
|
||||
showUINotification(errorMessage, 'error');
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
// Funktion zum Initialisieren der Mindmap
|
||||
async function initializeMindmap() {
|
||||
try {
|
||||
const data = await loadMindmapData();
|
||||
if (!data || !data.nodes || !data.edges) {
|
||||
throw new Error('Ungültiges Datenformat: Mindmap-Daten fehlen oder sind unvollständig');
|
||||
}
|
||||
|
||||
const elements = [
|
||||
// Knoten
|
||||
...data.nodes.map(node => ({
|
||||
data: {
|
||||
id: node.id,
|
||||
label: node.name,
|
||||
category: node.category,
|
||||
description: node.description,
|
||||
hasChildren: node.has_children,
|
||||
expanded: false,
|
||||
color: node.color_code,
|
||||
fontColor: '#ffffff',
|
||||
fontSize: node.is_center ? 20 : 16
|
||||
}
|
||||
})),
|
||||
// Kanten
|
||||
...data.edges.map(edge => ({
|
||||
data: {
|
||||
source: edge.source,
|
||||
target: edge.target,
|
||||
strength: edge.strength || 0.5
|
||||
}
|
||||
}))
|
||||
];
|
||||
|
||||
// Bestehende Cytoscape-Instanz entfernen, falls vorhanden
|
||||
if (window.cy) {
|
||||
window.cy.destroy();
|
||||
}
|
||||
|
||||
window.cy = cytoscape({
|
||||
container: document.getElementById('cy'),
|
||||
elements: elements,
|
||||
style: mindmapStyles,
|
||||
layout: mindmapStyles.layout.base
|
||||
});
|
||||
|
||||
// Event-Listener für Knoten-Klicks
|
||||
cy.on('tap', 'node', async function(evt) {
|
||||
const node = evt.target;
|
||||
if (node.data('hasChildren') && !node.data('expanded')) {
|
||||
await loadSubthemes(node);
|
||||
}
|
||||
});
|
||||
|
||||
// Layout ausführen
|
||||
cy.layout(mindmapStyles.layout.base).run();
|
||||
|
||||
return true;
|
||||
} catch (error) {
|
||||
console.error('Fehler bei der Mindmap-Initialisierung:', error);
|
||||
showUINotification({
|
||||
error: 'Mindmap konnte nicht initialisiert werden',
|
||||
details: error.message
|
||||
}, 'error');
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// Warte bis DOM geladen ist
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
console.log('DOMContentLoaded Event ausgelöst');
|
||||
@@ -257,79 +318,22 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
style: [
|
||||
{
|
||||
selector: 'node',
|
||||
style: {
|
||||
'background-color': 'data(color)',
|
||||
'label': 'data(label)',
|
||||
'color': 'data(fontColor)',
|
||||
'text-valign': 'center',
|
||||
'text-halign': 'center',
|
||||
'font-size': 'data(fontSize)',
|
||||
'width': function(ele) {
|
||||
return ele.data('isCenter') ? 100 : 80;
|
||||
},
|
||||
'height': function(ele) {
|
||||
return ele.data('isCenter') ? 100 : 80;
|
||||
},
|
||||
'border-width': 2,
|
||||
'border-color': '#ffffff',
|
||||
'border-opacity': 0.8,
|
||||
'shape': 'ellipse',
|
||||
'background-opacity': 0.9,
|
||||
'text-wrap': 'wrap',
|
||||
'text-max-width': 80,
|
||||
'transition-property': 'background-color, border-width',
|
||||
'transition-duration': '0.2s'
|
||||
}
|
||||
style: mindmapStyles.node.base
|
||||
},
|
||||
{
|
||||
selector: 'node[isCenter]',
|
||||
style: {
|
||||
'background-color': '#f5f5f5',
|
||||
'color': '#222',
|
||||
'font-size': 20,
|
||||
'border-width': 3,
|
||||
'width': 100,
|
||||
'height': 100
|
||||
}
|
||||
style: mindmapStyles.node.center
|
||||
},
|
||||
{
|
||||
selector: 'node:selected',
|
||||
style: {
|
||||
'border-color': '#f59e42',
|
||||
'border-width': 3,
|
||||
'background-opacity': 1
|
||||
}
|
||||
style: mindmapStyles.node.selected
|
||||
},
|
||||
{
|
||||
selector: 'edge',
|
||||
style: {
|
||||
'width': function(ele) {
|
||||
return ele.data('strength') ? ele.data('strength') * 2 : 1;
|
||||
},
|
||||
'line-color': function(ele) {
|
||||
const sourceColor = ele.source().data('color');
|
||||
return sourceColor || '#8a8aaa';
|
||||
},
|
||||
'line-opacity': function(ele) {
|
||||
return ele.data('strength') ? ele.data('strength') * 0.6 : 0.4;
|
||||
},
|
||||
'curve-style': 'bezier',
|
||||
'target-arrow-shape': 'none',
|
||||
'control-point-distances': [30, -30],
|
||||
'control-point-weights': [0.5, 0.5]
|
||||
}
|
||||
style: mindmapStyles.edge.base
|
||||
}
|
||||
],
|
||||
layout: {
|
||||
name: 'concentric',
|
||||
fit: true,
|
||||
padding: 50,
|
||||
animate: true,
|
||||
concentric: function(node) {
|
||||
return node.data('isCenter') ? 2 : 1;
|
||||
},
|
||||
levelWidth: function() { return 1; }
|
||||
}
|
||||
layout: mindmapStyles.layout.base
|
||||
});
|
||||
|
||||
console.log('Cytoscape initialisiert');
|
||||
@@ -469,63 +473,42 @@ function initializeNeuralDesign(cy) {
|
||||
|
||||
// Modifiziere die updateMindmap Funktion
|
||||
function updateMindmap() {
|
||||
if (!cy) return;
|
||||
|
||||
// Bestehende Elemente entfernen
|
||||
cy.elements().remove();
|
||||
|
||||
// Neue Knoten hinzufügen
|
||||
mindmapData.nodes.forEach(node => {
|
||||
cy.add({
|
||||
group: 'nodes',
|
||||
data: {
|
||||
id: node.id,
|
||||
label: node.label,
|
||||
category: node.category,
|
||||
description: node.description,
|
||||
hasChildren: node.hasChildren,
|
||||
expanded: node.expanded,
|
||||
neuronSize: node.neuronSize,
|
||||
neuronActivity: node.neuronActivity,
|
||||
color: node.color,
|
||||
icon: node.icon,
|
||||
fontColor: node.fontColor,
|
||||
fontSize: node.fontSize
|
||||
}
|
||||
if (!cy) return;
|
||||
|
||||
// Bestehende Elemente entfernen
|
||||
cy.elements().remove();
|
||||
|
||||
// Neue Knoten hinzufügen
|
||||
mindmapData.nodes.forEach(node => {
|
||||
cy.add({
|
||||
group: 'nodes',
|
||||
data: {
|
||||
id: node.id,
|
||||
label: node.name,
|
||||
category: node.category,
|
||||
description: node.description,
|
||||
hasChildren: node.has_children,
|
||||
expanded: false,
|
||||
color: node.color_code || mindmapConfig.categories[node.category]?.color || '#60a5fa',
|
||||
icon: node.icon || mindmapConfig.categories[node.category]?.icon || 'fa-solid fa-circle'
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Neue Kanten hinzufügen
|
||||
mindmapData.edges.forEach(edge => {
|
||||
cy.add({
|
||||
group: 'edges',
|
||||
data: {
|
||||
source: edge.source,
|
||||
target: edge.target,
|
||||
strength: edge.strength
|
||||
}
|
||||
|
||||
// Neue Kanten hinzufügen
|
||||
mindmapData.edges.forEach(edge => {
|
||||
cy.add({
|
||||
group: 'edges',
|
||||
data: {
|
||||
source: edge.source,
|
||||
target: edge.target,
|
||||
strength: edge.strength || 0.5
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Neuronales Design initialisieren
|
||||
initializeNeuralDesign(cy);
|
||||
|
||||
// Layout anwenden
|
||||
cy.layout({
|
||||
name: 'cose',
|
||||
animate: true,
|
||||
animationDuration: 1000,
|
||||
nodeDimensionsIncludeLabels: true,
|
||||
padding: 100,
|
||||
spacingFactor: 1.8,
|
||||
randomize: false,
|
||||
fit: true,
|
||||
componentSpacing: 100,
|
||||
nodeRepulsion: 8000,
|
||||
edgeElasticity: 100,
|
||||
nestingFactor: 1.2,
|
||||
gravity: 80
|
||||
}).run();
|
||||
|
||||
// Layout aktualisieren
|
||||
cy.layout(mindmapStyles.layout.base).run();
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -764,31 +747,69 @@ function startNeuralActivitySimulation(cy) {
|
||||
|
||||
// Hilfe-Funktion zum Hinzufügen eines Flash-Hinweises
|
||||
function showFlash(message, type = 'info') {
|
||||
const flashContainer = document.getElementById('flash-messages') || createFlashContainer();
|
||||
|
||||
const flashMsg = document.createElement('div');
|
||||
flashMsg.className = `flash-message flash-${type} mb-2 p-3 rounded`;
|
||||
flashMsg.innerHTML = `
|
||||
<div class="flex items-center justify-between">
|
||||
<div>${message}</div>
|
||||
<button class="close-flash ml-2">×</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
flashContainer.appendChild(flashMsg);
|
||||
|
||||
// Nach 5 Sekunden automatisch ausblenden
|
||||
const flashContainer = createFlashContainer();
|
||||
const flash = document.createElement('div');
|
||||
flash.className = `flash-message ${type}`;
|
||||
flash.textContent = message;
|
||||
flashContainer.appendChild(flash);
|
||||
document.body.appendChild(flashContainer);
|
||||
|
||||
setTimeout(() => {
|
||||
flashMsg.style.opacity = '0';
|
||||
setTimeout(() => flashMsg.remove(), 300);
|
||||
}, 5000);
|
||||
|
||||
// Close-Button
|
||||
const closeBtn = flashMsg.querySelector('.close-flash');
|
||||
closeBtn.addEventListener('click', () => {
|
||||
flashMsg.style.opacity = '0';
|
||||
setTimeout(() => flashMsg.remove(), 300);
|
||||
});
|
||||
flash.classList.add('show');
|
||||
setTimeout(() => {
|
||||
flash.classList.remove('show');
|
||||
setTimeout(() => {
|
||||
flashContainer.remove();
|
||||
}, 300);
|
||||
}, 3000);
|
||||
}, 100);
|
||||
}
|
||||
|
||||
/**
|
||||
* Zeigt eine Benachrichtigung in der UI an
|
||||
* @param {string|object} message - Die anzuzeigende Nachricht oder ein Fehlerobjekt
|
||||
* @param {string} type - Der Typ der Benachrichtigung ('info', 'success', 'warning', 'error')
|
||||
* @param {number} duration - Die Anzeigedauer in Millisekunden (Standard: 3000)
|
||||
*/
|
||||
function showUINotification(message, type = 'info', duration = 3000) {
|
||||
// Überprüfe und formatiere die Nachricht
|
||||
let displayMessage;
|
||||
if (typeof message === 'object') {
|
||||
if (message.message) {
|
||||
displayMessage = message.message;
|
||||
} else if (message.error) {
|
||||
displayMessage = message.error;
|
||||
} else if (message.details) {
|
||||
displayMessage = message.details;
|
||||
} else {
|
||||
console.error('Ungültiges Nachrichtenobjekt:', message);
|
||||
displayMessage = 'Ein unbekannter Fehler ist aufgetreten';
|
||||
}
|
||||
} else if (typeof message === 'string') {
|
||||
displayMessage = message;
|
||||
} else {
|
||||
console.error('Ungültige Nachricht für UI-Benachrichtigung:', message);
|
||||
displayMessage = 'Ein unbekannter Fehler ist aufgetreten';
|
||||
}
|
||||
|
||||
// Validiere den Typ
|
||||
const validTypes = ['info', 'success', 'warning', 'error'];
|
||||
if (!validTypes.includes(type)) {
|
||||
console.warn(`Ungültiger Benachrichtigungstyp: ${type}. Verwende 'info' als Fallback.`);
|
||||
type = 'info';
|
||||
}
|
||||
|
||||
// Validiere die Dauer
|
||||
if (typeof duration !== 'number' || duration < 1000 || duration > 10000) {
|
||||
console.warn(`Ungültige Dauer: ${duration}ms. Verwende 3000ms als Fallback.`);
|
||||
duration = 3000;
|
||||
}
|
||||
|
||||
// Zeige die Benachrichtigung an
|
||||
showFlash(displayMessage, type);
|
||||
|
||||
// Logging für Debugging-Zwecke
|
||||
console.log(`UI-Benachrichtigung [${type}]:`, displayMessage);
|
||||
}
|
||||
|
||||
// Hilfsfunktion zum Erstellen eines Flash-Containers, falls keiner existiert
|
||||
@@ -798,158 +819,6 @@ function createFlashContainer() {
|
||||
container.className = 'fixed top-4 right-4 z-50 w-64';
|
||||
document.body.appendChild(container);
|
||||
return container;
|
||||
}
|
||||
|
||||
// Funktion zum Laden der Mindmap-Daten aus der Datenbank
|
||||
async function loadMindmapData(nodeId = null) {
|
||||
try {
|
||||
let url;
|
||||
// Wir verwenden die generische Route für alle Anfragen
|
||||
if (nodeId === null || nodeId === undefined || nodeId === 'root') {
|
||||
url = '/api/mindmap/root';
|
||||
} else {
|
||||
// Für spezielle Kategorien wie 'philosophy', 'science' etc.
|
||||
// verwenden wir die generische Route mit der Kategorie-ID
|
||||
url = `/api/mindmap/${nodeId}`;
|
||||
}
|
||||
|
||||
const response = await fetch(url);
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json().catch(() => ({ error: 'Unbekannter Fehler' }));
|
||||
throw new Error(errorData.error || `HTTP-Fehler ${response.status}: ${response.statusText}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
if (!data.success) {
|
||||
throw new Error(data.error || 'Fehler beim Laden der Mindmap-Daten');
|
||||
}
|
||||
|
||||
return data;
|
||||
} catch (error) {
|
||||
console.error('Fehler beim Laden der Mindmap-Daten:', error);
|
||||
showFlash(error.message || 'Fehler beim Laden der Mindmap-Daten', 'error');
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
// Funktion zum Initialisieren der Mindmap
|
||||
async function initializeMindmap() {
|
||||
const mindmapData = await loadMindmapData();
|
||||
if (!mindmapData) return;
|
||||
|
||||
const elements = [
|
||||
// Knoten
|
||||
...mindmapData.nodes.map(node => ({
|
||||
data: {
|
||||
id: node.id,
|
||||
label: node.name,
|
||||
category: node.category,
|
||||
description: node.description,
|
||||
hasChildren: node.has_children,
|
||||
expanded: false,
|
||||
color: node.color_code,
|
||||
fontColor: '#ffffff',
|
||||
fontSize: node.is_center ? 20 : 16
|
||||
}
|
||||
})),
|
||||
// Kanten
|
||||
...mindmapData.edges.map(edge => ({
|
||||
data: {
|
||||
source: edge.source_id,
|
||||
target: edge.target_id,
|
||||
strength: edge.strength || 0.5
|
||||
}
|
||||
}))
|
||||
];
|
||||
|
||||
window.cy = cytoscape({
|
||||
container: document.getElementById('cy'),
|
||||
elements: elements,
|
||||
style: [
|
||||
{
|
||||
selector: 'node',
|
||||
style: {
|
||||
'background-color': 'data(color)',
|
||||
'label': 'data(label)',
|
||||
'color': 'data(fontColor)',
|
||||
'text-valign': 'center',
|
||||
'text-halign': 'center',
|
||||
'font-size': 'data(fontSize)',
|
||||
'width': function(ele) {
|
||||
return ele.data('isCenter') ? 100 : 80;
|
||||
},
|
||||
'height': function(ele) {
|
||||
return ele.data('isCenter') ? 100 : 80;
|
||||
},
|
||||
'border-width': 2,
|
||||
'border-color': '#ffffff',
|
||||
'border-opacity': 0.8,
|
||||
'shape': 'ellipse',
|
||||
'background-opacity': 0.9,
|
||||
'text-wrap': 'wrap',
|
||||
'text-max-width': 80,
|
||||
'transition-property': 'background-color, border-width',
|
||||
'transition-duration': '0.2s'
|
||||
}
|
||||
},
|
||||
{
|
||||
selector: 'node[isCenter]',
|
||||
style: {
|
||||
'background-color': '#f5f5f5',
|
||||
'color': '#222',
|
||||
'font-size': 20,
|
||||
'border-width': 3,
|
||||
'width': 100,
|
||||
'height': 100
|
||||
}
|
||||
},
|
||||
{
|
||||
selector: 'node:selected',
|
||||
style: {
|
||||
'border-color': '#f59e42',
|
||||
'border-width': 3,
|
||||
'background-opacity': 1
|
||||
}
|
||||
},
|
||||
{
|
||||
selector: 'edge',
|
||||
style: {
|
||||
'width': function(ele) {
|
||||
return ele.data('strength') ? ele.data('strength') * 2 : 1;
|
||||
},
|
||||
'line-color': function(ele) {
|
||||
const sourceColor = ele.source().data('color');
|
||||
return sourceColor || '#8a8aaa';
|
||||
},
|
||||
'line-opacity': function(ele) {
|
||||
return ele.data('strength') ? ele.data('strength') * 0.6 : 0.4;
|
||||
},
|
||||
'curve-style': 'bezier',
|
||||
'target-arrow-shape': 'none',
|
||||
'control-point-distances': [30, -30],
|
||||
'control-point-weights': [0.5, 0.5]
|
||||
}
|
||||
}
|
||||
],
|
||||
layout: {
|
||||
name: 'concentric',
|
||||
fit: true,
|
||||
padding: 50,
|
||||
animate: true,
|
||||
concentric: function(node) {
|
||||
return node.data('isCenter') ? 2 : 1;
|
||||
},
|
||||
levelWidth: function() { return 1; }
|
||||
}
|
||||
});
|
||||
|
||||
// Event-Listener für Knoten-Klicks
|
||||
cy.on('tap', 'node', async function(evt) {
|
||||
const node = evt.target;
|
||||
if (node.data('hasChildren') && !node.data('expanded')) {
|
||||
await loadSubthemes(node);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Funktion zum Laden der Subthemen
|
||||
@@ -1009,24 +878,7 @@ async function loadSubthemes(node) {
|
||||
}))
|
||||
],
|
||||
style: cy.style(),
|
||||
layout: {
|
||||
name: 'cose',
|
||||
animate: true,
|
||||
animationDuration: 500,
|
||||
refresh: 20,
|
||||
fit: true,
|
||||
padding: 30,
|
||||
nodeRepulsion: 4500,
|
||||
idealEdgeLength: 50,
|
||||
edgeElasticity: 0.45,
|
||||
randomize: true,
|
||||
componentSpacing: 100,
|
||||
nodeOverlap: 20,
|
||||
gravity: 0.25,
|
||||
initialTemp: 1000,
|
||||
coolingFactor: 0.95,
|
||||
minTemp: 1
|
||||
}
|
||||
layout: mindmapStyles.layout.base
|
||||
});
|
||||
|
||||
// Event-Listener für die neue Mindmap
|
||||
@@ -1126,6 +978,99 @@ style.textContent = `
|
||||
color: #fff;
|
||||
text-shadow: 0 2px 8px rgba(0,0,0,0.25);
|
||||
}
|
||||
|
||||
/* Verbesserte Flash-Benachrichtigungen */
|
||||
#flash-messages {
|
||||
position: fixed;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
max-width: 24rem;
|
||||
}
|
||||
|
||||
.flash-message {
|
||||
padding: 1rem 1.25rem;
|
||||
border-radius: 0.5rem;
|
||||
background: rgba(17, 24, 39, 0.95);
|
||||
color: #fff;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
||||
0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
transform: translateX(120%);
|
||||
opacity: 0;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
backdrop-filter: blur(8px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.flash-message.show {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.flash-message.info {
|
||||
border-left: 4px solid #3b82f6;
|
||||
background: linear-gradient(to right, rgba(59, 130, 246, 0.1), rgba(17, 24, 39, 0.95));
|
||||
}
|
||||
|
||||
.flash-message.success {
|
||||
border-left: 4px solid #10b981;
|
||||
background: linear-gradient(to right, rgba(16, 185, 129, 0.1), rgba(17, 24, 39, 0.95));
|
||||
}
|
||||
|
||||
.flash-message.warning {
|
||||
border-left: 4px solid #f59e0b;
|
||||
background: linear-gradient(to right, rgba(245, 158, 11, 0.1), rgba(17, 24, 39, 0.95));
|
||||
}
|
||||
|
||||
.flash-message.error {
|
||||
border-left: 4px solid #ef4444;
|
||||
background: linear-gradient(to right, rgba(239, 68, 68, 0.1), rgba(17, 24, 39, 0.95));
|
||||
}
|
||||
|
||||
.flash-message::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(45deg,
|
||||
rgba(255, 255, 255, 0.1) 0%,
|
||||
rgba(255, 255, 255, 0) 100%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% { transform: scale(1); }
|
||||
50% { transform: scale(1.02); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
.flash-message.show {
|
||||
animation: pulse 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
/* Neuronale Effekte für Benachrichtigungen */
|
||||
.flash-message.info:hover {
|
||||
box-shadow: 0 0 15px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
.flash-message.success:hover {
|
||||
box-shadow: 0 0 15px rgba(16, 185, 129, 0.3);
|
||||
}
|
||||
|
||||
.flash-message.warning:hover {
|
||||
box-shadow: 0 0 15px rgba(245, 158, 11, 0.3);
|
||||
}
|
||||
|
||||
.flash-message.error:hover {
|
||||
box-shadow: 0 0 15px rgba(239, 68, 68, 0.3);
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user