deck list neu, selektor in rot

src/app/deck-list.component.html

@@ -31,17 +31,19 @@
         <!-- Liste der Bilder mit Anzahl der Boxen und Icons -->
         <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">
-            <div class="relative group">
+            <div class="flex items-center space-x-2">
-              <!-- Bildname mit Tooltip -->
+              <div class="relative group">
-              <span class="font-medium cursor-pointer">
+                <!-- Tooltip Inhalt (Bild) -->
-                {{ image.name }}
+                <div class="absolute left-0 bottom-full mb-2 w-48 bg-white border border-gray-300 rounded shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-10 pointer-events-none">
-              </span>
+                  <img src="/api/debug_image/{{image.id}}/thumbnail.jpg" alt="{{ image.name }}" class="w-full h-auto object-cover">
-              <!-- Tooltip Inhalt -->
+                </div>
-              <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">
+                <!-- Bildname mit Tooltip -->
-                <img src="/api/debug_image/{{image.id}}/thumbnail.jpg" alt="{{ image.name }}" class="w-full h-auto object-cover">
+                <span class="font-medium cursor-pointer">
+                  {{ image.name }}
+                </span>
               </div>
+              <span class="text-gray-600">({{ image.boxes.length }} Boxen)</span>
             </div>
-            <span class="text-gray-600">({{ image.boxes.length }} Boxen)</span>
             <div class="flex space-x-2">
               <!-- Edit Icon -->
               <button class="text-blue-500 hover:text-blue-700" title="Bild bearbeiten">
@@ -50,7 +52,7 @@
                 </svg>
               </button>
               <!-- Delete Icon -->
-              <button (click)="deleteImage(image)" class="text-red-500 hover:text-red-700" title="Bild löschen">
+              <button (click)="deleteImage(deck, 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">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                 </svg>
@@ -69,12 +71,6 @@
           </button>
         </div>
       </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>
 

src/app/deck-list.component.ts

@@ -26,12 +26,13 @@ export class DeckListComponent implements OnInit {
 
   currentUploadDeckName: string = '';
 
-  // Hinzugefügt: Set zur Verfolgung erweiterter Decks
+  // Set zur Verfolgung erweiterter Decks
   expandedDecks: Set<number> = new Set<number>();
 
   constructor(private deckService: DeckService) { }
 
   ngOnInit(): void {
+    this.loadExpandedDecks();
     this.loadDecks();
   }
 
@@ -52,7 +53,7 @@ export class DeckListComponent implements OnInit {
     });
   }
 
-  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?`)) {
       return;
     }
@@ -84,17 +85,50 @@ export class DeckListComponent implements OnInit {
     this.uploadImageModal.open();
   }
 
-  // Hinzugefügt: Methode zum Umschalten der Deck-Erweiterung
+  // Methode zum Umschalten der Deck-Erweiterung
   toggleDeckExpansion(deckId: number): void {
     if (this.expandedDecks.has(deckId)) {
       this.expandedDecks.delete(deckId);
     } else {
       this.expandedDecks.add(deckId);
     }
+    this.saveExpandedDecks();
   }
 
-  // Hinzugefügt: Methode zur Überprüfung, ob ein Deck erweitert ist
+  // Methode zur Überprüfung, ob ein Deck erweitert ist
   isDeckExpanded(deckId: number): boolean {
     return this.expandedDecks.has(deckId);
   }
+
+  // Laden der erweiterten Decks aus dem sessionStorage
+  loadExpandedDecks(): void {
+    const stored = sessionStorage.getItem('expandedDecks');
+    if (stored) {
+      try {
+        const parsed: number[] = JSON.parse(stored);
+        this.expandedDecks = new Set<number>(parsed);
+      } catch (e) {
+        console.error('Fehler beim Parsen der erweiterten Decks aus sessionStorage', e);
+      }
+    } else {
+      // Wenn keine Daten gespeichert sind, alle Decks standardmäßig erweitern
+      this.expandedDecks = new Set<number>();
+      // Dieser Teil wird nach dem Laden der Decks initialisiert
+      // Wir erweitern alle Decks, sobald sie geladen sind
+      this.deckService.getDecks().subscribe({
+        next: (data) => {
+          data.forEach(deck => this.expandedDecks.add(deck.id));
+          this.saveExpandedDecks();
+          this.decks = data;
+        },
+        error: (err) => console.error('Fehler beim Laden der Decks', err)
+      });
+    }
+  }
+
+  // Speichern der erweiterten Decks in das sessionStorage
+  saveExpandedDecks(): void {
+    const expandedArray = Array.from(this.expandedDecks);
+    sessionStorage.setItem('expandedDecks', JSON.stringify(expandedArray));
+  }
 }

src/app/upload-image-modal/upload-image-modal.component.ts

@@ -230,7 +230,7 @@ export class UploadImageModalComponent implements AfterViewInit, OnDestroy {
           top: top,
           width: width,
           height: height,
-          fill: 'rgba(0, 0, 0, 0.3)',
+          fill: 'rgba(255, 0, 0, 0.3)',
           selectable: true,
           hasControls: true,
           hasBorders: true,