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);
 
@@ -108,7 +109,6 @@ const NewsManager = () => {
     }
   };
 
-
   const resetForm = () => {
     setNewTitle("");
     setNewDescription("");
@@ -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,11 +161,45 @@ 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)} />
+            <Input
-            <Textarea placeholder="Beschreibung" value={newDescription} onChange={(e) => setNewDescription(e.target.value)} />
+              placeholder="Titel"
-            <Input placeholder="Bild-URL" value={newImageUrl} onChange={(e) => setNewImageUrl(e.target.value)} />
+              value={newTitle}
-            <Input placeholder="Team" value={newTeam} onChange={(e) => setNewTeam(e.target.value)} />
+              onChange={(e) => setNewTitle(e.target.value)}
-            <Button onClick={handleCreateOrUpdateNews} className="bg-frog-500 hover:bg-frog-600 text-white w-full">
+            />
+            <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>
@@ -153,7 +209,9 @@ const NewsManager = () => {
       {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>
+            <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"
@@ -162,10 +220,7 @@ const NewsManager = () => {
               >
                 Abbrechen
               </Button>
-            <Button
+              <Button variant="destructive" onClick={handleDelete}>
-              variant="destructive"
-              onClick={handleDelete}
-            >
                 Ja, löschen
               </Button>
             </div>
@@ -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,11 +256,7 @@ const NewsManager = () => {
                 >
                   Bearbeiten
                 </Button>
-                <Button
+                <Button size="sm" variant="destructive" onClick={() => confirmDelete(item.id)}>
-                    size="sm"
-                    variant="destructive"
-                    onClick={() => confirmDelete(item.id)}
-                    >
                   Löschen
                 </Button>
               </div>

src/components/NewsSection.tsx

@@ -3,31 +3,34 @@ import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }
 import { Button } from "@/components/ui/button";
 import { ArrowRight } from "lucide-react";
 import {Link} from "react-router-dom";
+import {useEffect, useState} from "react";
+
+type NewsItem = {
+  id: number,
+  title: string,
+  date?: string;
+  description: string;
+  image_url?: string;
+  created_at: string;
+}
 
 const NewsSection = () => {
-  const news = [
+
-    {
+  const [news, setNews] = useState<NewsItem[]>([]);
-      id: 1,
+
-      title: "Saisonstart 2023/24",
+  const fetchNews = async () => {
-      date: "15. September 2023",
+    try{
-      description: "Die neue Saison beginnt mit einem Heimspiel gegen VfB Mosbach. Kommt vorbei und unterstützt unser Team!",
+      const res = await fetch(`${import.meta.env.VITE_API_URL}/api/news`);
-      image: "https://images.unsplash.com/photo-1612872087720-bb876e2e67d1?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80"
+      const data = await res.json();
-    },
+      setNews(data);
-    {
+    }catch(error){
-      id: 2,
+      console.error("Fehler beim Laden der News:", error);
-      title: "Beachvolleyball-Turnier",
-      date: "3. Juli 2023",
-      description: "Unser jährliches Beachvolleyball-Turnier war ein voller Erfolg! 24 Teams kämpften um den Sieg.",
-      image: "https://images.unsplash.com/photo-1583514555852-6f77e7c9e081?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80"
-    },
-    {
-      id: 3,
-      title: "Neuer Trainer für die Jugendmannschaft",
-      date: "21. Mai 2023",
-      description: "Wir freuen uns, Marc Schneider als neuen Trainer für unsere U16-Mannschaft begrüßen zu dürfen.",
-      image: "https://images.unsplash.com/photo-1547347298-4074fc3086f0?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80"
     }
-  ];
+  };
+
+  useEffect(() => {
+    fetchNews();
+  }, []);
 
   return (
     <section id="news" className="py-16 bg-gray-50">
@@ -41,11 +44,17 @@ const NewsSection = () => {
         {news.map((item) => (
           <Card key={item.id} className="overflow-hidden hover:shadow-lg transition-shadow">
             <div className="h-48 overflow-hidden">
-                <img src={item.image} alt={item.title} className="w-full h-full object-cover" />
+              <img 
+                src={item.image_url || "/images/default-news.jpg"} 
+                alt={item.title} 
+                className="w-full h-full object-cover" 
+              />
             </div>
             <CardHeader>
               <CardTitle>{item.title}</CardTitle>
-                <CardDescription>{item.date}</CardDescription>
+              <CardDescription>
+                {new Date(item.created_at).toLocaleDateString("de-DE")}
+              </CardDescription>
             </CardHeader>
             <CardContent>
               <p>{item.description}</p>

tg-volleyball-frontend-todo.md

@@ -25,6 +25,7 @@
 - [x] Toast für Erfolg & Fehler
 - [x] Ladeindikator beim Speichern
 - [ ] Bildvorschau für `image_url`
+- [ ] Bildspeicherung im Backend db?
 
 ## 👤 Userverwaltung (Admin)
 - [x] User anlegen mit Rolle und Email