3column design, borders

angular.json

@@ -104,5 +104,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

src/app/deck-list.component.html

@@ -8,36 +8,45 @@
   </div>
 
   <!-- Decks anzeigen -->
-  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-    <div *ngFor="let deck of decks" class="bg-white shadow rounded-lg p-6 flex flex-col">
+  <div class="flex flex-wrap">
+    <div *ngFor="let deck of decks" class="bg-white shadow rounded-lg p-6 w-full md:w-1/2 lg:w-1/3 flex flex-col border-dashed border-2 border-indigo-600">
+      <!-- Deck-Header mit Toggle-Button -->
       <div class="flex justify-between items-center mb-4">
+        <div class="flex items-center space-x-2">
           <h2 class="text-xl font-semibold">{{ deck.name }}</h2>
-        
-        <!-- Anzahl der Bilder anzeigen, wenn ein Training aktiv ist -->
-        <span *ngIf="selectedDeck" class="text-gray-600">
-          {{ deck.images.length }} Bilder
-        </span>
-        
-        <!-- Löschen-Button anzeigen, wenn kein Training aktiv ist -->
-        <button *ngIf="!selectedDeck" (click)="deleteDeck(deck.name)" class="text-red-500 hover:text-red-700" title="Deck löschen">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+          <span class="text-gray-600">({{ deck.images.length }} Bilder)</span>
+        </div>
+        <button (click)="toggleDeckExpansion(deck.name)" class="text-gray-500 hover:text-gray-700 focus:outline-none" title="Deck ein-/ausklappen">
+          <svg *ngIf="!isDeckExpanded(deck.name)" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform rotate-0 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+          </svg>
+          <svg *ngIf="isDeckExpanded(deck.name)" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform rotate-180 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
           </svg>
         </button>
       </div>
 
-      <!-- Bildliste und Action-Buttons nur anzeigen, wenn kein Training aktiv ist -->
-      <ng-container *ngIf="!selectedDeck">
+      <!-- Bildliste und Action-Buttons nur anzeigen, wenn das Deck erweitert ist und kein Training aktiv ist -->
+      <ng-container *ngIf="isDeckExpanded(deck.name) && !selectedDeck">
         <!-- Liste der Bilder mit Anzahl der Boxen und Icons -->
         <ul class="mb-4">
           <li *ngFor="let image of deck.images" class="flex justify-between items-center py-2 border-b last:border-b-0">
-            <div>
-              <span class="font-medium">{{ image.name }}</span>
+            <div class="flex items-center space-x-2">
+              <div class="relative group">
+                <!-- Tooltip Inhalt (Bild) -->
+                <div class="absolute left-0 bottom-full mb-2 w-48 bg-white border border-gray-300 rounded shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-10 pointer-events-none">
+                  <img src="/api/debug_image/{{image.id}}/thumbnail.jpg" alt="{{ image.name }}" class="w-full h-auto object-cover">
+                </div>
+                <!-- Bildname mit Tooltip -->
+                <span class="font-medium cursor-pointer">
+                  {{ image.name }}
+                </span>
+              </div>
               <span class="text-gray-600">({{ image.boxes.length }} Boxen)</span>
             </div>
             <div class="flex space-x-2">
               <!-- Edit Icon -->
-              <button class="text-blue-500 hover:text-blue-700" title="Bild bearbeiten">
+              <button (click)="editImage(deck, image)" class="text-blue-500 hover:text-blue-700" title="Bild bearbeiten">
                 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 4H4v7m0 0l9-9 9 9M20 13v7h-7m0 0l-9-9-9 9" />
                 </svg>
@@ -48,6 +57,12 @@
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                 </svg>
               </button>
+              <!-- Move Icon -->
+              <button (click)="openMoveImageModal(deck, image)" class="text-yellow-500 hover:text-yellow-700" title="Bild verschieben">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                </svg>
+              </button>              
             </div>
           </li>
         </ul>
@@ -69,8 +84,18 @@
   <app-create-deck-modal (deckCreated)="loadDecks()"></app-create-deck-modal>
 
   <!-- UploadImageModalComponent -->
-  <app-upload-image-modal [deckName]="currentUploadDeckName" (imageUploaded)="loadDecks()"></app-upload-image-modal>
-
+  <!-- <app-upload-image-modal [deckName]="currentUploadDeckName" (imageUploaded)="loadDecks()"></app-upload-image-modal> -->
+  <app-upload-image-modal (imageUploaded)="onImageUploaded($event)"> </app-upload-image-modal>
+  <app-edit-image-modal *ngIf="imageData" [deckName]="currentUploadDeckName" [imageData]="imageData" (imageSaved)="onImageSaved()" (closed)="onClosed()"></app-edit-image-modal>
   <!-- TrainingComponent -->
   <app-training *ngIf="selectedDeck" [deck]="selectedDeck" (close)="closeTraining()"></app-training>
+    <!-- MoveImageModalComponent -->
+    <app-move-image-modal 
+    *ngIf="imageToMove" 
+    [image]="imageToMove.image" 
+    [sourceDeck]="imageToMove.sourceDeck" 
+    [decks]="decks" 
+    (moveCompleted)="onImageMoved()" 
+    (closed)="imageToMove = null">
+  </app-move-image-modal>
 </div>

src/app/deck-list.component.ts

@@ -5,6 +5,9 @@ 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';
+import { MoveImageModalComponent } from './move-image-modal/move-image-modal.component';
 
 @Component({
   selector: 'app-deck-list',
@@ -14,7 +17,10 @@ import { UploadImageModalComponent } from './upload-image-modal/upload-image-mod
     CommonModule,
     CreateDeckModalComponent,
     UploadImageModalComponent,
-    TrainingComponent
+    TrainingComponent,
+    EditImageModalComponent,
+    MoveImageModalComponent, // Hinzufügen der neuen Komponente
+    UploadImageModalComponent
   ]
 })
 export class DeckListComponent implements OnInit {
@@ -23,12 +29,23 @@ 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 = '';
 
+  // Set zur Verfolgung erweiterter Decks
+  expandedDecks: Set<string> = new Set<string>();
+
+  // State für das Verschieben von Bildern
+  imageToMove: { image: DeckImage, sourceDeck: Deck } | null = null;
+
   constructor(private deckService: DeckService) { }
 
   ngOnInit(): void {
+    this.loadExpandedDecks();
     this.loadDecks();
   }
 
@@ -49,15 +66,12 @@ export class DeckListComponent implements OnInit {
     });
   }
 
-  // Neue Methode zum Löschen eines Bildes
   deleteImage(deck: Deck, image: DeckImage): void {
     if (!confirm(`Bist du sicher, dass du das Bild "${image.name}" löschen möchtest?`)) {
       return;
     }
 
-    // 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 imageId = image.id; // Stelle sicher, dass das Bild eine `id` hat
+    const imageId = image.id; 
 
     this.deckService.deleteImage(imageId).subscribe({
       next: () => this.loadDecks(),
@@ -65,6 +79,29 @@ export class DeckListComponent implements OnInit {
     });
   }
   
+  editImage(deck: Deck, image: DeckImage): void {
+    let imageSrc = null
+    this.currentUploadDeckName = deck.name;
+    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;
   }
@@ -83,4 +120,72 @@ export class DeckListComponent implements OnInit {
     this.uploadImageModal.deckName = deckName;
     this.uploadImageModal.open();
   }
+
+  // Methode zum Umschalten der Deck-Erweiterung
+  toggleDeckExpansion(deckName: string): void {
+    if (this.expandedDecks.has(deckName)) {
+      this.expandedDecks.delete(deckName);
+    } else {
+      this.expandedDecks.add(deckName);
+    }
+    this.saveExpandedDecks();
+  }
+
+  // Methode zur Überprüfung, ob ein Deck erweitert ist
+  isDeckExpanded(deckName: string): boolean {
+    return this.expandedDecks.has(deckName);
+  }
+
+  // Laden der erweiterten Decks aus dem sessionStorage
+  loadExpandedDecks(): void {
+    const stored = sessionStorage.getItem('expandedDecks');
+    if (stored) {
+      try {
+        const parsed: string[] = JSON.parse(stored);
+        this.expandedDecks = new Set<string>(parsed);
+      } catch (e) {
+        console.error('Fehler beim Parsen der erweiterten Decks aus sessionStorage', e);
+      }
+    } else {
+      // Wenn keine Daten gespeichert sind, alle Decks standardmäßig nicht erweitern
+      this.expandedDecks = new Set<string>();
+    }
+  }
+
+  // Speichern der erweiterten Decks in das sessionStorage
+  saveExpandedDecks(): void {
+    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())
+  }
+
+  // Methode zum Öffnen des MoveImageModal
+  openMoveImageModal(deck: Deck, image: DeckImage): void {
+    this.imageToMove = { image, sourceDeck: deck };
+  }
+
+  // Handler für das moveCompleted Event
+  onImageMoved(): void {
+    this.imageToMove = null;
+    this.loadDecks();
+  }
 }

src/app/deck.service.ts

@@ -4,7 +4,6 @@ import { HttpClient } from '@angular/common/http';
 import { map, Observable, switchMap } from 'rxjs';
 
 export interface Deck {
-  id: number; // Hinzugefügt
   name: string;
   images: DeckImage[];
 }
@@ -14,11 +13,19 @@ export interface DeckImage {
   name: string;
   id:string;
 }
+
 export interface Box {
+  id?:number;
   x1:number;
   x2:number;
   y1:number;
   y2:number;
+  due?: number;
+  ivl?: number;
+  factor?: number;
+  reps?: number;
+  lapses?: number;
+  isGraduated?:boolean;
 }
 
 export interface BackendBox {
@@ -31,6 +38,21 @@ export interface BackendBox {
   y1: number;
   y2: number;
 }
+
+// Definiert ein einzelnes Punktpaar [x, y]
+type OcrPoint = [number, number];
+
+// Definiert die Box als Array von vier Punkten
+type OcrBox = [OcrPoint, OcrPoint, OcrPoint, OcrPoint];
+
+// Interface für jedes JSON-Objekt
+export interface OcrResult {
+  box: OcrBox;
+  confidence: number;
+  name: string;
+  text: string;
+}
+
 @Injectable({
   providedIn: 'root'
 })
@@ -42,7 +64,6 @@ export class DeckService {
   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)
       })))
@@ -60,10 +81,17 @@ export class DeckService {
         };
       }
       imageMap[image.id].boxes.push({
+        id: image.boxid,
         x1: image.x1,
         x2: image.x2,
         y1: image.y1,
-        y2: image.y2
+        y2: image.y2,
+        due: image.due,
+        ivl:image.ivl,
+        factor:image.factor,
+        reps:image.reps,
+        lapses:image.lapses,
+        isGraduated:image.isGraduated?true:false
       });
     });
 
@@ -72,32 +100,7 @@ export class DeckService {
   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 });
   }
@@ -114,4 +117,13 @@ export class DeckService {
   deleteImage(imageName: string): Observable<any> {
     return this.http.delete(`${this.apiUrl}/image/${imageName}`);
   }
+
+  // Neue Methode zum Verschieben eines Bildes
+  moveImage(imageId: string, targetDeckId: number): Observable<any> {
+    return this.http.post(`${this.apiUrl}/images/${imageId}/move`, { targetDeckId });
+  }
+
+  updateBox(box: Box): Observable<any> {
+    return this.http.put(`${this.apiUrl}/boxes/${box.id}`, box);
+  }
 }

src/app/edit-image-modal/edit-image-modal.component.html

@@ -0,0 +1,34 @@
+<!-- src/app/edit-image-modal.component.html -->
+<div #editImageModal id="editImageModal" tabindex="-1" aria-hidden="true" class="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-modal md:h-full">
+  <div class="relative h-full contents">
+    <div class="relative bg-white rounded-lg shadow">
+      <button type="button" class="absolute top-3 right-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center" (click)="closeModal()">
+        <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+          <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
+        </svg>
+        <span class="sr-only">Schließen</span>
+      </button>
+      <div class="p-6 relative">
+        <!-- Überschrift mit Boxanzahl -->
+        <h3 class="mb-4 text-xl font-medium text-gray-900">
+          Bild bearbeiten <span *ngIf="boxes.length > 0">({{ boxes.length }} Box{{ boxes.length > 1 ? 'en' : '' }})</span>
+        </h3>
+        
+        <!-- Canvas -->
+        <div class="mt-4">
+          <canvas #canvas class="border border-gray-300 rounded w-full h-auto"></canvas>
+        </div>
+
+        <!-- Buttons unter dem Canvas -->
+        <div class="mt-4 flex justify-between">
+          <button (click)="save()" class="bg-green-500 text-white py-2 px-4 rounded hover:bg-green-600">
+            Save
+          </button>
+          <button (click)="addNewBox()" class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">
+            Neue Box
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/edit-image-modal/edit-image-modal.component.ts

@@ -0,0 +1,275 @@
+// src/app/edit-image-modal.component.ts
+import { Component, Input, Output, EventEmitter, AfterViewInit, ViewChild, ElementRef, OnDestroy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { fabric } from 'fabric';
+import { Modal } from 'flowbite';
+import { DeckImage, DeckService, OcrResult } from '../deck.service';
+
+@Component({
+  selector: 'app-edit-image-modal',
+  templateUrl: './edit-image-modal.component.html',
+  standalone: true,
+  imports: [CommonModule]
+})
+export class EditImageModalComponent implements AfterViewInit, OnDestroy {
+  // Konstante für die Boxfarbe
+  private readonly BOX_COLOR = 'rgba(255, 0, 0, 0.3)'; // Rot mit Transparenz
+
+  @Input() deckName: string = '';
+  @Input() imageData : {imageSrc:string|ArrayBuffer|null, deckImage:DeckImage|null} = {imageSrc:null,deckImage:null};
+  @Output() imageSaved = new EventEmitter<void>();
+  @Output() closed = new EventEmitter<void>();
+  @ViewChild('editImageModal') modalElement!: ElementRef;
+  @ViewChild('canvas') canvasElement!: ElementRef<HTMLCanvasElement>;
+
+  detectedText: string = '';
+  boxes: { x1: number; x2: number; y1: number; y2: number }[] = [];
+  canvas!: fabric.Canvas;
+
+  maxCanvasWidth: number = 0;
+  maxCanvasHeight: number = 0;
+
+  private keyDownHandler!: (e: KeyboardEvent) => void;
+  modal: any;
+
+  constructor(private deckService: DeckService) { }
+
+  async ngAfterViewInit() {
+    this.modal = new Modal(this.modalElement.nativeElement,{
+      onHide: () => {
+        this.closed.emit();
+      }},
+    );
+
+    this.maxCanvasWidth = window.innerWidth * 0.6;
+    this.maxCanvasHeight = window.innerHeight * 0.6;
+
+    this.keyDownHandler = this.onKeyDown.bind(this);
+    document.addEventListener('keydown', this.keyDownHandler);
+
+    await this.initializeCanvas();
+
+    this.modal.show();
+  }
+
+  ngOnDestroy(): void {
+    document.removeEventListener('keydown', this.keyDownHandler);
+    if (this.canvas) {
+      this.canvas.dispose();
+    }
+  }
+
+  open(): void {
+    this.modal.show();
+  }
+
+  closeModal(): void {
+    this.modal.hide();
+  }
+
+  async initializeCanvas() {
+    await this.processImage();
+  }
+
+  private loadFabricImage(url: string): Promise<fabric.Image> {
+    return new Promise((resolve, reject) => {
+      fabric.Image.fromURL(
+        url,
+        (img) => {
+          resolve(img);
+        },
+        {
+          crossOrigin: 'anonymous',
+          originX: 'left',
+          originY: 'top',
+        }
+      );
+    });
+  }
+
+  async processImage(): Promise<void> {
+    try {
+      if (!this.imageData){
+        return;
+      }
+
+      this.canvas = new fabric.Canvas(this.canvasElement.nativeElement);
+
+      // Hintergrundbild setzen
+      const backgroundImage = await this.loadFabricImage(this.imageData.imageSrc as string);
+
+      const originalWidth = backgroundImage.width!;
+      const originalHeight = backgroundImage.height!;
+
+      const scaleX = this.maxCanvasWidth / originalWidth;
+      const scaleY = this.maxCanvasHeight / originalHeight;
+      const scaleFactor = Math.min(scaleX, scaleY, 1);
+
+      const canvasWidth = originalWidth * scaleFactor;
+      const canvasHeight = originalHeight * scaleFactor;
+
+      this.canvas.setWidth(canvasWidth);
+      this.canvas.setHeight(canvasHeight);
+
+      backgroundImage.set({
+        scaleX: scaleFactor,
+        scaleY: scaleFactor,
+      });
+
+      this.canvas.setBackgroundImage(backgroundImage, this.canvas.renderAll.bind(this.canvas));
+
+      this.boxes = [];
+
+      // Boxen hinzufügen
+      this.imageData.deckImage?.boxes.forEach(box => {
+
+        const rect = new fabric.Rect({
+          left: box.x1 * scaleFactor,
+          top: box.y1 * scaleFactor,
+          width: (box.x2 - box.x1) * scaleFactor,
+          height: (box.y2 - box.y1) * scaleFactor,
+          fill: this.BOX_COLOR, // Verwendung der Konstante
+          selectable: true,
+          hasControls: true,
+          hasBorders: true,
+          objectCaching: false,
+        });
+
+        rect.on('modified', () => {
+          this.updateBoxCoordinates();
+        });
+        rect.on('moved', () => {
+          this.updateBoxCoordinates();
+        });
+        rect.on('scaled', () => {
+          this.updateBoxCoordinates();
+        });
+        rect.on('rotated', () => {
+          this.updateBoxCoordinates();
+        });
+        rect.on('removed', () => {
+          this.updateBoxCoordinates();
+        });
+
+        this.canvas.add(rect);
+      });
+
+      this.updateBoxCoordinates();
+
+      // this.detectedText = ocrResults.map(result => result.text).join('\n');
+
+    } catch (error) {
+      console.error('Fehler bei der Bildverarbeitung:', error);
+    }
+  }
+
+  onKeyDown(e: KeyboardEvent): void {
+    if (e.key === 'Delete' || e.key === 'Del') {
+      const activeObject = this.canvas.getActiveObject();
+      if (activeObject) {
+        this.canvas.remove(activeObject);
+        this.canvas.requestRenderAll();
+        this.updateBoxCoordinates();
+      }
+    }
+  }
+
+  updateBoxCoordinates(): void {
+    this.boxes = [];
+
+    let scaleFactor = 1;
+    const bgImage = this.canvas.backgroundImage;
+    if (bgImage && bgImage instanceof fabric.Image) {
+      scaleFactor = bgImage.get('scaleX') || 1;
+    }
+
+    this.canvas.getObjects('rect').forEach((rect: fabric.Rect) => {
+      const left = rect.left!;
+      const top = rect.top!;
+      const width = rect.width! * rect.scaleX!;
+      const height = rect.height! * rect.scaleY!;
+
+      const x1 = left / scaleFactor;
+      const y1 = top / scaleFactor;
+      const x2 = (left + width) / scaleFactor;
+      const y2 = (top + height) / scaleFactor;
+
+      this.boxes.push({
+        x1: Math.round(x1),
+        x2: Math.round(x2),
+        y1: Math.round(y1),
+        y2: Math.round(y2)
+      });
+    });
+
+    this.canvas.requestRenderAll();
+  }
+
+  addNewBox(): void {
+    if (!this.canvas) {
+      return;
+    }
+
+    const boxWidth = 100;
+    const boxHeight = 50;
+
+    const canvasWidth = this.canvas.getWidth();
+    const canvasHeight = this.canvas.getHeight();
+
+    const rect = new fabric.Rect({
+      left: (canvasWidth - boxWidth) / 2,
+      top: (canvasHeight - boxHeight) / 2,
+      width: boxWidth,
+      height: boxHeight,
+      fill: this.BOX_COLOR, // Verwendung der Konstante
+      selectable: true,
+      hasControls: true,
+      hasBorders: true,
+      objectCaching: false,
+    });
+
+    rect.on('modified', () => {
+      this.updateBoxCoordinates();
+    });
+    rect.on('moved', () => {
+      this.updateBoxCoordinates();
+    });
+    rect.on('scaled', () => {
+      this.updateBoxCoordinates();
+    });
+    rect.on('rotated', () => {
+      this.updateBoxCoordinates();
+    });
+    rect.on('removed', () => {
+      this.updateBoxCoordinates();
+    });
+
+    this.canvas.add(rect);
+    this.canvas.setActiveObject(rect);
+    this.canvas.requestRenderAll();
+
+    this.updateBoxCoordinates();
+  }
+
+  save(): void {
+    // Hier implementierst du die Logik zum Speichern der Bilddaten
+    // Zum Beispiel über einen Service oder direkt hier
+    const data = {
+      deckname: this.deckName,
+      bildname: this.imageData.deckImage?.name, // this.imageFile?.name,
+      bildid: this.imageData.deckImage?.id,
+      boxes: this.boxes,
+    };
+    this.deckService.saveImageData(data).subscribe({
+      next: () => {
+        this.imageSaved.emit();
+        this.closeModal();
+      },
+      error: (err) => {
+        console.error('Fehler beim Speichern des Bildes:', err);
+        alert('Fehler beim Speichern des Bildes.');
+        this.closeModal();
+      }
+    });
+  }
+}

src/app/move-image-modal/move-image-modal.component.html

@@ -0,0 +1,24 @@
+<!-- src/app/move-image-modal.component.html -->
+<div class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
+    <div class="bg-white rounded-lg shadow-lg w-96 p-6">
+      <h2 class="text-xl font-semibold mb-4">Bild verschieben</h2>
+      <p class="mb-4">Wähle das Zieldeck für das Bild <strong>{{ image.name }}</strong> aus.</p>
+      <select [(ngModel)]="selectedDeckId" class="w-full p-2 border border-gray-300 rounded mb-4">
+        <option *ngFor="let deck of decks" [value]="deck.name" [disabled]="deck.name === sourceDeck.name">
+          {{ deck.name }}
+        </option>
+      </select>
+      <div class="flex justify-end space-x-2">
+        <button (click)="close()" class="bg-gray-500 text-white py-2 px-4 rounded hover:bg-gray-600">
+          Abbrechen
+        </button>
+        <button 
+          (click)="moveImage()" 
+          [disabled]="!selectedDeckId" 
+          class="bg-yellow-500 text-white py-2 px-4 rounded hover:bg-yellow-600">
+          Verschieben
+        </button>
+      </div>
+    </div>
+  </div>
+  

src/app/move-image-modal/move-image-modal.component.ts

@@ -0,0 +1,45 @@
+// src/app/move-image-modal.component.ts
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { FormsModule } from '@angular/forms';
+import { DeckImage, Deck, DeckService } from '../deck.service';
+
+@Component({
+  selector: 'app-move-image-modal',
+  templateUrl: './move-image-modal.component.html',
+  standalone: true,
+  imports: [CommonModule, FormsModule]
+})
+export class MoveImageModalComponent {
+  @Input() image!: DeckImage;
+  @Input() sourceDeck!: Deck;
+  @Input() decks: Deck[] = [];
+  @Output() moveCompleted = new EventEmitter<void>();
+  @Output() closed = new EventEmitter<void>();
+
+  selectedDeckId: number | null = null;
+
+  constructor(private deckService: DeckService) { }
+
+  moveImage(): void {
+    if (this.selectedDeckId === null) {
+      return;
+    }
+
+    this.deckService.moveImage(this.image.id, this.selectedDeckId).subscribe({
+      next: () => {
+        this.moveCompleted.emit();
+        this.close();
+      },
+      error: (err) => {
+        console.error('Fehler beim Verschieben des Bildes:', err);
+        alert('Fehler beim Verschieben des Bildes.');
+      }
+    });
+  }
+
+  close(): void {
+    this.closed.emit();
+  }
+}

src/app/training/training.component.html

@@ -14,22 +14,31 @@
         Anzeigen
       </button>
     
-      <!-- Gewusst Button -->
+      <!-- Nochmal Button -->
       <button
-        (click)="markKnown()"
+        (click)="markAgain()"
+        class="bg-orange-500 disabled:bg-orange-200 text-white py-2 px-4 rounded hover:bg-orange-600"
+        [disabled]="!isShowingBox || currentBoxIndex >= boxesToReview.length"
+      >
+        Nochmal ({{ getNextInterval(currentBox, 'again') }})
+      </button>
+    
+      <!-- Gut Button -->
+      <button
+        (click)="markGood()"
         class="bg-blue-500 disabled:bg-blue-200 text-white py-2 px-4 rounded hover:bg-blue-600"
         [disabled]="!isShowingBox || currentBoxIndex >= boxesToReview.length"
       >
-        Gewusst
+        Gut ({{ getNextInterval(currentBox, 'good') }})
       </button>
     
-      <!-- Nicht gewusst Button -->
+      <!-- Einfach Button -->
       <button
-        (click)="markUnknown()"
-        class="bg-red-500 disabled:bg-red-200 text-white py-2 px-4 rounded hover:bg-red-600"
+        (click)="markEasy()"
+        class="bg-green-500 disabled:bg-green-200 text-white py-2 px-4 rounded hover:bg-green-600"
         [disabled]="!isShowingBox || currentBoxIndex >= boxesToReview.length"
       >
-        Nicht gewusst
+        Einfach ({{ getNextInterval(currentBox, 'easy') }})
       </button>
 
       <!-- Nächstes Bild Button -->
@@ -43,7 +52,6 @@
     </div>
 
     <p class="mt-2">{{ progress }}</p>
-    <p class="mt-2">Gewusst: {{ knownCount }} | Nicht gewusst: {{ unknownCount }}</p>
 
     <button
       (click)="closeTraining()"

src/app/training/training.component.ts

@@ -1,10 +1,22 @@
-// src/app/training.component.ts
+// training.component.ts
 import { Component, Input, Output, EventEmitter, OnInit, ViewChild, ElementRef } from '@angular/core';
 import { Deck, DeckImage, DeckService, Box } from '../deck.service';
 import { CommonModule } from '@angular/common';
-import { switchMap } from 'rxjs/operators';
-import { forkJoin } from 'rxjs';
+import { lastValueFrom } from 'rxjs';
 
+const LEARNING_STEPS = {
+  AGAIN: 1,      // 1 minute
+  GOOD: 10,      // 10 minutes
+  GRADUATION: 1440 // 1 day (in minutes)
+};
+
+const FACTOR_CHANGES = {
+  AGAIN: 0.85,   // Reduce factor by 15%
+  EASY: 1.15,    // Increase factor by 15%
+  MIN: 1.3,      // Minimum factor allowed
+  MAX: 2.9       // Maximum factor allowed
+};
+const EASY_INTERVAL = 4 * 1440; // 4 days in minutes
 @Component({
   selector: 'app-training',
   templateUrl: './training.component.html',
@@ -19,23 +31,21 @@ export class TrainingComponent implements OnInit {
 
   currentImageIndex: number = 0;
   currentImageData: DeckImage | null = null;
-  // Ändere currentBoxIndex zu boxesToReview als Array
   currentBoxIndex: number = 0;
   boxesToReview: Box[] = [];
   boxRevealed: boolean[] = [];
 
-  knownCount: number = 0;
-  unknownCount: number = 0;
-
   isShowingBox: boolean = false;
   isTrainingFinished: boolean = false;
 
   constructor(private deckService: DeckService) { }
 
   ngOnInit(): void {
+    // Initialisierung wurde in ngAfterViewInit durchgeführt
   }
 
   ngAfterViewInit(){
+    // Initialisiere das erste Bild und die dazugehörigen Boxen
     if (this.deck && this.deck.images.length > 0) {
       this.loadImage(this.currentImageIndex);
     } else {
@@ -44,6 +54,10 @@ export class TrainingComponent implements OnInit {
     }
   }
 
+  /**
+   * Lädt das Bild basierend auf dem gegebenen Index und initialisiert die zu überprüfenden Boxen.
+   * @param imageIndex Index des zu ladenden Bildes im Deck
+   */
   loadImage(imageIndex: number): void {
     if (imageIndex >= this.deck.images.length) {
       this.endTraining();
@@ -51,45 +65,92 @@ export class TrainingComponent implements OnInit {
     }
 
     this.currentImageData = this.deck.images[imageIndex];
-    // Initialisiere boxesToReview mit allen Boxen, gemischt
-    this.boxesToReview = this.shuffleArray([...this.currentImageData.boxes]);
+    // Initialisiere die Boxen für die aktuelle Runde
+    this.initializeBoxesToReview();
+  }
+
+  /**
+   * Ermittelt alle fälligen Boxen für die aktuelle Runde, mischt sie und setzt den aktuellen Box-Index zurück.
+   * Wenn keine Boxen mehr zu überprüfen sind, wird zum nächsten Bild gewechselt.
+   */
+  initializeBoxesToReview(): void {
+    if (!this.currentImageData) {
+      this.nextImage();
+      return;
+    }
+
+    // Filtere alle Boxen, die fällig sind (due <= heute)
+    const today = this.getTodayInDays();
+    this.boxesToReview = this.currentImageData.boxes.filter(box => box.due === undefined || box.due <= today);
+
+    if (this.boxesToReview.length === 0) {
+      // Keine Boxen mehr für dieses Bild, wechsle zum nächsten Bild
+      this.nextImage();
+      return;
+    }
+
+    // Mische die Boxen zufällig
+    this.boxesToReview = this.shuffleArray(this.boxesToReview);
+
+    // Initialisiere den Array zur Verfolgung der enthüllten Boxen
     this.boxRevealed = new Array(this.boxesToReview.length).fill(false);
+
+    // Setze den aktuellen Box-Index zurück
+    this.currentBoxIndex = 0;
     this.isShowingBox = false;
+
+    // Zeichne das Canvas neu
     this.drawCanvas();
   }
 
+  /**
+   * Gibt das heutige Datum in Tagen seit der UNIX-Epoche zurück.
+   */
+  getTodayInDays(): number {
+    const epoch = new Date(1970, 0, 1); // Anki verwendet UNIX-Epoche
+    const today = new Date();
+    return Math.floor((today.getTime() - epoch.getTime()) / (1000 * 60 * 60 * 24));
+  }
+
+  /**
+   * Zeichnet das aktuelle Bild und die Boxen auf das Canvas.
+   * Boxen werden rot dargestellt, wenn sie verdeckt sind, und grün, wenn sie enthüllt sind.
+   */
   drawCanvas(): void {
     const canvas = this.canvasRef.nativeElement;
     const ctx = canvas.getContext('2d');
     if (!ctx || !this.currentImageData) return;
 
     const img = new Image();
-    img.src = `/api/debug_image/${this.currentImageData.id}`;
+    img.src = `/api/debug_image/${this.currentImageData.id}/original_compressed.jpg`;
     img.onload = () => {
-      // Set canvas size to image size
+      // Setze die Größe des Canvas auf die Größe des Bildes
       canvas.width = img.width;
       canvas.height = img.height;
 
-      // Draw image
+      // Zeichne das Bild
       ctx.clearRect(0, 0, canvas.width, canvas.height);
       ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
 
-      // Draw boxes
+      // Zeichne die Boxen
       this.boxesToReview.forEach((box, index) => {
-        if (this.boxRevealed[index]) {
-          // Box ist bereits enthüllt, nichts zeichnen
-          return;
-        }
-
         ctx.beginPath();
         ctx.rect(box.x1, box.y1, box.x2 - box.x1, box.y2 - box.y1);
-        ctx.fillStyle = index === this.currentBoxIndex ? 'rgba(0, 255, 0, 0.99)' : 'rgba(255, 0, 0, 0.99)';
+        if (this.currentBoxIndex === index && this.isShowingBox || (box.due && box.due-this.getTodayInDays()>0)) {
+          // Box ist aktuell enthüllt, keine Überlagerung
+          return;
+        } else if (this.currentBoxIndex === index && !this.isShowingBox) {
+          // Box ist enthüllt
+          ctx.fillStyle = 'rgba(0, 255, 0, 1)'; // Undurchsichtige grüne Überlagerung
+        } else {
+          // Box ist verdeckt
+          ctx.fillStyle = 'rgba(255, 0, 0, 1)'; // Undurchsichtige rote Überlagerung
+        }
         ctx.fill();
         ctx.lineWidth = 2;
         ctx.strokeStyle = 'black';
         ctx.stroke();
       });
-
     };
 
     img.onerror = () => {
@@ -99,18 +160,21 @@ export class TrainingComponent implements OnInit {
     };
   }
 
-  // Utility-Funktion zum Mischen eines Arrays
+  /**
+   * Mischt ein Array zufällig.
+   * @param array Das zu mischende Array
+   * @returns Das gemischte Array
+   */
   shuffleArray<T>(array: T[]): T[] {
     let currentIndex = array.length, randomIndex;
 
-    // While there remain elements to shuffle.
+    // Solange noch Elemente zum Mischen vorhanden sind
     while (currentIndex !== 0) {
-
-      // Pick a remaining element.
+      // Wähle ein verbleibendes Element
       randomIndex = Math.floor(Math.random() * currentIndex);
       currentIndex--;
 
-      // And swap it with the current element.
+      // Tausche es mit dem aktuellen Element
       [array[currentIndex], array[randomIndex]] = [
         array[randomIndex], array[currentIndex]];
     }
@@ -118,6 +182,9 @@ export class TrainingComponent implements OnInit {
     return array;
   }
 
+  /**
+   * Gibt die aktuelle Box zurück, die überprüft wird.
+   */
   get currentBox(): Box | null {
     if (this.currentBoxIndex < this.boxesToReview.length) {
       return this.boxesToReview[this.currentBoxIndex];
@@ -125,6 +192,9 @@ export class TrainingComponent implements OnInit {
     return null;
   }
 
+  /**
+   * Zeigt den Inhalt der aktuellen Box an.
+   */
   showText(): void {
     if (this.currentBoxIndex >= this.boxesToReview.length) return;
     this.boxRevealed[this.currentBoxIndex] = true;
@@ -132,44 +202,190 @@ export class TrainingComponent implements OnInit {
     this.drawCanvas();
   }
 
-  markKnown(): void {
-    this.knownCount++;
-    // Entferne die aktuelle Box aus boxesToReview, da sie bekannt ist
-    this.boxesToReview.splice(this.currentBoxIndex, 1);
-    this.boxRevealed.splice(this.currentBoxIndex, 1);
+  /**
+   * Markiert die aktuelle Box als "Nochmal" und fährt mit der nächsten Box fort.
+   */
+  async markAgain(): Promise<void> {
+    await this.updateCard('again');
+    this.coverCurrentBox();
     this.nextBox();
   }
 
-  markUnknown(): void {
-    this.unknownCount++;
-    // Behalte die aktuelle Box in der Liste und verschiebe sie an eine zufällige Position am Ende
-    const box = this.boxesToReview.splice(this.currentBoxIndex, 1)[0];
-    this.boxesToReview.push(box);
-    this.boxRevealed.splice(this.currentBoxIndex, 1);
+  /**
+   * Markiert die aktuelle Box als "Gut" und fährt mit der nächsten Box fort.
+   */
+  async markGood(): Promise<void> {
+    await this.updateCard('good');
+    this.coverCurrentBox();
     this.nextBox();
   }
 
-  nextBox(): void {
-    this.isShowingBox = false;
-
-    if (this.boxesToReview.length === 0) {
-      // Alle Boxen für dieses Bild sind bearbeitet
-      this.nextImage();
-      return;
+  /**
+   * Markiert die aktuelle Box als "Einfach" und fährt mit der nächsten Box fort.
+   */
+  async markEasy(): Promise<void> {
+    await this.updateCard('easy');
+    this.coverCurrentBox();
+    this.nextBox();
   }
 
-    if (this.currentBoxIndex >= this.boxesToReview.length) {
-      this.currentBoxIndex = 0;
+  /**
+   * Aktualisiert die SRS-Daten der aktuellen Box basierend auf der gegebenen Aktion.
+   * @param action Die durchgeführte Aktion ('again', 'good', 'easy')
+   */
+  async updateCard(action: 'again' | 'good' | 'easy'): Promise<void> {
+    if (this.currentBoxIndex >= this.boxesToReview.length) return;
+
+    const box = this.boxesToReview[this.currentBoxIndex];
+    const today = this.getTodayInDays();
+
+    // Berechne das neue Intervall und eventuell den neuen Faktor
+    const { newIvl, newFactor, newReps, newLapses, newIsGraduated } = this.calculateNewInterval(box, action);
+
+    // Aktualisiere das Fälligkeitsdatum
+    const nextDue = today + Math.floor(newIvl/1440);
+
+    // Aktualisiere das Box-Objekt
+    box.ivl = newIvl;
+    box.factor = newFactor;
+    box.reps = newReps;
+    box.lapses = newLapses;
+    box.due = nextDue;
+    box.isGraduated = newIsGraduated
+
+    // Sende das Update an das Backend
+    try {
+      await lastValueFrom(this.deckService.updateBox(box));
+    } catch (error) {
+      console.error('Fehler beim Aktualisieren der Box:', error);
+      alert('Fehler beim Aktualisieren der Box.');
+    }
   }
 
+  /**
+   * Berechnet das neue Intervall, den Faktor, die Wiederholungen und die Lapses basierend auf der Aktion.
+   * @param box Die aktuelle Box
+   * @param action Die Aktion ('again', 'good', 'easy')
+   * @returns Ein Objekt mit den neuen Werten für ivl, factor, reps und lapses
+   */
+  calculateNewInterval(box: Box, action: 'again' | 'good' | 'easy'): { newIvl: number, newFactor: number, newReps: number, newLapses: number, newIsGraduated: boolean } {
+    let newIvl = box.ivl || 0;
+    let newFactor = box.factor || 2.5;
+    let newReps = box.reps || 0;
+    let newLapses = box.lapses || 0;
+    let newIsGraduated = box.isGraduated || false
+
+      if (action === 'again') {
+        newLapses++;
+        newReps = 0;
+        newIvl = LEARNING_STEPS.AGAIN;
+        newIsGraduated = false;
+        
+        // Reduce factor but not below minimum
+        newFactor = Math.max(
+            FACTOR_CHANGES.MIN,
+            newFactor * FACTOR_CHANGES.AGAIN
+        );
+        
+        return { newIvl, newFactor, newReps, newLapses, newIsGraduated };
+    }
+
+    if (action === 'easy') {
+        newReps++;
+        newIsGraduated = true;
+        newIvl = EASY_INTERVAL;
+        
+        // Increase factor but not above maximum
+        newFactor = Math.min(
+            FACTOR_CHANGES.MAX,
+            newFactor * FACTOR_CHANGES.EASY
+        );
+        
+        return { newIvl, newFactor, newReps, newLapses, newIsGraduated };;
+    }
+
+    // Handle 'good' action
+    newReps++;
+
+    if (!newIsGraduated) {
+        // Card is in learning phase
+        if (newReps === 1) {
+          newIvl = LEARNING_STEPS.GOOD;
+        } else {
+            // Graduate the card
+            newIsGraduated = true;
+            newIvl = LEARNING_STEPS.GRADUATION;
+        }
+    } else {
+        // Card is in review phase, apply space repetition
+        newIvl = Math.round(newIvl * newFactor);
+    }
+
+    return { newIvl, newFactor, newReps, newLapses, newIsGraduated };;
+  }
+
+  /**
+   * Berechnet das nächste Intervall basierend auf der Aktion und gibt es als String zurück.
+   * @param box Die aktuelle Box
+   * @param action Die Aktion ('again', 'good', 'easy')
+   * @returns Das nächste Intervall als String (z.B. "10 min", "2 d")
+   */
+  getNextInterval(box: Box | null, action: 'again' | 'good' | 'easy'): string {
+    if (!box)
+      return '';
+
+    const { newIvl } = this.calculateNewInterval(box, action);
+
+    return this.formatInterval(newIvl);
+  }
+
+  /**
+   * Formatiert das Intervall als String, entweder in Minuten oder Tagen.
+   * @param ivl Das Intervall in Tagen
+   * @returns Das formatierte Intervall als String
+   */
+  formatInterval(minutes: number): string {
+    if (minutes < 60) return `${minutes}min`;
+    if (minutes < 1440) return `${Math.round(minutes/60)}h`;
+    return `${Math.round(minutes/1440)}d`;
+  }
+
+  /**
+   * Deckt die aktuelle Box wieder auf (verdeckt sie erneut).
+   */
+  coverCurrentBox(): void {
+    this.boxRevealed[this.currentBoxIndex] = false;
     this.drawCanvas();
   }
 
+  /**
+   * Geht zur nächsten Box. Wenn alle Boxen in der aktuellen Runde bearbeitet wurden,
+   * wird eine neue Runde gestartet.
+   */
+  nextBox(): void {
+    this.isShowingBox = false;
+
+    if (this.currentBoxIndex >= this.boxesToReview.length - 1) {
+      // Runde abgeschlossen, starte eine neue Runde
+      this.initializeBoxesToReview();
+    } else {
+      // Gehe zur nächsten Box
+      this.currentBoxIndex++;
+      this.drawCanvas();
+    }
+  }
+
+  /**
+   * Wechselt zum nächsten Bild im Deck.
+   */
   nextImage(): void {
     this.currentImageIndex++;
     this.loadImage(this.currentImageIndex);
   }
 
+  /**
+   * Überspringt zum nächsten Bild im Deck.
+   */
   skipToNextImage(): void {
     if (this.currentImageIndex < this.deck.images.length - 1) {
       this.currentImageIndex++;
@@ -179,20 +395,28 @@ export class TrainingComponent implements OnInit {
     }
   }
 
+  /**
+   * Beendet das Training und gibt eine Abschlussmeldung aus.
+   */
   endTraining(): void {
     this.isTrainingFinished = true;
-    alert(`Training beendet!\nGewusst: ${this.knownCount}\nNicht gewusst: ${this.unknownCount}`);
+    alert(`Training beendet!`);
     this.close.emit();
   }
 
+  /**
+   * Fragt den Benutzer, ob das Training beendet werden soll, und schließt es gegebenenfalls.
+   */
   closeTraining(): void {
     if (confirm('Möchtest du das Training wirklich beenden?')) {
       this.close.emit();
     }
   }
 
+  /**
+   * Gibt den Fortschritt des Trainings an, z.B. "Bild 2 von 5".
+   */
   get progress(): string {
     return `Bild ${this.currentImageIndex + 1} von ${this.deck.images.length}`;
   }
 }
-

src/app/upload-image-modal/upload-image-modal.component.html

@@ -11,24 +11,14 @@
       <div class="p-6 relative">
         <h3 class="mb-4 text-xl font-medium text-gray-900">Bild zu Deck hinzufügen</h3>
         
-        <!-- Formular sichtbar, solange formVisible true ist -->
-        <div *ngIf="formVisible">
+        <!-- Formular zum Hochladen -->
         <div class="mb-4">
           <label for="imageFile" class="block text-sm font-medium text-gray-700">Bild hochladen</label>
-            <input type="file" id="imageFile" (change)="onFileChange($event)" accept="image/*" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" />
-          </div>
-        </div>
-
-        <!-- Canvas und Save Button sichtbar, sobald canvasVisible true ist -->
-        <div *ngIf="canvasVisible" class="mt-4">
-          <canvas #canvas class="border border-gray-300 rounded w-full h-auto"></canvas>
-          <button (click)="save()" class="mt-4 bg-green-500 text-white py-2 px-4 rounded hover:bg-green-600">
-            Save
-          </button>
+          <input #imageFile type="file" id="imageFile" (change)="onFileChange($event)" accept="image/*" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" />
         </div>
 
         <!-- Statusanzeige -->
-        <div *ngIf="processingStatus && !canvasVisible" class="mt-4">
+        <div *ngIf="processingStatus" class="mt-4">
           <p class="text-sm text-gray-700">{{ processingStatus }}</p>
         </div>
 
@@ -42,4 +32,3 @@
     </div>
   </div>
 </div>
-

src/app/upload-image-modal/upload-image-modal.component.ts

@@ -1,9 +1,8 @@
 // src/app/upload-image-modal.component.ts
 import { Component, Input, Output, EventEmitter, AfterViewInit, ViewChild, ElementRef, OnDestroy } from '@angular/core';
-import { DeckService } from '../deck.service';
+import { Box, DeckImage, DeckService, OcrResult } from '../deck.service';
 import { CommonModule } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
-import { fabric } from 'fabric';
 import { Modal } from 'flowbite';
 
 @Component({
@@ -14,57 +13,24 @@ import { Modal } from 'flowbite';
 })
 export class UploadImageModalComponent implements AfterViewInit, OnDestroy {
   @Input() deckName: string = '';
-  @Output() imageUploaded = new EventEmitter<void>();
+  @Output() imageUploaded = new EventEmitter<{ imageSrc: string | ArrayBuffer | null | undefined, deckImage:DeckImage }>();
 
   @ViewChild('uploadImageModal') modalElement!: ElementRef;
-  @ViewChild('canvas') canvasElement!: ElementRef<HTMLCanvasElement>;
+  @ViewChild('imageFile') imageFileElement!: ElementRef;
 
   imageFile: File | null = null;
   processingStatus: string = '';
   loading: boolean = false;
+  modal: any;
 
-  // Fabric.js Related Variables
-  originalImageSrc: string | ArrayBuffer | undefined | null = null;
-  detectedText: string = '';
-  boxes: { x1: number; x2: number; y1: number; y2: number }[] = [];
-  canvas!: fabric.Canvas;
-
-  // Maximal erlaubte Größe
-  maxCanvasWidth: number = 0;
-  maxCanvasHeight: number = 0;
-
-  // Referenz zum Keydown-Eventhandler
-  private keyDownHandler!: (e: KeyboardEvent) => void;
-
-  // State Management
-  formVisible: boolean = true;
-  canvasVisible: boolean = false;
-  modal:any;
-  originalImageWidth:number|undefined;
-  originalImageHeight:number|undefined;
-  imagename:string|undefined|null;
   constructor(private deckService: DeckService, private http: HttpClient) { }
 
   ngAfterViewInit(): void {
-    // Initialisiere die Flowbite Modal
     this.modal = new Modal(this.modalElement.nativeElement);
-
-    // Berechne die maximal erlaubten Abmessungen basierend auf dem Viewport
-    this.maxCanvasWidth = window.innerWidth * 0.6; // Passe nach Bedarf an
-    this.maxCanvasHeight = window.innerHeight * 0.6; // Passe nach Bedarf an
-
-    // Keydown-Eventlistener hinzufügen
-    this.keyDownHandler = this.onKeyDown.bind(this);
-    document.addEventListener('keydown', this.keyDownHandler);
   }
 
   ngOnDestroy(): void {
-    // Keydown-Eventlistener entfernen
-    document.removeEventListener('keydown', this.keyDownHandler);
-    // Fabric.js Canvas zerstören
-    if (this.canvas) {
-      this.canvas.dispose();
-    }
+    // Modal wird automatisch von Flowbite verwaltet
   }
 
   open(): void {
@@ -79,53 +45,24 @@ export class UploadImageModalComponent implements AfterViewInit, OnDestroy {
   resetState(): void {
     this.imageFile = null;
     this.processingStatus = '';
-    this.detectedText = '';
-    this.boxes = [];
-    this.originalImageSrc = null;
-    this.canvasVisible = false;
-    this.formVisible = true;
-
-    // Clear Fabric canvas if it exists
-    if (this.canvas) {
-      this.canvas.clear();
-      this.canvas.dispose();
-      this.canvas = undefined as any;
-    }
+    this.loading = false;
   }
 
-  onKeyDown(e: KeyboardEvent): void {
-    if (e.key === 'Delete' || e.key === 'Del') {
-      const activeObject = this.canvas.getActiveObject();
-      if (activeObject) {
-        this.canvas.remove(activeObject);
-        this.canvas.requestRenderAll();
-        this.updateBoxCoordinates();
-      }
-    }
-  }
-
-  async onFileChange(event: any): Promise<void> {
+  onFileChange(event: any): void {
     const file: File = event.target.files[0];
     if (!file) return;
     this.imageFile = file;
     this.processingStatus = 'Verarbeitung läuft...';
-    this.detectedText = '';
     this.loading = true;
 
-    // Bild als Base64 laden
     const reader = new FileReader();
     reader.onload = async (e) => {
-      this.originalImageSrc = e.target?.result;
+      const imageSrc = e.target?.result;
 
       // Bild als Base64-String ohne Präfix (data:image/...)
-      const imageBase64 = (this.originalImageSrc as string).split(',')[1];
+      const imageBase64 = (imageSrc as string).split(',')[1];
 
       try {
-        // Eingabefelder ausblenden und Canvas anzeigen
-        this.formVisible = false;
-        this.canvasVisible = true;        
-
-        // Anfrage an den Backend-Service senden
         const response = await this.http.post<any>('/api/ocr', { image: imageBase64 }).toPromise();
 
         if (!response || !response.results) {
@@ -134,204 +71,43 @@ export class UploadImageModalComponent implements AfterViewInit, OnDestroy {
           return;
         }
 
-        // Bildverarbeitung im Frontend durchführen
-        this.imagename = (response.results && response.results.length>0)?response.results[0].name:null;
-        await this.processImage(response.results);
-      } catch (error) {
-        console.error('Fehler beim OCR-Service:', error);
-        this.processingStatus = 'Fehler beim OCR-Service';
+        this.processingStatus = 'Verarbeitung abgeschlossen';
         this.loading = false;
-        // Eingabefelder ausblenden und Canvas anzeigen
-        this.formVisible = true;
-        this.canvasVisible = false;                
-      }
-    };
-    reader.readAsDataURL(file);
-  }
 
-  private loadFabricImage(url: string): Promise<fabric.Image> {
-    return new Promise((resolve, reject) => {
-      fabric.Image.fromURL(
-        url,
-        (img) => {
-          resolve(img);
-        },
-        {
-          crossOrigin: 'anonymous',
-          originX: 'left',
-          originY: 'top',
-        }
-      );
-    });
-  }
-
-  async processImage(ocrResults: any[]): Promise<void> {
-    // Canvas zurücksetzen
-    if (this.canvas) {
-      this.canvas.clear();
-      this.canvas.dispose();
-    }
-
-    this.canvas = new fabric.Canvas(this.canvasElement.nativeElement);
-
-    this.boxes = [];
-
-    // Hintergrundbild setzen
-    try {
-      const backgroundImage = await this.loadFabricImage(this.originalImageSrc as string);
-
-      // Speichere die Originalbildgröße
-      this.originalImageWidth = backgroundImage.width!;
-      this.originalImageHeight = backgroundImage.height!;
-
-      // Berechne Skalierungsfaktor basierend auf maximal erlaubter Größe
-      const scaleX = this.maxCanvasWidth / backgroundImage.width!;
-      const scaleY = this.maxCanvasHeight / backgroundImage.height!;
-      const scaleFactor = Math.min(scaleX, scaleY, 1); // Vermeide Vergrößerung
-
-      // Neue Größe des Canvas
-      const canvasWidth = backgroundImage.width! * scaleFactor;
-      const canvasHeight = backgroundImage.height! * scaleFactor;
-
-      // Canvas-Größe anpassen
-      this.canvas.setWidth(canvasWidth);
-      this.canvas.setHeight(canvasHeight);
-
-      // Hintergrundbild skalieren
-      backgroundImage.set({
-        scaleX: scaleFactor,
-        scaleY: scaleFactor,
-      });
-
-      // Hintergrundbild setzen
-      this.canvas.setBackgroundImage(backgroundImage, this.canvas.renderAll.bind(this.canvas));
-
-      // Boxen hinzufügen
-      ocrResults.forEach(result => {
+        // Emit Event mit Bilddaten und OCR-Ergebnissen
+        const bildname=this.imageFile?.name??'';
+        const bildid=response.results.length>0?response.results[0].name:null
+        const boxes:Box[] = [];
+        response.results.forEach((result: OcrResult) => {
           const box = result.box;
   
-        // Grenzen berechnen
           const xs = box.map((point: number[]) => point[0]);
           const ys = box.map((point: number[]) => point[1]);
           const xMin = Math.min(...xs);
           const xMax = Math.max(...xs);
           const yMin = Math.min(...ys);
           const yMax = Math.max(...ys);
-
-        // Skalierung anwenden
-        const left = xMin * scaleFactor;
-        const top = yMin * scaleFactor;
-        const width = (xMax - xMin) * scaleFactor;
-        const height = (yMax - yMin) * scaleFactor;
-
-        // Rechteck erstellen
-        const rect = new fabric.Rect({
-          left: left,
-          top: top,
-          width: width,
-          height: height,
-          fill: 'rgba(0, 0, 0, 0.3)',
-          selectable: true,
-          hasControls: true,
-          hasBorders: true,
-          objectCaching: false,
+          boxes.push({x1:xMin,x2:xMax,y1:yMin,y2:yMax})
         });
-
-        // Event-Listener hinzufügen
-        rect.on('modified', () => {
-          this.updateBoxCoordinates();
-        });
-        rect.on('moved', () => {
-          this.updateBoxCoordinates();
-        });
-        rect.on('scaled', () => {
-          this.updateBoxCoordinates();
-        });
-        rect.on('rotated', () => {
-          this.updateBoxCoordinates();
-        });
-        rect.on('removed', () => {
-          this.updateBoxCoordinates();
-        });
-
-        this.canvas.add(rect);
-      });
-
-      // Initiale Box-Koordinaten aktualisieren
-      this.updateBoxCoordinates();
-
-      // Erkannten Text anzeigen
-      this.detectedText = ocrResults.map(result => result.text).join('\n');
-
-      this.processingStatus = 'Verarbeitung abgeschlossen';
-      this.loading = false;
-
+        const deckImage:DeckImage={name:bildname,id:bildid,boxes}
+        this.imageUploaded.emit({ imageSrc, deckImage });
+        this.resetFileInput();
+        // Schließe das Upload-Modal
+        this.closeModal();
       } catch (error) {
-      console.error('Fehler beim Setzen des Hintergrundbildes:', error);
-      this.processingStatus = 'Fehler bei der Bildverarbeitung';
+        console.error('Fehler beim OCR-Service:', error);
+        this.processingStatus = 'Fehler beim OCR-Service';
         this.loading = false;
       }
-  }
-
-  updateBoxCoordinates(): void {
-    // Leere die aktuelle Box-Liste
-    this.boxes = [];
-
-    // Skalierungsfaktor ermitteln (sollte der gleiche sein wie zuvor)
-    let scaleFactor = 1;
-    const bgImage = this.canvas.backgroundImage;
-    if (bgImage && bgImage instanceof fabric.Image) {
-      scaleFactor = bgImage.get('scaleX') || 1;
-    }
-
-    // Alle Rechtecke durchgehen
-    this.canvas.getObjects('rect').forEach((rect: fabric.Rect) => {
-      // Aktuelle Position und Größe des Rechtecks
-      const left = rect.left!;
-      const top = rect.top!;
-      const width = rect.width! * rect.scaleX!;
-      const height = rect.height! * rect.scaleY!;
-
-      // Umrechnung auf Originalbildgröße
-      const x1 = left / scaleFactor;
-      const y1 = top / scaleFactor;
-      const x2 = (left + width) / scaleFactor;
-      const y2 = (top + height) / scaleFactor;
-
-      // Werte runden
-      this.boxes.push({
-        x1: Math.round(x1),
-        x2: Math.round(x2),
-        y1: Math.round(y1),
-        y2: Math.round(y2)
-      });
-    });
-
-    // Trigger Angular Change Detection
-    this.canvas.requestRenderAll();
-  }
-
-  save(): void {
-    // Hier kannst du die Logik zum Speichern der Bilddaten implementieren
-    // Zum Beispiel:
-    const data = {
-      deckname: this.deckName,
-      bildname: this.imageFile?.name,
-      bildid: this.imagename,
-      boxes: this.boxes,
     };
-    this.deckService.saveImageData(data).subscribe({
-      next: () => {
-        this.imageUploaded.emit();
-        this.closeModal();
-      },
-      error: (err) => {
-        console.error('Fehler beim Speichern des Bildes:', err);
-        alert('Fehler beim Speichern des Bildes.');
+    reader.readAsDataURL(file);
+  }
+  /**
+   * Setzt das Datei-Input-Feld zurück, sodass dieselbe Datei erneut ausgewählt werden kann.
+   */
+  resetFileInput(): void {
+    if (this.imageFileElement && this.imageFileElement.nativeElement) {
+      this.imageFileElement.nativeElement.value = '';
     }
-    });
-    // Temporäres Beispiel:
-    this.imageUploaded.emit();
-    this.closeModal();
   }
 }