+
+
+
\ No newline at end of file
diff --git a/src/app/deck-list.component.ts b/src/app/deck-list.component.ts
new file mode 100644
index 0000000..eea985e
--- /dev/null
+++ b/src/app/deck-list.component.ts
@@ -0,0 +1,58 @@
+// src/app/deck-list.component.ts
+import { Component, OnInit } from '@angular/core';
+import { DeckService, Deck } from './deck.service';
+import { CommonModule } from '@angular/common';
+import { HttpClientModule } from '@angular/common/http';
+import { CreateDeckModalComponent } from './create-deck-modal/create-deck-modal.component';
+import { TrainingComponent } from './training/training.component';
+import { UploadImageModalComponent } from './upload-image-modal/upload-image-modal.component';
+import { initFlowbite } from 'flowbite';
+
+
+@Component({
+ selector: 'app-deck-list',
+ templateUrl: './deck-list.component.html',
+ standalone: true,
+ imports: [
+ CommonModule,
+ CreateDeckModalComponent,
+ UploadImageModalComponent,
+ TrainingComponent
+ ]
+})
+export class DeckListComponent implements OnInit {
+ decks: Deck[] = [];
+ selectedDeck: Deck | null = null;
+
+ constructor(private deckService: DeckService) { }
+
+ ngOnInit(): void {
+ this.loadDecks();
+ }
+
+ loadDecks(): void {
+ this.deckService.getDecks().subscribe({
+ next: (data) => this.decks = data,
+ error: (err) => console.error('Fehler beim Laden der Decks', err)
+ });
+ }
+
+ deleteDeck(deckName: string): void {
+ if (!confirm(`Bist du sicher, dass du das Deck "${deckName}" löschen möchtest?`)) {
+ return;
+ }
+ this.deckService.deleteDeck(deckName).subscribe({
+ next: () => this.loadDecks(),
+ error: (err) => console.error('Fehler beim Löschen des Decks', err)
+ });
+ }
+
+ openTraining(deck: Deck): void {
+ this.selectedDeck = deck;
+ }
+
+ closeTraining(): void {
+ this.selectedDeck = null;
+ this.loadDecks();
+ }
+}
diff --git a/src/app/deck.service.ts b/src/app/deck.service.ts
new file mode 100644
index 0000000..a5fa9d6
--- /dev/null
+++ b/src/app/deck.service.ts
@@ -0,0 +1,42 @@
+// src/app/deck.service.ts
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+export interface Deck {
+ name: string;
+ images: DeckImage[];
+}
+
+export interface DeckImage {
+ image: string;
+ text: string;
+}
+
+@Injectable({
+ providedIn: 'root'
+})
+export class DeckService {
+ private apiUrl = '/api/decks';
+
+ constructor(private http: HttpClient) { }
+
+ getDecks(): Observable
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ deck.name }}
+ +
+
+ {{ deck.images.length }} Bilder
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/app/training/training.component.ts b/src/app/training/training.component.ts
new file mode 100644
index 0000000..9bc5897
--- /dev/null
+++ b/src/app/training/training.component.ts
@@ -0,0 +1,62 @@
+// src/app/training.component.ts
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Deck, DeckImage } from '../deck.service';
+import { CommonModule } from '@angular/common';
+
+@Component({
+ selector: 'app-training',
+ templateUrl: './training.component.html',
+ standalone: true,
+ imports: [CommonModule]
+})
+export class TrainingComponent {
+ @Input() deck!: Deck;
+ @Output() close = new EventEmitterTraining: {{ deck.name }}
+
+ ![Vokabelbild]()
+
+
+ {{ currentImage?.text }}
+
+
+
+
+
+
+ {{ progress }}
+ +