diff --git a/src/app/app.component.ts b/src/app/app.component.ts index baac683..6b08cc4 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,7 +1,6 @@ import { CommonModule } from '@angular/common'; import { Component } from '@angular/core'; import { RouterOutlet } from '@angular/router'; -import { initFlowbite } from 'flowbite'; import { DeckListComponent } from './deck-list.component'; @Component({ @@ -18,6 +17,5 @@ import { DeckListComponent } from './deck-list.component'; export class AppComponent { title = 'vocabulary-training'; ngOnInit(): void { - initFlowbite(); } } \ No newline at end of file diff --git a/src/app/deck-list.component.html b/src/app/deck-list.component.html index 61613c2..46edc9f 100644 --- a/src/app/deck-list.component.html +++ b/src/app/deck-list.component.html @@ -1,13 +1,6 @@
- - - -
+
@@ -23,13 +16,14 @@
+ class="flex justify-between items-center p-2 rounded hover:bg-gray-300 cursor-pointer" + [class.bg-blue-200]="isDeckActive(deck)" + (click)="toggleDeckExpansion(deck)">

{{ deck.name }}

({{ deck.images.length }})
- diff --git a/src/app/deck-list.component.ts b/src/app/deck-list.component.ts index 08c4726..a9b3d2e 100644 --- a/src/app/deck-list.component.ts +++ b/src/app/deck-list.component.ts @@ -34,10 +34,10 @@ import { MoveImageModalComponent } from './move-image-modal/move-image-modal.com }) export class DeckListComponent implements OnInit { decks: Deck[] = []; - selectedDeck: Deck | null = null; + trainingsDeck: Deck | null = null; activeDeck: Deck | null = null; private deckToDelete: string | null = null; - private deckToRename: Deck | null = null; + deckToRename: Deck | null = null; @ViewChild(CreateDeckModalComponent) createDeckModal!: CreateDeckModalComponent; @ViewChild(UploadImageModalComponent) uploadImageModal!: UploadImageModalComponent; @@ -79,8 +79,7 @@ export class DeckListComponent implements OnInit { this.activeDeck = deck; } - - // Methode zum Öffnen des Lösch-Popovers + // Method to open the delete confirmation popover openDeletePopover(deckName: string): void { this.deckToDelete = deckName; const deletePopover = document.getElementById('deletePopover'); @@ -88,11 +87,13 @@ export class DeckListComponent implements OnInit { deletePopover.showPopover(); } } + // Method to check if a deck is active isDeckActive(deck: Deck): boolean { return this.activeDeck?.name === deck.name; } - // Methode zum Bestätigen des Löschens + + // Method to confirm the deletion of a deck confirmDelete(): void { if (this.deckToDelete) { this.deckService.deleteDeck(this.deckToDelete).subscribe({ @@ -106,12 +107,12 @@ export class DeckListComponent implements OnInit { } } - // Methode zum Abbrechen des Löschens + // Method to cancel the deletion of a deck cancelDelete(): void { this.closeDeletePopover(); } - // Methode zum Schließen des Lösch-Popovers + // Method to close the delete confirmation popover closeDeletePopover(): void { const deletePopover = document.getElementById('deletePopover'); if (deletePopover) { @@ -120,16 +121,24 @@ export class DeckListComponent implements OnInit { this.deckToDelete = null; } - // Methode zum Öffnen des Umbenennungs-Popovers + // Method to open the rename popover openRenamePopover(deck: Deck): void { this.deckToRename = deck; const renamePopover = document.getElementById('renamePopover'); if (renamePopover) { renamePopover.showPopover(); + // Set the input value to the current deck name and select it + setTimeout(() => { + const newDeckNameInput = document.getElementById('newDeckNameInput') as HTMLInputElement; + if (newDeckNameInput) { + newDeckNameInput.value = deck.name; + newDeckNameInput.select(); + } + }, 0); } } - // Methode zum Bestätigen des Umbenennens + // Method to confirm the renaming of a deck confirmRename(): void { const newDeckNameInput = document.getElementById('newDeckNameInput') as HTMLInputElement; if (newDeckNameInput && this.deckToRename) { @@ -137,7 +146,11 @@ export class DeckListComponent implements OnInit { if (newDeckName && newDeckName !== this.deckToRename.name) { this.deckService.renameDeck(this.deckToRename.name, newDeckName).subscribe({ next: () => { - this.loadDecks(); + // Aktualisiere den Namen im activeDeck, falls dieser der umbenannte Deck ist + if (this.activeDeck && this.activeDeck.name === this.deckToRename?.name) { + this.activeDeck.name = newDeckName; + } + this.loadDecks(); // Lade die Decks neu, um die Liste zu aktualisieren this.closeRenamePopover(); }, error: (err) => console.error('Error renaming deck', err), @@ -146,12 +159,12 @@ export class DeckListComponent implements OnInit { } } - // Methode zum Abbrechen des Umbenennens + // Method to cancel the renaming of a deck cancelRename(): void { this.closeRenamePopover(); } - // Methode zum Schließen des Umbenennungs-Popovers + // Method to close the rename popover closeRenamePopover(): void { const renamePopover = document.getElementById('renamePopover'); if (renamePopover) { @@ -159,6 +172,8 @@ export class DeckListComponent implements OnInit { } this.deckToRename = null; } + + // Method to delete a deck deleteDeck(deckName: string): void { if (!confirm(`Are you sure you want to delete the deck "${deckName}"?`)) { return; @@ -169,6 +184,7 @@ export class DeckListComponent implements OnInit { }); } + // Method to rename a deck renameDeck(deck: Deck): void { const newDeckName = prompt('Enter the new name for the deck:', deck.name); if (newDeckName && newDeckName !== deck.name) { @@ -179,6 +195,7 @@ export class DeckListComponent implements OnInit { } } + // Method to delete an image from a deck deleteImage(deck: Deck, image: DeckImage): void { if (!confirm(`Are you sure you want to delete the image "${image.name}"?`)) { return; @@ -192,6 +209,7 @@ export class DeckListComponent implements OnInit { }); } + // Method to edit an image in a deck editImage(deck: Deck, image: DeckImage): void { let imageSrc = null; this.currentUploadDeckName = deck.name; @@ -215,19 +233,23 @@ export class DeckListComponent implements OnInit { }); } + // Method to open the training component openTraining(deck: Deck): void { - this.selectedDeck = deck; + this.trainingsDeck = deck; } + // Method to close the training component closeTraining(): void { - this.selectedDeck = null; + this.trainingsDeck = null; this.loadDecks(); } + // Method to open the create deck modal openCreateDeckModal(): void { this.createDeckModal.open(); } + // Method to open the upload image modal openUploadImageModal(deckName: string): void { this.currentUploadDeckName = deckName; this.uploadImageModal.deckName = deckName; @@ -239,7 +261,7 @@ export class DeckListComponent implements OnInit { return this.expandedDecks.has(deckName); } - // Load expanded decks from sessionStorage + // Method to load expanded decks from sessionStorage loadExpandedDecks(): void { const stored = sessionStorage.getItem('expandedDecks'); if (stored) { @@ -255,13 +277,13 @@ export class DeckListComponent implements OnInit { } } - // Save expanded decks to sessionStorage + // Method to save expanded decks to sessionStorage saveExpandedDecks(): void { const expandedArray = Array.from(this.expandedDecks); sessionStorage.setItem('expandedDecks', JSON.stringify(expandedArray)); } - // Function to open the upload modal (can be triggered by a button) + // Method to open the upload modal openUploadModal(): void { this.uploadImageModal.open(); } @@ -278,7 +300,17 @@ export class DeckListComponent implements OnInit { async onImageSaved() { // Handle saving the image data, e.g., update the list of images this.imageData = null; + + // Lade die Decks neu this.decks = await firstValueFrom(this.deckService.getDecks()); + + // Aktualisiere den activeDeck, falls dieser der aktuelle Deck ist + if (this.activeDeck) { + const updatedDeck = this.decks.find(deck => deck.name === this.activeDeck?.name); + if (updatedDeck) { + this.activeDeck = updatedDeck; + } + } } // Method to open the MoveImageModal