287 lines
10 KiB
HTML
287 lines
10 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Mindmap{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<style>
|
|
/* Spezifische Stile für die Mindmap-Seite */
|
|
#cy {
|
|
width: 100%;
|
|
height: 600px;
|
|
background-color: var(--bg-secondary);
|
|
transition: background-color 0.3s ease;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.mindmap-container {
|
|
position: relative;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.dark .mindmap-container {
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.mindmap-toolbar {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
flex-wrap: wrap;
|
|
padding: 0.75rem;
|
|
background-color: var(--bg-secondary);
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
body:not(.dark) .mindmap-toolbar {
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-size: 0.875rem;
|
|
border-radius: 0.375rem;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.category-filters {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
flex-wrap: wrap;
|
|
padding: 0.75rem;
|
|
background-color: var(--bg-secondary);
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
.category-filter {
|
|
border: none;
|
|
border-radius: 0.25rem;
|
|
padding: 0.25rem 0.75rem;
|
|
font-size: 0.75rem;
|
|
cursor: pointer;
|
|
transition: opacity 0.2s;
|
|
color: white;
|
|
}
|
|
|
|
.category-filter:not(.active) {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.category-filter:hover:not(.active) {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* Kontextmenü */
|
|
#context-menu {
|
|
position: absolute;
|
|
border-radius: 0.375rem;
|
|
z-index: 1000;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.dark #context-menu {
|
|
background-color: #232837;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
body:not(.dark) #context-menu {
|
|
background-color: white;
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
#context-menu .menu-item {
|
|
padding: 0.5rem 1rem;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.dark #context-menu .menu-item:hover {
|
|
background-color: rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
body:not(.dark) #context-menu .menu-item:hover {
|
|
background-color: rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
/* Zusätzliches Layout */
|
|
.mindmap-section {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.mindmap-section {
|
|
grid-template-columns: 2fr 1fr;
|
|
}
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container mx-auto px-4">
|
|
<div class="mb-8">
|
|
<h1 class="text-3xl font-bold mb-2 gradient-text">Interaktive Mindmap</h1>
|
|
<p class="text-gray-500 dark:text-gray-400">Visualisieren und erkunden Sie Wissensnetze und Gedankenkonstrukte</p>
|
|
</div>
|
|
|
|
<div class="mindmap-section">
|
|
<!-- Linke Spalte: Mindmap -->
|
|
<div class="mindmap-container">
|
|
<!-- Suchleiste -->
|
|
<div class="mindmap-toolbar">
|
|
<div class="flex-1">
|
|
<input type="text" id="search-mindmap"
|
|
class="w-full max-w-md px-3 py-2 rounded-lg"
|
|
x-bind:class="darkMode ? 'bg-gray-800 border border-gray-700 text-white' : 'bg-white border border-gray-300 text-gray-700'"
|
|
placeholder="In der Mindmap suchen...">
|
|
</div>
|
|
|
|
<button id="addNode" class="btn"
|
|
x-bind:class="darkMode ? 'bg-primary-600 hover:bg-primary-700 text-white' : 'bg-primary-500 hover:bg-primary-600 text-white'">
|
|
<i class="fa-solid fa-plus"></i>
|
|
<span class="hidden sm:inline">Knoten hinzufügen</span>
|
|
</button>
|
|
|
|
<button id="addEdge" class="btn"
|
|
x-bind:class="darkMode ? 'bg-primary-600 hover:bg-primary-700 text-white' : 'bg-primary-500 hover:bg-primary-600 text-white'">
|
|
<i class="fa-solid fa-link"></i>
|
|
<span class="hidden sm:inline">Verbindung</span>
|
|
</button>
|
|
|
|
<button id="reLayout" class="btn"
|
|
x-bind:class="darkMode ? 'bg-gray-700 hover:bg-gray-600 text-white' : 'bg-gray-200 hover:bg-gray-300 text-gray-700'">
|
|
<i class="fa-solid fa-compass-drafting"></i>
|
|
<span class="hidden sm:inline">Anordnen</span>
|
|
</button>
|
|
|
|
<div class="relative" x-data="{ open: false }">
|
|
<button @click="open = !open" class="btn"
|
|
x-bind:class="darkMode ? 'bg-gray-700 hover:bg-gray-600 text-white' : 'bg-gray-200 hover:bg-gray-300 text-gray-700'">
|
|
<i class="fa-solid fa-ellipsis-vertical"></i>
|
|
</button>
|
|
|
|
<div x-show="open" @click.away="open = false"
|
|
x-transition:enter="transition ease-out duration-200"
|
|
x-transition:enter-start="opacity-0 scale-95"
|
|
x-transition:enter-end="opacity-100 scale-100"
|
|
x-transition:leave="transition ease-in duration-150"
|
|
x-transition:leave-start="opacity-100 scale-100"
|
|
x-transition:leave-end="opacity-0 scale-95"
|
|
class="absolute right-0 mt-2 w-48 origin-top-right z-10 rounded-md shadow-lg"
|
|
x-bind:class="darkMode ? 'bg-gray-800' : 'bg-white'">
|
|
<div class="py-1">
|
|
<button id="editNode" class="block w-full text-left px-4 py-2 text-sm hover:bg-gray-700"
|
|
x-bind:class="darkMode ? 'text-gray-300 hover:bg-gray-700' : 'text-gray-700 hover:bg-gray-100'">
|
|
<i class="fa-solid fa-edit mr-2"></i>Knoten bearbeiten
|
|
</button>
|
|
<button id="deleteNode" class="block w-full text-left px-4 py-2 text-sm hover:bg-red-600/20"
|
|
x-bind:class="darkMode ? 'text-gray-300 hover:bg-red-600/20' : 'text-gray-700 hover:bg-red-100'">
|
|
<i class="fa-solid fa-trash-alt mr-2"></i>Knoten löschen
|
|
</button>
|
|
<button id="deleteEdge" class="block w-full text-left px-4 py-2 text-sm hover:bg-red-600/20"
|
|
x-bind:class="darkMode ? 'text-gray-300 hover:bg-red-600/20' : 'text-gray-700 hover:bg-red-100'">
|
|
<i class="fa-solid fa-unlink mr-2"></i>Verbindung löschen
|
|
</button>
|
|
<button id="exportMindmap" class="block w-full text-left px-4 py-2 text-sm"
|
|
x-bind:class="darkMode ? 'text-gray-300 hover:bg-gray-700' : 'text-gray-700 hover:bg-gray-100'">
|
|
<i class="fa-solid fa-file-export mr-2"></i>Exportieren
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Kategoriefilter -->
|
|
<div id="category-filters" class="category-filters"></div>
|
|
|
|
<!-- Mindmap-Visualisierung -->
|
|
<div id="cy"></div>
|
|
</div>
|
|
|
|
<!-- Rechte Spalte: Detail-Ansicht und Interaktionen -->
|
|
<div class="space-y-6">
|
|
<!-- Knoteninformationen -->
|
|
<div class="card p-5"
|
|
x-bind:class="darkMode ? 'bg-gray-800/80 border border-gray-700' : 'bg-white/90 border border-gray-200'">
|
|
<h2 class="text-xl font-semibold mb-3"
|
|
x-bind:class="darkMode ? 'text-white' : 'text-gray-800'">
|
|
<i class="fa-solid fa-circle-info mr-2"></i>Information
|
|
</h2>
|
|
<div id="node-details">
|
|
<p class="text-sm"
|
|
x-bind:class="darkMode ? 'text-gray-300' : 'text-gray-600'">
|
|
Wählen Sie einen Knoten aus der Mindmap aus, um Details anzuzeigen.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Verbundene Gedanken -->
|
|
<div class="card p-5"
|
|
x-bind:class="darkMode ? 'bg-gray-800/80 border border-gray-700' : 'bg-white/90 border border-gray-200'">
|
|
<div class="flex justify-between items-center mb-3">
|
|
<h2 class="text-xl font-semibold"
|
|
x-bind:class="darkMode ? 'text-white' : 'text-gray-800'">
|
|
<i class="fa-solid fa-lightbulb mr-2"></i>Gedanken
|
|
</h2>
|
|
<button class="btn-sm"
|
|
x-bind:class="darkMode ? 'bg-primary-600 hover:bg-primary-700 text-white' : 'bg-primary-500 hover:bg-primary-600 text-white'">
|
|
<i class="fa-solid fa-plus mr-1"></i>Neu
|
|
</button>
|
|
</div>
|
|
<div id="thoughts-container">
|
|
<p class="text-sm"
|
|
x-bind:class="darkMode ? 'text-gray-300' : 'text-gray-600'">
|
|
Wählen Sie einen Knoten aus, um zugehörige Gedanken zu sehen.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Schnellhilfe -->
|
|
<div class="card p-5"
|
|
x-bind:class="darkMode ? 'bg-gray-800/80 border border-gray-700' : 'bg-white/90 border border-gray-200'">
|
|
<h2 class="text-xl font-semibold mb-3"
|
|
x-bind:class="darkMode ? 'text-white' : 'text-gray-800'">
|
|
<i class="fa-solid fa-circle-question mr-2"></i>Schnellhilfe
|
|
</h2>
|
|
<ul class="text-sm space-y-2"
|
|
x-bind:class="darkMode ? 'text-gray-300' : 'text-gray-600'">
|
|
<li><i class="fa-solid fa-mouse mr-2"></i>Klicken Sie auf einen Knoten, um ihn auszuwählen</li>
|
|
<li><i class="fa-solid fa-arrows-up-down-left-right mr-2"></i>Ziehen Sie die Maus, um die Ansicht zu verschieben</li>
|
|
<li><i class="fa-solid fa-magnifying-glass-plus mr-2"></i>Mausrad zum Zoomen</li>
|
|
<li><i class="fa-solid fa-right-click mr-2"></i>Rechtsklick für Kontextmenü</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Cytoscape.js für die Mindmap-Visualisierung -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.26.0/cytoscape.min.js"></script>
|
|
|
|
<!-- Socket.IO für Echtzeitaktualisierungen -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.2/socket.io.min.js"></script>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Verarbeite Dark-Mode-Umschaltungen für die Mindmap-Visualisierung
|
|
document.addEventListener('darkModeToggled', function(event) {
|
|
// Hier könnten wir das Mindmap-Styling basierend auf Dark/Light-Mode aktualisieren
|
|
// z.B. Hintergrundfarben, Knotenfarben etc.
|
|
console.log('Dark Mode für Mindmap aktualisiert:', event.detail.isDark);
|
|
});
|
|
|
|
// Weitere Mindmap-spezifische Initialisierung
|
|
// Sollte mit dem vorhandenen mindmap.js-Modul funktionieren
|
|
});
|
|
</script>
|
|
{% endblock %} |