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

import { Fragment } from 'inferno';
import { useBackend } from '../backend';
import { Box, Button, Modal, LabeledList, ProgressBar, Section, NoticeBox } from '../components';
import { Window } from '../layouts';
import { toTitleCase, decodeHtmlEntities } from 'common/string';

export const MechaControlConsole = (props, context) => {
  const { act, data } = useBackend(context);
  const { beacons, stored_data } = data;
  return (
    <Window width={600} height={600} resizable>
      <Window.Content scrollable>
        {(stored_data.length && (
          <Modal>
            <Section
              height="400px"
              style={{ 'overflow-y': 'auto' }}
              title="Log"
              buttons={
                <Button icon="window-close" onClick={() => act('clear_log')} />
              }>
              {stored_data.map((data) => (
                <Box key={data.time}>
                  <Box color="label">
                    ({data.time}) ({data.year})
                  </Box>
                  <Box>{decodeHtmlEntities(data.message)}</Box>
                </Box>
              ))}
            </Section>
          </Modal>
        )) ||
          null}
        {(beacons.length &&
          beacons.map((beacon) => (
            <Section
              key={beacon.name}
              title={beacon.name}
              buttons={
                <Fragment>
                  <Button
                    icon="comment"
                    onClick={() => act('send_message', { mt: beacon.ref })}>
                    Message
                  </Button>
                  <Button
                    icon="eye"
                    onClick={() => act('get_log', { mt: beacon.ref })}>
                    View Log
                  </Button>
                  <Button.Confirm
                    color="red"
                    content="EMP"
                    icon="bomb"
                    onClick={() => act('shock', { mt: beacon.ref })}
                  />
                </Fragment>
              }>
              <LabeledList>
                <LabeledList.Item label="Health">
                  <ProgressBar
                    ranges={{
                      good: [beacon.maxHealth * 0.75, Infinity],
                      average: [
                        beacon.maxHealth * 0.5,
                        beacon.maxHealth * 0.75,
                      ],
                      bad: [-Infinity, beacon.maxHealth * 0.5],
                    }}
                    value={beacon.health}
                    maxValue={beacon.maxHealth}
                  />
                </LabeledList.Item>
                <LabeledList.Item label="Cell Charge">
                  {(beacon.cell && (
                    <ProgressBar
                      ranges={{
                        good: [beacon.cellMaxCharge * 0.75, Infinity],
                        average: [
                          beacon.cellMaxCharge * 0.5,
                          beacon.cellMaxCharge * 0.75,
                        ],
                        bad: [-Infinity, beacon.cellMaxCharge * 0.5],
                      }}
                      value={beacon.cellCharge}
                      maxValue={beacon.cellMaxCharge}
                    />
                  )) || <NoticeBox>No Cell Installed</NoticeBox>}
                </LabeledList.Item>
                <LabeledList.Item label="Air Tank">
                  {beacon.airtank}kPa
                </LabeledList.Item>
                <LabeledList.Item label="Pilot">
                  {beacon.pilot || 'Unoccupied'}
                </LabeledList.Item>
                <LabeledList.Item label="Location">
                  {toTitleCase(beacon.location) || 'Unknown'}
                </LabeledList.Item>
                <LabeledList.Item label="Active Equipment">
                  {beacon.active || 'None'}
                </LabeledList.Item>
                {(beacon.cargoMax && (
                  <LabeledList.Item label="Cargo Space">
                    <ProgressBar
                      ranges={{
                        bad: [beacon.cargoMax * 0.75, Infinity],
                        average: [
                          beacon.cargoMax * 0.5,
                          beacon.cargoMax * 0.75,
                        ],
                        good: [-Infinity, beacon.cargoMax * 0.5],
                      }}
                      value={beacon.cargoUsed}
                      maxValue={beacon.cargoMax}
                    />
                  </LabeledList.Item>
                )) ||
                  null}
              </LabeledList>
            </Section>
          ))) || <NoticeBox>No mecha beacons found.</NoticeBox>}
      </Window.Content>
    </Window>
  );
};