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,8 +90,27 @@ 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> (() => {
if (isInstalling) {
return <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>
} else if (isSuspended) {
return <div css={tw`mt-4 rounded bg-red-500 p-3`}>
<ContentContainer>
<p css={tw`text-sm text-red-900`}>
This server is currently suspended and the functionality requested is unavailable.
</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`}> <div css={tw`shadow-md bg-neutral-700 rounded p-3 flex text-xs mt-4 justify-center`}>
<Can action={'control.start'}> <Can action={'control.start'}>
<Button <Button
@@ -126,15 +146,8 @@ export default () => {
</Can> </Can>
</div> </div>
</Can> </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`}>