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

"Update mindmap template with Convention-Format: templates/templates/mindmap.html"

Browse Source
This commit is contained in:
Till Tomczak
2025-05-14 13:53:57 +02:00
parent e6784b712d
commit e73ccd7e80
1 changed files with 2 additions and 248 deletions
Download Patch File Download Diff File Expand all files Collapse all files

250
templates/mindmap.html
View File

@@ -492,253 +492,7 @@
<!-- Initialisierung -->
<script>
document.addEventListener('DOMContentLoaded', function() {
console.log('DOMContentLoaded Event ausgelöst');
const cyContainer = document.getElementById('cy');
const loader = document.getElementById('loader');
const statusMessage = document.getElementById('statusMessage');
const crudPanel = document.getElementById('crudPanel');
const editModeIndicator = document.getElementById('editModeIndicator');
// CRUD Buttons
const createNodeBtn = document.getElementById('createNode');
const createEdgeBtn = document.getElementById('createEdge');
const editNodeBtn = document.getElementById('editNode');
const deleteElementBtn = document.getElementById('deleteElement');
const saveMindmapBtn = document.getElementById('saveMindmap');
// Header Action Buttons
const toggleEditModeBtn = document.getElementById('toggleEditMode');
const saveChangesBtn = document.getElementById('saveChanges');
const cancelEditBtn = document.getElementById('cancelEdit');
let isEditMode = false;
let selectedElement = null;
if (cyContainer) {
console.log('Container gefunden:', cyContainer);
// Loader und Statusmeldung anzeigen
loader.style.display = 'block';
statusMessage.textContent = 'Lade Mindmap...';
statusMessage.style.display = 'block';
// Prüfen, ob Cytoscape vorhanden ist
if (typeof cytoscape !== 'undefined') {
console.log('Cytoscape ist verfügbar');
// Initialisieren der Mindmap
initializeMindmap().then(() => {
// Erfolg: Loader und Statusmeldung ausblenden
loader.style.display = 'none';
statusMessage.style.display = 'none';
// Event-Listener für Knotenauswahl
window.cy.on('select', 'node', function(event) {
selectedElement = event.target;
editNodeBtn.disabled = false;
deleteElementBtn.disabled = false;
// Knotendetails im Info-Panel anzeigen
showNodeInfo(selectedElement);
});
window.cy.on('select', 'edge', function(event) {
selectedElement = event.target;
editNodeBtn.disabled = true;
deleteElementBtn.disabled = false;
});
window.cy.on('unselect', function() {
selectedElement = null;
editNodeBtn.disabled = true;
deleteElementBtn.disabled = true;
// Info-Panel ausblenden
hideNodeInfo();
});
// Rechtsklick-Menü
window.cy.on('cxttap', 'node', function(event) {
// Kontextmenü für Knoten anzeigen
if (isEditMode) {
const node = event.target;
const position = event.renderedPosition;
showNodeContextMenu(node, {
x: event.originalEvent.clientX,
y: event.originalEvent.clientY
});
event.preventDefault();
}
});
window.cy.on('cxttap', function(event) {
// Kontextmenü zum Hinzufügen eines Knotens
if (isEditMode && event.target === window.cy) {
showAddNodeMenu({
x: event.originalEvent.clientX,
y: event.originalEvent.clientY
});
event.preventDefault();
}
});
}).catch(error => {
// Fehler: Fehlermeldung anzeigen
console.error('Mindmap-Initialisierung fehlgeschlagen', error);
loader.style.display = 'none';
statusMessage.textContent = 'Mindmap konnte nicht initialisiert werden: ' + error.message;
statusMessage.style.backgroundColor = 'rgba(220, 38, 38, 0.9)';
statusMessage.style.display = 'block';
});
} else {
console.error('Cytoscape ist nicht verfügbar');
loader.style.display = 'none';
statusMessage.textContent = 'Cytoscape-Bibliothek konnte nicht geladen werden';
statusMessage.style.backgroundColor = 'rgba(220, 38, 38, 0.9)';
statusMessage.style.display = 'block';
}
} else {
console.error('Container #cy nicht gefunden');
}
// Bearbeitungsmodus umschalten
toggleEditModeBtn.addEventListener('click', function() {
isEditMode = !isEditMode;
if (isEditMode) {
// Bearbeitungsmodus aktivieren
crudPanel.style.display = 'flex';
editModeIndicator.classList.add('active');
toggleEditModeBtn.style.display = 'none';
saveChangesBtn.style.display = 'inline-flex';
cancelEditBtn.style.display = 'inline-flex';
window.cy.container().classList.add('editing-mode');
// Aktiviere Knotenbewegung (dragging)
window.cy.nodes().unlock();
} else {
// Bearbeitungsmodus deaktivieren
crudPanel.style.display = 'none';
editModeIndicator.classList.remove('active');
toggleEditModeBtn.style.display = 'inline-flex';
saveChangesBtn.style.display = 'none';
cancelEditBtn.style.display = 'none';
window.cy.container().classList.remove('editing-mode');
// Deaktiviere Knotenbewegung
window.cy.nodes().lock();
}
});
// Änderungen speichern
saveChangesBtn.addEventListener('click', function() {
saveMindmapChanges(window.cy);
});
// Bearbeitungsmodus abbrechen
cancelEditBtn.addEventListener('click', function() {
if (confirm('Möchten Sie den Bearbeitungsmodus wirklich verlassen? Nicht gespeicherte Änderungen gehen verloren.')) {
isEditMode = false;
crudPanel.style.display = 'none';
editModeIndicator.classList.remove('active');
toggleEditModeBtn.style.display = 'inline-flex';
saveChangesBtn.style.display = 'none';
cancelEditBtn.style.display = 'none';
window.cy.container().classList.remove('editing-mode');
// Neuinitialisierung der Mindmap
initializeMindmap().then(() => {
loader.style.display = 'none';
statusMessage.style.display = 'none';
});
}
});
// CRUD-Funktionen
createNodeBtn.addEventListener('click', function() {
if (isEditMode) {
addNewNode(window.cy);
}
});
createEdgeBtn.addEventListener('click', function() {
if (isEditMode) {
enableEdgeCreationMode(window.cy);
}
});
editNodeBtn.addEventListener('click', function() {
if (isEditMode && selectedElement && selectedElement.isNode()) {
editNodeProperties(selectedElement);
}
});
deleteElementBtn.addEventListener('click', function() {
if (isEditMode && selectedElement) {
if (selectedElement.isNode()) {
deleteNode(selectedElement);
} else if (selectedElement.isEdge()) {
if (confirm('Möchten Sie diese Verbindung wirklich löschen?')) {
selectedElement.remove();
}
}
}
});
saveMindmapBtn.addEventListener('click', function() {
if (isEditMode) {
saveMindmapChanges(window.cy);
}
});
// Zoom-Funktionen
document.getElementById('zoomIn').addEventListener('click', function() {
if (window.cy) window.cy.zoom(window.cy.zoom() * 1.2);
});
document.getElementById('zoomOut').addEventListener('click', function() {
if (window.cy) window.cy.zoom(window.cy.zoom() * 0.8);
});
document.getElementById('resetView').addEventListener('click', 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;
const infoPanel = document.getElementById('infoPanel');
const infoTitle = infoPanel.querySelector('.info-title');
const infoContent = infoPanel.querySelector('.info-content');
const data = node.data();
infoTitle.textContent = data.label || 'Knotendetails';
let contentHTML = `
<p><strong>Kategorie:</strong> ${data.category || 'Nicht kategorisiert'}</p>
<p><strong>Beschreibung:</strong> ${data.description || 'Keine Beschreibung verfügbar'}</p>
`;
if (data.hasChildren) {
contentHTML += `<p><i class="fas fa-sitemap"></i> Hat Unterknoten</p>`;
}
infoContent.innerHTML = contentHTML;
infoPanel.classList.add('visible');
}
function hideNodeInfo() {
const infoPanel = document.getElementById('infoPanel');
infoPanel.classList.remove('visible');
}
});
// DOM-Ready-Event - die Initialisierung erfolgt durch den startMindmapApp()-Aufruf
// in der update_mindmap.js
</script>
{% endblock %}