Training + Liste erneuert

src/app/deck.service.ts

@@ -1,9 +1,10 @@
 // src/app/deck.service.ts
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { Observable } from 'rxjs';
+import { map, Observable, switchMap } from 'rxjs';
 
 export interface Deck {
+  id: number; // Hinzugefügt
   name: string;
   images: DeckImage[];
 }
@@ -18,6 +19,17 @@ export interface Box {
   y1:number;
   y2:number;
 }
+
+export interface BackendBox {
+  bildname: string;
+  deckid: number;
+  iconindex: number;
+  id: number;
+  x1: number;
+  x2: number;
+  y1: number;
+  y2: number;
+}
 @Injectable({
   providedIn: 'root'
 })
@@ -27,10 +39,62 @@ export class DeckService {
   constructor(private http: HttpClient) { }
 
   getDecks(): Observable<Deck[]> {
-    return this.http.get<Deck[]>(this.apiUrl);
+    return this.http.get<any[]>(this.apiUrl).pipe(
+      map(decks => decks.map(deck => ({
+        id: deck.id, // Annahme: Jeder Deck hat eine eindeutige ID
+        name: deck.name,
+        images: this.groupImagesByName(deck.images)
+      })))
+    );
   }
-  getImage(name:string): Observable<DeckImage> {
-    return this.http.get<DeckImage>(`${this.apiUrl}/image/${name}`);
+  private groupImagesByName(images: any[]): DeckImage[] {
+    const imageMap: { [key: string]: DeckImage } = {};
+
+    images.forEach(image => {
+      if (!imageMap[image.name]) {
+        imageMap[image.name] = {
+          name: image.name,
+          boxes: []
+        };
+      }
+      imageMap[image.name].boxes.push({
+        x1: image.x1,
+        x2: image.x2,
+        y1: image.y1,
+        y2: image.y2
+      });
+    });
+
+    return Object.values(imageMap);
+  }
+  getDeck(deckname:string): Observable<Deck> {
+    return this.http.get<Deck>(`${this.apiUrl}/${deckname}/images`);
+  }
+  getImage(name: string): Observable<DeckImage> {
+    return this.http.get<BackendBox[]>(`${this.apiUrl}/image/${name}`).pipe(
+      map(response => {
+        if (response.length === 0) {
+          // Falls keine Daten zurückgegeben werden, ein leeres DeckImage zurückgeben
+          return { name: name, boxes: [] };
+        }
+
+        // Extrahiere den Bildnamen aus dem ersten Element des Arrays
+        const imageName = response[0].bildname;
+
+        // Mape die Backend-Daten auf das Box-Interface
+        const boxes: Box[] = response.map(item => ({
+          x1: item.x1,
+          x2: item.x2,
+          y1: item.y1,
+          y2: item.y2
+        }));
+
+        return {
+          name: imageName,
+          boxes: boxes
+        };
+      })
+    );
   }
   createDeck(deckname: string): Observable<any> {
     return this.http.post(this.apiUrl, { deckname });
@@ -43,4 +107,9 @@ export class DeckService {
   saveImageData(data:any): Observable<any> {
     return this.http.post(`${this.apiUrl}/image`, data);
   }
+  
+  // Neue Methode zum Löschen eines Bildes
+  deleteImage(imageName: string): Observable<any> {
+    return this.http.delete(`${this.apiUrl}/image/${imageName}`);
+  }
 }