chore: Änderungen commited
This commit is contained in:
@@ -231,16 +231,16 @@
|
||||
</div>
|
||||
|
||||
<div class="form-body">
|
||||
<form action="{{ url_for('edit_mindmap', mindmap_id=mindmap.id) }}" method="POST">
|
||||
<form id="edit-mindmap-form">
|
||||
<div class="form-group">
|
||||
<label for="name" class="form-label">Name der Mindmap</label>
|
||||
<input type="text" id="name" name="name" class="form-input input-animation" required
|
||||
<input type="text" id="name" name="name" class="form-input input-animation" required
|
||||
placeholder="z.B. Meine Philosophie-Mindmap" value="{{ mindmap.name }}">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="description" class="form-label">Beschreibung</label>
|
||||
<textarea id="description" name="description" class="form-textarea input-animation"
|
||||
<textarea id="description" name="description" class="form-textarea input-animation"
|
||||
placeholder="Worum geht es in dieser Mindmap?">{{ mindmap.description }}</textarea>
|
||||
</div>
|
||||
|
||||
@@ -253,11 +253,11 @@
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between mt-6">
|
||||
<a href="{{ url_for('mindmap', mindmap_id=mindmap.id) }}" class="btn-cancel">
|
||||
<a href="{{ url_for('my_account') }}" class="btn-cancel"> {# Zurück zur Kontoübersicht geändert #}
|
||||
<i class="fas fa-arrow-left"></i>
|
||||
Zurück
|
||||
</a>
|
||||
<button type="submit" class="btn-submit">
|
||||
<button type="button" id="save-mindmap-details-btn" class="btn-submit"> {# type="button" und ID hinzugefügt #}
|
||||
<i class="fas fa-save"></i>
|
||||
Änderungen speichern
|
||||
</button>
|
||||
@@ -322,13 +322,60 @@
|
||||
});
|
||||
});
|
||||
|
||||
// Formular-Absenden-Animation
|
||||
const form = document.querySelector('form');
|
||||
form.addEventListener('submit', function(e) {
|
||||
const submitBtn = this.querySelector('.btn-submit');
|
||||
submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Wird gespeichert...';
|
||||
submitBtn.disabled = true;
|
||||
});
|
||||
// Formular-Absenden-Logik für Metadaten
|
||||
const editMindmapForm = document.getElementById('edit-mindmap-form');
|
||||
const saveDetailsBtn = document.getElementById('save-mindmap-details-btn');
|
||||
|
||||
if (saveDetailsBtn && editMindmapForm) {
|
||||
saveDetailsBtn.addEventListener('click', async function(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const nameInput = document.getElementById('name');
|
||||
const descriptionInput = document.getElementById('description');
|
||||
const isPrivateInput = document.getElementById('is_private');
|
||||
|
||||
const mindmapId = "{{ mindmap.id }}"; // Sicherstellen, dass mindmap.id hier verfügbar ist
|
||||
const csrfToken = "{{ csrf_token() }}";
|
||||
|
||||
const data = {
|
||||
name: nameInput.value,
|
||||
description: descriptionInput.value,
|
||||
is_private: isPrivateInput.checked
|
||||
// Die 'data' (Knoten/Kanten) wird separat vom Cytoscape-Editor gehandhabt
|
||||
};
|
||||
|
||||
saveDetailsBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Wird gespeichert...';
|
||||
saveDetailsBtn.disabled = true;
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/mindmaps/${mindmapId}`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRFToken': csrfToken
|
||||
},
|
||||
body: JSON.stringify(data)
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const result = await response.json();
|
||||
showStatus('Metadaten erfolgreich gespeichert!', false);
|
||||
// Optional: Weiterleitung oder Aktualisierung der Seiteninhalte
|
||||
// window.location.href = "{{ url_for('my_account') }}";
|
||||
} else {
|
||||
const errorData = await response.json();
|
||||
console.error('Fehler beim Speichern der Metadaten:', errorData);
|
||||
showStatus(`Fehler: ${errorData.error || response.statusText}`, true);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Netzwerkfehler oder anderer Fehler:', error);
|
||||
showStatus('Speichern fehlgeschlagen. Netzwerkproblem?', true);
|
||||
} finally {
|
||||
saveDetailsBtn.innerHTML = '<i class="fas fa-save"></i> Änderungen speichern';
|
||||
saveDetailsBtn.disabled = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Mindmap initialisieren
|
||||
const mindmap = new MindMap.Visualization('cy', {
|
||||
@@ -337,56 +384,116 @@
|
||||
onNodeClick: function(nodeData) {
|
||||
console.log("Knoten ausgewählt:", nodeData);
|
||||
},
|
||||
onChange: function(data) {
|
||||
// Automatisches Speichern bei Änderungen
|
||||
fetch('/api/mindmap/{{ mindmap.id }}/update', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRFToken': '{{ csrf_token() }}'
|
||||
},
|
||||
body: JSON.stringify(data)
|
||||
}).then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error('Netzwerkfehler beim Speichern');
|
||||
}
|
||||
console.log('Änderungen gespeichert');
|
||||
}).catch(error => {
|
||||
console.error('Fehler beim Speichern:', error);
|
||||
alert('Fehler beim Speichern der Änderungen');
|
||||
});
|
||||
onChange: function(dataFromCytoscape) {
|
||||
// Automatisches Speichern bei Änderungen der Mindmap-Struktur
|
||||
// Die Metadaten (Name, Beschreibung, is_private) werden separat über das Formular oben gespeichert.
|
||||
// Diese onChange Funktion kümmert sich nur um die Strukturdaten (Knoten/Kanten).
|
||||
const mindmapId = "{{ mindmap.id }}";
|
||||
const csrfToken = "{{ csrf_token() }}";
|
||||
|
||||
// Debounce-Funktion, um API-Aufrufe zu limitieren
|
||||
let debounceTimer;
|
||||
const debounceSaveStructure = (currentMindmapData) => {
|
||||
clearTimeout(debounceTimer);
|
||||
debounceTimer = setTimeout(() => {
|
||||
// Der Backend-Endpunkt PUT /api/mindmaps/<id> erwartet ein Objekt,
|
||||
// das die zu aktualisierenden Felder enthält. Für die Struktur ist das 'data'.
|
||||
const payload = {
|
||||
data: currentMindmapData // Dies sind die von Cytoscape gelieferten Strukturdaten
|
||||
};
|
||||
|
||||
// showStatus('Speichere Struktur...', false); // Status wird jetzt über Event gehandhabt
|
||||
fetch(`/api/mindmaps/${mindmapId}`, { // Endpunkt angepasst
|
||||
method: 'PUT', // Methode zu PUT geändert
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRFToken': csrfToken
|
||||
},
|
||||
body: JSON.stringify(payload) // Sende die Mindmap-Daten als { data: ... }
|
||||
}).then(response => {
|
||||
if (!response.ok) {
|
||||
response.json().then(err => {
|
||||
console.error('Fehler beim Speichern der Struktur:', err);
|
||||
document.dispatchEvent(new CustomEvent('mindmapError', { detail: { message: `Struktur: ${err.message || err.error || 'Speicherfehler'}` } }));
|
||||
}).catch(() => {
|
||||
console.error('Fehler beim Speichern der Struktur, Status:', response.statusText);
|
||||
document.dispatchEvent(new CustomEvent('mindmapError', { detail: { message: `Struktur: ${response.statusText}` } }));
|
||||
});
|
||||
// throw new Error('Netzwerkfehler beim Speichern der Struktur'); // Wird schon behandelt
|
||||
return; // Verhindere weitere Verarbeitung bei Fehler
|
||||
}
|
||||
return response.json();
|
||||
}).then(responseData => {
|
||||
if (responseData) { // Nur wenn response.ok war
|
||||
console.log('Mindmap-Struktur erfolgreich gespeichert:', responseData);
|
||||
// Die responseData von einem PUT könnte die aktualisierte Mindmap oder nur eine Erfolgsmeldung sein.
|
||||
// Annahme: { message: "Mindmap updated successfully", mindmap: { ... } } oder ähnlich
|
||||
document.dispatchEvent(new CustomEvent('mindmapSaved', { detail: { message: 'Struktur aktualisiert!' }}));
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('Netzwerkfehler oder anderer Fehler beim Speichern der Struktur:', error);
|
||||
// Vermeide doppelte Fehlermeldung, falls schon durch !response.ok behandelt
|
||||
if (!document.querySelector('.bg-red-500')) { // Prüft, ob schon eine Fehlermeldung angezeigt wird
|
||||
document.dispatchEvent(new CustomEvent('mindmapError', { detail: { message: 'Struktur: Netzwerkfehler' } }));
|
||||
}
|
||||
});
|
||||
}, 1500); // Speichern 1.5 Sekunden nach der letzten Änderung
|
||||
};
|
||||
|
||||
debounceSaveStructure(dataFromCytoscape); // Aufruf der Debounce-Funktion mit Cytoscape-Daten
|
||||
}
|
||||
});
|
||||
|
||||
// Formularfelder mit Mindmap verbinden
|
||||
const nameInput = document.getElementById('name');
|
||||
const descriptionInput = document.getElementById('description');
|
||||
|
||||
// Aktualisiere Mindmap wenn sich die Eingaben ändern
|
||||
nameInput.addEventListener('input', function() {
|
||||
if (mindmap.cy) {
|
||||
const rootNode = mindmap.cy.$('#root');
|
||||
if (rootNode.length > 0) {
|
||||
rootNode.data('name', this.value || 'Mindmap');
|
||||
mindmap.saveToServer();
|
||||
}
|
||||
}
|
||||
});
|
||||
// Die Verknüpfung der Formularfelder (Name, Beschreibung) mit dem Cytoscape Root-Knoten wird entfernt,
|
||||
// da die Metadaten nun über das separate Formular oben gespeichert werden und nicht mehr direkt
|
||||
// die Cytoscape-Daten manipulieren sollen. Die Logik für mindmap.saveToServer() wurde entfernt,
|
||||
// da das Speichern jetzt über den onChange Handler mit PUT /api/mindmaps/<id> erfolgt.
|
||||
// const nameInput = document.getElementById('name'); // Bereits oben deklariert für Metadaten
|
||||
// nameInput.removeEventListener('input', ...); // Event Listener muss hier nicht entfernt werden, da er nicht neu hinzugefügt wird.
|
||||
|
||||
// Initialisiere die Mindmap mit existierenden Daten
|
||||
mindmap.initialize().then(() => {
|
||||
console.log("Mindmap-Editor initialisiert");
|
||||
const mindmapId = "{{ mindmap.id }}";
|
||||
const csrfToken = "{{ csrf_token() }}";
|
||||
|
||||
// Lade existierende Daten
|
||||
fetch('/api/mindmap/{{ mindmap.id }}/data')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
mindmap.loadData(data);
|
||||
console.log("Mindmap-Daten geladen");
|
||||
// Lade existierende Daten für die Mindmap-Struktur
|
||||
fetch(`/api/mindmaps/${mindmapId}`, { // Endpunkt für GET angepasst
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Accept': 'application/json',
|
||||
'X-CSRFToken': csrfToken
|
||||
}
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
response.json().then(err => {
|
||||
showStatus(`Fehler beim Laden: ${err.message || err.error || response.statusText}`, true);
|
||||
}).catch(() => {
|
||||
showStatus(`Fehler beim Laden: ${response.statusText}`, true);
|
||||
});
|
||||
throw new Error(`Netzwerkantwort war nicht ok: ${response.statusText}`);
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(mindmapDataFromServer => {
|
||||
// Die API GET /api/mindmaps/<id> gibt ein Objekt zurück, das { id, name, description, is_private, data, ... } enthält.
|
||||
// Wir brauchen nur den 'data'-Teil (Struktur) für Cytoscape.
|
||||
// Die Metadaten (name, description, is_private) werden bereits serverseitig in die Formularfelder gerendert.
|
||||
if (mindmapDataFromServer && mindmapDataFromServer.data) {
|
||||
mindmap.loadData(mindmapDataFromServer.data); // Lade nur die Strukturdaten
|
||||
console.log("Mindmap-Strukturdaten geladen:", mindmapDataFromServer.data);
|
||||
showStatus("Mindmap geladen.", false);
|
||||
} else {
|
||||
console.error("Fehler: Mindmap-Daten (Struktur) nicht im erwarteten Format:", mindmapDataFromServer);
|
||||
showStatus("Fehler: Mindmap-Struktur konnte nicht geladen werden (Formatfehler).", true);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error("Fehler beim Laden der Mindmap-Daten:", error);
|
||||
alert("Fehler beim Laden der Mindmap");
|
||||
console.error("Fehler beim Laden der Mindmap-Strukturdaten:", error);
|
||||
if (!document.querySelector('.bg-red-500')) { // Prüft, ob schon eine Fehlermeldung angezeigt wird
|
||||
showStatus("Laden der Struktur fehlgeschlagen.", true);
|
||||
}
|
||||
});
|
||||
}).catch(error => {
|
||||
console.error("Fehler bei der Initialisierung des Editors:", error);
|
||||
@@ -411,8 +518,9 @@
|
||||
}
|
||||
|
||||
// Event-Listener für Speicherstatus
|
||||
document.addEventListener('mindmapSaved', () => {
|
||||
showStatus('Änderungen gespeichert');
|
||||
document.addEventListener('mindmapSaved', (event) => {
|
||||
const message = event.detail && event.detail.message ? event.detail.message : 'Erfolgreich gespeichert!';
|
||||
showStatus(message, false);
|
||||
});
|
||||
|
||||
document.addEventListener('mindmapError', (event) => {
|
||||
|
||||
Reference in New Issue
Block a user