|
|
|
|
import { Box, styled } from '@mui/material';
|
|
|
|
|
import Head from 'next/head';
|
|
|
|
|
import { useRouter } from 'next/router';
|
|
|
|
|
import { useEffect, useState } from 'react';
|
|
|
|
|
|
|
|
|
|
import { FullSize, Preview } from '../../components/Display';
|
|
|
|
|
import Header from '../../components/Header';
|
|
|
|
|
|
|
|
|
|
const PREFIX = 'Server';
|
|
|
|
|
|
|
|
|
|
const classes = {
|
|
|
|
|
preview: `${PREFIX}-preview`,
|
|
|
|
|
fullView: `${PREFIX}-fullView`,
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const StyledDiv = styled('div')(({ theme }) => ({
|
|
|
|
|
[`& .${classes.preview}`]: {
|
|
|
|
|
width: '25%',
|
|
|
|
|
height: '100%',
|
|
|
|
|
[theme.breakpoints.down('md')]: {
|
|
|
|
|
width: '100%',
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
[`& .${classes.fullView}`]: {
|
|
|
|
|
display: 'flex',
|
|
|
|
|
flexDirection: 'row',
|
|
|
|
|
width: '100%',
|
|
|
|
|
justifyContent: 'center',
|
|
|
|
|
},
|
|
|
|
|
}));
|
|
|
|
|
|
|
|
|
|
const Server = (): JSX.Element => {
|
|
|
|
|
const [previewMode, setPreviewMode] = useState<boolean>(true);
|
|
|
|
|
|
|
|
|
|
const router = useRouter();
|
|
|
|
|
const { server_name, server_state, uuid, vnc } = router.query;
|
|
|
|
|
|
|
|
|
|
const isConnectVNC: boolean = (vnc?.toString() || '').length > 0;
|
|
|
|
|
const serverName: string = server_name?.toString() || '';
|
|
|
|
|
const serverState: string = server_state?.toString() || '';
|
|
|
|
|
const serverUUID: string = uuid?.toString() || '';
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
if (isConnectVNC) {
|
|
|
|
|
setPreviewMode(false);
|
|
|
|
|
}
|
|
|
|
|
}, [isConnectVNC]);
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<StyledDiv>
|
|
|
|
|
<Head>
|
|
|
|
|
<title>{serverName}</title>
|
|
|
|
|
</Head>
|
|
|
|
|
<Header />
|
|
|
|
|
{previewMode ? (
|
|
|
|
|
<Box className={classes.preview}>
|
|
|
|
|
<Preview
|
|
|
|
|
onClickPreview={() => {
|
|
|
|
|
setPreviewMode(false);
|
|
|
|
|
}}
|
|
|
|
|
serverName={serverName}
|
|
|
|
|
serverState={serverState}
|
|
|
|
|
serverUUID={serverUUID}
|
|
|
|
|
/>
|
|
|
|
|
</Box>
|
|
|
|
|
) : (
|
|
|
|
|
<Box className={classes.fullView}>
|
|
|
|
|
<FullSize
|
|
|
|
|
onClickCloseButton={() => {
|
|
|
|
|
setPreviewMode(true);
|
|
|
|
|
}}
|
|
|
|
|
serverUUID={serverUUID}
|
|
|
|
|
serverName={serverName}
|
|
|
|
|
/>
|
|
|
|
|
</Box>
|
|
|
|
|
)}
|
|
|
|
|
</StyledDiv>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default Server;
|
