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

Update more of the UI to use new design elements

Browse source
This commit is contained in:
DaneEveritt 2022-06-20 15:28:27 -04:00
parent 2824db7352
commit 61018b5e67
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
14 changed files with 100 additions and 109 deletions
Download patch file Download diff file Expand all files Collapse all files

49
resources/scripts/components/server/network/AllocationRow.tsx
View file

@ -6,21 +6,21 @@ import { faNetworkWired } from '@fortawesome/free-solid-svg-icons';
import InputSpinner from '@/components/elements/InputSpinner';
import { Textarea } from '@/components/elements/Input';
import Can from '@/components/elements/Can';
import Button from '@/components/elements/Button';
import { Button } from '@/components/elements/button/index';
import GreyRowBox from '@/components/elements/GreyRowBox';
import { Allocation } from '@/api/server/getServer';
import styled from 'styled-components/macro';
import { debounce } from 'debounce';
import setServerAllocationNotes from '@/api/server/network/setServerAllocationNotes';
import useFlash from '@/plugins/useFlash';
import { useFlashKey } from '@/plugins/useFlash';
import { ServerContext } from '@/state/server';
import CopyOnClick from '@/components/elements/CopyOnClick';
import DeleteAllocationButton from '@/components/server/network/DeleteAllocationButton';
import setPrimaryServerAllocation from '@/api/server/network/setPrimaryServerAllocation';
import getServerAllocations from '@/api/swr/getServerAllocations';
import { formatIp } from '@/helpers';
import Code from '@/components/elements/Code';
const Code = styled.code`${tw`font-mono py-1 px-2 bg-neutral-900 rounded text-sm inline-block`}`;
const Label = styled.label`${tw`uppercase text-xs mt-1 text-neutral-400 block px-1 select-none transition-colors duration-150`}`;
interface Props {
@ -29,7 +29,7 @@ interface Props {
const AllocationRow = ({ allocation }: Props) => {
const [ loading, setLoading ] = useState(false);
const { clearFlashes, clearAndAddHttpError } = useFlash();
const { clearFlashes, clearAndAddHttpError } = useFlashKey('server:network');
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const { mutate } = getServerAllocations();
@ -39,69 +39,64 @@ const AllocationRow = ({ allocation }: Props) => {
const setAllocationNotes = debounce((notes: string) => {
setLoading(true);
clearFlashes('server:network');
clearFlashes();
setServerAllocationNotes(uuid, allocation.id, notes)
.then(() => onNotesChanged(allocation.id, notes))
.catch(error => clearAndAddHttpError({ key: 'server:network', error }))
.catch(error => clearAndAddHttpError(error))
.then(() => setLoading(false));
}, 750);
const setPrimaryAllocation = () => {
clearFlashes('server:network');
clearFlashes();
mutate(data => data?.map(a => ({ ...a, isDefault: a.id === allocation.id })), false);
setPrimaryServerAllocation(uuid, allocation.id)
.catch(error => {
clearAndAddHttpError({ key: 'server:network', error });
clearAndAddHttpError(error);
mutate();
});
};
return (
<GreyRowBox $hoverable={false} css={tw`flex-wrap md:flex-nowrap mt-2`}>
<div css={tw`flex items-center w-full md:w-auto`}>
<div css={tw`pl-4 pr-6 text-neutral-400`}>
<GreyRowBox $hoverable={false} className={'flex-wrap md:flex-nowrap mt-2'}>
<div className={'flex items-center w-full md:w-auto'}>
<div className={'pl-4 pr-6 text-neutral-400'}>
<FontAwesomeIcon icon={faNetworkWired}/>
</div>
<div css={tw`mr-4 flex-1 md:w-40`}>
<div className={'mr-4 flex-1 md:w-40'}>
{allocation.alias ?
<CopyOnClick text={allocation.alias}><Code css={tw`w-40 truncate`}>{allocation.alias}</Code></CopyOnClick> :
<CopyOnClick text={formatIp(allocation.ip)}><Code>{formatIp(allocation.ip)}</Code></CopyOnClick>}
<CopyOnClick text={allocation.alias}><Code dark className={'w-40 truncate'}>{allocation.alias}</Code></CopyOnClick> :
<CopyOnClick text={formatIp(allocation.ip)}><Code dark>{formatIp(allocation.ip)}</Code></CopyOnClick>}
<Label>{allocation.alias ? 'Hostname' : 'IP Address'}</Label>
</div>
<div css={tw`w-16 md:w-24 overflow-hidden`}>
<Code>{allocation.port}</Code>
<div className={'w-16 md:w-24 overflow-hidden'}>
<Code dark>{allocation.port}</Code>
<Label>Port</Label>
</div>
</div>
<div css={tw`mt-4 w-full md:mt-0 md:flex-1 md:w-auto`}>
<div className={'mt-4 w-full md:mt-0 md:flex-1 md:w-auto'}>
<InputSpinner visible={loading}>
<Textarea
css={tw`bg-neutral-800 hover:border-neutral-600 border-transparent`}
className={'bg-neutral-800 hover:border-neutral-600 border-transparent'}
placeholder={'Notes'}
defaultValue={allocation.notes || undefined}
onChange={e => setAllocationNotes(e.currentTarget.value)}
/>
</InputSpinner>
</div>
<div css={tw`w-full md:flex-none md:w-40 md:text-center mt-4 md:mt-0 ml-4 flex items-center justify-end`}>
<div className={'flex justify-end space-x-4 mt-4 w-full md:mt-0 md:w-48'}>
{allocation.isDefault ?
<span css={tw`bg-green-500 py-1 px-2 rounded text-green-50 text-xs`}>Primary</span>
<Button size={Button.Sizes.Small} className={'!text-gray-50 !bg-blue-600'} disabled>Primary</Button>
:
<>
<Can action={'allocation.delete'}>
<DeleteAllocationButton allocation={allocation.id}/>
</Can>
<Can action={'allocation.update'}>
<Button
isSecondary
size={'xsmall'}
color={'primary'}
onClick={setPrimaryAllocation}
>
<Button.Text size={Button.Sizes.Small} onClick={setPrimaryAllocation}>
Make Primary
</Button>
</Button.Text>
</Can>
</>
}