116 lines
2.8 KiB
TypeScript
116 lines
2.8 KiB
TypeScript
// src/app/deck.service.ts
|
|
import { Injectable } from '@angular/core';
|
|
import { HttpClient } from '@angular/common/http';
|
|
import { map, Observable, switchMap } from 'rxjs';
|
|
|
|
export interface Deck {
|
|
id: number; // Hinzugefügt
|
|
name: string;
|
|
images: DeckImage[];
|
|
}
|
|
|
|
export interface DeckImage {
|
|
boxes: Box[];
|
|
name: string;
|
|
}
|
|
export interface Box {
|
|
x1:number;
|
|
x2:number;
|
|
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'
|
|
})
|
|
export class DeckService {
|
|
private apiUrl = '/api/decks';
|
|
|
|
constructor(private http: HttpClient) { }
|
|
|
|
getDecks(): Observable<Deck[]> {
|
|
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)
|
|
})))
|
|
);
|
|
}
|
|
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 });
|
|
}
|
|
|
|
deleteDeck(deckName: string): Observable<any> {
|
|
return this.http.delete(`${this.apiUrl}/${encodeURIComponent(deckName)}`);
|
|
}
|
|
|
|
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}`);
|
|
}
|
|
}
|