StarMC/Astral-nook
StarMC/Astral-nook
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

First pass at new server console design

Browse source
This commit is contained in:
DaneEveritt 2022-06-20 17:26:47 -04:00
parent 61018b5e67
commit faff263f17
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
9 changed files with 263 additions and 189 deletions
Download patch file Download diff file Expand all files Collapse all files

31
resources/scripts/components/server/ServerConsole.tsx
View file

@ -4,26 +4,39 @@ import Can from '@/components/elements/Can';
import ContentContainer from '@/components/elements/ContentContainer';
import tw from 'twin.macro';
import ServerContentBlock from '@/components/elements/ServerContentBlock';
import ServerDetailsBlock from '@/components/server/ServerDetailsBlock';
import isEqual from 'react-fast-compare';
import PowerControls from '@/components/server/PowerControls';
import ErrorBoundary from '@/components/elements/ErrorBoundary';
import Spinner from '@/components/elements/Spinner';
import Features from '@feature/Features';
import Console from '@/components/server/Console';
import StatGraphs from '@/components/server/StatGraphs';
import PowerButtons from '@/components/server/console/PowerButtons';
import ServerDetailsBlock from '@/components/server/ServerDetailsBlock';
export type PowerAction = 'start' | 'stop' | 'restart' | 'kill';
const ServerConsole = () => {
const name = ServerContext.useStoreState(state => state.server.data!.name);
const description = ServerContext.useStoreState(state => state.server.data!.description);
const isInstalling = ServerContext.useStoreState(state => state.server.data!.isInstalling);
const isTransferring = ServerContext.useStoreState(state => state.server.data!.isTransferring);
const eggFeatures = ServerContext.useStoreState(state => state.server.data!.eggFeatures, isEqual);
return (
<ServerContentBlock title={'Console'} css={tw`flex flex-wrap`}>
<div css={tw`w-full lg:w-1/4`}>
<ServerDetailsBlock/>
<ServerContentBlock title={'Console'} className={'grid grid-cols-4 gap-4'}>
<div className={'flex space-x-4 items-end col-span-4'}>
<div className={'flex-1'}>
<h1 className={'font-header text-2xl text-gray-50 leading-relaxed line-clamp-1'}>{name}</h1>
<p className={'text-sm line-clamp-2'}>{description}</p>
</div>
<div className={'flex-1'}>
<Can action={[ 'control.start', 'control.stop', 'control.restart' ]} matchAny>
<PowerButtons className={'flex justify-end space-x-2'}/>
</Can>
</div>
</div>
<div className={'col-span-4 lg:col-span-1'}>
<ServerDetailsBlock className={'flex flex-col space-y-4'}/>
{isInstalling ?
<div css={tw`mt-4 rounded bg-yellow-500 p-3`}>
<ContentContainer>
@ -44,19 +57,17 @@ const ServerConsole = () => {
</ContentContainer>
</div>
:
<Can action={[ 'control.start', 'control.stop', 'control.restart' ]} matchAny>
<PowerControls/>
</Can>
null
}
</div>
<div css={tw`w-full lg:w-3/4 mt-4 lg:mt-0 lg:pl-4`}>
<div className={'col-span-3'}>
<Spinner.Suspense>
<ErrorBoundary>
<Console/>
</ErrorBoundary>
<StatGraphs/>
</Spinner.Suspense>
<Features enabled={eggFeatures} />
<Features enabled={eggFeatures}/>
</div>
</ServerContentBlock>
);