diff --git a/src/App.tsx b/src/App.tsx index 3dc3645..9b18edb 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -8,7 +8,7 @@ import {ApiUriContext, getData} from "./api/fetchApi.tsx"; import {GetGames, GetPlayers} from "./api/endpoints/Data.tsx"; import { AccordionGroup, - Box, CircularProgress, + Box, Button, CircularProgress, Divider, Input, Stack, @@ -19,6 +19,7 @@ import PlayerAccordionItem from "./components/PlayerAccordionItem.tsx"; import PlayerGameStatsDrawer from "./components/PlayerGameStatsDrawer.tsx"; import {Cancel, CheckCircleOutline} from '@mui/icons-material'; import {PlayerStatsDrawer} from "./components/PlayerStatsDrawer.tsx"; +import {AddPlayer} from "./api/endpoints/Actions.tsx"; export default function App() { 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); useEffect(() => { @@ -81,21 +81,33 @@ export default function App() { .then(() => setConnectionTimer(setInterval(checkConnection, 5000))); }, [apiUri]); + const [addPlayerStr, setAddPlayerStr] = useState(""); + const addPlayer = () => { + const steamId = BigInt(addPlayerStr); + AddPlayer(apiUri, steamId); + } return ( <ApiUriContext value={apiUri}> <PlayersContext.Provider value={{players: players}}> <GamesContext value={{games: games}}> - <Input type={"text"} - placeholder={"Api Uri"} - value={apiUri} - onChange={(e) => setApiUri(e.target.value)} - endDecorator={checkingConnection - ? <CircularProgress sx={{height: "100%"}} /> - : connected - ? <CheckCircleOutline color={"success"} /> - : <Cancel color={"error"} />} - /> - <Stack direction={"row"} spacing={2}> + <Stack direction="row" spacing={2} position={"fixed"} top={5}> + <Input type={"text"} + placeholder={"Api Uri"} + value={apiUri} + onChange={(e) => setApiUri(e.target.value)} + endDecorator={checkingConnection + ? <CircularProgress sx={{height: "100%"}} /> + : connected + ? <CheckCircleOutline color={"success"} /> + : <Cancel color={"error"} />} + /> + <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%'}}> <Typography level={"h2"}>Players</Typography> <AccordionGroup>