Fixes fuer die Gallery

src/admin/GalleryManager.tsx

@@ -2,6 +2,8 @@ import { useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { toast } from "sonner";
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
 
 const apiBase = import.meta.env.VITE_API_URL;
 
@@ -13,6 +15,8 @@ type GalleryImage = {
 const GalleryManager = () => {
   const [images, setImages] = useState<GalleryImage[]>([]);
   const [uploading, setUploading] = useState(false);
+  const [selectedImage, setSelectedImage] = useState<number | null>(null);
+  const [dialogOpen, setDialogOpen] = useState(false);
 
   const fetchImages = async () => {
     try {
@@ -52,11 +56,11 @@ const GalleryManager = () => {
     }
   };
 
-  const handleDelete = async (id: number) => {
+  const handleDelete = async () => {
-    if (!confirm("Bist du sicher, dass du dieses Bild löschen willst?")) return;
+    if (selectedImage === null) return;
 
     try {
-      const res = await fetch(`${apiBase}/api/gallery/${id}`, {
+      const res = await fetch(`${apiBase}/api/gallery/${selectedImage}`, {
         method: "DELETE",
       });
 
@@ -65,6 +69,9 @@ const GalleryManager = () => {
       await fetchImages();
     } catch (err) {
       toast.error("Fehler beim Löschen des Bildes");
+    } finally {
+      setDialogOpen(false);
+      setSelectedImage(null);
     }
   };
 
@@ -72,11 +79,22 @@ const GalleryManager = () => {
     <div className="max-w-6xl mx-auto py-12 px-4">
       <h1 className="text-3xl font-bold text-frog-600 mb-6">Galerie verwalten</h1>
 
+      {/* Upload Button */}
       <div className="mb-8">
-        <input type="file" accept="image/*" onChange={handleUpload} />
+        <label htmlFor="upload" className="cursor-pointer inline-flex items-center bg-frog-500 text-white px-4 py-2 rounded-md hover:bg-frog-600 transition">
+          Bild hochladen
+        </label>
+        <Input
+          id="upload"
+          type="file"
+          accept="image/*"
+          className="hidden"
+          onChange={handleUpload}
+        />
         {uploading && <p className="text-sm text-gray-500 mt-2">Bild wird hochgeladen...</p>}
       </div>
 
+      {/* Bilder */}
       <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-6">
         {images.map((img) => (
           <Card key={img.id}>
@@ -89,7 +107,10 @@ const GalleryManager = () => {
               <Button
                 variant="destructive"
                 className="w-full"
-                onClick={() => handleDelete(img.id)}
+                onClick={() => {
+                  setSelectedImage(img.id);
+                  setDialogOpen(true);
+                }}
               >
                 Löschen
               </Button>
@@ -97,6 +118,20 @@ const GalleryManager = () => {
           </Card>
         ))}
       </div>
+
+      {/* Dialog zur Bestätigung */}
+      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Bild wirklich löschen?</DialogTitle>
+          </DialogHeader>
+          <p className="text-gray-600 mb-4">Diese Aktion kann nicht rückgängig gemacht werden.</p>
+          <DialogFooter>
+            <Button variant="ghost" onClick={() => setDialogOpen(false)}>Abbrechen</Button>
+            <Button variant="destructive" onClick={handleDelete}>Löschen</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 };