edit functionality + separation betw upload & edit

src/app/deck-list.component.ts

@@ -5,6 +5,8 @@ import { CommonModule } from '@angular/common';
 import { CreateDeckModalComponent } from './create-deck-modal/create-deck-modal.component';
 import { TrainingComponent } from './training/training.component';
 import { UploadImageModalComponent } from './upload-image-modal/upload-image-modal.component';
+import { EditImageModalComponent } from './edit-image-modal/edit-image-modal.component';
+import { firstValueFrom } from 'rxjs';
 
 @Component({
   selector: 'app-deck-list',
@@ -14,7 +16,9 @@ import { UploadImageModalComponent } from './upload-image-modal/upload-image-mod
     CommonModule,
     CreateDeckModalComponent,
     UploadImageModalComponent,
-    TrainingComponent
+    TrainingComponent,
+    EditImageModalComponent,
+    UploadImageModalComponent
   ]
 })
 export class DeckListComponent implements OnInit {
@@ -23,6 +27,10 @@ export class DeckListComponent implements OnInit {
 
   @ViewChild(CreateDeckModalComponent) createDeckModal!: CreateDeckModalComponent;
   @ViewChild(UploadImageModalComponent) uploadImageModal!: UploadImageModalComponent;
+  @ViewChild(EditImageModalComponent) editModal!: EditImageModalComponent;
+  @ViewChild(UploadImageModalComponent) uploadModal!: UploadImageModalComponent;
+
+  imageData: { imageSrc: string | ArrayBuffer | null, deckImage:DeckImage} | null = null;
 
   currentUploadDeckName: string = '';
 
@@ -65,7 +73,27 @@ export class DeckListComponent implements OnInit {
       error: (err) => console.error('Fehler beim Löschen des Bildes', err)
     });
   }
-
+  editImage(deck: Deck, image: DeckImage): void {
+    let imageSrc = null
+    fetch(`/api/debug_image/${image.id}/original_compressed.jpg`)
+    .then(response => {
+      if (!response.ok) {
+        throw new Error('Netzwerkantwort war nicht ok');
+      }
+      return response.blob();
+    })
+    .then(blob => {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        imageSrc = reader.result; // Base64-String
+        this.imageData = {imageSrc,deckImage:image}
+      };
+      reader.readAsDataURL(blob);
+    })
+    .catch(error => {
+      console.error('Fehler beim Laden des Bildes:', error);
+    });        
+  }
   openTraining(deck: Deck): void {
     this.selectedDeck = deck;
   }
@@ -131,4 +159,22 @@ export class DeckListComponent implements OnInit {
     const expandedArray = Array.from(this.expandedDecks);
     sessionStorage.setItem('expandedDecks', JSON.stringify(expandedArray));
   }
+
+  // Funktion zum Öffnen des Upload Modals (kann durch einen Button ausgelöst werden)
+  openUploadModal(): void {
+    this.uploadImageModal.open();
+  }
+
+  // Handler für das imageUploaded Event
+  onImageUploaded(imageData: any): void {
+    this.imageData = imageData;
+  }
+  onClosed(){
+    this.imageData = null;
+  }
+  async onImageSaved() {
+    // Handle das Speichern der Bilddaten, z.B. aktualisiere die Liste der Bilder
+    this.imageData = null;
+    this.decks = await firstValueFrom(this.deckService.getDecks())
+  }
 }