CHOMPStation2/tgui/packages/tgui/interfaces/NtosUAV.js

import { useBackend } from "../backend";
import { Box, Button, Flex, LabeledList, Section } from "../components";
import { NtosWindow } from "../layouts";

export const NtosUAV = (props, context) => {
  const { act, data } = useBackend(context);

  const {
    current_uav,
    signal_strength,
    in_use,
    paired_uavs,
  } = data;

  return (
    <NtosWindow width={600} height={500} resizable>
      <NtosWindow.Content>
        <Section title="Selected UAV">
          <LabeledList>
            <LabeledList.Item label="UAV">
              {current_uav && current_uav.status || "[Not Connected]"}
            </LabeledList.Item>
            <LabeledList.Item label="Signal">
              {current_uav && signal_strength || "[Not Connected]"}
            </LabeledList.Item>
            <LabeledList.Item label="Power">
              {current_uav && (
                <Button
                  icon="power-off"
                  selected={current_uav.power}
                  onClick={() => act("power_uav")}>
                  {current_uav.power ? "Online" : "Offline"}
                </Button>
              ) || "[Not Connected]"}
            </LabeledList.Item>
            <LabeledList.Item label="Camera">
              {current_uav && (
                <Button
                  icon="power-off"
                  selected={in_use}
                  disabled={!current_uav.power}
                  onClick={() => act("view_uav")}>
                  {current_uav.power ? "Available" : "Unavailable"}
                </Button>
              ) || "[Not Connected]"}
            </LabeledList.Item>
          </LabeledList>
        </Section>
        <Section title="Paired UAVs">
          {paired_uavs.length && paired_uavs.map(uav => (
            <Flex key={uav.uavref} spacing={1}>
              <Flex.Item grow={1}>
                <Button
                  fluid
                  icon="quidditch"
                  onClick={() => act("switch_uav", { "switch_uav": uav.uavref })}>
                  {uav.name}
                </Button>
              </Flex.Item>
              <Flex.Item>
                <Button
                  color="bad"
                  icon="times"
                  onClick={() => act("del_uav", { "del_uav": uav.uavref })} />
              </Flex.Item>
            </Flex>
          )) || (
            <Box color="average">
              No UAVs Paired.
            </Box>
          )}
        </Section>
      </NtosWindow.Content>
    </NtosWindow>
  );
};