@@ -1123,7 +1123,12 @@ export default {
},
showActivityImage(imageLink) {
- this.imageUrl = imageLink;
+ // Erstelle vollständige URL mit korrektem Port
+ if (imageLink && imageLink.startsWith('/api/')) {
+ this.imageUrl = `http://localhost:3000${imageLink}`;
+ } else {
+ this.imageUrl = imageLink;
+ }
this.showImage = true;
},
async loadMemberImage(member) {
diff --git a/frontend/src/views/PredefinedActivities.vue b/frontend/src/views/PredefinedActivities.vue
index b9aee47..4ca2b5b 100644
--- a/frontend/src/views/PredefinedActivities.vue
+++ b/frontend/src/views/PredefinedActivities.vue
@@ -77,11 +77,15 @@
Übungszeichnung erstellen
-
+
@@ -121,6 +125,7 @@ export default {
editModel: null,
images: [],
selectedFile: null,
+ selectedDrawingData: null,
mergeSourceId: '',
mergeTargetId: '',
};
@@ -154,7 +159,35 @@ export default {
const r = await apiClient.get(`/predefined-activities/${a.id}`);
const { images, ...activity } = r.data;
this.images = images || [];
- this.editModel = { ...activity };
+
+ // Lade Zeichnungsdaten aus dem ersten Bild, falls vorhanden
+ let drawingData = null;
+ if (images && images.length > 0 && images[0].drawingData) {
+ try {
+ drawingData = JSON.parse(images[0].drawingData);
+ console.log('PredefinedActivities: Loaded drawingData:', drawingData);
+ } catch (error) {
+ console.error('PredefinedActivities: Error parsing drawingData:', error);
+ }
+ } else {
+ // Keine Bilder vorhanden - setze drawingData explizit auf null
+ console.log('PredefinedActivities: No images found, setting drawingData to null');
+ drawingData = null;
+ }
+
+ this.editModel = { ...activity, drawingData };
+ },
+ async reloadImages() {
+ if (this.editModel && this.editModel.id) {
+ try {
+ const r = await apiClient.get(`/predefined-activities/${this.editModel.id}`);
+ const { images } = r.data;
+ this.images = images || [];
+ console.log('Images reloaded:', this.images);
+ } catch (error) {
+ console.error('Error reloading images:', error);
+ }
+ }
},
formatItem(a) {
return `${a.code ? '[' + a.code + '] ' : ''}${a.name}`;
@@ -188,6 +221,9 @@ export default {
},
async save() {
if (!this.editModel) return;
+
+ console.log('Save: selectedFile =', this.selectedFile);
+
if (this.editModel.id) {
const { id, ...payload } = this.editModel;
const r = await apiClient.put(`/predefined-activities/${id}`, payload);
@@ -195,29 +231,68 @@ export default {
} else {
const r = await apiClient.post('/predefined-activities', this.editModel);
this.editModel = r.data;
- // Nach dem Erstellen einer neuen Aktivität, falls ein Bild ausgewählt wurde, hochladen
- if (this.selectedFile) {
- await this.uploadImage();
- }
}
+
+ // Nach dem Speichern (sowohl CREATE als auch UPDATE): Bild hochladen falls vorhanden
+ if (this.selectedFile) {
+ console.log('Uploading image after save...');
+ await this.uploadImage();
+ } else {
+ console.log('No selectedFile to upload');
+ }
+
await this.reload();
},
onFileChange(e) {
this.selectedFile = e.target.files && e.target.files[0] ? e.target.files[0] : null;
},
imageUrl(img) {
- return `/api/predefined-activities/${this.editModel.id}/image/${img.id}`;
+ return `http://localhost:3000/api/predefined-activities/${this.editModel.id}/image/${img.id}`;
},
async uploadImage() {
- if (!this.editModel || !this.editModel.id || !this.selectedFile) return;
+ if (!this.editModel || !this.editModel.id || !this.selectedFile) {
+ console.log('Upload skipped: editModel=', this.editModel, 'selectedFile=', this.selectedFile);
+ return;
+ }
+
+ console.log('Starting image upload...');
+ console.log('editModel:', this.editModel);
+ console.log('selectedActivity:', this.selectedActivity);
+ console.log('Activity ID (editModel.id):', this.editModel.id);
+ console.log('Activity ID (selectedActivity.id):', this.selectedActivity?.id);
+ console.log('File:', this.selectedFile);
+
const fd = new FormData();
fd.append('image', this.selectedFile);
- await apiClient.post(`/predefined-activities/${this.editModel.id}/image`, fd, {
- headers: { 'Content-Type': 'multipart/form-data' }
- });
- // Nach Upload Details neu laden
- await this.select(this.editModel);
- this.selectedFile = null;
+
+ // Füge Zeichnungsdaten hinzu, falls vorhanden
+ if (this.selectedDrawingData) {
+ fd.append('drawingData', JSON.stringify(this.selectedDrawingData));
+ console.log('Added drawingData to FormData:', this.selectedDrawingData);
+ }
+
+ // Verwende PUT für Updates, POST für neue Activities
+ const isUpdate = this.selectedActivity && this.selectedActivity.id === this.editModel.id;
+ const method = isUpdate ? 'put' : 'post';
+
+ console.log('Using method:', method);
+
+ try {
+ const response = await apiClient[method](`/predefined-activities/${this.editModel.id}/image`, fd, {
+ headers: { 'Content-Type': 'multipart/form-data' }
+ });
+ console.log('Upload successful:', response);
+
+ // Nach Upload Details neu laden
+ await this.select(this.editModel);
+ this.selectedFile = null;
+
+ // Bildliste explizit aktualisieren
+ await this.reloadImages();
+ } catch (error) {
+ console.error('Upload failed:', error);
+ throw error;
+ }
},
async deleteImage(imageId) {
if (!this.editModel || !this.editModel.id) return;
@@ -244,6 +319,7 @@ export default {
this.editModel.imageLink = drawingData;
}
}
+ // Nicht automatisch speichern, nur wenn User explizit "Speichern" klickt
},
onUpdateFields(fields) {
if (this.editModel) {
@@ -251,6 +327,31 @@ export default {
this.editModel.name = fields.name;
this.editModel.description = fields.description;
}
+ },
+
+ async onDrawingImageUpload(file, drawingData) {
+ console.log('onDrawingImageUpload called with file:', file);
+ console.log('onDrawingImageUpload called with drawingData:', drawingData);
+ console.log('File type:', file?.type);
+ console.log('File size:', file?.size);
+ console.log('File name:', file?.name);
+
+ // Setze das File und die Zeichnungsdaten für den Upload
+ this.selectedFile = file;
+ this.selectedDrawingData = drawingData;
+ console.log('selectedFile set to:', this.selectedFile);
+ console.log('selectedDrawingData set to:', this.selectedDrawingData);
+
+ // Upload wird erst beim Speichern durchgeführt
+ console.log('File and drawing data ready for upload when saving');
+ },
+
+ async onImageUploaded() {
+ console.log('Image uploaded successfully, refreshing image list...');
+ // Bildliste aktualisieren
+ if (this.editModel && this.editModel.id) {
+ await this.select(this.editModel);
+ }
}
},
async mounted() {