391 lines
9.5 KiB
HTML
391 lines
9.5 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}{{ mindmap.name }} - Mindmap{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<style>
|
|
/* Container für die Mindmap mit verbesserten Glaseffekten */
|
|
#cy {
|
|
width: 100%;
|
|
height: calc(100vh - 14rem);
|
|
background-color: rgba(15, 23, 42, 0.3);
|
|
border-radius: 1rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
body:not(.dark) #cy {
|
|
background-color: rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
/* Info-Panel */
|
|
.node-info-panel {
|
|
position: absolute;
|
|
top: 1rem;
|
|
right: 1rem;
|
|
width: 300px;
|
|
max-height: calc(100vh - 16rem);
|
|
overflow-y: auto;
|
|
border-radius: 1rem;
|
|
opacity: 0;
|
|
transform: translateX(20px);
|
|
pointer-events: none;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.node-info-panel.visible {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
pointer-events: all;
|
|
}
|
|
|
|
body.dark .node-info-panel {
|
|
background-color: rgba(15, 23, 42, 0.8);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
body:not(.dark) .node-info-panel {
|
|
background-color: rgba(255, 255, 255, 0.85);
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
backdrop-filter: blur(10px);
|
|
color: #1e293b;
|
|
}
|
|
|
|
/* Toolbar */
|
|
.mindmap-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0.75rem;
|
|
border-radius: 0.75rem;
|
|
margin-bottom: 1rem;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
body.dark .mindmap-toolbar {
|
|
background-color: rgba(15, 23, 42, 0.6);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
body:not(.dark) .mindmap-toolbar {
|
|
background-color: rgba(255, 255, 255, 0.8);
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.mindmap-action-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 0.5rem;
|
|
font-weight: 500;
|
|
transition: all 0.3s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
body.dark .mindmap-action-btn {
|
|
background-color: rgba(30, 41, 59, 0.7);
|
|
color: rgba(255, 255, 255, 0.9);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
body:not(.dark) .mindmap-action-btn {
|
|
background-color: rgba(255, 255, 255, 0.8);
|
|
color: #1e293b;
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
body.dark .mindmap-action-btn:hover {
|
|
background-color: rgba(51, 65, 85, 0.8);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
body:not(.dark) .mindmap-action-btn:hover {
|
|
background-color: rgba(243, 244, 246, 0.9);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* Node-Link Styles */
|
|
.node-link {
|
|
display: inline-block;
|
|
padding: 0.35rem 0.75rem;
|
|
margin: 0.25rem;
|
|
border-radius: 1rem;
|
|
font-size: 0.8rem;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
white-space: nowrap;
|
|
color: white;
|
|
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.node-link:hover {
|
|
transform: translateY(-2px);
|
|
filter: brightness(1.1);
|
|
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
/* Notes */
|
|
.note-container {
|
|
position: absolute;
|
|
width: 250px;
|
|
cursor: move;
|
|
opacity: 0;
|
|
transform: scale(0.95);
|
|
transition: all 0.3s ease;
|
|
z-index: 10;
|
|
}
|
|
|
|
.note-container.visible {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
|
|
/* Note-Werkzeuge */
|
|
.note-tools {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.note-tool {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
font-size: 0.7rem;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.note-tool:hover {
|
|
opacity: 1;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
/* Color Palette */
|
|
.color-palette {
|
|
display: flex;
|
|
gap: 0.25rem;
|
|
flex-wrap: wrap;
|
|
padding: 0.25rem;
|
|
}
|
|
|
|
.color-swatch {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.color-swatch:hover {
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
/* Notizen-Editor */
|
|
.note-content {
|
|
min-height: 100px;
|
|
padding: 0.75rem;
|
|
outline: none;
|
|
width: 100%;
|
|
font-size: 0.9rem;
|
|
resize: both;
|
|
overflow: auto;
|
|
}
|
|
|
|
/* Kontext-Menü */
|
|
#context-menu {
|
|
min-width: 180px;
|
|
border-radius: 0.5rem;
|
|
overflow: hidden;
|
|
z-index: 1000;
|
|
}
|
|
|
|
body.dark #context-menu {
|
|
background-color: rgba(15, 23, 42, 0.95);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
body:not(.dark) #context-menu {
|
|
background-color: rgba(255, 255, 255, 0.95);
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
|
|
color: #1e293b;
|
|
}
|
|
|
|
.menu-item {
|
|
padding: 0.75rem 1rem;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
body.dark .menu-item:hover {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
body:not(.dark) .menu-item:hover {
|
|
background-color: rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
/* Dialogfenster */
|
|
.dialog-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 100;
|
|
}
|
|
|
|
.dialog-content {
|
|
width: 90%;
|
|
max-width: 500px;
|
|
border-radius: 1rem;
|
|
padding: 1.5rem;
|
|
max-height: 80vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
body.dark .dialog-content {
|
|
background-color: rgba(15, 23, 42, 0.95);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
body:not(.dark) .dialog-content {
|
|
background-color: rgba(255, 255, 255, 0.95);
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
color: #1e293b;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container mx-auto max-w-7xl px-4 py-6">
|
|
<!-- Header -->
|
|
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4">
|
|
<div>
|
|
<h1 class="text-3xl font-bold gradient-text">{{ mindmap.name }}</h1>
|
|
<p class="opacity-80 mt-1">{{ mindmap.description }}</p>
|
|
</div>
|
|
|
|
<div class="flex gap-3 flex-wrap">
|
|
{% if mindmap.user_id == current_user.id %}
|
|
<a href="{{ url_for('edit_mindmap', mindmap_id=mindmap.id) }}" class="mindmap-action-btn">
|
|
<i class="fas fa-edit"></i>
|
|
<span>Bearbeiten</span>
|
|
</a>
|
|
{% endif %}
|
|
|
|
<a href="{{ url_for('profile') }}" class="mindmap-action-btn">
|
|
<i class="fas fa-arrow-left"></i>
|
|
<span>Zurück</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Toolbar -->
|
|
<div class="mindmap-toolbar mb-4">
|
|
<button id="fit-btn" class="mindmap-action-btn">
|
|
<i class="fas fa-expand"></i>
|
|
<span>Alles anzeigen</span>
|
|
</button>
|
|
<button id="reset-btn" class="mindmap-action-btn">
|
|
<i class="fas fa-redo"></i>
|
|
<span>Layout zurücksetzen</span>
|
|
</button>
|
|
<button id="toggle-labels-btn" class="mindmap-action-btn">
|
|
<i class="fas fa-tags"></i>
|
|
<span>Labels ein/aus</span>
|
|
</button>
|
|
<button id="add-note-btn" class="mindmap-action-btn">
|
|
<i class="fas fa-sticky-note"></i>
|
|
<span>Notiz hinzufügen</span>
|
|
</button>
|
|
<button id="save-layout-btn" class="mindmap-action-btn">
|
|
<i class="fas fa-save"></i>
|
|
<span>Layout speichern</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Mindmap Container mit Positionsindikator -->
|
|
<div class="relative rounded-xl overflow-hidden border transition-all duration-300"
|
|
x-bind:class="darkMode ? 'border-gray-700/50' : 'border-gray-300/50'">
|
|
<div id="cy"></div>
|
|
|
|
<!-- Informationsanzeige für ausgewählten Knoten -->
|
|
<div id="node-info-panel" class="node-info-panel p-4">
|
|
<h3 class="text-xl font-bold gradient-text mb-2">Knotendetails</h3>
|
|
<p id="node-description" class="mb-4 opacity-80"></p>
|
|
|
|
<h4 class="font-semibold mb-2 opacity-90">Verbundene Knoten</h4>
|
|
<div id="connected-nodes" class="flex flex-wrap mb-4"></div>
|
|
|
|
<div class="flex flex-wrap gap-2 mt-4">
|
|
<button id="add-thought-btn" class="mindmap-action-btn">
|
|
<i class="fas fa-lightbulb"></i>
|
|
<span>Gedanke hinzufügen</span>
|
|
</button>
|
|
<button id="view-thoughts-btn" class="mindmap-action-btn">
|
|
<i class="fas fa-list"></i>
|
|
<span>Gedanken anzeigen</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script src="{{ url_for('static', filename='js/cytoscape.min.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/mindmap-init.js') }}"></script>
|
|
<script nonce="{{ csp_nonce }}">
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Benutzer-Mindmap-ID für die API-Anfragen
|
|
const mindmapId = {{ mindmap.id }};
|
|
|
|
// Erstellt eine neue MindMap-Instanz für die Benutzer-Mindmap
|
|
window.userMindmap = new MindMap('#cy', {
|
|
editable: true,
|
|
isUserLoggedIn: true,
|
|
isPublicMap: false,
|
|
userMindmapId: mindmapId,
|
|
fitViewOnInit: true,
|
|
callbacks: {
|
|
onLoad: function() {
|
|
console.log('Benutzerdefinierte Mindmap wurde geladen');
|
|
}
|
|
}
|
|
});
|
|
|
|
// Event-Listener für Notiz-Button
|
|
document.getElementById('add-note-btn').addEventListener('click', function() {
|
|
// Erstellt eine neue Notiz in der Mitte des Viewports
|
|
const position = window.userMindmap.cy.pan();
|
|
|
|
window.userMindmap.showAddNoteDialog({
|
|
x: position.x,
|
|
y: position.y
|
|
});
|
|
});
|
|
|
|
// Event-Listener für Layout-Speichern-Button
|
|
document.getElementById('save-layout-btn').addEventListener('click', function() {
|
|
window.userMindmap.saveLayout();
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %} |