From ddac7102feb64ba31df06debb06eb188f3ce28f0 Mon Sep 17 00:00:00 2001 From: Andreas Knuth Date: Thu, 16 Jan 2025 00:07:10 +0000 Subject: [PATCH] responsive part 1, new orientation --- src/app/deck-list.component.html | 125 +++++++++++++++++-------------- src/app/deck-list.component.ts | 68 +++++++++-------- 2 files changed, 107 insertions(+), 86 deletions(-) diff --git a/src/app/deck-list.component.html b/src/app/deck-list.component.html index 9e0a105..e81cde4 100644 --- a/src/app/deck-list.component.html +++ b/src/app/deck-list.component.html @@ -1,78 +1,94 @@ -
+
-
+ - -
-
- -
-
-

{{ deck.name }}

- ({{ deck.images.length }} images) -
-
- - - - - - + +
+ + +
+
+
+

Decks

+ +
+
+
+
+

{{ deck.name }}

+ ({{ deck.images.length }}) +
+ +
+
- - - + +
+
+ +
+
+

{{ activeDeck.name }}

+ ({{ activeDeck.images.length }} images) +
+
+ + +
+
+ +
    -
  • +
  • -
    {{ image.name }}
    - - - {{ image.name }} - + {{ image.name }}
    ({{ image.boxes.length }} boxes)
    - - - - - -
-
- -
- +
- @@ -110,7 +125,7 @@ [decks]="decks" (moveCompleted)="onImageMoved()" (closed)="imageToMove = null"> - +
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);