Testversion Fileupload

2025-04-23 16:10:33 +02:00 · 2025-04-23 16:10:33 +02:00 · c0382827ea
commit c0382827ea
parent ae8bdddfa5
3 changed files with 148 additions and 77 deletions
--- 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>
--- 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">
--- 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