From c0382827eaaea3ad3e012f1f8a5fe5b6781bf528 Mon Sep 17 00:00:00 2001
From: Marc Wieland <Marc.Wieland@freudenberg-pm.com>
Date: Wed, 23 Apr 2025 16:10:33 +0200
Subject: [PATCH] Testversion Fileupload

---
 src/admin/NewsManager.tsx      | 133 ++++++++++++++++++++++++---------
 src/components/NewsSection.tsx |  91 ++++++++++++----------
 tg-volleyball-frontend-todo.md |   1 +
 3 files changed, 148 insertions(+), 77 deletions(-)

diff --git a/src/admin/NewsManager.tsx b/src/admin/NewsManager.tsx
index 5a2b508b5..72479f4dc 100644
--- a/src/admin/NewsManager.tsx
+++ b/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>
diff --git a/src/components/NewsSection.tsx b/src/components/NewsSection.tsx
index 604d04f29..23058d1f9 100644
--- a/src/components/NewsSection.tsx
+++ b/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 = [
-    {
-      id: 1,
-      title: "Saisonstart 2023/24",
-      date: "15. September 2023",
-      description: "Die neue Saison beginnt mit einem Heimspiel gegen VfB Mosbach. Kommt vorbei und unterstützt unser Team!",
-      image: "https://images.unsplash.com/photo-1612872087720-bb876e2e67d1?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80"
-    },
-    {
-      id: 2,
-      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"
+
+  const [news, setNews] = useState<NewsItem[]>([]);
+
+  const fetchNews = async () => {
+    try{
+      const res = await fetch(`${import.meta.env.VITE_API_URL}/api/news`);
+      const data = await res.json();
+      setNews(data);
+    }catch(error){
+      console.error("Fehler beim Laden der News:", error);
     }
-  ];
+  };
+
+  useEffect(() => {
+    fetchNews();
+  }, []);
 
   return (
     <section id="news" className="py-16 bg-gray-50">
@@ -38,25 +41,31 @@ const NewsSection = () => {
         </div>
 
         <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-          {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" />
-              </div>
-              <CardHeader>
-                <CardTitle>{item.title}</CardTitle>
-                <CardDescription>{item.date}</CardDescription>
-              </CardHeader>
-              <CardContent>
-                <p>{item.description}</p>
-              </CardContent>
-              <CardFooter>
-                <Button variant="ghost" className="text-frog-600 hover:text-frog-700 p-0 hover:bg-transparent">
-                  Weiterlesen <ArrowRight className="ml-2 h-4 w-4" />
-                </Button>
-              </CardFooter>
-            </Card>
-          ))}
+        {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_url || "/images/default-news.jpg"} 
+                alt={item.title} 
+                className="w-full h-full object-cover" 
+              />
+            </div>
+            <CardHeader>
+              <CardTitle>{item.title}</CardTitle>
+              <CardDescription>
+                {new Date(item.created_at).toLocaleDateString("de-DE")}
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <p>{item.description}</p>
+            </CardContent>
+            <CardFooter>
+              <Button variant="ghost" className="text-frog-600 hover:text-frog-700 p-0 hover:bg-transparent">
+                Weiterlesen <ArrowRight className="ml-2 h-4 w-4" />
+              </Button>
+            </CardFooter>
+          </Card>
+        ))}
         </div>
 
         <div className="text-center mt-12">
diff --git a/tg-volleyball-frontend-todo.md b/tg-volleyball-frontend-todo.md
index 7624adf4e..689d34f17 100644
--- a/tg-volleyball-frontend-todo.md
+++ b/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