src/app/deck-list.component.html

@@ -8,41 +8,33 @@
   </div>
 
   <!-- Decks anzeigen -->
-  <div class="flex flex-wrap gap-6">
-    <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="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+    <div *ngFor="let deck of decks" class="bg-white shadow rounded-lg p-6 flex flex-col">
       <div class="flex justify-between items-center mb-4">
-        <div class="flex items-center space-x-2">
-          <h2 class="text-xl font-semibold">{{ deck.name }}</h2>
-          <span class="text-gray-600">({{ deck.images.length }} Bilder)</span>
-        </div>
-        <button (click)="toggleDeckExpansion(deck.id)" class="text-gray-500 hover:text-gray-700 focus:outline-none" title="Deck ein-/ausklappen">
-          <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" />
-          </svg>
-          <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">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+        <h2 class="text-xl font-semibold">{{ deck.name }}</h2>
+        
+        <!-- Anzahl der Bilder anzeigen, wenn ein Training aktiv ist -->
+        <span *ngIf="selectedDeck" class="text-gray-600">
+          {{ deck.images.length }} Bilder
+        </span>
+        
+        <!-- Löschen-Button anzeigen, wenn kein Training aktiv ist -->
+        <button *ngIf="!selectedDeck" (click)="deleteDeck(deck.name)" class="text-red-500 hover:text-red-700" title="Deck löschen">
+          <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="M6 18L18 6M6 6l12 12" />
           </svg>
         </button>
       </div>
 
-      <!-- Bildliste und Action-Buttons nur anzeigen, wenn das Deck erweitert ist und kein Training aktiv ist -->
-      <ng-container *ngIf="isDeckExpanded(deck.id) && !selectedDeck">
+      <!-- Bildliste und Action-Buttons nur anzeigen, wenn kein Training aktiv ist -->
+      <ng-container *ngIf="!selectedDeck">
         <!-- 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="flex items-center space-x-2">
-              <div class="relative group">
-                <!-- Tooltip Inhalt (Bild) -->
-                <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">
-                  <img src="/api/debug_image/{{image.id}}/thumbnail.jpg" alt="{{ image.name }}" class="w-full h-auto object-cover">
-                </div>
-                <!-- Bildname mit Tooltip -->
-                <span class="font-medium cursor-pointer">
-                  {{ image.name }}
-                </span>
-              </div>
+            <div class="flex items-center">
+              <span class="font-medium">{{ image.name }}</span>
               <span class="text-gray-600">({{ image.boxes.length }} Boxen)</span>
+              <img src="/api/debug_image/{{image.id}}/thumbnail.jpg">
             </div>
             <div class="flex space-x-2">
               <!-- Edit Icon -->

src/app/deck-list.component.ts

@@ -26,13 +26,9 @@ export class DeckListComponent implements OnInit {
 
   currentUploadDeckName: string = '';
 
-  // Set zur Verfolgung erweiterter Decks
-  expandedDecks: Set<number> = new Set<number>();
-
   constructor(private deckService: DeckService) { }
 
   ngOnInit(): void {
-    this.loadExpandedDecks();
     this.loadDecks();
   }
 
@@ -53,12 +49,15 @@ export class DeckListComponent implements OnInit {
     });
   }
 
+  // Neue Methode zum Löschen eines Bildes
   deleteImage(deck: Deck, image: DeckImage): void {
     if (!confirm(`Bist du sicher, dass du das Bild "${image.name}" löschen möchtest?`)) {
       return;
     }
 
-    const imageId = image.id; 
+    // Hier gehen wir davon aus, dass das Deck eine eindeutige ID hat. Falls nicht, passe den Code entsprechend an.
+    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({
       next: () => this.loadDecks(),
@@ -84,51 +83,4 @@ export class DeckListComponent implements OnInit {
     this.uploadImageModal.deckName = deckName;
     this.uploadImageModal.open();
   }
-
-  // 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();
-  }
-
-  // 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(255, 0, 0, 0.3)',
+          fill: 'rgba(0, 0, 0, 0.3)',
           selectable: true,
           hasControls: true,
           hasBorders: true,