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

96
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 {AvTimer, Bolt, Dns, Group, PowerOff, PowerSettingsNew, Share} from "@mui/icons-material";
import {Alert, Avatar, Box, Chip, CircularProgress, IconButton, Snackbar, Stack, Typography} from "@mui/material";
import {Dns, MoreVert} from "@mui/icons-material";
import PurpurImage from "@/common/assets/software/purpur.webp";
import PaperImage from "@/common/assets/software/paper.webp";
import SpigotImage from "@/common/assets/software/spigot.webp";
import {useContext, useEffect, useRef, useState} from "react";
import {isDev, postRequest, PROXY_URL, proxyRequest} from "@/common/utils/RequestUtil.js";
import {ServerContext} from "@/common/contexts/Server/index.js";
import {t} from "i18next";
import {useEffect, useRef, useState} from "react";
import {isDev, PROXY_URL} from "@/common/utils/RequestUtil.js";
import ServerInfo from "@/states/Root/pages/Overview/components/Server/components/ServerInfo";
import ServerMenu from "@/states/Root/pages/Overview/components/Server/components/ServerMenu";
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 serverRef = useRef(null);
@ -23,8 +25,7 @@ export const Server = ({uuid, configuration, status}) => {
}, [frameOpen]);
useEffect(() => {
if (isDev) return () => {
};
if (isDev) return () => {};
const interval = setInterval(() => {
if (frameRef.current) {
@ -46,26 +47,6 @@ export const Server = ({uuid, configuration, status}) => {
if (serverInfo === null || Object.keys(serverInfo).length === 0) setFrameOpen(false);
}, [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 = () => {
if (serverRef.current === null) return;
if (serverRef.current.contains(document.activeElement)) return;
@ -75,15 +56,14 @@ export const Server = ({uuid, configuration, status}) => {
}
}
useEffect(() => {
updateServerInfo();
const interval = setInterval(() => updateServerInfo(), 5000);
return () => clearInterval(interval);
}, []);
return (
<>
<Snackbar open={alert !== null} autoHideDuration={6000} onClose={() => setAlert(null)}
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}>
@ -105,44 +85,14 @@ export const Server = ({uuid, configuration, status}) => {
<Typography variant="body2">{configuration.description}</Typography>
</Stack>
<Stack direction="row" gap={2} alignItems="center">
{serverInfo === null && (
<Button variant="outlined" color="error" onClick={() => console.log("test")}
startIcon={<PowerOff/>}>{t("server.not_connected")}
</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>
<ServerInfo status={status} uuid={uuid} serverInfo={serverInfo} setServerInfo={setServerInfo}
setAlert={setAlert}/>
</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 color="primary" size="large" id="server-menu" onClick={() => setMenuOpen(!menuOpen)}
ref={menuRef}>
<MoreVert/>
</IconButton>
</Tooltip>
<Box width={10} height={50} borderRadius={2}
bgcolor={status === "ONLINE" ? "success.main" : "error.main"}/>
</Stack>
@ -159,7 +109,7 @@ export const Server = ({uuid, configuration, status}) => {
onLoad={() => setInterval(() => setFrameLoaded(true), 600)}
style={{border: "none", borderRadius: 20}} ref={frameRef}/>
)}
</Box>
</>
)
}