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

✨ feat(mindmap): erweitere die Funktionalität zur Handhabung von Unterthemen und verbessere die Benutzerinteraktion durch neue Navigations- und Layout-Elemente in update_mindmap.js

Browse Source
This commit is contained in:
Marwin
2025-05-09 19:58:03 +01:00
parent 4b0613eb6b
commit 121f46df01
1 changed files with 144 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

175
static/js/update_mindmap.js
View File

@@ -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 = `
<button class="back-button" onclick="goBack()">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M19 12H5M12 19l-7-7 7-7"/>
</svg>
</button>
<h2 class="mindmap-title">${node.data('label')}</h2>
`;
// 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');
}
}
}
// 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);