-
-
+
+
+
-
@@ -655,6 +694,12 @@
const tabs = document.querySelectorAll('.profile-tab');
const tabContents = document.querySelectorAll('.tab-content');
+ // Standardmäßig den ersten Tab aktivieren
+ if (tabs.length > 0 && tabContents.length > 0) {
+ tabs[0].classList.add('active');
+ tabContents[0].classList.remove('hidden');
+ }
+
tabs.forEach(tab => {
tab.addEventListener('click', function() {
// Alle Tabs deaktivieren
@@ -706,6 +751,8 @@
}
countElement.textContent = count;
+
+ // Hier könnte ein AJAX-Request erfolgen, um die Reaktion zu speichern
});
});
@@ -726,7 +773,7 @@
const avatarEditBtn = document.querySelector('.avatar-edit');
if (avatarEditBtn) {
avatarEditBtn.addEventListener('click', function() {
- // Dateiauwahl öffnen
+ // Dateiauswahl öffnen
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.accept = 'image/*';
@@ -738,13 +785,27 @@
fileInput.addEventListener('change', function() {
if (this.files && this.files[0]) {
// Anzeigen des gewählten Bildes
- const avatarImg = document.querySelector('.avatar');
+ const avatarImg = document.querySelector('.avatar') || document.querySelector('.default-avatar');
// FileReader zum Einlesen des Bildes
const reader = new FileReader();
reader.onload = function(e) {
// Vorschau anzeigen
- avatarImg.src = e.target.result;
+ if (avatarImg.tagName.toLowerCase() === 'img') {
+ avatarImg.src = e.target.result;
+ } else {
+ // Falls es ein div mit SVG ist, ersetzen wir es durch ein Image
+ const imgElement = document.createElement('img');
+ imgElement.src = e.target.result;
+ imgElement.classList.add('avatar');
+ imgElement.alt = "Profilbild";
+
+ const avatarContainer = document.querySelector('.avatar-container');
+ if (avatarContainer) {
+ avatarContainer.innerHTML = '';
+ avatarContainer.appendChild(imgElement);
+ }
+ }
// Avatar-URL im Einstellungsbereich speichern
const avatarUrlInput = document.createElement('input');
@@ -778,119 +839,123 @@
});
}
- // Einstellungen-Formular-Handling
- const saveSettingsBtn = document.querySelectorAll('.settings-card .profile-action-btn.primary');
+ // Profil Speichern-Button
+ const saveProfileBtn = document.getElementById('save-profile-btn');
- saveSettingsBtn.forEach(btn => {
- btn.addEventListener('click', function() {
- const isPasswordUpdate = this.textContent.includes('Passwort');
+ if (saveProfileBtn) {
+ saveProfileBtn.addEventListener('click', function() {
+ // Sammle Daten aus den Eingabefeldern
+ const formData = new FormData();
+ formData.append('action', 'update_profile');
+ formData.append('bio', document.getElementById('bio').value || '');
+ formData.append('location', document.getElementById('location').value || '');
+ formData.append('website', document.getElementById('website').value || '');
- // Passwort-Update
- if (isPasswordUpdate) {
- const currentPassword = document.getElementById('password').value;
- const newPassword = document.getElementById('password_confirm').value;
-
- if (!currentPassword || !newPassword) {
- showNotification('Bitte fülle alle Passwortfelder aus', 'error');
- return;
- }
-
- // AJAX-Anfrage senden
- const formData = new FormData();
- formData.append('action', 'update_password');
- formData.append('current_password', currentPassword);
- formData.append('new_password', newPassword);
- formData.append('confirm_password', newPassword);
-
- // Visuelle Rückmeldung
- const originalText = this.innerHTML;
- this.innerHTML = '
Speichern...';
- this.disabled = true;
-
- fetch('{{ url_for("settings") }}', {
- method: 'POST',
- body: formData
- })
- .then(response => response.json())
- .catch(error => {
- console.error('Fehler beim Aktualisieren des Passworts:', error);
- return { success: false, message: 'Netzwerkfehler. Bitte versuche es erneut.' };
- })
- .then(data => {
- this.innerHTML = originalText;
- this.disabled = false;
-
- if (data && data.success) {
- showNotification('Passwort erfolgreich aktualisiert!', 'success');
- document.getElementById('password').value = '';
- document.getElementById('password_confirm').value = '';
- } else {
- showNotification(data?.message || 'Fehler beim Aktualisieren des Passworts', 'error');
- }
- });
- }
- // Profil-Update
- else {
- // Sammle Daten aus den Eingabefeldern
- const formData = new FormData();
- formData.append('action', 'update_profile');
- formData.append('bio', document.getElementById('bio').value || '');
- formData.append('location', document.getElementById('location').value || '');
- formData.append('website', document.getElementById('website').value || '');
-
- // Avatar hinzufügen, falls vorhanden
- const avatarUrlInput = document.getElementById('avatar_url');
- if (avatarUrlInput) {
- formData.append('avatar_url', avatarUrlInput.value);
- }
-
- // Visuelle Rückmeldung
- const originalText = this.innerHTML;
- this.innerHTML = '
Speichern...';
- this.disabled = true;
-
- // AJAX-Anfrage senden
- fetch('{{ url_for("settings") }}', {
- method: 'POST',
- body: formData
- })
- .then(response => {
- if (!response.ok) {
- throw new Error('Fehler beim Speichern');
- }
- return response.json();
- })
- .catch(error => {
- console.error('Fehler beim Speichern der Profileinstellungen:', error);
- return { success: false, message: 'Netzwerkfehler. Bitte versuche es erneut.' };
- })
- .then(data => {
- this.innerHTML = originalText;
- this.disabled = false;
-
- if (data && data.success) {
- // Erfolgsanimation
- showNotification('Profil erfolgreich aktualisiert!', 'success');
-
- // UI aktualisieren ohne Neuladen
- const bioElement = document.querySelector('.user-bio');
- const locationElement = document.querySelector('.user-meta span:first-child');
-
- if (bioElement) {
- bioElement.textContent = document.getElementById('bio').value || 'Keine Bio vorhanden. Klicke auf bearbeiten, um eine hinzuzufügen.';
- }
-
- if (locationElement) {
- const location = document.getElementById('location').value;
- locationElement.innerHTML = `
${location || 'Kein Standort angegeben'}`;
- }
- } else {
- showNotification(data?.message || 'Fehler beim Aktualisieren des Profils', 'error');
- }
- });
+ // Avatar hinzufügen, falls vorhanden
+ const avatarUrlInput = document.getElementById('avatar_url');
+ if (avatarUrlInput) {
+ formData.append('avatar_url', avatarUrlInput.value);
}
+
+ // Visuelle Rückmeldung
+ const originalText = this.innerHTML;
+ this.innerHTML = '
Speichern...';
+ this.disabled = true;
+
+ // AJAX-Anfrage senden
+ fetch('{{ url_for("settings") }}', {
+ method: 'POST',
+ body: formData
+ })
+ .then(response => {
+ if (!response.ok) {
+ throw new Error('Fehler beim Speichern');
+ }
+ return response.json();
+ })
+ .catch(error => {
+ console.error('Fehler beim Speichern der Profileinstellungen:', error);
+ return { success: false, message: 'Netzwerkfehler. Bitte versuche es erneut.' };
+ })
+ .then(data => {
+ this.innerHTML = originalText;
+ this.disabled = false;
+
+ if (data && data.success) {
+ // Erfolgsanimation
+ showNotification('Profil erfolgreich aktualisiert!', 'success');
+
+ // UI aktualisieren ohne Neuladen
+ const bioElement = document.querySelector('.user-bio');
+ const locationElement = document.querySelector('.user-meta span:first-child');
+
+ if (bioElement) {
+ bioElement.textContent = document.getElementById('bio').value || 'Keine Bio vorhanden. Klicke auf bearbeiten, um eine hinzuzufügen.';
+ }
+
+ if (locationElement) {
+ const location = document.getElementById('location').value;
+ locationElement.innerHTML = `
${location || 'Kein Standort angegeben'}`;
+ }
+ } else {
+ showNotification(data?.message || 'Fehler beim Aktualisieren des Profils', 'error');
+ }
+ });
});
- });
+ }
+
+ // Passwort Update Button
+ const updatePasswordBtn = document.getElementById('update-password-btn');
+
+ if (updatePasswordBtn) {
+ updatePasswordBtn.addEventListener('click', function() {
+ const currentPassword = document.getElementById('password').value;
+ const newPassword = document.getElementById('password_confirm').value;
+
+ if (!currentPassword || !newPassword) {
+ showNotification('Bitte fülle alle Passwortfelder aus', 'error');
+ return;
+ }
+
+ if (currentPassword !== newPassword) {
+ showNotification('Die Passwörter stimmen nicht überein', 'error');
+ return;
+ }
+
+ // AJAX-Anfrage senden
+ const formData = new FormData();
+ formData.append('action', 'update_password');
+ formData.append('new_password', newPassword);
+ formData.append('confirm_password', newPassword);
+
+ // Visuelle Rückmeldung
+ const originalText = this.innerHTML;
+ this.innerHTML = '
Aktualisieren...';
+ this.disabled = true;
+
+ fetch('{{ url_for("settings") }}', {
+ method: 'POST',
+ body: formData
+ })
+ .then(response => response.json())
+ .catch(error => {
+ console.error('Fehler beim Aktualisieren des Passworts:', error);
+ return { success: false, message: 'Netzwerkfehler. Bitte versuche es erneut.' };
+ })
+ .then(data => {
+ this.innerHTML = originalText;
+ this.disabled = false;
+
+ if (data && data.success) {
+ showNotification('Passwort erfolgreich aktualisiert!', 'success');
+ document.getElementById('password').value = '';
+ document.getElementById('password_confirm').value = '';
+ } else {
+ showNotification(data?.message || 'Fehler beim Aktualisieren des Passworts', 'error');
+ }
+ });
+ });
+ }
// Gedanken-Karten mit Hover-Effekten und Border-Farben
const thoughtItems = document.querySelectorAll('.thought-item');
@@ -909,7 +974,7 @@
// Border-Farben anwenden
const borderElem = item.querySelector('.thought-border');
if (borderElem && borderElem.dataset.color) {
- borderElem.style.borderLeftColor = borderElem.dataset.color;
+ borderElem.style.borderLeft = `4px solid ${borderElem.dataset.color}`;
}
});