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

Support modifying the primary allocation for a server

Browse source
This commit is contained in:
Dane Everitt 2020-07-09 19:56:46 -07:00
parent bfb28f949d
commit fc9054312d
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
17 changed files with 230 additions and 87 deletions
Download patch file Download diff file Expand all files Collapse all files

63
resources/scripts/components/server/settings/ServerAllocationsContainer.tsx
View file

@ -1,63 +0,0 @@
import React from 'react';
import TitledGreyBox from '@/components/elements/TitledGreyBox';
import { ServerContext } from '@/state/server';
import tw from 'twin.macro';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faNetworkWired } from '@fortawesome/free-solid-svg-icons';
import styled from 'styled-components/macro';
const Code = styled.code`${tw`font-mono py-1 px-2 bg-neutral-900 rounded text-sm block`}`;
const Label = styled.label`${tw`uppercase text-xs mt-1 text-neutral-400 block px-1 select-none transition-colors duration-150`}`;
const Row = styled.div`
${tw`flex items-center py-2 pl-4 pr-5 border-l-4 border-transparent transition-colors duration-150`};
& svg {
${tw`transition-colors duration-150`};
}
&:hover {
${tw`border-cyan-400`};
svg {
${tw`text-neutral-100`};
}
${Label} {
${tw`text-neutral-200`};
}
}
`;
export default () => {
const allocations = ServerContext.useStoreState(state => state.server.data!.allocations);
return (
<TitledGreyBox title={'Allocated Ports'}>
{allocations.map(({ ip, port, alias, isDefault }, index) => (
<Row key={`${ip}:${port}`} css={index > 0 ? tw`mt-2` : undefined}>
<div css={tw`mr-4 text-neutral-400`}>
<FontAwesomeIcon icon={faNetworkWired}/>
</div>
<div css={tw`mr-4`}>
<Code>{alias || ip}</Code>
<Label>IP Address</Label>
</div>
<div>
<Code>:{port}</Code>
<Label>Port</Label>
</div>
<div css={tw`flex-1 text-right`}>
{isDefault ?
<span css={tw`bg-green-500 py-1 px-2 rounded text-green-50 text-xs`}>
Default
</span>
:
null
}
</div>
</Row>
))}
</TitledGreyBox>
);
};

6
resources/scripts/components/server/settings/SettingsContainer.tsx
View file

@ -13,7 +13,6 @@ import tw from 'twin.macro';
import Input from '@/components/elements/Input';
import Label from '@/components/elements/Label';
import { LinkButton } from '@/components/elements/Button';
import ServerAllocationsContainer from '@/components/server/settings/ServerAllocationsContainer';
export default () => {
const user = useStoreState<ApplicationStore, UserData>(state => state.user.data!);
@ -61,6 +60,8 @@ export default () => {
</div>
</TitledGreyBox>
</Can>
</div>
<div css={tw`w-full mt-6 md:flex-1 md:mt-0`}>
<Can action={'settings.rename'}>
<div css={tw`mb-6 md:mb-10`}>
<RenameServerBox/>
@ -70,9 +71,6 @@ export default () => {
<ReinstallServerBox/>
</Can>
</div>
<div css={tw`w-full mt-6 md:flex-1 md:mt-0`}>
<ServerAllocationsContainer/>
</div>
</div>
</PageContentBlock>
);