Merge pull request #40 from Sports-day/feature/match-list

試合に関するコンポーネントの修正と一覧表示コンポーネントの作成
Sports-day · May 19, 2024 · af8670f · af8670f
2 parents 3d0d953 + ab5047e
commit af8670f
Show file tree

Hide file tree

Showing 9 changed files with 539 additions and 467 deletions.
diff --git a/app/(authenticated)/page.tsx b/app/(authenticated)/page.tsx
@@ -1,15 +1,15 @@
-import {Breadcrumbs, Grid, Stack, Typography} from "@mui/material";
-import CardBackground from "@/components/layout/cardBackground";
-import CardLarge from "@/components/layout/cardLarge";
-import CardList from "@/components/layout/cardList";
-import SportsList from "@/components/sports/sportsList";
-import {sportFactory} from "@/src/models/SportModel";
+import {Breadcrumbs, Grid, Stack, Typography} from "@mui/material"
+import CardBackground from "@/components/layout/cardBackground"
+import CardLarge from "@/components/layout/cardLarge"
+import SportsList from "@/components/sports/sportsList"
+import {sportFactory} from "@/src/models/SportModel"
+import InProgressMatchList from "@/components/match/inProgressMatchList"
 
 export default async function Home() {
     const sports = await sportFactory().index()
     return (
         <Stack spacing={2} mx={2} my={3}>
-            <Breadcrumbs aria-label="breadcrumb" sx={{pl:2}}>
+            <Breadcrumbs aria-label="breadcrumb" sx={{pl: 2}}>
                 <Typography color="text.primary">管理者のダッシュボード</Typography>
             </Breadcrumbs>
             <CardBackground title={"配信中のお知らせ"} button={"お知らせを作成・編集"}>
@@ -23,69 +23,8 @@ export default async function Home() {
                 </Grid>
             </CardBackground>
             <CardBackground title={"進行中の全ての試合から選ぶ"}>
-                <Grid container spacing={1}>
-                    <CardList
-                        sport={"バスケットボール"}
-                        league={"Aリーグ"}
-                        judge={"M5-a"}
-                        left={"M1-a"}
-                        right={"エコ1"}
-                        time={"10:00"}
-                        location={"第二体育館"}
-                    >
-                    </CardList>
-                    <CardList
-                        sport={"バスケットボール"}
-                        league={"Aリーグ"}
-                        judge={"M5-a"}
-                        left={"M1-a"}
-                        right={"エコ1"}
-                        time={"10:00"}
-                        location={"第二体育館"}
-                    >
-                    </CardList>
-                    <CardList
-                        sport={"バスケットボール"}
-                        league={"Aリーグ"}
-                        judge={"M5-a"}
-                        left={"M1-a"}
-                        right={"エコ1"}
-                        time={"10:00"}
-                        location={"第二体育館"}
-                    >
-                    </CardList>
-                    <CardList
-                        sport={"バスケットボール"}
-                        league={"Aリーグ"}
-                        judge={"M5-a"}
-                        left={"M1-a"}
-                        right={"エコ1"}
-                        time={"10:00"}
-                        location={"第二体育館"}
-                    >
-                    </CardList>
-                    <CardList
-                        sport={"バスケットボール"}
-                        league={"Aリーグ"}
-                        judge={"M5-a"}
-                        left={"M2-a"}
-                        right={"エコ1"}
-                        time={"10:00"}
-                        location={"第二体育館"}
-                    >
-                    </CardList>
-                    <CardList
-                        sport={"バスケットボール"}
-                        league={"Aリーグ"}
-                        judge={"M5-a"}
-                        left={"M1-a"}
-                        right={"エコ1"}
-                        time={"10:00"}
-                        location={"第二体育館"}
-                    >
-                    </CardList>
-                </Grid>
+                <InProgressMatchList/>
             </CardBackground>
         </Stack>
-    );
+    )
 }
diff --git a/app/(authenticated)/sports/[id]/games/[gameId]/page.tsx b/app/(authenticated)/sports/[id]/games/[gameId]/page.tsx
@@ -1,15 +1,16 @@
 import CardBackground from "@/components/layout/cardBackground";
-import {Stack, Grid, Link, Typography, Breadcrumbs} from "@mui/material";
-import CardList from "@/components/layout/cardList";
+import {Stack, Link, Typography, Breadcrumbs} from "@mui/material";
 import {sportFactory} from "@/src/models/SportModel";
 import {gameFactory} from "@/src/models/GameModel";
+import MatchList from "@/components/match/matchList";
 import LeagueTable from "@/components/league/table/leagueTable";
 
 export default async function GamePage({params}: { params: { gameId:string, id: string } }) {
     const gameId = parseInt(params.gameId, 10)
     const game = await gameFactory().show(gameId)
     const sportId = parseInt(params.id, 10)
     const sport = await sportFactory().show(sportId)
+    const matchList = await gameFactory().getGameMatches(gameId)
 
     return(
         <Stack spacing={1} mx={2} my={3}>
@@ -28,10 +29,10 @@ export default async function GamePage({params}: { params: { gameId:string, id:
             <CardBackground title={`${game.name}のリーグ表`}>
                 <LeagueTable game={game} sport={sport} />
             </CardBackground>
-            <CardBackground title={`${game.name}の進行中の試合`}>
-                <Grid container>
-                    <CardList sport={"a"} league={"a"} judge={"a"} left={"a"} right={"a"} time={"11:11"} location={"a"}/>
-                </Grid>
+            <CardBackground title={`${game.name}試合一覧`}>
+                <MatchList
+                    matches={matchList}
+                />
             </CardBackground>
         </Stack>
     )

diff --git a/app/(authenticated)/sports/[id]/page.tsx b/app/(authenticated)/sports/[id]/page.tsx
@@ -1,10 +1,10 @@
 import CardBackground from "@/components/layout/cardBackground";
 import {Stack, Grid, Link, Typography, Breadcrumbs} from "@mui/material";
-import CardList from "@/components/layout/cardList";
 import {sportFactory} from "@/src/models/SportModel";
 import SportEditor from "@/components/sports/sportEditor";
 import LeagueList from "@/components/sports/leagueList";
 import {gameFactory} from "@/src/models/GameModel";
+import SportInProgressMatchList from "@/components/match/sportInProgressMatchList";
 
 export default async function SportPage({params}: { params: { id: string } }) {
     const sportId = parseInt(params.id, 10)
@@ -42,9 +42,7 @@ export default async function SportPage({params}: { params: { id: string } }) {
                 <SportEditor sport={sport}/>
             </CardBackground>
             <CardBackground title={`${sport.name}の進行中の試合`}>
-                <Grid container>
-                    <CardList sport={"a"} league={"a"} judge={"a"} left={"a"} right={"a"} time={"11:11"} location={"a"}/>
-                </Grid>
+                <SportInProgressMatchList sport={sport}/>
             </CardBackground>
         </Stack>
     )

diff --git a/components/match/inProgressMatchList.tsx b/components/match/inProgressMatchList.tsx
@@ -0,0 +1,31 @@
+import {gameFactory} from "@/src/models/GameModel"
+import {Match, matchFactory} from "@/src/models/MatchModel"
+import MatchList from "@/components/match/matchList"
+
+export default async function InProgressMatchList() {
+    //  get all games
+    const games = await gameFactory().index()
+    const matches = await matchFactory().index()
+
+    const matchList: Match[] = []
+    for (const game of games) {
+        //  get all matches
+        const filteredMatches = matches.filter((match) => match.gameId == game.id)
+        //  filter matches that are not finished
+        const inProgressMatches = filteredMatches.filter((match) => match.status == "standby" || match.status == "in_progress")
+
+        //  sort by start time
+        inProgressMatches.sort((a, b) => {
+            return new Date(a.startAt).getTime() - new Date(b.startAt).getTime()
+        })
+
+        console.log(inProgressMatches[0])
+
+        //  pick the first match
+        matchList.push(inProgressMatches[0])
+    }
+
+    return (
+        <MatchList matches={matchList}/>
+    )
+}
diff --git a/components/layout/cardList.tsx → components/match/matchCard.tsx b/components/layout/cardList.tsx → components/match/matchCard.tsx
@@ -1,22 +1,37 @@
 import {Grid, Button, Avatar, Chip, Stack, Tooltip, Divider} from "@mui/material";
-import React, {ReactNode} from 'react';
 import {HiClock, HiFlag, HiMapPin, HiTableCells, HiUserGroup} from "react-icons/hi2";
+import {Match} from "@/src/models/MatchModel";
+import {sportFactory} from "@/src/models/SportModel";
+import {gameFactory} from "@/src/models/GameModel";
+import {locationFactory} from "@/src/models/LocationModel";
+import {teamFactory} from "@/src/models/TeamModel";
 
-type CardProps = {
-    link?: string;
-    sport: string;
-    league: string;
-    judge: string;
-    left: string;
-    right: string;
-    time: string;
-    location: string;
+type MatchCardProps = {
+    match: Match
 }
 
-const CardList: React.FC<CardProps> = ({link, location, sport, league, judge, left, right, time}) => {
+export default async function MatchCard(props: MatchCardProps) {
+    const sport = await sportFactory().show(props.match.sportId)
+    const game = await gameFactory().show(props.match.gameId)
+    const location = props.match.locationId == null ? undefined : await locationFactory().show(props.match.locationId)
+    const leftTeam = props.match.leftTeamId == null ? undefined : await teamFactory().show(props.match.leftTeamId)
+    const rightTeam = props.match.rightTeamId == null ? undefined : await teamFactory().show(props.match.rightTeamId)
+    const judgeTeam = props.match.judgeTeamId == null ? undefined : await teamFactory().show(props.match.judgeTeamId)
+
+    const date = new Date(props.match.startAt)
+    const formattedDate = `${date.getHours()}時${date.getMinutes() < 10 ? '0' : ''}${date.getMinutes()}分`
+
     return (
         <Grid item xs={12} sm={6} md={4} lg={3}>
-            <Button variant={"contained"} sx={{width: "100%", py: 2, px: 2}} href={link}>
+            <Button
+                variant={"contained"}
+                sx={{
+                    width: "100%",
+                    py: 2,
+                    px: 2
+                }}
+                href={`/sports/${props.match.sportId}/games/${props.match.gameId}/matches/${props.match.id}`}
+            >
                 <Stack
                     width={"100%"}
                     spacing={1}
@@ -25,26 +40,26 @@ const CardList: React.FC<CardProps> = ({link, location, sport, league, judge, le
                 >
 
                     <Stack direction={"row"} spacing={0.1}>
-                        <Tooltip title={`競技 | ${sport}`} placement={"top"} arrow>
+                        <Tooltip title={`競技 | ${sport.name}`} placement={"top"} arrow>
                             <Chip
                                 color="primary"
                                 size={"small"}
                                 avatar={<Avatar></Avatar>}
                             />
                         </Tooltip>
 
-                        <Tooltip title={`試合会場 | ${location}`} placement={"top"} arrow>
+                        <Tooltip title={`試合会場 | ${location?.name ?? "未登録"}`} placement={"top"} arrow>
                             <Chip
                                 color="primary"
                                 size={"small"}
                                 icon={<HiMapPin/>}
                             />
                         </Tooltip>
 
-                        <Tooltip title={`試合開始時刻 | ${time}`} placement={"top"} arrow>
+                        <Tooltip title={`試合開始時刻 | ${formattedDate}`} placement={"top"} arrow>
                             <Chip
                                 color="primary"
-                                label={time}
+                                label={formattedDate}
                                 size={"small"}
                                 icon={<HiClock/>}
                             />
@@ -57,11 +72,11 @@ const CardList: React.FC<CardProps> = ({link, location, sport, league, judge, le
                         spacing={1}
                         width={"100%"}
                         sx={{
-                            borderRadius:"10px",
-                            backgroundColor:"#7f8cd6",
-                            p:1.5,
-                            overflow:"auto"
-                    }}
+                            borderRadius: "10px",
+                            backgroundColor: "#7f8cd6",
+                            p: 1.5,
+                            overflow: "auto"
+                        }}
                     >
 
                         <Stack
@@ -72,18 +87,18 @@ const CardList: React.FC<CardProps> = ({link, location, sport, league, judge, le
 
                             <Tooltip title={"リーグ"} placement={"top"} arrow>
                                 <Chip
-                                    sx={{px:0.5}}
+                                    sx={{px: 0.5}}
                                     color="info"
-                                    label={league}
+                                    label={game.name ?? "不明"}
                                     icon={<HiTableCells/>}
                                 />
                             </Tooltip>
 
                             <Tooltip title={"審判のチーム"} placement={"top"} arrow>
                                 <Chip
-                                    sx={{px:0.5}}
+                                    sx={{px: 0.5}}
                                     color="info"
-                                    label={judge}
+                                    label={judgeTeam?.name ?? "未登録"}
                                     icon={<HiFlag/>}
                                 />
                             </Tooltip>
@@ -96,9 +111,9 @@ const CardList: React.FC<CardProps> = ({link, location, sport, league, judge, le
                         >
                             <Tooltip title={"対戦するチーム"} placement={"top"} arrow>
                                 <Chip
-                                    sx={{px:0.5}}
+                                    sx={{px: 0.5}}
                                     color="info"
-                                    label={`${left} vs ${right}`}
+                                    label={`${leftTeam?.name ?? "未登録"} vs ${rightTeam?.name ?? "未登録"}`}
                                     icon={<HiUserGroup/>}
                                 />
                             </Tooltip>
@@ -110,5 +125,3 @@ const CardList: React.FC<CardProps> = ({link, location, sport, league, judge, le
         </Grid>
     );
 };
-
-export default CardList;