diff --git a/static/js/update_mindmap.js b/static/js/update_mindmap.js
index 335c5a7..f840067 100644
--- a/static/js/update_mindmap.js
+++ b/static/js/update_mindmap.js
@@ -168,7 +168,9 @@ document.addEventListener('DOMContentLoaded', function() {
id: node.id,
label: node.label,
category: node.category,
- description: node.description
+ description: node.description,
+ hasChildren: node.hasChildren,
+ expanded: node.expanded
}
})),
// Kanten
@@ -264,9 +266,11 @@ document.addEventListener('DOMContentLoaded', function() {
document.dispatchEvent(new Event('mindmap-loaded'));
console.log('mindmap-loaded Event ausgelöst');
- // Event-Listener für Knoten-Klicks hinzufügen
+ // Event-Listener für Knoten-Klicks
cy.on('tap', 'node', async function(evt) {
const node = evt.target;
+ console.log('Node clicked:', node.id(), 'hasChildren:', node.data('hasChildren'), 'expanded:', node.data('expanded'));
+
if (node.data('hasChildren') && !node.data('expanded')) {
await loadSubthemes(node);
}
@@ -298,7 +302,9 @@ function updateMindmap() {
label: node.label,
category: node.category,
description: node.description,
- color: categoryColors[node.category] || '#60a5fa'
+ color: categoryColors[node.category] || '#60a5fa',
+ hasChildren: node.hasChildren,
+ expanded: node.expanded
}
});
});
@@ -664,47 +670,95 @@ function createFlashContainer() {
// Funktion zum Laden der Subthemen
async function loadSubthemes(node) {
try {
- // Simuliere Datenbankabfrage (später durch echte API ersetzen)
+ console.log('Loading subthemes for node:', node.id());
+
+ // Simuliere Datenbankabfrage
const subthemes = subthemesDatabase[node.id()];
- if (!subthemes) return;
+ if (!subthemes) {
+ console.log('No subthemes found for node:', node.id());
+ return;
+ }
// Animation starten
showFlash('Lade Subthemen...', 'info');
+
+ // Neue Seite erstellen
+ const mindmapContainer = document.querySelector('.mindmap-container');
+ const newPage = document.createElement('div');
+ newPage.className = 'mindmap-page';
+ newPage.style.display = 'none';
+
+ // Kopfzeile erstellen
+ const header = document.createElement('div');
+ header.className = 'mindmap-header';
+ header.innerHTML = `
+
+ ${node.data('label')}
+ `;
+
+ // Container für die neue Mindmap
+ const newContainer = document.createElement('div');
+ newContainer.id = `cy-${node.id()}`;
+ newContainer.className = 'mindmap-view';
+
+ // Elemente zur Seite hinzufügen
+ newPage.appendChild(header);
+ newPage.appendChild(newContainer);
+ mindmapContainer.appendChild(newPage);
+
+ // Neue Cytoscape-Instanz erstellen
+ const newCy = cytoscape({
+ container: newContainer,
+ elements: [],
+ style: cy.style(),
+ layout: {
+ name: 'cose',
+ animate: true,
+ animationDuration: 500,
+ refresh: 20,
+ fit: true,
+ padding: 30,
+ nodeRepulsion: 4500,
+ idealEdgeLength: 50,
+ edgeElasticity: 0.45
+ }
+ });
// Neue Knoten hinzufügen
subthemes.forEach(subtheme => {
- cy.add({
+ newCy.add({
group: 'nodes',
data: {
- ...subtheme,
- expanded: false
- }
- });
-
- // Kante zum Elternknoten hinzufügen
- cy.add({
- group: 'edges',
- data: {
- id: `${node.id()}_${subtheme.id}`,
- source: node.id(),
- target: subtheme.id
+ id: subtheme.id,
+ label: subtheme.label,
+ category: subtheme.category,
+ description: subtheme.description,
+ hasChildren: subtheme.hasChildren,
+ expanded: false,
+ color: categoryColors[subtheme.category] || '#60a5fa'
}
});
});
-
- // Node als expandiert markieren
- node.data('expanded', true);
- // Layout neu berechnen mit Animation
- cy.layout({
- name: 'cose',
- animate: true,
- animationDuration: 500,
- refresh: 20,
- fit: true,
- padding: 30
- }).run();
+ // Event-Listener für die neue Mindmap
+ newCy.on('tap', 'node', async function(evt) {
+ const clickedNode = evt.target;
+ if (clickedNode.data('hasChildren') && !clickedNode.data('expanded')) {
+ await loadSubthemes(clickedNode);
+ }
+ });
+
+ // Alte Seite ausblenden und neue anzeigen
+ cy.container().style.display = 'none';
+ newPage.style.display = 'block';
+
+ // Layout ausführen
+ newCy.layout().run();
// Erfolgsmeldung anzeigen
showFlash('Subthemen erfolgreich geladen', 'success');
@@ -713,4 +767,63 @@ async function loadSubthemes(node) {
console.error('Fehler beim Laden der Subthemen:', error);
showFlash('Fehler beim Laden der Subthemen', 'error');
}
-}
\ No newline at end of file
+}
+
+// Funktion zum Zurücknavigieren
+function goBack() {
+ const currentPage = document.querySelector('.mindmap-page:not([style*="display: none"])');
+ if (currentPage) {
+ currentPage.style.display = 'none';
+ cy.container().style.display = 'block';
+ }
+}
+
+// CSS-Styles für die neue Seite
+const style = document.createElement('style');
+style.textContent = `
+ .mindmap-page {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: var(--bg-color, #1a1a1a);
+ z-index: 1000;
+ }
+
+ .mindmap-header {
+ display: flex;
+ align-items: center;
+ padding: 1rem;
+ background: rgba(0, 0, 0, 0.2);
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .back-button {
+ background: none;
+ border: none;
+ color: #fff;
+ cursor: pointer;
+ padding: 0.5rem;
+ margin-right: 1rem;
+ border-radius: 50%;
+ transition: background-color 0.3s;
+ }
+
+ .back-button:hover {
+ background: rgba(255, 255, 255, 0.1);
+ }
+
+ .mindmap-title {
+ color: #fff;
+ font-size: 1.5rem;
+ font-weight: 600;
+ margin: 0;
+ }
+
+ .mindmap-view {
+ width: 100%;
+ height: calc(100% - 4rem);
+ }
+`;
+document.head.appendChild(style);
\ No newline at end of file