pterodactyl-addons/addons/267/panelfiles/resources/scripts/components/server/settings/TxServerBox.tsx

/* eslint-disable no-var */
import React, { useState } from 'react';
import { ServerContext } from '@/state/server';
import ServerContentBlock from '@/components/elements/ServerContentBlock';
import tw from 'twin.macro';
import FlashMessageRender from '@/components/FlashMessageRender';
import TitledGreyBox from '@/components/elements/TitledGreyBox';
import Button from '@/components/elements/Button';
import isEqual from 'react-fast-compare';
import getServerStartup from '@/api/swr/getServerStartup';
import deleteServerAllocation from '@/api/server/network/deleteServerAllocation';
import useFlash from '@/plugins/useFlash';
import createServerAllocation from '@/api/server/network/createServerAllocation';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import CSS from 'csstype';
import updateStartupVariable from '@/api/server/updateStartupVariable';

export default () => {
    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
    const allocations = ServerContext.useStoreState(state => state.server.data!.allocations, isEqual);
    const { clearFlashes, clearAndAddHttpError } = useFlash();
    const setServerFromState = ServerContext.useStoreActions(actions => actions.server.setServerFromState);
    const [ loading, setLoading ] = useState(false);
    const FLASH_KEY_PORT = 'server:startup:TXADMIN_PORT';
    const FLASH_KEY_ENABLE = 'server:startup:TXADMIN_ENABLE';

    const variables = ServerContext.useStoreState(({ server }) => ({
        variables: server.data!.variables,
        invocation: server.data!.invocation,
        dockerImage: server.data!.dockerImage,
    }), isEqual);
    const { data } = getServerStartup(uuid, {
        ...variables,
        dockerImages: { [variables.dockerImage]: variables.dockerImage },

    });
    const primaryAllocation = ServerContext.useStoreState(state => state.server.data!.allocations.filter(alloc => alloc.isDefault).map(
        allocation => (allocation.alias || allocation.ip)
    )).toString();
    const txadminport = Number(data?.variables[5]?.serverValue);
    const txadminallocationport = allocations.filter(allocation => allocation.port === txadminport);
    var txenabled = '0';
    var url = '0';
    if (data?.variables[6]?.serverValue === '1') {
        var url = 'http://' + primaryAllocation + ':' + data?.variables[5]?.serverValue;
        var txenabled = '1';
    }
    const disable = () => {
        clearFlashes('txadmin');
        setLoading(true);
        deleteServerAllocation(uuid, txadminallocationport[0].id)
            .catch(error => clearAndAddHttpError({ key: 'txadmin', error }))
            .then(() =>
                updateStartupVariable(uuid, 'TXADMIN_ENABLE', '0')
                    .catch(error => {
                        console.error(error);
                        clearAndAddHttpError({ error, key: FLASH_KEY_ENABLE });
                    })
                    .then(() => location.reload()));
    };
    const activate = () => {
        clearFlashes('server:txadmin');
        setLoading(true);
        createServerAllocation(uuid)
            .then(allocation => {
                setServerFromState(s => ({ ...s, allocations: s.allocations.concat(allocation) }));
                console.log(allocation);
                console.log(allocation.port);
                updateStartupVariable(uuid, 'TXADMIN_PORT', String(allocation.port))
                    .catch(error => {
                        console.error(error);
                        clearAndAddHttpError({ error, key: FLASH_KEY_PORT });
                    });
                updateStartupVariable(uuid, 'TXADMIN_ENABLE', '1')
                    .catch(error => {
                        console.error(error);
                        clearAndAddHttpError({ error, key: FLASH_KEY_ENABLE });
                    });
            })
            .catch(error => clearAndAddHttpError({ key: 'txadmin', error }))
            .then(() => location.reload());
    };
    const indigo500: CSS.Properties = {
        color: 'rgba(99, 102, 241)',
    };
    return (
        <div>
            {txenabled === '1' &&

        <TitledGreyBox title={'TxAdmin'}>

            <div css={tw`px-1 py-2`}>
            This server got an <a target="_blank" href={url} style={indigo500} rel="noreferrer">TxAdmin</a> you can disable it with &quot;Disable&quot; button
            </div>
            <div css={tw`flex justify-end`}>
                <Button onClick={disable}>Disable</Button>
            </div>
        </TitledGreyBox>
            }
            {txenabled === '0' &&

<TitledGreyBox title={'TxAdmin'}>

    <div css={tw`px-1 py-2`}>
This server doesn&apos;t got an txadmin you can enable it with &quot;enable&quot;
    </div>
    <div css={tw`flex justify-end`}>
        <Button onClick={activate}>enable</Button>
    </div>
</TitledGreyBox>
            }
        </div>
    );
};