リーグ編成画面 Feature/#21 league

app/(authenticated)/league/[id]/page.tsx

@@ -1,21 +1,24 @@
 import {Breadcrumbs, Link, Stack, Typography} from "@mui/material";
 import CardBackground from "@/components/layout/cardBackground";
 import LeagueDnd from "@/components/league/leagueDnd";
+import {sportFactory} from "@/src/models/SportModel";
 
-export default function LeagueTestPage() {
+export default async function LeagueTestPage({params}: { params: { id: string } }) {
+    const sportId = parseInt(params.id, 10)
+    const sport = await sportFactory().show(sportId)
     return (
         <Stack spacing={2} mx={2} my={3}>
             <Breadcrumbs aria-label="breadcrumb" sx={{pl:2}}>
                 <Link underline="hover" color="inherit" href="/">
                     管理者のダッシュボード
                 </Link>
-                <Link underline="hover" color="inherit" href="/league">
+                <Link underline="hover" color="inherit" href="../../league">
                     リーグ管理
                 </Link>
-                <Typography color="text.primary">競技名</Typography>
+                <Typography color="text.primary">{sport.name}</Typography>
             </Breadcrumbs>
-            <CardBackground title={"どの競技のリーグを管理しますか？"}>
-                <LeagueDnd/>
+            <CardBackground title={`${sport.name}のリーグ`}>
+                <LeagueDnd sport={sport} sportId={sportId}/>
             </CardBackground>
         </Stack>
     );

app/(authenticated)/league/page.tsx

@@ -1,9 +1,11 @@
 import {Stack, Grid, Typography, Link, Breadcrumbs} from "@mui/material";
 import CardBackground from "@/components/layout/cardBackground";
-import CardLarge from "@/components/layout/cardLarge";
-import {ButtonLarge} from "@/components/layout/buttonLarge";
+import {sportFactory} from "@/src/models/SportModel";
+import LeagueSportsList from "@/components/league/leagueSportsList";
 
-export default function LeaguePage() {
+
+export default async function LeaguePage() {
+    const sports = await sportFactory().index()
     return (
         <Stack spacing={2} mx={2} my={3}>
             <Breadcrumbs aria-label="breadcrumb" sx={{pl:2}}>
@@ -14,24 +16,7 @@ export default function LeaguePage() {
             </Breadcrumbs>
             <CardBackground title={"どの競技のリーグを管理しますか？"}>
                 <Grid container spacing={1}>
-                    <ButtonLarge img={"a"}>
-                        バスケットボール
-                    </ButtonLarge>
-                    <ButtonLarge img={"a"}>
-                        ドッジビー
-                    </ButtonLarge>
-                    <ButtonLarge img={"a"}>
-                        フットサル
-                    </ButtonLarge>
-                    <ButtonLarge img={"a"}>
-                        ビーチボール
-                    </ButtonLarge>
-                    <ButtonLarge img={"a"}>
-                        ペタンク
-                    </ButtonLarge>
-                    <ButtonLarge img={"a"}>
-                        ストラックアウト
-                    </ButtonLarge>
+                    <LeagueSportsList sports={sports}/>
                 </Grid>
             </CardBackground>
         </Stack>

app/(authenticated)/loading.tsx

@@ -0,0 +1,26 @@
+'use client'
+import {useEffect, useState} from "react";
+import {Stack, Skeleton, Box, LinearProgress, Backdrop} from "@mui/material";
+import CardBackground from "@/components/layout/cardBackground";
+
+export default function Loading() {
+    const [backdropOpen, setBackdropOpen] = useState<boolean>(false)
+
+    useEffect(() => {
+        setBackdropOpen(true)
+    }, [])
+
+    return(
+        <>
+            <Backdrop open={backdropOpen} sx={{backgroundColor:"rgba(239,240,248, 0.4)", zIndex: 1}}/>
+            <Stack spacing={2} mx={2} my={3}>
+                <Skeleton animation="wave" variant="text" width={300} height={18} />
+                <CardBackground>
+                    <Box width="100%">
+                        <LinearProgress/>
+                    </Box>
+                </CardBackground>
+            </Stack>
+        </>
+    )
+}

app/(authenticated)/locations/page.tsx

@@ -0,0 +1,19 @@
+import {Breadcrumbs, Link, Stack, Typography} from "@mui/material";
+import CardBackground from "@/components/layout/cardBackground";
+import TeamsAgGrid from "@/components/teams/teamsTable";
+
+export default function  LocationPage() {
+    return (
+        <Stack spacing={1} mx={2} my={3}>
+            <Breadcrumbs aria-label="breadcrumb" sx={{pl:2}}>
+                <Link underline="hover" color="inherit" href="/public">
+                    管理者のダッシュボード
+                </Link>
+                <Typography color="text.primary">場所管理</Typography>
+            </Breadcrumbs>
+            <CardBackground title={"すべての場所"} button={"場所を新規作成"}>
+                none
+            </CardBackground>
+        </Stack>
+    )
+}

app/(authenticated)/page.tsx

@@ -1,40 +1,25 @@
-import {Breadcrumbs, Grid, Link, Stack, Typography} from "@mui/material";
+import {Breadcrumbs, Grid, Stack, Typography} from "@mui/material";
 import CardBackground from "@/components/layout/cardBackground";
-import {ButtonLarge} from "@/components/layout/buttonLarge";
 import CardLarge from "@/components/layout/cardLarge";
 import CardList from "@/components/layout/cardList";
+import SportsList from "@/components/sports/sportsList";
+import {sportFactory} from "@/src/models/SportModel";
 
-export default function Home() {
+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}}>
                 <Typography color="text.primary">管理者のダッシュボード</Typography>
             </Breadcrumbs>
-            <CardBackground title={"競技を選ぶ"} button={"競技を作成・編集する"} link={"users"}>
+            <CardBackground title={"競技を選ぶ"} button={"競技を作成・編集する"} link={"/sports"}>
                 <Grid container spacing={1}>
-                    <ButtonLarge img={"a"}>
-                        バスケットボール
-                    </ButtonLarge>
-                    <ButtonLarge img={"a"}>
-                        ドッジビー
-                    </ButtonLarge>
-                    <ButtonLarge img={"a"}>
-                        フットサル
-                    </ButtonLarge>
-                    <ButtonLarge img={"a"}>
-                        ビーチボール
-                    </ButtonLarge>
-                    <ButtonLarge img={"a"}>
-                        ペタンク
-                    </ButtonLarge>
-                    <ButtonLarge img={"a"}>
-                        ストラックアウト
-                    </ButtonLarge>
+                    <SportsList sports={sports}/>
                 </Grid>
             </CardBackground>
             <CardBackground title={"配信中のお知らせ"} button={"お知らせを作成・編集"}>
                 <CardLarge>
-                    現在集計中です。教室で放送による結果発表をお待ちください。
+                    この機能は開発中です
                 </CardLarge>
             </CardBackground>
             <CardBackground title={"現在進行中の試合"}>

app/(authenticated)/sports/[id]/page.tsx

@@ -1,39 +1,35 @@
 import CardBackground from "@/components/layout/cardBackground";
-import {SportInfoField} from "@/components/sports/sportInfoField";
-import {Accordion, AccordionSummary, AccordionDetails, Stack, Grid, Link, Typography, Breadcrumbs} from "@mui/material";
+import {Stack, Grid, Link, Typography, Breadcrumbs} from "@mui/material";
 import {ButtonLarge} from "@/components/layout/buttonLarge";
-import {HiChevronDown} from "react-icons/hi2";
 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";
+
+export default async function SportPage({params}: { params: { id: string } }) {
+    const sportId = parseInt(params.id, 10)
+    const sport = await sportFactory().show(sportId)
+    const games = await gameFactory().index()
+    const filteredGames = games.filter((game) => game.sportId == sportId)
 
-export default function SportPage() {
     return(
         <Stack spacing={1} mx={2} my={3}>
             <Breadcrumbs aria-label="breadcrumb" sx={{pl:2}}>
                 <Link underline="hover" color="inherit" href="/">
                     管理者のダッシュボード
                 </Link>
-                <Link underline="hover" color="inherit" href="/sports">
+                <Link underline="hover" color="inherit" href="../../sports">
                     競技管理
                 </Link>
-                <Typography color="text.primary">競技名</Typography>
+                <Typography color="text.primary">{sport.name}</Typography>
             </Breadcrumbs>
-            <CardBackground title={"競技名"}>
-                <Accordion sx={{backgroundColor:"primary.main", color:"secondary.main", borderRadius:"10px"}}>
-                    <AccordionSummary
-                        aria-controls="panel-content"
-                        id="panel-header"
-                    >
-                        <Typography>詳細を見る・編集する</Typography>
-                    </AccordionSummary>
-                    <AccordionDetails>
-                        <SportInfoField/>
-                    </AccordionDetails>
-                </Accordion>
+            <CardBackground title={`${sport.name}`}>
+                <SportEditor sport={sport}/>
             </CardBackground>
             <CardBackground title={"リーグ一覧"} button={"編集"}>
                 <Grid container spacing={1}>
-                    <ButtonLarge>Aリーグ</ButtonLarge>
-                    <ButtonLarge>Bリーグ</ButtonLarge>
+                    <LeagueList games={filteredGames}/>
                 </Grid>
             </CardBackground>
             <CardBackground title={"競技名の現在進行中の試合"}>

app/(authenticated)/sports/create/page.tsx

@@ -0,0 +1,23 @@
+import {Stack, Breadcrumbs, Link, Typography} from "@mui/material";
+import CardBackground from "@/components/layout/cardBackground";
+import SportCreator from "@/components/sports/sportCreator";
+
+export default async function CreateSport() {
+    return (
+        <Stack spacing={1} mx={2} my={3}>
+            <Breadcrumbs aria-label="breadcrumb" sx={{pl: 2}}>
+                <Link underline="hover" color="inherit" href="/">
+                    管理者のダッシュボード
+                </Link>
+                <Link underline="hover" color="inherit" href="../../sports" >
+                    競技管理
+                </Link>
+                <Typography color="text.primary">競技を新規作成</Typography>
+            </Breadcrumbs>
+
+            <CardBackground title={"競技を新規作成"} link={"/sports/create"}>
+                <SportCreator/>
+            </CardBackground>
+        </Stack>
+    );
+}

app/(authenticated)/sports/page.tsx

@@ -1,10 +1,11 @@
 import {Breadcrumbs, Grid, Link, Stack, Typography} from "@mui/material";
 import CardBackground from "@/components/layout/cardBackground";
-import CardLarge from "@/components/layout/cardLarge";
-import {ButtonLarge} from "@/components/layout/buttonLarge";
-import {SportInfoField} from "@/components/sports/sportInfoField";
+import SportsList from "@/components/sports/sportsList";
+import {sportFactory} from "@/src/models/SportModel";
+
+export default async function SportsPage() {
+    const sports = await sportFactory().index()
 
-export default function SportsPage() {
     return (
         <Stack spacing={2} mx={2} my={3}>
             <Breadcrumbs aria-label="breadcrumb" sx={{pl:2}}>
@@ -13,33 +14,9 @@ export default function SportsPage() {
                 </Link>
                 <Typography color="text.primary">競技管理</Typography>
             </Breadcrumbs>
-            <CardBackground title={"競技一覧"}>
-                <Grid container spacing={1}>
-                    <ButtonLarge img={"a"}>
-                        バスケットボール
-                    </ButtonLarge>
-                    <ButtonLarge img={"a"}>
-                        ドッジビー
-                    </ButtonLarge>
-                    <ButtonLarge img={"a"}>
-                        フットサル
-                    </ButtonLarge>
-                    <ButtonLarge img={"a"}>
-                        ビーチボール
-                    </ButtonLarge>
-                    <ButtonLarge img={"a"}>
-                        ペタンク
-                    </ButtonLarge>
-                    <ButtonLarge img={"a"}>
-                        ストラックアウト
-                    </ButtonLarge>
-                </Grid>
-            </CardBackground>
-            <CardBackground title={"競技を管理"} button={"競技を追加"}>
+            <CardBackground title={"競技一覧"} button={"競技を新規作成"} link={"/sports/create"}>
                 <Grid container spacing={1}>
-                    <SportInfoField/>
-                    <SportInfoField/>
-                    <SportInfoField/>
+                    <SportsList sports={sports}/>
                 </Grid>
             </CardBackground>
         </Stack>

app/(authenticated)/users/csv/page.tsx

@@ -3,7 +3,7 @@ import CardBackground from "@/components/layout/cardBackground";
 import {classFactory} from "@/src/models/ClassModel";
 import UserCreatingAutomation from "@/components/users/csv/userCreatingAutomation";
 
-export default async function UsersPage() {
+export default async function UsersCsv() {
     const classes = await classFactory().index()
 
     return (

app/error.tsx

@@ -0,0 +1,51 @@
+'use client'
+import {useEffect} from "react";
+import {Stack, Typography, Button} from "@mui/material";
+import WiderLogo from "@/components/svg/wider";
+
+export default function Error({
+                                  error,
+                                  reset,
+                              }: {
+    error: Error & { digest?: string }
+    reset: () => void
+}) {
+    useEffect(() => {
+        // Log the error to an error reporting service
+        console.error(error)
+    }, [error])
+
+    return (
+        <Stack height="100vh" width="100vw" justifyContent="center" alignItems="center" sx={{background:"radial-gradient(ellipse at left, #5F6DC2, #3E4EB3)"}}>
+            <Stack maxWidth={"500px"} mx={2} justifyContent="center" alignItems="center" spacing={1.5}>
+                <Typography fontSize={"25px"} fontWeight={"400"} color={"#c7cbe5"}>(T . T)</Typography>
+                <Typography pb={3} fontSize={"25px"} fontWeight={"600"} color={"#EFF0F8"}>問題が発生しました</Typography>
+                <Typography fontSize={"18px"} fontWeight={"400"} color={"#c7cbe5"}>詳細はコンソールから確認してください。繰り返し発生している場合は、開発者に連絡してください。</Typography>
+                <Button
+                    variant="contained"
+                    color="primary"
+                    href={"/"}
+                    sx={{py:1.5, width:"100%"}}
+                    disableElevation
+                >
+                    トップに戻る
+                </Button>
+                <Button
+                    variant="contained"
+                    color="primary"
+                    onClick = { () => reset()}
+                    sx={{py:1.5, width:"100%"}}
+                    disableElevation
+                >
+                    再試行
+                </Button>
+                <Button>
+                    <Stack direction={"row"} spacing={0.5}>
+                        <Typography fontWeight={"600"} color={"#99a5d6"}>(C)2024</Typography>
+                        <WiderLogo/>
+                    </Stack>
+                </Button>
+            </Stack>
+        </Stack>
+    )
+}

app/not-found.tsx

@@ -0,0 +1,29 @@
+import {Stack, Typography, Button} from "@mui/material";
+import WiderLogo from "@/components/svg/wider";
+
+export default function NotFound(){
+    return (
+        <Stack height="100vh" width="100vw" justifyContent="center" alignItems="center" sx={{background:"radial-gradient(ellipse at left, #5F6DC2, #3E4EB3)"}}>
+            <Stack maxWidth={"500px"} mx={2} justifyContent="center" alignItems="center" spacing={1.5}>
+                <Typography fontSize={"25px"} fontWeight={"400"} color={"#c7cbe5"}>(T . T)</Typography>
+                <Typography pb={3} fontSize={"25px"} fontWeight={"600"} color={"#EFF0F8"}>404 - Not Found</Typography>
+                <Typography fontSize={"18px"} fontWeight={"400"} color={"#c7cbe5"}>ページが存在しません。存在するはずのページで繰り返し発生している場合は、開発者に連絡してください。</Typography>
+                <Button
+                    variant="contained"
+                    color="primary"
+                    href={"/"}
+                    sx={{py:1.5, width:"100%"}}
+                    disableElevation
+                >
+                    トップに戻る
+                </Button>
+                <Button>
+                    <Stack direction={"row"} spacing={0.5}>
+                        <Typography fontWeight={"600"} color={"#99a5d6"}>(C)2024</Typography>
+                        <WiderLogo/>
+                    </Stack>
+                </Button>
+            </Stack>
+        </Stack>
+    )
+}