Training + Liste erneuert

src/app/training/training.component.html

@@ -1,24 +1,46 @@
 <!-- src/app/training.component.html -->
 <div class="mt-10">
-    <h2 class="text-2xl font-bold mb-4">Training: {{ deck.name }}</h2>
-    <div class="bg-white shadow rounded-lg p-6 flex flex-col items-center">
-      <img [src]="currentImage" alt="Vokabelbild" class="max-h-[50vh] object-contain mb-4">
-      <div *ngIf="showTextFlag" class="bg-black bg-opacity-50 text-white text-lg p-2 rounded mb-4">
-        <!-- {{ currentImage?.text }} -->
-      </div>
-      <div class="flex space-x-4">
-        <button (click)="showText()" class="bg-green-500 text-white py-2 px-4 rounded hover:bg-green-600" [disabled]="showTextFlag">
-          Anzeigen
-        </button>
-        <button (click)="markKnown()" class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">
-          Gewusst
-        </button>
-        <button (click)="markUnknown()" class="bg-red-500 text-white py-2 px-4 rounded hover:bg-red-600">
-          Nicht gewusst
-        </button>
-      </div>
-      <p class="mt-4">{{ progress }}</p>
-      <button (click)="closeTraining()" class="mt-4 text-gray-500 hover:text-gray-700 underline">Training beenden</button>
+  <h2 class="text-2xl font-bold mb-4">Training: {{ deck.name }}</h2>
+  <div class="bg-white shadow rounded-lg p-6 flex flex-col items-center">
+    <canvas #canvas class="mb-4 border max-h-[50vh]"></canvas>
+
+    <div class="flex space-x-4 mb-4">
+      <!-- Anzeigen Button -->
+      <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"
+      >
+        Anzeigen
+      </button>
+    
+      <!-- Gewusst Button -->
+      <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"
+      >
+        Gewusst
+      </button>
+    
+      <!-- Nicht gewusst Button -->
+      <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"
+      >
+        Nicht gewusst
+      </button>
     </div>
+
+    <p class="mt-2">{{ progress }}</p>
+    <p class="mt-2">Gewusst: {{ knownCount }} | Nicht gewusst: {{ unknownCount }}</p>
+
+    <button
+      (click)="closeTraining()"
+      class="mt-4 text-gray-500 hover:text-gray-700 underline"
+    >
+      Training beenden
+    </button>
   </div>
-  
+</div>