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

✨ feat: enhance mindmap functionality and update UI components

Browse Source
This commit is contained in:
Marwin
2025-05-16 20:35:01 +01:00
parent 2a246ee063
commit bb3211ab3d
2 changed files with 378 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

169
templates/mindmap.html
View File

@@ -20,6 +20,46 @@
background: transparent;
}
/* Zoom-Toolbar */
.mindmap-toolbar {
position: absolute;
top: 80px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
padding: 8px;
background: rgba(30, 41, 59, 0.8);
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
z-index: 10;
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.mindmap-toolbar button {
width: 40px;
height: 40px;
border: none;
background: rgba(255, 255, 255, 0.1);
color: white;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
}
.mindmap-toolbar button:hover {
background: rgba(139, 92, 246, 0.5);
transform: translateY(-2px);
}
.mindmap-toolbar button i {
font-size: 16px;
}
/* Header-Bereich */
.mindmap-header {
position: absolute;
@@ -369,115 +409,35 @@
{% block content %}
<div class="mindmap-container">
<!-- Header -->
<div class="mindmap-header">
<h1 class="mindmap-title">Interaktive Wissenslandkarte</h1>
<!-- Aktionsmenü -->
<div class="mindmap-actions">
<button id="toggleEditMode" class="action-button primary">
<i class="fas fa-edit"></i>
<span>Bearbeiten</span>
</button>
<button id="saveChanges" class="action-button" style="display: none;">
<i class="fas fa-save"></i>
<span>Speichern</span>
</button>
<button id="cancelEdit" class="action-button danger" style="display: none;">
<i class="fas fa-times"></i>
<span>Abbrechen</span>
</button>
</div>
</div>
<!-- Ladeanzeige -->
<div id="loader" class="loader"></div>
<!-- Status-Meldung -->
<div id="statusMessage" class="status-message" style="display: none;">Lade Mindmap...</div>
<!-- Bearbeitungsmodus-Hinweis -->
<div id="editModeIndicator" class="edit-mode-indicator">
<i class="fas fa-pencil-alt"></i>
<span>Bearbeitungsmodus</span>
</div>
<!-- Hauptvisualisierung -->
<div id="cy"></div>
<!-- Kontrollpanel -->
<div class="control-panel">
<button id="zoomIn" class="control-button">
<i class="fas fa-search-plus"></i>
<span>Vergrößern</span>
<!-- Zoom-Toolbar für Hauptmindmap -->
<div class="mindmap-toolbar">
<button id="zoomIn" title="Vergrößern">
<i class="fas fa-plus"></i>
</button>
<button id="zoomOut" class="control-button">
<i class="fas fa-search-minus"></i>
<span>Verkleinern</span>
<button id="zoomOut" title="Verkleinern">
<i class="fas fa-minus"></i>
</button>
<button id="resetView" class="control-button">
<i class="fas fa-sync"></i>
<span>Zurücksetzen</span>
</button>
<button id="toggleLegend" class="control-button">
<i class="fas fa-layer-group"></i>
<span>Legende</span>
<button id="resetView" title="Ansicht zurücksetzen">
<i class="fas fa-expand"></i>
</button>
</div>
<!-- CRUD Buttons (anfänglich ausgeblendet) -->
<div id="crudPanel" class="crud-panel" style="display: none;">
<button id="createNode" class="crud-button create">
<i class="fas fa-plus-circle"></i>
<span>Knoten erstellen</span>
</button>
<button id="createEdge" class="crud-button create">
<i class="fas fa-link"></i>
<span>Verbindung</span>
</button>
<button id="editNode" class="crud-button edit" disabled>
<i class="fas fa-edit"></i>
<span>Bearbeiten</span>
</button>
<button id="deleteElement" class="crud-button delete" disabled>
<i class="fas fa-trash-alt"></i>
<span>Löschen</span>
</button>
<button id="saveMindmap" class="crud-button save">
<i class="fas fa-save"></i>
<span>Speichern</span>
</button>
</div>
<!-- Info-Panel -->
<div id="infoPanel" class="info-panel">
<h3 class="info-title">Knotendetails</h3>
<div class="info-content"></div>
</div>
<!-- Kategorie-Legende -->
<div id="categoryLegend" class="category-legend">
<div class="category-item">
<div class="category-color" style="background-color: #9F7AEA;"></div>
<span>Philosophie</span>
</div>
<div class="category-item">
<div class="category-color" style="background-color: #60A5FA;"></div>
<span>Wissenschaft</span>
</div>
<div class="category-item">
<div class="category-color" style="background-color: #10B981;"></div>
<span>Technologie</span>
</div>
<div class="category-item">
<div class="category-color" style="background-color: #F59E0B;"></div>
<span>Künste</span>
</div>
<div class="category-item">
<div class="category-color" style="background-color: #EF4444;"></div>
<span>Psychologie</span>
<div class="mindmap-header">
<h1 class="mindmap-title">Wissenslandschaft</h1>
<div class="mindmap-actions">
<button class="action-button" id="toggleCategories">
<i class="fas fa-tags"></i> Kategorien
</button>
<button class="action-button primary" id="startEdit">
<i class="fas fa-edit"></i> Bearbeiten
</button>
</div>
</div>
<div id="infoPanel" class="info-panel"></div>
<div id="categoryLegend" class="category-legend"></div>
</div>
{% endblock %}
@@ -704,11 +664,6 @@ document.addEventListener('DOMContentLoaded', function() {
if (window.cy) window.cy.fit();
});
document.getElementById('toggleLegend').addEventListener('click', function() {
const legend = document.getElementById('categoryLegend');
legend.style.display = legend.style.display === 'none' ? 'flex' : 'none';
});
// Funktionen für Knoteninfo-Panel
function showNodeInfo(node) {
if (!node || !node.isNode()) return;