CHOMPStation2/tgui/packages/tgui_ch/interfaces/AreaScrubberControl.jsx

import { Flex, Button, Box, LabeledList, Section } from '../components';
import { useBackend, useLocalState } from '../backend';
import { Window } from '../layouts';
import { toTitleCase } from 'common/string';

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

  const [showArea, setShowArea] = useLocalState(context, 'showArea', false);

  const { scrubbers } = data;

  if (!scrubbers) {
    return (
      <Section title="Error">
        <Box color="bad">No Scrubbers Detected.</Box>
        <Button
          fluid
          icon="search"
          content="Scan"
          onClick={() => act('scan')}
        />
      </Section>
    );
  }

  return (
    <Window width={600} height={400} resizable>
      <Window.Content scrollable>
        <Section>
          <Flex wrap="wrap">
            <Flex.Item m="2px" basis="49%">
              <Button
                textAlign="center"
                fluid
                icon="search"
                content="Scan"
                onClick={() => act('scan')}
              />
            </Flex.Item>
            <Flex.Item m="2px" basis="49%" grow={1}>
              <Button
                textAlign="center"
                fluid
                icon="layer-group"
                content="Show Areas"
                selected={showArea}
                onClick={() => setShowArea(!showArea)}
              />
            </Flex.Item>
            <Flex.Item m="2px" basis="49%">
              <Button
                textAlign="center"
                fluid
                icon="toggle-on"
                content="All On"
                onClick={() => act('allon')}
              />
            </Flex.Item>
            <Flex.Item m="2px" basis="49%" grow={1}>
              <Button
                textAlign="center"
                fluid
                icon="toggle-off"
                content="All Off"
                onClick={() => act('alloff')}
              />
            </Flex.Item>
          </Flex>
          <Flex wrap="wrap">
            {scrubbers.map((scrubber) => (
              <Flex.Item m="2px" key={scrubber.id} basis="32%">
                <BigScrubber scrubber={scrubber} showArea={showArea} />
              </Flex.Item>
            ))}
          </Flex>
        </Section>
      </Window.Content>
    </Window>
  );
};

const BigScrubber = (props, context) => {
  const { act } = useBackend(context);

  const { scrubber, showArea } = props;

  return (
    <Section title={scrubber.name}>
      <Button
        fluid
        icon="power-off"
        content={scrubber.on ? 'Enabled' : 'Disabled'}
        selected={scrubber.on}
        onClick={() => act('toggle', { id: scrubber.id })}
      />
      <LabeledList>
        <LabeledList.Item label="Pressure">
          {scrubber.pressure} kPa
        </LabeledList.Item>
        <LabeledList.Item label="Flow Rate">
          {scrubber.flow_rate} L/s
        </LabeledList.Item>
        <LabeledList.Item label="Load">{scrubber.load} W</LabeledList.Item>
        {showArea && (
          <LabeledList.Item label="Area">
            {toTitleCase(scrubber.area)}
          </LabeledList.Item>
        )}
      </LabeledList>
    </Section>
  );
};