glax/SteamGameTimeTrack-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

SteamId, AppId

Browse Source
This commit is contained in:
glax
2025-05-26 17:41:15 +02:00
parent 4955e72d34
commit c91831594f
2 changed files with 42 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/GameAccordionItem.tsx
View File

@ -2,8 +2,8 @@ import type IGame from "../api/types/IGame.ts";
import { import {
Accordion, Accordion,
AccordionDetails, AccordionDetails,
AccordionSummary, AccordionSummary, CircularProgress,
Stack, Typography Stack, Tooltip, Typography
} from "@mui/joy"; } from "@mui/joy";
import type IPlayer from "../api/types/IPlayer.ts"; import type IPlayer from "../api/types/IPlayer.ts";
import {useContext, useEffect, useState} from "react"; import {useContext, useEffect, useState} from "react";
@ -16,19 +16,30 @@ export default function GameAccordionItem({game, OpenDrawer} : {game: IGame, Ope
const [players, setPlayers] = useState<IPlayer[]>([]); const [players, setPlayers] = useState<IPlayer[]>([]);
const [expanded, setExpanded] = useState<boolean>(false); const [expanded, setExpanded] = useState<boolean>(false);
const [loading, setLoading] = useState<boolean>(false);
useEffect(() => { useEffect(() => {
if(!expanded) if(!expanded)
return; return;
GetPlayersOfGame(apiUri, game.appId).then(setPlayers); setLoading(true);
GetPlayersOfGame(apiUri, game.appId)
.then(setPlayers)
.finally(() => setLoading(false));
}, [expanded]); }, [expanded]);
return ( return (
<Accordion key={game.appId} onChange={(_, expanded) => setExpanded(expanded)}> <Accordion key={game.appId} onChange={(_, expanded) => setExpanded(expanded)}>
<AccordionSummary><img src={game.iconUrl??"favicon.ico"} /><Typography level={"h4"}>{game.name}</Typography></AccordionSummary> <AccordionSummary>
<img src={game.iconUrl??"favicon.ico"} />
<Tooltip title={game.appId}>
<Typography level={"h4"}>{game.name}</Typography>
</Tooltip>
</AccordionSummary>
<AccordionDetails> <AccordionDetails>
<Stack flexWrap={"wrap"} direction={"row"} useFlexGap={true} spacing={1}> <Stack flexWrap={"wrap"} direction={"row"} spacing={1} useFlexGap>
{players?.map((player) => <PlayerCard player={player} onClick={() => OpenDrawer(player, game)} />)} {loading
? <CircularProgress />
: players?.map((player) => <PlayerCard player={player} onClick={() => OpenDrawer(player, game)} />)}
</Stack> </Stack>
</AccordionDetails> </AccordionDetails>
</Accordion> </Accordion>

31
src/components/PlayerAccordionItem.tsx
View File

@ -2,33 +2,52 @@ import type IGame from "../api/types/IGame.ts";
import { import {
Accordion, Accordion,
AccordionDetails, AccordionDetails,
AccordionSummary, AccordionSummary, Button, CircularProgress,
Stack, Typography Stack, Tooltip, Typography
} from "@mui/joy"; } from "@mui/joy";
import type IPlayer from "../api/types/IPlayer.ts"; import type IPlayer from "../api/types/IPlayer.ts";
import {useContext, useEffect, useState} from "react"; import {useContext, useEffect, useState} from "react";
import {ApiUriContext} from "../api/fetchApi.tsx"; import {ApiUriContext} from "../api/fetchApi.tsx";
import {GetGamesOfPlayer} from "../api/endpoints/Data.tsx"; import {GetGamesOfPlayer} from "../api/endpoints/Data.tsx";
import GameCard from "./GameCard.tsx"; import GameCard from "./GameCard.tsx";
import {GetTotal} from "../api/endpoints/TimeTrack.tsx";
export default function PlayerAccordionItem({player, OpenDrawer} : {player: IPlayer, OpenDrawer : (player: IPlayer, game: IGame) => void}) { export default function PlayerAccordionItem({player, OpenDrawer} : {player: IPlayer, OpenDrawer : (player: IPlayer, game: IGame) => void}) {
const apiUri = useContext(ApiUriContext); const apiUri = useContext(ApiUriContext);
const [games, setGames] = useState<IGame[]>([]); const [games, setGames] = useState<IGame[]>([]);
const [expanded, setExpanded] = useState<boolean>(false); const [expanded, setExpanded] = useState<boolean>(false);
const [loadingGames, setLoadingGames] = useState<boolean>(false);
const [totalTime, setTotalTime] = useState<bigint>(BigInt(0));
useEffect(() => { useEffect(() => {
if(!expanded) if(!expanded)
return; return;
GetGamesOfPlayer(apiUri, player.steamId).then(setGames); setLoadingGames(true);
GetGamesOfPlayer(apiUri, player.steamId)
.then(setGames)
.finally(() => setLoadingGames(false));
GetTotal(apiUri, player.steamId)
.then(setTotalTime)
}, [expanded]); }, [expanded]);
return ( return (
<Accordion key={player.steamId} onChange={(_, expanded) => setExpanded(expanded)}> <Accordion key={player.steamId} onChange={(_, expanded) => setExpanded(expanded)}>
<AccordionSummary><img src={player.avatarUrl} /><Typography level={"h4"}>{player.name}</Typography></AccordionSummary> <AccordionSummary>
<img src={player.avatarUrl} />
<Tooltip title={player.steamId}>
<Typography level={"h4"}>{player.name}</Typography>
</Tooltip>
</AccordionSummary>
<AccordionDetails> <AccordionDetails>
<Stack flexWrap={"wrap"} direction={"row"} useFlexGap={true} spacing={1}> <Stack flexWrap={"nowrap"} direction={"row"} alignContent={"center"} spacing={2} useFlexGap marginBottom={"10px"}>
{games?.map((game) => <GameCard game={game} onClick={() => OpenDrawer(player, game)} />)} <Button>All Games</Button>
<Typography level={"h4"} >Total Time: {totalTime}</Typography>
</Stack>
<Stack flexWrap={"wrap"} direction={"row"} spacing={1} useFlexGap>
{loadingGames
? <CircularProgress />
: games?.map((game) => <GameCard game={game} onClick={() => OpenDrawer(player, game)} />)}
</Stack> </Stack>
</AccordionDetails> </AccordionDetails>
</Accordion> </Accordion>