Organized the Server.jsx
This commit is contained in:
parent
84af732dcd
commit
7f31910746
GPG Key ID:
B8DC354B0A1F5B44
@ -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,91 +56,60 @@ export const Server = ({uuid, configuration, status}) => {
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
updateServerInfo();
|
||||
|
||||
const interval = setInterval(() => updateServerInfo(), 5000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<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}>
|
||||
<>
|
||||
<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}>
|
||||
|
||||
<Stack direction="row" gap={2} alignItems="center" justifyContent="space-between"
|
||||
marginBottom={frameOpen ? 2 : 0}>
|
||||
<Stack direction="row" gap={2} alignItems="center">
|
||||
<Avatar sx={{width: 45, height: 45, backgroundColor: "primary.main"}}>
|
||||
<Dns/>
|
||||
</Avatar>
|
||||
<Stack direction="column" gap={1} sx={{width: {xs: "100%", md: "100%", lg: "25rem"}}}>
|
||||
<Stack direction="row" gap={1} alignItems="center">
|
||||
<img alt={configuration.type} style={{width: 25, height: 25}}
|
||||
src={configuration.type === "purpur" ? PurpurImage : configuration.type === "paper" ? PaperImage : SpigotImage}/>
|
||||
<Typography variant="h6">{configuration.name}</Typography>
|
||||
<Chip label={configuration.version} color="primary" size="small"/>
|
||||
<Stack direction="row" gap={2} alignItems="center" justifyContent="space-between"
|
||||
marginBottom={frameOpen ? 2 : 0}>
|
||||
<Stack direction="row" gap={2} alignItems="center">
|
||||
<Avatar sx={{width: 45, height: 45, backgroundColor: "primary.main"}}>
|
||||
<Dns/>
|
||||
</Avatar>
|
||||
<Stack direction="column" gap={1} sx={{width: {xs: "100%", md: "100%", lg: "25rem"}}}>
|
||||
<Stack direction="row" gap={1} alignItems="center">
|
||||
<img alt={configuration.type} style={{width: 25, height: 25}}
|
||||
src={configuration.type === "purpur" ? PurpurImage : configuration.type === "paper" ? PaperImage : SpigotImage}/>
|
||||
<Typography variant="h6">{configuration.name}</Typography>
|
||||
<Chip label={configuration.version} color="primary" size="small"/>
|
||||
</Stack>
|
||||
|
||||
<Typography variant="body2">{configuration.description}</Typography>
|
||||
</Stack>
|
||||
|
||||
<Typography variant="body2">{configuration.description}</Typography>
|
||||
<ServerInfo status={status} uuid={uuid} serverInfo={serverInfo} setServerInfo={setServerInfo}
|
||||
setAlert={setAlert}/>
|
||||
</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>
|
||||
|
||||
</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"}/>
|
||||
<Box width={10} height={50} borderRadius={2}
|
||||
bgcolor={status === "ONLINE" ? "success.main" : "error.main"}/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Stack>
|
||||
|
||||
{frameOpen && !frameLoaded && (
|
||||
<Stack direction="row" gap={2} alignItems="center" justifyContent="center" height={500}>
|
||||
<CircularProgress/>
|
||||
</Stack>
|
||||
)}
|
||||
{frameOpen && !frameLoaded && (
|
||||
<Stack direction="row" gap={2} alignItems="center" justifyContent="center" height={500}>
|
||||
<CircularProgress/>
|
||||
</Stack>
|
||||
)}
|
||||
|
||||
{frameOpen && (
|
||||
<iframe src={PROXY_URL + "/" + uuid + "/"} width="100%" height={frameLoaded ? 600 : 0}
|
||||
onLoad={() => setInterval(() => setFrameLoaded(true), 600)}
|
||||
style={{border: "none", borderRadius: 20}} ref={frameRef}/>
|
||||
)}
|
||||
|
||||
</Box>
|
||||
{frameOpen && (
|
||||
<iframe src={PROXY_URL + "/" + uuid + "/"} width="100%" height={frameLoaded ? 600 : 0}
|
||||
onLoad={() => setInterval(() => setFrameLoaded(true), 600)}
|
||||
style={{border: "none", borderRadius: 20}} ref={frameRef}/>
|
||||
)}
|
||||
</Box>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user