spaced repetition

src/app/deck-list.component.html

@@ -12,45 +12,56 @@
     <div *ngFor="let deck of decks" class="bg-white shadow rounded-lg p-6 flex flex-col">
       <div class="flex justify-between items-center mb-4">
         <h2 class="text-xl font-semibold">{{ deck.name }}</h2>
-        <button (click)="deleteDeck(deck.name)" class="text-red-500 hover:text-red-700">
+        
+        <!-- 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" />
           </svg>
         </button>
       </div>
 
-      <!-- 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>
-            <span class="text-gray-600">&nbsp;({{ 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">
-              <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>
-            </button>
-            <!-- Delete Icon -->
-            <button (click)="deleteImage(deck, image)" class="text-red-500 hover:text-red-700" title="Bild löschen">
-              <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="M6 18L18 6M6 6l12 12" />
-              </svg>
-            </button>
-          </div>
-        </li>
-      </ul>
+      <!-- Bildliste und Action-Buttons nur anzeigen, wenn kein Training aktiv ist -->
+      <ng-container *ngIf="!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>
+              <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">
+                <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>
+              </button>
+              <!-- Delete Icon -->
+              <button (click)="deleteImage(deck, image)" class="text-red-500 hover:text-red-700" title="Bild löschen">
+                <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="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+          </li>
+        </ul>
 
-      <div class="flex space-x-2">
-        <button (click)="openTraining(deck)" class="flex-1 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">
-          Training starten
-        </button>
-        <button (click)="openUploadImageModal(deck.name)" class="flex-1 bg-green-500 text-white py-2 px-4 rounded hover:bg-green-600">
-          Bild hinzufügen
-        </button>
-      </div>
+        <!-- Action-Buttons -->
+        <div class="flex space-x-2">
+          <button (click)="openTraining(deck)" class="flex-1 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">
+            Training starten
+          </button>
+          <button (click)="openUploadImageModal(deck.name)" class="flex-1 bg-green-500 text-white py-2 px-4 rounded hover:bg-green-600">
+            Bild hinzufügen
+          </button>
+        </div>
+      </ng-container>
     </div>
   </div>
 

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)
     });

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<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: [] };
-        }
+  // 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;
+  //       // 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<any> {
     return this.http.post(this.apiUrl, { deckname });
   }

src/app/training/training.component.html

@@ -9,7 +9,7 @@
       <button
         (click)="showText()"
         class="bg-green-500 disabled:bg-green-200 text-white py-2 px-4 rounded hover:bg-green-600"
-        [disabled]="isShowingBox || currentBoxIndex >= boxes.length"
+        [disabled]="isShowingBox || currentBoxIndex >= boxesToReview.length"
       >
         Anzeigen
       </button>
@@ -18,7 +18,7 @@
       <button
         (click)="markKnown()"
         class="bg-blue-500 disabled:bg-blue-200 text-white py-2 px-4 rounded hover:bg-blue-600"
-        [disabled]="!isShowingBox || currentBoxIndex >= boxes.length"
+        [disabled]="!isShowingBox || currentBoxIndex >= boxesToReview.length"
       >
         Gewusst
       </button>
@@ -27,10 +27,19 @@
       <button
         (click)="markUnknown()"
         class="bg-red-500 disabled:bg-red-200 text-white py-2 px-4 rounded hover:bg-red-600"
-        [disabled]="!isShowingBox || currentBoxIndex >= boxes.length"
+        [disabled]="!isShowingBox || currentBoxIndex >= boxesToReview.length"
       >
         Nicht gewusst
       </button>
+
+      <!-- Nächstes Bild Button -->
+      <button
+        (click)="skipToNextImage()"
+        class="bg-yellow-500 disabled:bg-yellow-200 text-white py-2 px-4 rounded hover:bg-yellow-600"
+        [disabled]="currentImageIndex >= deck.images.length"
+      >
+        Nächstes Bild
+      </button>
     </div>
 
     <p class="mt-2">{{ progress }}</p>

src/app/training/training.component.ts

@@ -15,12 +15,13 @@ export class TrainingComponent implements OnInit {
   @Input() deck!: Deck;
   @Output() close = new EventEmitter<void>();
 
-  @ViewChild('canvas') canvasRef!: ElementRef<HTMLCanvasElement>;
+  @ViewChild('canvas',{static : false}) canvasRef!: ElementRef<HTMLCanvasElement>;
 
   currentImageIndex: number = 0;
   currentImageData: DeckImage | null = null;
+  // Ändere currentBoxIndex zu boxesToReview als Array
   currentBoxIndex: number = 0;
-  boxes: Box[] = [];
+  boxesToReview: Box[] = [];
   boxRevealed: boolean[] = [];
 
   knownCount: number = 0;
@@ -32,6 +33,9 @@ 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 {
@@ -46,22 +50,12 @@ export class TrainingComponent implements OnInit {
       return;
     }
 
-    const imageName = this.deck.images[imageIndex].name;
-    this.deckService.getImage(imageName).subscribe({
-      next: (imageData: DeckImage) => {
-        this.currentImageData = imageData;
-        this.boxes = imageData.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();
-      }
-    });
+    this.currentImageData = this.deck.images[imageIndex];
+    // Initialisiere boxesToReview mit allen Boxen, gemischt
+    this.boxesToReview = this.shuffleArray([...this.currentImageData.boxes]);
+    this.boxRevealed = new Array(this.boxesToReview.length).fill(false);
+    this.isShowingBox = false;
+    this.drawCanvas();
   }
 
   drawCanvas(): void {
@@ -70,7 +64,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;
@@ -81,7 +75,7 @@ export class TrainingComponent implements OnInit {
       ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
 
       // Draw boxes
-      this.boxes.forEach((box, index) => {
+      this.boxesToReview.forEach((box, index) => {
         if (this.boxRevealed[index]) {
           // Box ist bereits enthüllt, nichts zeichnen
           return;
@@ -95,6 +89,7 @@ export class TrainingComponent implements OnInit {
         ctx.strokeStyle = 'black';
         ctx.stroke();
       });
+
     };
 
     img.onerror = () => {
@@ -104,8 +99,34 @@ export class TrainingComponent implements OnInit {
     };
   }
 
+  // Utility-Funktion zum Mischen eines Arrays
+  shuffleArray<T>(array: T[]): T[] {
+    let currentIndex = array.length, randomIndex;
+
+    // While there remain elements to shuffle.
+    while (currentIndex !== 0) {
+
+      // Pick a remaining element.
+      randomIndex = Math.floor(Math.random() * currentIndex);
+      currentIndex--;
+
+      // And swap it with the current element.
+      [array[currentIndex], array[randomIndex]] = [
+        array[randomIndex], array[currentIndex]];
+    }
+
+    return array;
+  }
+
+  get currentBox(): Box | null {
+    if (this.currentBoxIndex < this.boxesToReview.length) {
+      return this.boxesToReview[this.currentBoxIndex];
+    }
+    return null;
+  }
+
   showText(): void {
-    if (this.currentBoxIndex >= this.boxes.length) return;
+    if (this.currentBoxIndex >= this.boxesToReview.length) return;
     this.boxRevealed[this.currentBoxIndex] = true;
     this.isShowingBox = true;
     this.drawCanvas();
@@ -113,25 +134,35 @@ export class TrainingComponent implements OnInit {
 
   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);
     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);
     this.nextBox();
   }
 
   nextBox(): void {
-    this.currentBoxIndex++;
     this.isShowingBox = false;
 
-    if (this.currentBoxIndex >= this.boxes.length) {
+    if (this.boxesToReview.length === 0) {
       // Alle Boxen für dieses Bild sind bearbeitet
       this.nextImage();
-    } else {
-      // Aktualisiere die Farben der Boxen
-      this.drawCanvas();
+      return;
     }
+
+    if (this.currentBoxIndex >= this.boxesToReview.length) {
+      this.currentBoxIndex = 0;
+    }
+
+    this.drawCanvas();
   }
 
   nextImage(): void {
@@ -139,6 +170,15 @@ export class TrainingComponent implements OnInit {
     this.loadImage(this.currentImageIndex);
   }
 
+  skipToNextImage(): void {
+    if (this.currentImageIndex < this.deck.images.length - 1) {
+      this.currentImageIndex++;
+      this.loadImage(this.currentImageIndex);
+    } else {
+      alert('Dies ist das letzte Bild im Deck.');
+    }
+  }
+
   endTraining(): void {
     this.isTrainingFinished = true;
     alert(`Training beendet!\nGewusst: ${this.knownCount}\nNicht gewusst: ${this.unknownCount}`);

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<void> {
     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();
   }