diff --git a/resources/scripts/api/server/getServer.ts b/resources/scripts/api/server/getServer.ts index 0bd0b7798..fd4534287 100644 --- a/resources/scripts/api/server/getServer.ts +++ b/resources/scripts/api/server/getServer.ts @@ -4,7 +4,7 @@ export interface Allocation { ip: string; alias: string | null; port: number; - default: boolean; + isDefault: boolean; } export interface Server { @@ -49,7 +49,7 @@ export const rawDataToServerObject = (data: any): Server => ({ ip: datum.ip, alias: datum.ip_alias, port: datum.port, - default: datum.is_default, + isDefault: datum.is_default, })), limits: { ...data.limits }, featureLimits: { ...data.feature_limits }, diff --git a/resources/scripts/components/dashboard/ServerRow.tsx b/resources/scripts/components/dashboard/ServerRow.tsx index 481d85317..a438750e7 100644 --- a/resources/scripts/components/dashboard/ServerRow.tsx +++ b/resources/scripts/components/dashboard/ServerRow.tsx @@ -65,7 +65,7 @@ export default ({ server }: { server: Server }) => {

{ - server.allocations.filter(alloc => alloc.default).map(allocation => ( + server.allocations.filter(alloc => alloc.isDefault).map(allocation => ( {allocation.alias || allocation.ip}:{allocation.port} )) } diff --git a/resources/scripts/components/dashboard/search/SearchModal.tsx b/resources/scripts/components/dashboard/search/SearchModal.tsx index 8cdfb1b7f..1461b8013 100644 --- a/resources/scripts/components/dashboard/search/SearchModal.tsx +++ b/resources/scripts/components/dashboard/search/SearchModal.tsx @@ -112,7 +112,7 @@ export default ({ ...props }: Props) => {

{server.name}

{ - server.allocations.filter(alloc => alloc.default).map(allocation => ( + server.allocations.filter(alloc => alloc.isDefault).map(allocation => ( {allocation.alias || allocation.ip}:{allocation.port} )) } diff --git a/resources/scripts/components/server/settings/ServerAllocationsContainer.tsx b/resources/scripts/components/server/settings/ServerAllocationsContainer.tsx new file mode 100644 index 000000000..3e76d5d9d --- /dev/null +++ b/resources/scripts/components/server/settings/ServerAllocationsContainer.tsx @@ -0,0 +1,63 @@ +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 ( + + {allocations.map(({ ip, port, alias, isDefault }, index) => ( + 0 ? tw`mt-2` : undefined}> +

+ +
+
+ {alias || ip} + +
+
+ :{port} + +
+
+ {isDefault ? + + Default + + : + null + } +
+ + ))} + + ); +}; diff --git a/resources/scripts/components/server/settings/SettingsContainer.tsx b/resources/scripts/components/server/settings/SettingsContainer.tsx index 2be5a8b93..6f632ad19 100644 --- a/resources/scripts/components/server/settings/SettingsContainer.tsx +++ b/resources/scripts/components/server/settings/SettingsContainer.tsx @@ -13,6 +13,7 @@ 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(state => state.user.data!); @@ -22,9 +23,9 @@ export default () => {
- -
- +
+ +
{
-
-
-
+
@@ -71,6 +70,9 @@ export default () => {
+
+ +
);