64 lines
1.9 KiB
HTML
64 lines
1.9 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>
|
|
|
|
<!-- Nochmal Button -->
|
|
<button
|
|
(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
|
|
</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"
|
|
>
|
|
Gut
|
|
</button>
|
|
|
|
<!-- Einfach Button -->
|
|
<button
|
|
(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"
|
|
>
|
|
Einfach
|
|
</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>
|
|
|
|
<button
|
|
(click)="closeTraining()"
|
|
class="mt-4 text-gray-500 hover:text-gray-700 underline"
|
|
>
|
|
Training beenden
|
|
</button>
|
|
</div>
|
|
</div>
|