Mathias/MCDashWrapper
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Organized the Server.jsx

Browse Source
This commit is contained in:
Mathias Wagner 2024-02-15 15:14:00 +01:00
parent 84af732dcd
commit 7f31910746
Signed by: Mathias
GPG Key ID: B8DC354B0A1F5B44
1 changed files with 55 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

160
webui/src/states/Root/pages/Overview/components/Server/Server.jsx
View File

@ -1,16 +1,18 @@
import {Avatar, Box, Button, Chip, CircularProgress, IconButton, Stack, Tooltip, Typography} from "@mui/material"; import {Alert, Avatar, Box, Chip, CircularProgress, IconButton, Snackbar, Stack, Typography} from "@mui/material";
import {AvTimer, Bolt, Dns, Group, PowerOff, PowerSettingsNew, Share} from "@mui/icons-material"; import {Dns, MoreVert} from "@mui/icons-material";
import PurpurImage from "@/common/assets/software/purpur.webp"; import PurpurImage from "@/common/assets/software/purpur.webp";
import PaperImage from "@/common/assets/software/paper.webp"; import PaperImage from "@/common/assets/software/paper.webp";
import SpigotImage from "@/common/assets/software/spigot.webp"; import SpigotImage from "@/common/assets/software/spigot.webp";
import {useContext, useEffect, useRef, useState} from "react"; import {useEffect, useRef, useState} from "react";
import {isDev, postRequest, PROXY_URL, proxyRequest} from "@/common/utils/RequestUtil.js"; import {isDev, PROXY_URL} from "@/common/utils/RequestUtil.js";
import {ServerContext} from "@/common/contexts/Server/index.js"; import ServerInfo from "@/states/Root/pages/Overview/components/Server/components/ServerInfo";
import {t} from "i18next"; import ServerMenu from "@/states/Root/pages/Overview/components/Server/components/ServerMenu";
export const Server = ({uuid, configuration, status}) => { export const Server = ({uuid, configuration, status}) => {
const [menuOpen, setMenuOpen] = useState(false);
const menuRef = useRef(null);
const {updateServer} = useContext(ServerContext); const [alert, setAlert] = useState(null);
const frameRef = useRef(null); const frameRef = useRef(null);
const serverRef = useRef(null); const serverRef = useRef(null);
@ -23,8 +25,7 @@ export const Server = ({uuid, configuration, status}) => {
}, [frameOpen]); }, [frameOpen]);
useEffect(() => { useEffect(() => {
if (isDev) return () => { if (isDev) return () => {};
};
const interval = setInterval(() => { const interval = setInterval(() => {
if (frameRef.current) { if (frameRef.current) {
@ -46,26 +47,6 @@ export const Server = ({uuid, configuration, status}) => {
if (serverInfo === null || Object.keys(serverInfo).length === 0) setFrameOpen(false); if (serverInfo === null || Object.keys(serverInfo).length === 0) setFrameOpen(false);
}, [serverInfo]); }, [serverInfo]);
const updateServerInfo = () => {
proxyRequest(uuid + "/api/stats/")
.then((response) => {
if (response.status === 200) return response.json();
throw new Error("Server is offline");
})
.then((data) => setServerInfo(data))
.catch(() => setServerInfo(null));
}
const startServer = async () => {
await postRequest("server/start", {uuid});
updateServer();
}
const stopServer = async () => {
await postRequest("server/stop", {uuid});
updateServer();
}
const onServerClick = () => { const onServerClick = () => {
if (serverRef.current === null) return; if (serverRef.current === null) return;
if (serverRef.current.contains(document.activeElement)) return; if (serverRef.current.contains(document.activeElement)) return;
@ -75,91 +56,60 @@ export const Server = ({uuid, configuration, status}) => {
} }
} }
useEffect(() => {
updateServerInfo();
const interval = setInterval(() => updateServerInfo(), 5000);
return () => clearInterval(interval);
}, []);
return ( return (
<Box key={uuid} backgroundColor="background.darker" borderRadius={2} p={2} m={1} <>
style={{cursor: serverInfo !== null && Object.keys(serverInfo).length > 0 ? "pointer" : "default"}} <Snackbar open={alert !== null} autoHideDuration={6000} onClose={() => setAlert(null)}
boxShadow={5} gap={2} ref={serverRef} onClick={onServerClick}> anchorOrigin={{vertical: "bottom", horizontal: "right"}}>
<Alert severity={alert !== null ? alert.severity : "info"}>{alert !== null ? alert.message : ""}</Alert>
</Snackbar>
<ServerMenu menuOpen={menuOpen} menuRef={menuRef} setMenuOpen={setMenuOpen} uuid={uuid} setAlert={setAlert}
status={status} config={configuration}/>
<Box key={uuid} backgroundColor="background.darker" borderRadius={2} p={2} m={1}
style={{cursor: serverInfo !== null && Object.keys(serverInfo).length > 0 ? "pointer" : "default"}}
boxShadow={5} gap={2} ref={serverRef} onClick={onServerClick}>
<Stack direction="row" gap={2} alignItems="center" justifyContent="space-between" <Stack direction="row" gap={2} alignItems="center" justifyContent="space-between"
marginBottom={frameOpen ? 2 : 0}> marginBottom={frameOpen ? 2 : 0}>
<Stack direction="row" gap={2} alignItems="center"> <Stack direction="row" gap={2} alignItems="center">
<Avatar sx={{width: 45, height: 45, backgroundColor: "primary.main"}}> <Avatar sx={{width: 45, height: 45, backgroundColor: "primary.main"}}>
<Dns/> <Dns/>
</Avatar> </Avatar>
<Stack direction="column" gap={1} sx={{width: {xs: "100%", md: "100%", lg: "25rem"}}}> <Stack direction="column" gap={1} sx={{width: {xs: "100%", md: "100%", lg: "25rem"}}}>
<Stack direction="row" gap={1} alignItems="center"> <Stack direction="row" gap={1} alignItems="center">
<img alt={configuration.type} style={{width: 25, height: 25}} <img alt={configuration.type} style={{width: 25, height: 25}}
src={configuration.type === "purpur" ? PurpurImage : configuration.type === "paper" ? PaperImage : SpigotImage}/> src={configuration.type === "purpur" ? PurpurImage : configuration.type === "paper" ? PaperImage : SpigotImage}/>
<Typography variant="h6">{configuration.name}</Typography> <Typography variant="h6">{configuration.name}</Typography>
<Chip label={configuration.version} color="primary" size="small"/> <Chip label={configuration.version} color="primary" size="small"/>
</Stack>
<Typography variant="body2">{configuration.description}</Typography>
</Stack> </Stack>
<Typography variant="body2">{configuration.description}</Typography> <ServerInfo status={status} uuid={uuid} serverInfo={serverInfo} setServerInfo={setServerInfo}
setAlert={setAlert}/>
</Stack> </Stack>
<Stack direction="row" gap={2} alignItems="center"> <Stack direction="row" gap={2} alignItems="center">
{serverInfo === null && ( <IconButton color="primary" size="large" id="server-menu" onClick={() => setMenuOpen(!menuOpen)}
<Button variant="outlined" color="error" onClick={() => console.log("test")} ref={menuRef}>
startIcon={<PowerOff/>}>{t("server.not_connected")} <MoreVert/>
</Button>)}
{serverInfo !== null && Object.keys(serverInfo).length === 0 && (
<Button variant="outlined" color="warning" onClick={() => console.log("test")}
startIcon={<Bolt/>}>{t("server.loading")}
</Button>)}
{serverInfo !== null && Object.keys(serverInfo).length > 0 && (
<Stack direction="row" gap={3} alignItems="center"
sx={{display: {xs: "none", md: "none", lg: "flex"}}}>
<Stack direction="row" gap={1} alignItems="center">
<Group/>
<Typography
variant="body2">{serverInfo.online_players} / {serverInfo.max_players}</Typography>
</Stack>
<Stack direction="row" gap={1} alignItems="center">
<AvTimer/>
<Typography variant="body2">{serverInfo.tps}</Typography>
</Stack>
<Stack direction="row" gap={1} alignItems="center">
<Button variant="outlined" color="info" onClick={() => console.log("test")}
startIcon={<Share/>}>{t("server.share")}
</Button>
</Stack>
</Stack>
)}
</Stack>
</Stack>
<Stack direction="row" gap={2} alignItems="center">
<Tooltip title={status === "OFFLINE" ? t("server.start") : t("server.stop")}>
<IconButton color="primary" size="large"
onClick={() => status === "OFFLINE" ? startServer() : stopServer()}>
<PowerSettingsNew/>
</IconButton> </IconButton>
</Tooltip> <Box width={10} height={50} borderRadius={2}
<Box width={10} height={50} borderRadius={2} bgcolor={status === "ONLINE" ? "success.main" : "error.main"}/>
bgcolor={status === "ONLINE" ? "success.main" : "error.main"}/> </Stack>
</Stack> </Stack>
</Stack>
{frameOpen && !frameLoaded && ( {frameOpen && !frameLoaded && (
<Stack direction="row" gap={2} alignItems="center" justifyContent="center" height={500}> <Stack direction="row" gap={2} alignItems="center" justifyContent="center" height={500}>
<CircularProgress/> <CircularProgress/>
</Stack> </Stack>
)} )}
{frameOpen && ( {frameOpen && (
<iframe src={PROXY_URL + "/" + uuid + "/"} width="100%" height={frameLoaded ? 600 : 0} <iframe src={PROXY_URL + "/" + uuid + "/"} width="100%" height={frameLoaded ? 600 : 0}
onLoad={() => setInterval(() => setFrameLoaded(true), 600)} onLoad={() => setInterval(() => setFrameLoaded(true), 600)}
style={{border: "none", borderRadius: 20}} ref={frameRef}/> style={{border: "none", borderRadius: 20}} ref={frameRef}/>
)} )}
</Box>
</Box> </>
) )
} }