Hiding buttons and adding a message

This commit is contained in:
Oreo Oreoniv
2020-09-22 13:37:40 +03:00
committed by GitHub
parent 5470e07141
commit cd3363fc99

View File

@@ -25,6 +25,7 @@ export default () => {
const name = ServerContext.useStoreState(state => state.server.data!.name); const name = ServerContext.useStoreState(state => state.server.data!.name);
const limits = ServerContext.useStoreState(state => state.server.data!.limits); const limits = ServerContext.useStoreState(state => state.server.data!.limits);
const isInstalling = ServerContext.useStoreState(state => state.server.data!.isInstalling); const isInstalling = ServerContext.useStoreState(state => state.server.data!.isInstalling);
const isSuspended = ServerContext.useStoreState(state => state.server.data!.isSuspended);
const status = ServerContext.useStoreState(state => state.status.value); const status = ServerContext.useStoreState(state => state.status.value);
const connected = ServerContext.useStoreState(state => state.socket.connected); const connected = ServerContext.useStoreState(state => state.socket.connected);
@@ -89,52 +90,64 @@ export default () => {
<span css={tw`text-neutral-500`}> / {disklimit}</span> <span css={tw`text-neutral-500`}> / {disklimit}</span>
</p> </p>
</TitledGreyBox> </TitledGreyBox>
{!isInstalling ? {
<Can action={[ 'control.start', 'control.stop', 'control.restart' ]} matchAny> (() => {
<div css={tw`shadow-md bg-neutral-700 rounded p-3 flex text-xs mt-4 justify-center`}> if (isInstalling) {
<Can action={'control.start'}> return <div css={tw`mt-4 rounded bg-yellow-500 p-3`}>
<Button <ContentContainer>
size={'xsmall'} <p css={tw`text-sm text-yellow-900`}>
color={'green'} This server is currently running its installation process and most actions are
isSecondary unavailable.
css={tw`mr-2`} </p>
disabled={status !== 'offline'} </ContentContainer>
onClick={e => { </div>
e.preventDefault(); } else if (isSuspended) {
sendPowerCommand('start'); return <div css={tw`mt-4 rounded bg-red-500 p-3`}>
}} <ContentContainer>
> <p css={tw`text-sm text-red-900`}>
Start This server is currently suspended and the functionality requested is unavailable.
</Button> </p>
</ContentContainer>
</div>
} else {
return <Can action={['control.start', 'control.stop', 'control.restart']} matchAny>
<div css={tw`shadow-md bg-neutral-700 rounded p-3 flex text-xs mt-4 justify-center`}>
<Can action={'control.start'}>
<Button
size={'xsmall'}
color={'green'}
isSecondary
css={tw`mr-2`}
disabled={status !== 'offline'}
onClick={e => {
e.preventDefault();
sendPowerCommand('start');
}}
>
Start
</Button>
</Can>
<Can action={'control.restart'}>
<Button
size={'xsmall'}
isSecondary
css={tw`mr-2`}
disabled={!status}
onClick={e => {
e.preventDefault();
sendPowerCommand('restart');
}}
>
Restart
</Button>
</Can>
<Can action={'control.stop'}>
<StopOrKillButton onPress={action => sendPowerCommand(action)}/>
</Can>
</div>
</Can> </Can>
<Can action={'control.restart'}> }
<Button })()
size={'xsmall'}
isSecondary
css={tw`mr-2`}
disabled={!status}
onClick={e => {
e.preventDefault();
sendPowerCommand('restart');
}}
>
Restart
</Button>
</Can>
<Can action={'control.stop'}>
<StopOrKillButton onPress={action => sendPowerCommand(action)}/>
</Can>
</div>
</Can>
:
<div css={tw`mt-4 rounded bg-yellow-500 p-3`}>
<ContentContainer>
<p css={tw`text-sm text-yellow-900`}>
This server is currently running its installation process and most actions are
unavailable.
</p>
</ContentContainer>
</div>
} }
</div> </div>
<div css={tw`w-full md:flex-1 md:ml-4 mt-4 md:mt-0`}> <div css={tw`w-full md:flex-1 md:ml-4 mt-4 md:mt-0`}>