Testversion Fileupload

src/admin/NewsManager.tsx

@@ -24,6 +24,7 @@ const NewsManager = () => {
   const [newDescription, setNewDescription] = useState("");
   const [newImageUrl, setNewImageUrl] = useState("");
   const [newTeam, setNewTeam] = useState("");
+  const [uploading, setUploading] = useState(false);
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [deleteId, setDeleteId] = useState<number | null>(null);
 
@@ -86,15 +87,15 @@ const NewsManager = () => {
     setDeleteId(id);
     setShowDeleteModal(true);
   };
-  
+
   const handleDelete = async () => {
     if (!deleteId) return;
-  
+
     try {
       const res = await fetch(`${apiBase}/api/news/${deleteId}`, {
         method: "DELETE",
       });
-  
+
       if (res.ok) {
         await loadNews();
       } else {
@@ -107,7 +108,6 @@ const NewsManager = () => {
       setDeleteId(null);
     }
   };
-  
 
   const resetForm = () => {
     setNewTitle("");
@@ -117,6 +117,28 @@ const NewsManager = () => {
     setCurrentId(null);
   };
 
+  const handleImageUpload = async (file: File) => {
+    const formData = new FormData();
+    formData.append("image", file);
+    setUploading(true);
+
+    try {
+      const res = await fetch(`${apiBase}/api/upload-news-image`, {
+        method: "POST",
+        body: formData,
+      });
+
+      if (!res.ok) throw new Error("Fehler beim Bild-Upload");
+
+      const data = await res.json();
+      setNewImageUrl(data.imageUrl);
+    } catch (err) {
+      console.error("Bild-Upload fehlgeschlagen:", err);
+    } finally {
+      setUploading(false);
+    }
+  };
+
   return (
     <div className="max-w-5xl mx-auto py-12 px-4">
       <div className="flex justify-between items-center mb-8">
@@ -139,39 +161,72 @@ const NewsManager = () => {
             {editMode ? "News bearbeiten" : "Neue News anlegen"}
           </h2>
           <div className="space-y-4">
-            <Input placeholder="Titel" value={newTitle} onChange={(e) => setNewTitle(e.target.value)} />
-            <Textarea placeholder="Beschreibung" value={newDescription} onChange={(e) => setNewDescription(e.target.value)} />
-            <Input placeholder="Bild-URL" value={newImageUrl} onChange={(e) => setNewImageUrl(e.target.value)} />
-            <Input placeholder="Team" value={newTeam} onChange={(e) => setNewTeam(e.target.value)} />
-            <Button onClick={handleCreateOrUpdateNews} className="bg-frog-500 hover:bg-frog-600 text-white w-full">
+            <Input
+              placeholder="Titel"
+              value={newTitle}
+              onChange={(e) => setNewTitle(e.target.value)}
+            />
+            <Textarea
+              placeholder="Beschreibung"
+              value={newDescription}
+              onChange={(e) => setNewDescription(e.target.value)}
+            />
+
+            {/* Upload */}
+            <Input
+              type="file"
+              accept="image/*"
+              onChange={(e) => {
+                const file = e.target.files?.[0];
+                if (file) handleImageUpload(file);
+              }}
+            />
+            {uploading && <p className="text-sm text-gray-400">Bild wird hochgeladen...</p>}
+            {newImageUrl && (
+              <img
+                src={newImageUrl}
+                alt="Vorschau"
+                className="mt-2 max-h-40 rounded-md shadow-md"
+              />
+            )}
+
+            <Input
+              placeholder="Team"
+              value={newTeam}
+              onChange={(e) => setNewTeam(e.target.value)}
+            />
+
+            <Button
+              onClick={handleCreateOrUpdateNews}
+              className="bg-frog-500 hover:bg-frog-600 text-white w-full"
+            >
               {editMode ? "Änderungen speichern" : "Speichern"}
             </Button>
           </div>
         </div>
       )}
 
-    {showDeleteModal && (
-      <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-        <div className="bg-white p-6 rounded-lg shadow-lg max-w-sm w-full">
-          <h2 className="text-xl font-bold text-frog-600 mb-4 text-center">News wirklich löschen?</h2>
-          <div className="flex justify-center gap-4">
-            <Button
-              variant="outline"
-              className="border-gray-300 text-gray-600 hover:bg-gray-100"
-              onClick={() => setShowDeleteModal(false)}
-            >
-              Abbrechen
-            </Button>
-            <Button
-              variant="destructive"
-              onClick={handleDelete}
-            >
-              Ja, löschen
-            </Button>
+      {showDeleteModal && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white p-6 rounded-lg shadow-lg max-w-sm w-full">
+            <h2 className="text-xl font-bold text-frog-600 mb-4 text-center">
+              News wirklich löschen?
+            </h2>
+            <div className="flex justify-center gap-4">
+              <Button
+                variant="outline"
+                className="border-gray-300 text-gray-600 hover:bg-gray-100"
+                onClick={() => setShowDeleteModal(false)}
+              >
+                Abbrechen
+              </Button>
+              <Button variant="destructive" onClick={handleDelete}>
+                Ja, löschen
+              </Button>
+            </div>
           </div>
         </div>
-      </div>
-    )}
+      )}
 
       <div className="grid md:grid-cols-2 gap-6">
         {news.map((item) => (
@@ -181,7 +236,17 @@ const NewsManager = () => {
             </CardHeader>
             <CardContent>
               <p className="text-gray-600 mb-2">{item.description}</p>
-              <p className="text-xs text-gray-400">Erstellt am {new Date(item.created_at).toLocaleDateString("de-DE")}</p>
+              {item.image_url && (
+                <img
+                  src={item.image_url}
+                  alt={item.title}
+                  className="w-full rounded-md my-2 max-h-40 object-cover"
+                />
+              )}
+              <p className="text-xs text-gray-400">
+                Erstellt am{" "}
+                {new Date(item.created_at).toLocaleDateString("de-DE")}
+              </p>
               <div className="flex gap-2 mt-4">
                 <Button
                   size="sm"
@@ -191,12 +256,8 @@ const NewsManager = () => {
                 >
                   Bearbeiten
                 </Button>
-                <Button
-                    size="sm"
-                    variant="destructive"
-                    onClick={() => confirmDelete(item.id)}
-                    >
-                    Löschen
+                <Button size="sm" variant="destructive" onClick={() => confirmDelete(item.id)}>
+                  Löschen
                 </Button>
               </div>
             </CardContent>