diff --git a/src/app/deck-list.component.html b/src/app/deck-list.component.html index add9730..5e5cf31 100644 --- a/src/app/deck-list.component.html +++ b/src/app/deck-list.component.html @@ -12,45 +12,56 @@

{{ deck.name }}

-
- - + + + + -
- - -
+ +
+ + +
+
diff --git a/src/app/deck-list.component.ts b/src/app/deck-list.component.ts index c0d2d12..0b1a733 100644 --- a/src/app/deck-list.component.ts +++ b/src/app/deck-list.component.ts @@ -57,9 +57,9 @@ export class DeckListComponent implements OnInit { // Hier gehen wir davon aus, dass das Deck eine eindeutige ID hat. Falls nicht, passe den Code entsprechend an. const deckId = deck.id; // Stelle sicher, dass das Deck eine `id` hat - const imageName = image.name; // Stelle sicher, dass das Bild eine `id` hat + const imageId = image.id; // Stelle sicher, dass das Bild eine `id` hat - this.deckService.deleteImage(imageName).subscribe({ + this.deckService.deleteImage(imageId).subscribe({ next: () => this.loadDecks(), error: (err) => console.error('Fehler beim Löschen des Bildes', err) }); diff --git a/src/app/deck.service.ts b/src/app/deck.service.ts index 19a9c4e..26796ae 100644 --- a/src/app/deck.service.ts +++ b/src/app/deck.service.ts @@ -12,6 +12,7 @@ export interface Deck { export interface DeckImage { boxes: Box[]; name: string; + id:string; } export interface Box { x1:number; @@ -51,13 +52,14 @@ export class DeckService { const imageMap: { [key: string]: DeckImage } = {}; images.forEach(image => { - if (!imageMap[image.name]) { - imageMap[image.name] = { + if (!imageMap[image.id]) { + imageMap[image.id] = { name: image.name, + id:image.id, boxes: [] }; } - imageMap[image.name].boxes.push({ + imageMap[image.id].boxes.push({ x1: image.x1, x2: image.x2, y1: image.y1, @@ -70,32 +72,32 @@ export class DeckService { getDeck(deckname:string): Observable { return this.http.get(`${this.apiUrl}/${deckname}/images`); } - getImage(name: string): Observable { - return this.http.get(`${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: [] }; - } + // getImage(name: string): Observable { + // return this.http.get(`${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; + // // 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 - })); + // // 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 - }; - }) - ); - } + // return { + // name: imageName, + // boxes: boxes + // }; + // }) + // ); + // } createDeck(deckname: string): Observable { return this.http.post(this.apiUrl, { deckname }); } diff --git a/src/app/training/training.component.ts b/src/app/training/training.component.ts index bde197e..1e5134d 100644 --- a/src/app/training/training.component.ts +++ b/src/app/training/training.component.ts @@ -15,7 +15,7 @@ export class TrainingComponent implements OnInit { @Input() deck!: Deck; @Output() close = new EventEmitter(); - @ViewChild('canvas') canvasRef!: ElementRef; + @ViewChild('canvas',{static : false}) canvasRef!: ElementRef; currentImageIndex: number = 0; currentImageData: DeckImage | null = null; @@ -32,6 +32,8 @@ export class TrainingComponent implements OnInit { constructor(private deckService: DeckService) { } ngOnInit(): void { + } + ngAfterViewInit(){ if (this.deck && this.deck.images.length > 0) { this.loadImage(this.currentImageIndex); } else { @@ -39,7 +41,6 @@ export class TrainingComponent implements OnInit { this.close.emit(); } } - loadImage(imageIndex: number): void { if (imageIndex >= this.deck.images.length) { this.endTraining(); @@ -47,21 +48,12 @@ export class TrainingComponent implements OnInit { } const imageName = this.deck.images[imageIndex].name; - this.deckService.getImage(imageName).subscribe({ - next: (imageData: DeckImage) => { - this.currentImageData = imageData; - this.boxes = imageData.boxes; + this.currentImageData = this.deck.images[imageIndex]; + this.boxes = this.deck.images[imageIndex].boxes; this.boxRevealed = new Array(this.boxes.length).fill(false); this.currentBoxIndex = 0; this.isShowingBox = false; this.drawCanvas(); - }, - error: (err) => { - console.error('Fehler beim Laden des Bildes:', err); - alert('Fehler beim Laden des Bildes.'); - this.close.emit(); - } - }); } drawCanvas(): void { @@ -70,7 +62,7 @@ export class TrainingComponent implements OnInit { if (!ctx || !this.currentImageData) return; const img = new Image(); - img.src = `/api/debug_image/${this.currentImageData.name}`; + img.src = `/api/debug_image/${this.currentImageData.id}`; img.onload = () => { // Set canvas size to image size canvas.width = img.width; diff --git a/src/app/upload-image-modal/upload-image-modal.component.ts b/src/app/upload-image-modal/upload-image-modal.component.ts index 4314f3f..f4ecfa8 100644 --- a/src/app/upload-image-modal/upload-image-modal.component.ts +++ b/src/app/upload-image-modal/upload-image-modal.component.ts @@ -107,7 +107,6 @@ export class UploadImageModalComponent implements AfterViewInit, OnDestroy { async onFileChange(event: any): Promise { const file: File = event.target.files[0]; if (!file) return; - this.imageFile = file; this.processingStatus = 'Verarbeitung läuft...'; this.detectedText = ''; @@ -317,12 +316,12 @@ export class UploadImageModalComponent implements AfterViewInit, OnDestroy { // Zum Beispiel: const data = { deckname: this.deckName, - image: this.imagename, + bildname: this.imageFile?.name, + bildid: this.imagename, boxes: this.boxes, }; this.deckService.saveImageData(data).subscribe({ next: () => { - alert('Bild gespeichert!'); this.imageUploaded.emit(); this.closeModal(); }, @@ -332,7 +331,6 @@ export class UploadImageModalComponent implements AfterViewInit, OnDestroy { } }); // Temporäres Beispiel: - alert('Save button clicked'); this.imageUploaded.emit(); this.closeModal(); }