56 lines
1.8 KiB
HTML
56 lines
1.8 KiB
HTML
<!-- 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">
|
|
<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 >= boxesToReview.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 >= boxesToReview.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 >= 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>
|
|
<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>
|