From 19bd2ee41d5a4d3f8ac61be595634bb479c1f32d Mon Sep 17 00:00:00 2001 From: Marc Wieland Date: Tue, 29 Apr 2025 14:25:44 +0200 Subject: [PATCH] Teamsection finalized --- src/components/TeamSection.tsx | 184 +++++++++++++++++---------------- src/pages/TeamDetailPage.tsx | 173 ++++++++++++++++--------------- 2 files changed, 186 insertions(+), 171 deletions(-) diff --git a/src/components/TeamSection.tsx b/src/components/TeamSection.tsx index 3d757bf34..8a5c2f155 100644 --- a/src/components/TeamSection.tsx +++ b/src/components/TeamSection.tsx @@ -1,55 +1,30 @@ import { useKeenSlider } from "keen-slider/react"; -import { useRef } from "react"; +import { useRef, useEffect, useState } from "react"; import { ChevronLeft, ChevronRight, Users } from "lucide-react"; -import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"; +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/components/ui/card"; import { Button } from "@/components/ui/button"; -import {Link} from "react-router-dom"; +import { Link } from "react-router-dom"; + +const apiBase = import.meta.env.VITE_API_URL; + +type Team = { + id: number; + name: string; + liga?: string; + beschreibung?: string; + trainingszeiten?: string; +}; const TeamSection = () => { - const teams = [ - { - id: 1, - name: "Damen I", - league: "Landesliga Nord", - description: "Unsere erste Damenmannschaft spielt in der Landesliga Nord und konnte in der letzten Saison den 3. Platz erreichen.", - trainingTimes: "Di & Do 19:00 - 21:00 Uhr" - }, - { - id: 2, - name: "Herren I", - league: "Bezirksliga", - description: "Das Herrenteam kämpft in der Bezirksliga und hat das Ziel, in dieser Saison den Aufstieg zu schaffen.", - trainingTimes: "Mo & Mi 20:00 - 22:00 Uhr" - }, - { - id: 3, - name: "Jugend U16", - league: "Jugendliga", - description: "Unsere Nachwuchsspielerinnen und -spieler entwickeln sich prächtig und nehmen an der Jugendliga teil.", - trainingTimes: "Fr 17:00 - 19:00 Uhr" - }, - { - id: 4, - name: "Freizeitgruppe", - league: "Hobby", - description: "Für alle, die Volleyball zum Spaß spielen möchten. Anfänger und Fortgeschrittene sind willkommen!", - trainingTimes: "Mo 18:00 - 20:00 Uhr" - }, - { - id: 5, - name: "U12", - league: "Jugendliga", - description: "Unsere kleinsten Stars sammeln erste Spielerfahrung in der U12-Jugendliga.", - trainingTimes: "Mi 16:00 - 17:30 Uhr" - }, - { - id: 6, - name: "Mixed-Team", - league: "Hobbyliga", - description: "Spaß, Gemeinschaft und gemischte Teams – unser Mixed-Team steht für Vielfalt!", - trainingTimes: "Fr 19:00 - 21:00 Uhr" - } - ]; + const [teams, setTeams] = useState([]); + const [loading, setLoading] = useState(true); const [sliderRef, slider] = useKeenSlider({ slides: { @@ -69,58 +44,87 @@ const TeamSection = () => { }, }); + useEffect(() => { + const fetchTeams = async () => { + try { + const res = await fetch(`${apiBase}/api/teams`); + const data = await res.json(); + setTeams(data); + } catch (err) { + console.error("Fehler beim Laden der Teams:", err); + } finally { + setLoading(false); + } + }; + + fetchTeams(); + }, []); + return (

Unsere Teams

-

Von Anfängern bis Leistungssport – für jeden ist etwas dabei

+

+ Von Anfängern bis Leistungssport – für jeden ist etwas dabei +

-
- {/* Navigation Buttons */} - - + {loading ? ( +

Lade Teams...

+ ) : ( +
+ {/* Navigation Buttons */} + + -
- {teams.map((team) => ( -
- - - - - {team.name} - - {team.league} - - -

{team.description}

-
- Training: {team.trainingTimes} -
- - - - - - - -
- ))} +
+ {teams.map((team) => ( +
+ + + + + {team.name} + + {team.liga} + + +

+ {team.beschreibung ?? "Keine Beschreibung vorhanden."} +

+
+ Training:{" "} + {team.trainingszeiten ?? "Nicht angegeben"} +
+ + + + + + + +
+ ))} +
-
+ )}
); diff --git a/src/pages/TeamDetailPage.tsx b/src/pages/TeamDetailPage.tsx index 111a82088..78ac7c362 100644 --- a/src/pages/TeamDetailPage.tsx +++ b/src/pages/TeamDetailPage.tsx @@ -1,95 +1,97 @@ import { useParams } from "react-router-dom"; import { useEffect, useState } from "react"; -import { Carousel } from "react-responsive-carousel"; // Neue Library! -import "react-responsive-carousel/lib/styles/carousel.min.css"; // Wichtig! +import { Carousel } from "react-responsive-carousel"; +import "react-responsive-carousel/lib/styles/carousel.min.css"; -const teamData = [ - { - id: "1", - name: "Damen I", - league: "Landesliga Nord", - description: "Unsere erste Damenmannschaft spielt auf hohem Niveau und liebt den Volleyballsport.", - trainingTimes: "Dienstag & Donnerstag 19:00 - 21:00 Uhr", - images: [ - "/images/damen1-1.jpg", - "/images/damen1-2.jpg", - "/images/damen1-3.jpg", - ], - canJoin: false, - players: [ - { name: "Anna", position: "Außenangriff", nickname: "Speedy", image: "/images/anna.jpg" }, - { name: "Lea", position: "Libera", nickname: "Wall-E", image: "/images/lea.jpg" }, - { name: "Sophie", position: "Zuspiel", nickname: "Magic", image: "/images/sophie.jpg" }, - ], - }, - { - id: "2", - name: "Herren I", - league: "Landesliga", - description: "Das Team der Herren 1 ist tritt in der Saison 25/26 in der Landesliga beim NVV an.", - trainingTimes: "Montag & Freitag 20:00 - 22:00 Uhr", - images: [ - "/images/players/herren1/carousel/carousel2.jpg", - "/images/players/herren1/carousel/carousel2.jpg", - "/images/players/herren1/carousel/carousel2.jpg", - ], - canJoin: true, - players: [ - { name: "Samuel", position: "Mittelblock", nickname: "BeSamu", image: "/images/players/herren1/samuel.jpg" }, - { name: "Sten", position: "Außen/Annahme", nickname: "Stenislav", image: "/images/players/herren1/sten.jpg" }, - { name: "David", position: "Mittelblock", nickname: "Blocki", image: "/images/players/herren1/david.jpg" }, - { name: "Erik", position: "Libero", nickname: "Erika", image: "/images/players/herren1/erik.jpg" }, - { name: "Lasse", position: "Außen/Annahme", nickname: "Lass es!", image: "/images/players/herren1/lasse.jpg" }, - { name: "Peter", position: "Zuspieler", nickname: "-", image: "/images/players/herren1/peter.jpg" }, - { name: "Tony", position: "Zuspieler", nickname: "Tony Mahony", image: "/images/players/herren1/tony.jpg" }, - { name: "Marc", position: "Diagonal", nickname: "Marci", image: "/images/players/herren1/marc.jpg" }, - { name: "Phillip", position: "Libero", nickname: "Hifi", image: "/images/players/herren1/phillip.jpg" }, - { name: "Kathrin", position: "Trainerin", nickname: "Mutti", image: "/images/players/herren1/phillip.jpg" }, - { name: "DU?", position: "Alles", }, - ], - }, -]; +const apiBase = import.meta.env.VITE_API_URL; + +type Player = { + id: number; + name: string; + position: string; + nickname?: string; + image_url?: string; +}; + +type Team = { + id: number; + name: string; + liga?: string; + beschreibung?: string; + trainingszeiten?: string; + sucht_spieler?: boolean; + karussell_bilder?: string[]; // Wichtig: als Array erwartet! + players: Player[]; +}; const TeamDetailPage = () => { - const { id } = useParams(); - const team = teamData.find((t) => t.id === id); + const { id } = useParams<{ id: string }>(); + const [team, setTeam] = useState(null); + const [loading, setLoading] = useState(true); - if (!team) return

Team nicht gefunden 🐸

; + useEffect(() => { + const fetchTeam = async () => { + try { + const res = await fetch(`${apiBase}/api/teams/${id}`); + const data = await res.json(); + + // Falls karussell_bilder als String (JSON) kommt → parsen + if (typeof data.karussell_bilder === "string") { + data.karussell_bilder = JSON.parse(data.karussell_bilder); + } + + setTeam(data); + } catch (err) { + console.error("Fehler beim Laden des Teams:", err); + } finally { + setLoading(false); + } + }; + + fetchTeam(); + }, [id]); + + if (loading) return

Lade Teamdaten...

; + if (!team) return

Team nicht gefunden 🐸

; return (
{/* Karussell */} -
- - {team.images.map((src, index) => ( -
- {`Team -
- ))} - -
+ {team.karussell_bilder && team.karussell_bilder.length > 0 && ( +
+ + {team.karussell_bilder.map((src, index) => ( +
+ {`Bild +
+ ))} + +
+ )} {/* Team Info */}

{team.name}

-

{team.league}

-

{team.description}

-

Training: {team.trainingTimes}

+

{team.liga}

+

{team.beschreibung}

+

+ Training: {team.trainingszeiten || "Nicht angegeben"} +

- {/*Join Button */} - {team.canJoin && ( + + {/* Join Button */} + {team.sucht_spieler && (