CHOMPStation2/tgui/packages/tgui/interfaces/AreaScrubberControl.js

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>
  );
};