-
+
-
-
-
-
-
-
-
- {{ deck.name }}
- ({{ deck.images.length }} images) -
-
-
-
-
-
-
+
+
+
+
+
-
+
+
+
-
-
+
+
+
+ Decks
+ +
+
+
+
+
+ {{ deck.name }}
+ ({{ deck.images.length }}) +
+
+
+
-
+
+
+
+
+ {{ activeDeck.name }}
+ ({{ activeDeck.images.length }} images) +
+
+
+
+ -
-
- +
-
-({{ image.boxes.length }} boxes)- - - {{ image.name }} - + {{ image.name }}
- -
diff --git a/src/app/deck-list.component.ts b/src/app/deck-list.component.ts
index a50d839..76455fb 100644
--- a/src/app/deck-list.component.ts
+++ b/src/app/deck-list.component.ts
@@ -35,7 +35,7 @@ import { MoveImageModalComponent } from './move-image-modal/move-image-modal.com
export class DeckListComponent implements OnInit {
decks: Deck[] = [];
selectedDeck: Deck | null = null;
- // Zustandsvariablen für die Popover-Interaktion
+ activeDeck: Deck | null = null;
private deckToDelete: string | null = null;
private deckToRename: Deck | null = null;
@@ -63,10 +63,23 @@ export class DeckListComponent implements OnInit {
loadDecks(): void {
this.deckService.getDecks().subscribe({
- next: (data) => this.decks = data,
+ next: (data) => {
+ this.decks = data;
+ // Set the first deck as active if none is selected
+ if (!this.activeDeck && this.decks.length > 0) {
+ this.activeDeck = this.decks[0];
+ }
+ },
error: (err) => console.error('Error loading decks', err)
});
}
+
+ // Updated toggle method
+ toggleDeckExpansion(deck: Deck): void {
+ this.activeDeck = deck;
+ }
+
+
// Methode zum Öffnen des Lösch-Popovers
openDeletePopover(deckName: string): void {
this.deckToDelete = deckName;
@@ -75,7 +88,10 @@ 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
confirmDelete(): void {
if (this.deckToDelete) {
@@ -142,25 +158,25 @@ export class DeckListComponent implements OnInit {
}
this.deckToRename = null;
}
- // deleteDeck(deckName: string): void {
- // if (!confirm(`Are you sure you want to delete the deck "${deckName}"?`)) {
- // return;
- // }
- // this.deckService.deleteDeck(deckName).subscribe({
- // next: () => this.loadDecks(),
- // error: (err) => console.error('Error deleting deck', err)
- // });
- // }
+ deleteDeck(deckName: string): void {
+ if (!confirm(`Are you sure you want to delete the deck "${deckName}"?`)) {
+ return;
+ }
+ this.deckService.deleteDeck(deckName).subscribe({
+ next: () => this.loadDecks(),
+ error: (err) => console.error('Error deleting deck', err)
+ });
+ }
- // renameDeck(deck: Deck): void {
- // const newDeckName = prompt('Enter the new name for the deck:', deck.name);
- // if (newDeckName && newDeckName !== deck.name) {
- // this.deckService.renameDeck(deck.name, newDeckName).subscribe({
- // next: () => this.loadDecks(),
- // error: (err) => console.error('Error renaming deck', err)
- // });
- // }
- // }
+ renameDeck(deck: Deck): void {
+ const newDeckName = prompt('Enter the new name for the deck:', deck.name);
+ if (newDeckName && newDeckName !== deck.name) {
+ this.deckService.renameDeck(deck.name, newDeckName).subscribe({
+ next: () => this.loadDecks(),
+ error: (err) => console.error('Error renaming deck', err)
+ });
+ }
+ }
deleteImage(deck: Deck, image: DeckImage): void {
if (!confirm(`Are you sure you want to delete the image "${image.name}"?`)) {
@@ -217,16 +233,6 @@ export class DeckListComponent implements OnInit {
this.uploadImageModal.open();
}
- // Method to toggle deck expansion
- toggleDeckExpansion(deckName: string): void {
- if (this.expandedDecks.has(deckName)) {
- this.expandedDecks.delete(deckName);
- } else {
- this.expandedDecks.add(deckName);
- }
- this.saveExpandedDecks();
- }
-
// Method to check if a deck is expanded
isDeckExpanded(deckName: string): boolean {
return this.expandedDecks.has(deckName);