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

Add Player button

Browse Source
This commit is contained in:
glax
2025-05-27 02:22:53 +02:00
parent 952d1804ad
commit 1df2506b8c
1 changed files with 25 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/App.tsx
View File

@ -8,7 +8,7 @@ import {ApiUriContext, getData} from "./api/fetchApi.tsx";
import {GetGames, GetPlayers} from "./api/endpoints/Data.tsx"; import {GetGames, GetPlayers} from "./api/endpoints/Data.tsx";
import { import {
AccordionGroup, AccordionGroup,
Box, CircularProgress, Box, Button, CircularProgress,
Divider, Divider,
Input, Input,
Stack, Stack,
@ -19,6 +19,7 @@ import PlayerAccordionItem from "./components/PlayerAccordionItem.tsx";
import PlayerGameStatsDrawer from "./components/PlayerGameStatsDrawer.tsx"; import PlayerGameStatsDrawer from "./components/PlayerGameStatsDrawer.tsx";
import {Cancel, CheckCircleOutline} from '@mui/icons-material'; import {Cancel, CheckCircleOutline} from '@mui/icons-material';
import {PlayerStatsDrawer} from "./components/PlayerStatsDrawer.tsx"; import {PlayerStatsDrawer} from "./components/PlayerStatsDrawer.tsx";
import {AddPlayer} from "./api/endpoints/Actions.tsx";
export default function App() { export default function App() {
const [apiUri, setApiUri] = useState<string>("http://127.0.0.1:5239"); const [apiUri, setApiUri] = useState<string>("http://127.0.0.1:5239");
@ -71,7 +72,6 @@ export default function App() {
}); });
} }
const [connectionTimer, setConnectionTimer] = useState<number | null>(null); const [connectionTimer, setConnectionTimer] = useState<number | null>(null);
useEffect(() => { useEffect(() => {
@ -81,21 +81,33 @@ export default function App() {
.then(() => setConnectionTimer(setInterval(checkConnection, 5000))); .then(() => setConnectionTimer(setInterval(checkConnection, 5000)));
}, [apiUri]); }, [apiUri]);
const [addPlayerStr, setAddPlayerStr] = useState("");
const addPlayer = () => {
const steamId = BigInt(addPlayerStr);
AddPlayer(apiUri, steamId);
}
return ( return (
<ApiUriContext value={apiUri}> <ApiUriContext value={apiUri}>
<PlayersContext.Provider value={{players: players}}> <PlayersContext.Provider value={{players: players}}>
<GamesContext value={{games: games}}> <GamesContext value={{games: games}}>
<Input type={"text"} <Stack direction="row" spacing={2} position={"fixed"} top={5}>
placeholder={"Api Uri"} <Input type={"text"}
value={apiUri} placeholder={"Api Uri"}
onChange={(e) => setApiUri(e.target.value)} value={apiUri}
endDecorator={checkingConnection onChange={(e) => setApiUri(e.target.value)}
? <CircularProgress sx={{height: "100%"}} /> endDecorator={checkingConnection
: connected ? <CircularProgress sx={{height: "100%"}} />
? <CheckCircleOutline color={"success"} /> : connected
: <Cancel color={"error"} />} ? <CheckCircleOutline color={"success"} />
/> : <Cancel color={"error"} />}
<Stack direction={"row"} spacing={2}> />
<Input type={"text"}
placeholder={"Add SteamId"}
onChange={(e) => setAddPlayerStr(e.target.value)}
endDecorator={<Button onClick={addPlayer}>Add</Button>}
/>
</Stack>
<Stack direction={"row"} spacing={2} overflow={"scroll"} position={"fixed"} top={50} width={"100%"} height={"calc(100% - 50px)"}>
<Box sx={{width:'50%'}}> <Box sx={{width:'50%'}}>
<Typography level={"h2"}>Players</Typography> <Typography level={"h2"}>Players</Typography>
<AccordionGroup> <AccordionGroup>