44 lines
1.9 KiB
HTML
44 lines
1.9 KiB
HTML
<!-- src/app/deck-list.component.html -->
|
|
<div>
|
|
<!-- Button zum Erstellen eines neuen Decks -->
|
|
<div class="flex justify-end mb-4">
|
|
<button (click)="openCreateDeckModal()" class="bg-green-500 text-white py-2 px-4 rounded hover:bg-green-600">
|
|
Neues Deck erstellen
|
|
</button>
|
|
</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 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">
|
|
<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>
|
|
<div class="flex-1 mb-4">
|
|
<p class="text-gray-600">{{ deck.images.length }} Bilder</p>
|
|
</div>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CreateDeckModalComponent -->
|
|
<app-create-deck-modal (deckCreated)="loadDecks()"></app-create-deck-modal>
|
|
|
|
<!-- UploadImageModalComponent -->
|
|
<app-upload-image-modal [deckName]="currentUploadDeckName" (imageUploaded)="loadDecks()"></app-upload-image-modal>
|
|
|
|
<!-- TrainingComponent -->
|
|
<app-training *ngIf="selectedDeck" [deck]="selectedDeck" (close)="closeTraining()"></app-training>
|
|
</div>
|