misc_pterodactyl-panel/resources/scripts/components/admin/servers/settings/NetworkingBox.tsx

57 lines
2.3 KiB
TypeScript

import React from 'react';
import { useFormikContext } from 'formik';
import SelectField, { AsyncSelectField, Option } from '@/components/elements/SelectField';
import getAllocations from '@/api/admin/nodes/getAllocations';
import AdminBox from '@/components/admin/AdminBox';
import { faNetworkWired } from '@fortawesome/free-solid-svg-icons';
import tw from 'twin.macro';
import Label from '@/components/elements/Label';
import Select from '@/components/elements/Select';
import { useServerFromRoute } from '@/api/admin/server';
export default () => {
const { isSubmitting } = useFormikContext();
const { data: server } = useServerFromRoute();
if (!server) return null;
const loadOptions = async (inputValue: string, callback: (options: Option[]) => void) => {
const allocations = await getAllocations(server.nodeId, { ip: inputValue, server_id: '0' });
callback(allocations.map(a => {
return { value: a.id.toString(), label: a.getDisplayText() };
}));
};
return (
<AdminBox icon={faNetworkWired} title={'Networking'} isLoading={isSubmitting}>
<div css={tw`grid grid-cols-1 gap-4 lg:gap-6`}>
<div>
<Label htmlFor={'allocationId'}>Primary Allocation</Label>
<Select id={'allocationId'} name={'allocationId'}>
{server.relationships.allocations?.map(a => (
<option key={a.id} value={a.id}>{a.getDisplayText()}</option>
))}
</Select>
</div>
<AsyncSelectField
id={'addAllocations'}
name={'addAllocations'}
label={'Add Allocations'}
loadOptions={loadOptions}
isMulti
/>
<SelectField
id={'removeAllocations'}
name={'removeAllocations'}
label={'Remove Allocations'}
options={server.relationships.allocations?.map(a => {
return { value: a.id.toString(), label: a.getDisplayText() };
}) || []}
isMulti
isSearchable
/>
</div>
</AdminBox>
);
};