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

import { useBackend } from '../backend';
import { AnimatedNumber, Box, Button, 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>
  );
};