init release

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

@@ -0,0 +1,54 @@
+// src/app/upload-image-modal.component.ts
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { DeckService } from '../deck.service';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Modal } from 'flowbite';
+
+@Component({
+  selector: 'app-upload-image-modal',
+  templateUrl: './upload-image-modal.component.html',
+  standalone: true,
+  imports: [CommonModule,FormsModule]
+})
+export class UploadImageModalComponent {
+  @Input() deckName: string = '';
+  @Output() imageUploaded = new EventEmitter<void>();
+  imageFile: File | null = null;
+  imageText: string = '';
+
+  constructor(private deckService: DeckService) { }
+
+  onFileChange(event: Event): void {
+    const input = event.target as HTMLInputElement;
+    if (input.files && input.files.length) {
+      this.imageFile = input.files[0];
+    }
+  }
+
+  uploadImage(event: Event): void {
+    event.preventDefault();
+    if (!this.imageFile || this.imageText.trim() === '') {
+      alert('Bitte ein Bild und den zugehörigen Text angeben.');
+      return;
+    }
+
+    this.deckService.uploadImage(this.deckName, this.imageFile, this.imageText).subscribe({
+      next: () => {
+        this.imageFile = null;
+        this.imageText = '';
+        this.imageUploaded.emit();
+        // Modal schließen
+        const modalElement = document.getElementById('uploadImageModal');
+        if (modalElement) {
+          const modal = new Modal(modalElement);
+          modal.hide();
+        }
+      },
+      error: (err) => {
+        console.error('Fehler beim Hochladen des Bildes', err);
+        alert('Fehler beim Hochladen des Bildes.');
+      }
+    });
+  }
+}