CHOMPStation2/tgui/packages/tgui/interfaces/Batteryrack.js

import { round } from 'common/math';
import { Fragment } from 'inferno';
import { useBackend } from "../backend";
import { AnimatedNumber, Box, Button, Flex, Icon, LabeledList, ProgressBar, Section, Table } from "../components";
import { Window } from "../layouts";

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

  const {
    mode,
    transfer_max,
    output_load,
    input_load,
    equalise,
    blink_tick,
    cells_max,
    cells_cur,
    cells_list,
  } = data;

  return (
    <Window width={500} height={430} resizable>
      <Window.Content scrollable>
        <Section title="Controls">
          <LabeledList>
            <LabeledList.Item label="Current Mode">
              {mode === 1 && (
                <Box color="good">OUTPUT ONLY</Box>
              ) || mode === 2 && (
                <Box color="good">INPUT ONLY</Box>
              ) || mode === 3 && (
                <Box color="good">INPUT AND OUTPUT</Box>
              ) || (
                <Box color="bad">OFFLINE</Box>
              )}
            </LabeledList.Item>
            <LabeledList.Item label="Input Status">
              <AnimatedNumber value={input_load} /> / {transfer_max} W
            </LabeledList.Item>
            <LabeledList.Item label="Output Status">
              <AnimatedNumber value={output_load} /> / {transfer_max} W
            </LabeledList.Item>
            <LabeledList.Item label="Control Panel">
              <Button
                content="OFF"
                selected={mode === 0}
                onClick={() => act("disable")} />
              <Button
                content="OUT"
                selected={mode === 1}
                onClick={() => act("enable", { enable: 1 })} />
              <Button
                content="IN"
                selected={mode === 2}
                onClick={() => act("enable", { enable: 2 })} />
              <Button
                content="IN/OUT"
                selected={mode === 3}
                onClick={() => act("enable", { enable: 3 })} />
              {equalise && (
                <Button
                  content="EQ"
                  color={blink_tick ? "red" : "yellow"}
                  onClick={() => act("equaliseoff")} />
              ) || (
                <Button
                  content="EQ"
                  onClick={() => act("equaliseon")} />
              )}
            </LabeledList.Item>
          </LabeledList>
        </Section>
        <Section title="Cells">
          <Table>
            {cells_list.map(cell => (
              <Table.Row key={cell.slot}>
                <Table.Cell collapsing>Cell {cell.slot}</Table.Cell>
                <Table.Cell>
                  <ProgressBar
                    value={cell.used ? cell.percentage : 100}
                    minValue={0}
                    maxValue={100}
                    color={cell.used ? "good" : "bad"}>
                    {cell.used ? cell.percentage + "%" : "N/C"}
                  </ProgressBar>
                </Table.Cell>
                <Table.Cell collapsing>
                  <Button
                    icon="eject"
                    disabled={!cell.used}
                    onClick={() => act("ejectcell", { ejectcell: cell.id })} />
                </Table.Cell>
              </Table.Row>
            ))}
          </Table>
        </Section>
      </Window.Content>
    </Window>
  );
};