aknuth
/
vokabeltraining
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases Wiki Activity

images als Tooltips, auf und zuklappbar

This commit is contained in:
Andreas Knuth 2024-12-02 21:19:48 +01:00
parent fb75113a08
commit d02be08098
2 changed files with 51 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/app/deck-list.component.html
View File

@ -8,34 +8,40 @@
</div> </div>
<!-- Decks anzeigen --> <!-- Decks anzeigen -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div class="flex flex-wrap gap-6">
<div *ngFor="let deck of decks" class="bg-white shadow rounded-lg p-6 flex flex-col"> <div *ngFor="let deck of decks" class="bg-white shadow rounded-lg p-6 w-full md:w-1/2 lg:w-1/3 flex flex-col">
<!-- Deck-Header mit Toggle-Button -->
<div class="flex justify-between items-center mb-4"> <div class="flex justify-between items-center mb-4">
<h2 class="text-xl font-semibold">{{ deck.name }}</h2> <div class="flex items-center space-x-2">
<h2 class="text-xl font-semibold">{{ deck.name }}</h2>
<!-- Anzahl der Bilder anzeigen, wenn ein Training aktiv ist --> <span class="text-gray-600">({{ deck.images.length }} Bilder)</span>
<span *ngIf="selectedDeck" class="text-gray-600"> </div>
{{ deck.images.length }} Bilder <button (click)="toggleDeckExpansion(deck.id)" class="text-gray-500 hover:text-gray-700 focus:outline-none" title="Deck ein-/ausklappen">
</span> <svg *ngIf="!isDeckExpanded(deck.id)" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform rotate-0 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
<!-- Löschen-Button anzeigen, wenn kein Training aktiv ist --> </svg>
<button *ngIf="!selectedDeck" (click)="deleteDeck(deck.name)" class="text-red-500 hover:text-red-700" title="Deck löschen"> <svg *ngIf="isDeckExpanded(deck.id)" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform rotate-180 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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="M19 9l-7 7-7-7" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg> </svg>
</button> </button>
</div> </div>
<!-- Bildliste und Action-Buttons nur anzeigen, wenn kein Training aktiv ist --> <!-- Bildliste und Action-Buttons nur anzeigen, wenn das Deck erweitert ist und kein Training aktiv ist -->
<ng-container *ngIf="!selectedDeck"> <ng-container *ngIf="isDeckExpanded(deck.id) && !selectedDeck">
<!-- Liste der Bilder mit Anzahl der Boxen und Icons --> <!-- Liste der Bilder mit Anzahl der Boxen und Icons -->
<ul class="mb-4"> <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"> <li *ngFor="let image of deck.images" class="flex justify-between items-center py-2 border-b last:border-b-0">
<div class="flex items-center"> <div class="relative group">
<span class="font-medium">{{ image.name }}</span> <!-- Bildname mit Tooltip -->
<span class="text-gray-600">({{ image.boxes.length }} Boxen)</span> <span class="font-medium cursor-pointer">
<img src="/api/debug_image/{{image.id}}/thumbnail.jpg"> {{ image.name }}
</span>
<!-- Tooltip Inhalt -->
<div class="absolute left-0 top-full mt-2 w-48 bg-white border border-gray-300 rounded shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-10">
<img src="/api/debug_image/{{image.id}}/thumbnail.jpg" alt="{{ image.name }}" class="w-full h-auto object-cover">
</div>
</div> </div>
<span class="text-gray-600">({{ image.boxes.length }} Boxen)</span>
<div class="flex space-x-2"> <div class="flex space-x-2">
<!-- Edit Icon --> <!-- Edit Icon -->
<button class="text-blue-500 hover:text-blue-700" title="Bild bearbeiten"> <button class="text-blue-500 hover:text-blue-700" title="Bild bearbeiten">
@ -44,7 +50,7 @@
</svg> </svg>
</button> </button>
<!-- Delete Icon --> <!-- Delete Icon -->
<button (click)="deleteImage(deck, image)" class="text-red-500 hover:text-red-700" title="Bild löschen"> <button (click)="deleteImage(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"> <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" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg> </svg>
@ -63,6 +69,12 @@
</button> </button>
</div> </div>
</ng-container> </ng-container>
<!-- Wenn Training aktiv ist und dieses Deck ausgewählt ist -->
<ng-container *ngIf="isDeckExpanded(deck.id) && selectedDeck?.id === deck.id">
<!-- Nur den Decknamen und die Anzahl der Bilder anzeigen -->
<!-- (Bereits im Header enthalten) -->
</ng-container>
</div> </div>
</div> </div>

24
src/app/deck-list.component.ts
View File

@ -26,6 +26,9 @@ export class DeckListComponent implements OnInit {
currentUploadDeckName: string = ''; currentUploadDeckName: string = '';
// Hinzugefügt: Set zur Verfolgung erweiterter Decks
expandedDecks: Set<number> = new Set<number>();
constructor(private deckService: DeckService) { } constructor(private deckService: DeckService) { }
ngOnInit(): void { ngOnInit(): void {
@ -49,15 +52,12 @@ export class DeckListComponent implements OnInit {
}); });
} }
// Neue Methode zum Löschen eines Bildes deleteImage(image: DeckImage): void {
deleteImage(deck: Deck, image: DeckImage): void {
if (!confirm(`Bist du sicher, dass du das Bild "${image.name}" löschen möchtest?`)) { if (!confirm(`Bist du sicher, dass du das Bild "${image.name}" löschen möchtest?`)) {
return; return;
} }
// Hier gehen wir davon aus, dass das Deck eine eindeutige ID hat. Falls nicht, passe den Code entsprechend an. const imageId = image.id;
const deckId = deck.id; // Stelle sicher, dass das Deck eine `id` hat
const imageId = image.id; // Stelle sicher, dass das Bild eine `id` hat
this.deckService.deleteImage(imageId).subscribe({ this.deckService.deleteImage(imageId).subscribe({
next: () => this.loadDecks(), next: () => this.loadDecks(),
@ -83,4 +83,18 @@ export class DeckListComponent implements OnInit {
this.uploadImageModal.deckName = deckName; this.uploadImageModal.deckName = deckName;
this.uploadImageModal.open(); this.uploadImageModal.open();
} }
// Hinzugefügt: Methode zum Umschalten der Deck-Erweiterung
toggleDeckExpansion(deckId: number): void {
if (this.expandedDecks.has(deckId)) {
this.expandedDecks.delete(deckId);
} else {
this.expandedDecks.add(deckId);
}
}
// Hinzugefügt: Methode zur Überprüfung, ob ein Deck erweitert ist
isDeckExpanded(deckId: number): boolean {
return this.expandedDecks.has(deckId);
}
} }