feat: improve result page design

src/main/webapp/src/pages/result/ResultView.jsx

@@ -3,7 +3,7 @@ import {useLoadingSwitcher} from "../../hooks/useLoading.jsx";
 import {useFetch} from "../../hooks/useFetch.js";
 import {AxiosError} from "../../components/AxiosError.jsx";
 import {ThreeDots} from "react-loader-spinner";
-import {useEffect, useState} from "react";
+import React, {useEffect, useState} from "react";
 import {DrawGraph} from "./DrawGraph.jsx";
 import {TreeNode} from "../../utils/TreeUtils.js";
 import {scoreToString} from "../../utils/CompetitionTools.js";
@@ -17,50 +17,45 @@ function CupImg() {
 export function ResultView() {
     const {uuid} = useParams()
     const navigate = useNavigate();
-    const [resultShow, setResultShow] = useState(null)
-
-    const setLoading = useLoadingSwitcher()
-    const {data, error} = useFetch(`/result/${uuid}`, setLoading, 1)
+    const [resultShow, setResultShow] = useState("cat")
 
     return <>
         <button type="button" className="btn btn-link" onClick={() => navigate("/result")}>
             &laquo; retour
         </button>
 
-        {data ? <MenuBar data={data} resultShow={resultShow} setResultShow={setResultShow}/>
-            : error
-                ? <AxiosError error={error}/>
-                : <Def/>}
+        <MenuBar resultShow={resultShow} setResultShow={setResultShow}/>
 
-        <div className="row">
+        <div className="row" style={{marginTop: "1em"}}>
             <div className="col-auto">
-                {resultShow && resultShow.type !== undefined && <PouleResult data={resultShow}/>
-                    || resultShow && resultShow === "club" && <ClubResult uuid={uuid}/>
-                    || resultShow && resultShow === "comb" && <CombResult uuid={uuid}/>}
+                {resultShow && resultShow === "cat" && <CategoryList uuid={uuid}/>
+                    || resultShow && resultShow === "club" && <ClubList uuid={uuid}/>
+                    || resultShow && resultShow === "comb" && <CombList uuid={uuid}/>
+                    || resultShow && resultShow === "combs" && <CombsResult uuid={uuid}/>}
             </div>
         </div>
     </>
 }
+
 // || resultShow && resultShow === "club_all" && <ClubAllResult uuid={uuid}/>
 
-function MenuBar({data, resultShow, setResultShow}) {
+function MenuBar({resultShow, setResultShow}) {
     return <ul className="nav nav-tabs">
-        <li className="nav-item dropdown">
-            <a className={"nav-link dropdown-toggle my-1"} data-bs-toggle="dropdown" href="#"
-               aria-current={(resultShow?.type !== undefined ? " page" : "false")} role="button" aria-expanded="false">Catégorie</a>
-            <ul className="dropdown-menu">
-                {data.map(item => <li><a key={item.name} className={"dropdown-item" + (resultShow === item ? " active" : "")}
-                                         aria-current={(resultShow === item ? " page" : "false")} href="#" data-bs-toggle="collapse"
-                                         onClick={_ => setResultShow(item)}>{item.name}</a></li>)}
-            </ul>
+        <li className="nav-item">
+            <a className={"nav-link my-1" + (resultShow === "cat" ? " active" : "")} aria-current={(resultShow === "cat" ? " page" : "false")}
+               href="#" onClick={_ => setResultShow("cat")}>Par catégorie</a>
         </li>
         <li className="nav-item">
             <a className={"nav-link my-1" + (resultShow === "club" ? " active" : "")} aria-current={(resultShow === "club" ? " page" : "false")}
-               href="#" onClick={_ => setResultShow("club")}>Mon club</a>
+               href="#" onClick={_ => setResultShow("club")}>Par club</a>
         </li>
         <li className="nav-item">
             <a className={"nav-link my-1" + (resultShow === "comb" ? " active" : "")} aria-current={(resultShow === "comb" ? " page" : "false")}
-               href="#" onClick={_ => setResultShow("comb")}>Combattants</a>
+               href="#" onClick={_ => setResultShow("comb")}>Par combattant</a>
+        </li>
+        <li className="nav-item">
+            <a className={"nav-link my-1" + (resultShow === "combs" ? " active" : "")} aria-current={(resultShow === "combs" ? " page" : "false")}
+               href="#" onClick={_ => setResultShow("combs")}>Combattants</a>
         </li>
     </ul>
 
@@ -148,13 +143,51 @@ function BuildTree({treeData}) {
     return <DrawGraph root={initTree(treeData)}/>
 }
 
-function PouleResult({data}) {
-    const [type, setType] = useState(data.type === 3 ? 1 : data.type)
+function CategoryList({uuid}) {
+    const [catId, setCatId] = useState(null)
+    const setLoading = useLoadingSwitcher()
+    const {data, error} = useFetch(`/result/${uuid}/category/list`, setLoading, 1)
 
     useEffect(() => {
-        setType(data.type === 3 ? 1 : data.type)
+        if (data && Object.keys(data).length > 0)
+            setCatId(data[Object.keys(data).sort()[0]])
     }, [data]);
 
+    return <>
+        {data ? <div className="input-group" style={{marginBottom: "1em"}}>
+                <h6 style={{margin: "auto 0.5em auto 0"}}>Catégorie</h6>
+                <select className="form-select" aria-label="Select Result Type" onChange={e => setCatId(e.target.value)}>
+                    {Object.keys(data).sort().map(key => <option key={key} value={data[key]}>{key}</option>)}
+                </select>
+            </div>
+            : error
+                ? <AxiosError error={error}/>
+                : <Def/>}
+        {catId && <CategoryResult uuid={uuid} catId={catId}/>}
+    </>
+}
+
+function CategoryResult({uuid, catId}) {
+    const [type, setType] = useState(1)
+
+    const setLoading = useLoadingSwitcher()
+    const {data, refresh, error} = useFetch(`/result/${uuid}/category/${catId}`, setLoading, 1)
+
+    useEffect(() => {
+        refresh(`/result/${uuid}/category/${catId}`)
+    }, [catId]);
+
+    useEffect(() => {
+        if (data)
+            setType(data.type === 3 ? 1 : data.type)
+    }, [data]);
+
+    if (!data) {
+        return error
+            ? <AxiosError error={error}/>
+            : <Def/>
+    }
+
     return <>
         {data.type === 3 && <>
             <ul className="nav nav-tabs">
@@ -184,9 +217,37 @@ function PouleResult({data}) {
     </>
 }
 
-function ClubResult({uuid}) {
+function ClubList({uuid}) {
+    const [clubId, setClubId] = useState(null)
     const setLoading = useLoadingSwitcher()
-    const {data, error} = useFetch(`/result/${uuid}/club`, setLoading, 1)
+    const {data, error} = useFetch(`/result/${uuid}/club/list`, setLoading, 1)
+
+    useEffect(() => {
+        if (data && Object.keys(data).length > 0)
+            setClubId(data[Object.keys(data).sort()[0]])
+    }, [data]);
+
+    return <>
+        {data ? <div className="input-group" style={{marginBottom: "1em"}}>
+                <h6 style={{margin: "auto 0.5em auto 0"}}>Club</h6>
+                <select className="form-select" aria-label="Select Result Type" onChange={e => setClubId(e.target.value)}>
+                    {Object.keys(data).sort().map(key => <option key={key} value={data[key]}>{key}</option>)}
+                </select>
+            </div>
+            : error
+                ? <AxiosError error={error}/>
+                : <Def/>}
+        {clubId && <ClubResult uuid={uuid} clubId={clubId}/>}
+    </>
+}
+
+function ClubResult({uuid, clubId}) {
+    const setLoading = useLoadingSwitcher()
+    const {data, refresh, error} = useFetch(`/result/${uuid}/club/${clubId}`, setLoading, 1)
+
+    useEffect(() => {
+        refresh(`/result/${uuid}/club/${clubId}`)
+    }, [clubId]);
 
     return <>
         {data ? <>
@@ -242,25 +303,102 @@ function ClubResult({uuid}) {
     </>
 }
 
-/*function ClubAllResult({uuid}) {
-    return <div></div>
+function CombList({uuid}) {
+    const [combId, setCombId] = useState(null)
+    const setLoading = useLoadingSwitcher()
+    const {data, error} = useFetch(`/result/${uuid}/comb/list`, setLoading, 1)
 
-}*/
+    useEffect(() => {
+        if (data && Object.keys(data).length > 0)
+            setCombId(data[Object.keys(data).sort()[0]])
+    }, [data]);
 
-function CombResult({uuid}) {
+    return <>
+        {data ? <div className="input-group" style={{marginBottom: "1em"}}>
+                <h6 style={{margin: "auto 0.5em auto 0"}}>Combattant</h6>
+                <select className="form-select" aria-label="Select Result Type" onChange={e => setCombId(e.target.value)}>
+                    {Object.keys(data).sort().map(key => <option key={key} value={data[key]}>{key}</option>)}
+                </select>
+            </div>
+            : error
+                ? <AxiosError error={error}/>
+                : <Def/>}
+        {combId && <CombResult uuid={uuid} combId={combId}/>}
+    </>
+}
+
+function CombResult({uuid, combId}) {
+    const setLoading = useLoadingSwitcher()
+    const {data, refresh, error} = useFetch(`/result/${uuid}/comb/${combId}`, setLoading, 1)
+
+    useEffect(() => {
+        refresh(`/result/${uuid}/comb/${combId}`)
+    }, [combId]);
+
+
+    if (!data) {
+        return error
+            ? <AxiosError error={error}/>
+            : <Def/>
+    }
+
+    return <div>
+        <h3>Info :</h3>
+        <ul>
+            <li>Nom Prénom : {data.name}</li>
+            <li>Club : {data.club}</li>
+            <li>Catégorie : {data.cat}</li>
+        </ul>
+        <h3>Statistique :</h3>
+        <ul>
+            <li>Taux de victoire : {data.matchs.length === 0 ? "---" : (data.totalWin / data.matchs.length * 100).toFixed(0)}% ({data.totalWin} sur
+                ${data.matchs.length})
+            </li>
+            <li>Points marqués : {data.pointMake}</li>
+            <li>Points reçus : {data.pointTake}</li>
+            <li>Ratio du score (point marqué / point reçu): {data.pointRatio.toFixed(3)}</li>
+        </ul>
+
+        <h3>Liste des matchs:</h3>
+
+        <table className="table table-striped">
+            <thead>
+            <tr>
+                <th scope="col" style={{textAlign: "center"}}>Catégorie</th>
+                <th scope="col" style={{textAlign: "center"}}>Adversaire</th>
+                <th scope="col" style={{textAlign: "center"}}>Scores</th>
+                <th scope="col" style={{textAlign: "center"}}>Ratio</th>
+                <th scope="col" style={{textAlign: "center"}}></th>
+            </tr>
+            </thead>
+            <tbody>
+
+            {data.matchs.map((match, idx) => <tr key={idx}>
+                <td style={{textAlign: "center"}}>{match.poule}</td>
+                <td style={{textAlign: "center"}}>{match.adv}</td>
+                <td style={{textAlign: "center"}}>{scoreToString(match.score)}</td>
+                <td style={{textAlign: "center"}}>{match.ratio.toFixed(3)}</td>
+                <td style={{textAlign: "left"}}>{match.win ? <CupImg/> : ""}</td>
+            </tr>)}
+            </tbody>
+        </table>
+    </div>
+}
+
+function CombsResult({uuid}) {
     const setLoading = useLoadingSwitcher()
     const {data, error} = useFetch(`/result/${uuid}/comb`, setLoading, 1)
 
     return <>
         {data ? <>
-                <h3>Statistique :</h3>
+                <h3>Statistique :</h3>
                 <ul>
-                    <li>Nombre d'inscris : {data.nb_insc}</li>
-                    <li>Nombre de match disput&eacute; : {data.tt_match}</li>
-                    <li>Points marqués : {data.point}</li>
+                    <li>Nombre d'inscris : {data.nb_insc}</li>
+                    <li>Nombre de match disput&eacute; : {data.tt_match}</li>
+                    <li>Points marqués : {data.point}</li>
                 </ul>
 
-                <h3>Liste des combattants :</h3>
+                <h3>Liste des combattants :</h3>
 
                 <table className="table table-striped">
                     <thead>