CHOMPStation2/tgui/packages/tgui_ch/interfaces/MuleBot.tsx

import { BooleanLike } from 'common/react';
import { Fragment } from 'inferno';
import { useBackend } from '../backend';
import { Box, Button, LabeledList, Section } from '../components';
import { Window } from '../layouts';

type Data = {
  suffix: string;
  power: BooleanLike;
  load: string;
  locked: BooleanLike;
  issilicon: BooleanLike;
  auto_return: BooleanLike;
  crates_only: BooleanLike;
  hatch: BooleanLike;
  safety: BooleanLike;
};

export const MuleBot = (props, context) => {
  const { act, data } = useBackend<Data>(context);
  const { suffix, load, hatch } = data;
  return (
    <Window width={350} height={500}>
      <Window.Content>
        <Section title="Multiple Utility Load Effector Mk. III">
          <LabeledList>
            <LabeledList.Item label="ID">{suffix}</LabeledList.Item>
            <LabeledList.Item
              label="Current Load"
              buttons={
                <Button
                  icon="eject"
                  content="Unload Now"
                  disabled={!load}
                  onClick={() => act('unload')}
                />
              }>
              {load ? load : 'None.'}
            </LabeledList.Item>
          </LabeledList>
          {hatch ? <MuleBotOpen /> : <MuleBotClosed />}
        </Section>
      </Window.Content>
    </Window>
  );
};

const MuleBotClosed = (props, context) => {
  const { act, data } = useBackend<Data>(context);
  const { power, locked, issilicon, auto_return, crates_only } = data;

  return (
    <Section
      title="Controls"
      buttons={
        <Button
          icon="power-off"
          content={power ? 'On' : 'Off'}
          selected={power}
          disabled={locked && !issilicon}
          onClick={() => act('power')}
        />
      }>
      {locked && !issilicon ? (
        <Box color="bad">This interface is currently locked.</Box>
      ) : (
        <Fragment>
          <Button
            fluid
            icon="stop"
            content="Stop"
            onClick={() => act('stop')}
          />
          <Button
            fluid
            icon="truck-monster"
            content="Proceed"
            onClick={() => act('go')}
          />
          <Button
            fluid
            icon="home"
            content="Return Home"
            onClick={() => act('home')}
          />
          <Button
            fluid
            icon="map-marker-alt"
            content="Set Destination"
            onClick={() => act('destination')}
          />
          <Button
            fluid
            icon="cog"
            content="Set Home"
            onClick={() => act('sethome')}
          />
          <Button
            fluid
            icon="home"
            selected={auto_return}
            content={
              'Auto Return Home: ' + (auto_return ? 'Enabled' : 'Disabled')
            }
            onClick={() => act('autoret')}
          />
          <Button
            fluid
            icon="biking"
            selected={!crates_only}
            content={
              'Non-standard Cargo: ' + (crates_only ? 'Disabled' : 'Enabled')
            }
            onClick={() => act('cargotypes')}
          />
        </Fragment>
      )}
    </Section>
  );
};

const MuleBotOpen = (props, context) => {
  const { act, data } = useBackend<Data>(context);
  const { safety } = data;

  return (
    <Section title="Maintenance Panel">
      <Button
        fluid
        icon="skull-crossbones"
        color={safety ? 'green' : 'red'}
        content={'Safety: ' + (safety ? 'Engaged' : 'Disengaged (DANGER)')}
        onClick={() => act('safety')}
      />
    </Section>
  );
};