CHOMPStation2/tgui/packages/tgui/interfaces/RequestConsole.js

import { decodeHtmlEntities } from 'common/string';
import { Fragment } from 'inferno';
import { useBackend } from "../backend";
import { Box, Button, Flex, Icon, LabeledList, ProgressBar, Section, Tabs } from "../components";
import { Window } from "../layouts";

const RCS_MAINMENU = 0;	// Settings menu
const RCS_RQASSIST = 1;	// Request supplies
const RCS_RQSUPPLY = 2;	// Request assistance
const RCS_SENDINFO = 3;	// Relay information
const RCS_SENTPASS = 4;	// Message sent successfully
const RCS_SENTFAIL = 5;	// Message sent unsuccessfully
const RCS_VIEWMSGS = 6;	// View messages
const RCS_MESSAUTH = 7;	// Authentication before sending
const RCS_ANNOUNCE = 8;	// Send announcement

const RequestConsoleSettings = (props, context) => {
  const { act, data } = useBackend(context);
  const {
    silent,
  } = data;
  return (
    <Section title="Settings">
      <Button
        selected={!silent}
        icon={silent ? "volume-mute" : "volume-up"}
        onClick={() => act("toggleSilent")}>
        Speaker {silent ? "OFF" : "ON"}
      </Button>
    </Section>
  );
};

const RequestConsoleSupplies = (props, context) => {
  const { act, data } = useBackend(context);
  const {
    department,
    supply_dept,
  } = data;
  return (
    <Section title="Supplies">
      <RequestConsoleSendMenu dept_list={supply_dept} department={department} />
    </Section>
  );
};

const RequestConsoleAssistance = (props, context) => {
  const { act, data } = useBackend(context);
  const {
    department,
    assist_dept,
  } = data;
  return (
    <Section title="Request assistance from another department">
      <RequestConsoleSendMenu dept_list={assist_dept} department={department} />
    </Section>
  );
};

const RequestConsoleRelay = (props, context) => {
  const { act, data } = useBackend(context);
  const {
    department,
    info_dept,
  } = data;
  return (
    <Section title="Report Anonymous Information">
      <RequestConsoleSendMenu dept_list={info_dept} department={department} />
    </Section>
  );
};

const RequestConsoleSendMenu = (props, context) => {
  const { act } = useBackend(context);
  const {
    dept_list,
    department,
  } = props;
  return (
    <LabeledList>
      {dept_list.sort().map(dept => dept !== department && (
        <LabeledList.Item label={dept} buttons={
          <Fragment>
            <Button
              icon="envelope-open-text"
              onClick={() => act("write", { write: dept, priority: 1 })}>
              Message
            </Button>
            <Button
              icon="exclamation-triangle"
              onClick={() => act("write", { write: dept, priority: 2 })}>
              High Priority
            </Button>
          </Fragment>
        } />
      ) || null)}
    </LabeledList>
  );
};

const RequestConsoleSendPass = (props, context) => {
  const { act, data } = useBackend(context);
  return (
    <Section>
      <Box fontSize={2} color="good">
        Message Sent Successfully
      </Box>
      <Box>
        <Button
          icon="arrow-right"
          onClick={() => act("setScreen", { setScreen: RCS_MAINMENU })}>
          Continue
        </Button>
      </Box>
    </Section>
  );
};

const RequestConsoleSendFail = (props, context) => {
  const { act, data } = useBackend(context);
  return (
    <Section>
      <Box fontSize={1.5} bold color="bad">
        An error occured. Message Not Sent.
      </Box>
      <Box>
        <Button
          icon="arrow-right"
          onClick={() => act("setScreen", { setScreen: RCS_MAINMENU })}>
          Continue
        </Button>
      </Box>
    </Section>
  );
};

const RequestConsoleViewMessages = (props, context) => {
  const { act, data } = useBackend(context);
  const {
    message_log,
  } = data;
  return (
    <Section title="Messages">
      {(message_log.length && message_log.map((msg, i) => (
        <LabeledList.Item label={decodeHtmlEntities(msg[0])} key={i}
          buttons={
            <Button
              icon="print"
              onClick={() => act("print", { print: i + 1 })}>
              Print
            </Button>
          }>
          {decodeHtmlEntities(msg[1])}
        </LabeledList.Item>
      ))) || (
        <Box>
          No messages.
        </Box>
      )}
    </Section>
  );
};

const RequestConsoleMessageAuth = (props, context) => {
  const { act, data } = useBackend(context);
  const {
    message,
    recipient,
    priority,
    msgStamped,
    msgVerified,
  } = data;
  return (
    <Section title="Message Authentication">
      <LabeledList>
        <LabeledList.Item label={"Message for " + recipient}>
          {message}
        </LabeledList.Item>
        <LabeledList.Item label="Priority">
          {priority === 2 ? "High Priority" : (priority === 1 ? "Normal Priority" : "Unknown")}
        </LabeledList.Item>
        <LabeledList.Item label="Validated By" color={msgVerified ? "good" : "bad"}>
          {decodeHtmlEntities(msgVerified) || "No Validation"}
        </LabeledList.Item>
        <LabeledList.Item label="Stamped By" color={msgStamped ? "good" : "bad"}>
          {decodeHtmlEntities(msgStamped) || "No Stamp"}
        </LabeledList.Item>
      </LabeledList>
      <Button
        mt={1}
        icon="share"
        onClick={() => act("department", { department: recipient })}>
        Send Message
      </Button>
      <Button
        icon="undo"
        onClick={() => act("setScreen", { setScreen: RCS_MAINMENU })}>
        Back
      </Button>
    </Section>
  );
};

const RequestConsoleAnnounce = (props, context) => {
  const { act, data } = useBackend(context);
  const {
    department,
    screen,
    message_log,
    newmessagepriority,
    silent,
    announcementConsole,
    assist_dept,
    supply_dept,
    info_dept,
    message,
    recipient,
    priority,
    msgStamped,
    msgVerified,
    announceAuth,
  } = data;
  return (
    <Section title="Send Station-Wide Announcement">
      {announceAuth && (
        <Fragment>
          <Box bold color="good" mb={1}>
            ID Verified. Authentication Accepted.
          </Box>
          <Section title="Message" mt={1} maxHeight="200px" scrollable buttons={
            <Button
              ml={1}
              icon="pen"
              onClick={() => act("writeAnnouncement")}>
              Edit
            </Button>
          }>
            {message || "No Message"}
          </Section>
        </Fragment>
      ) || (
        <Box bold color="bad" mb={1}>
          Swipe your ID card to authenticate yourself.
        </Box>
      )}
      <Button
        disabled={!message || !announceAuth}
        icon="share"
        onClick={() => act("sendAnnouncement")}>
        Announce
      </Button>
      <Button
        icon="undo"
        onClick={() => act("setScreen", { setScreen: RCS_MAINMENU })}>
        Back
      </Button>
    </Section>
  );
};

let screenToTemplate = {};
screenToTemplate[RCS_MAINMENU] = RequestConsoleSettings;
screenToTemplate[RCS_RQASSIST] = RequestConsoleAssistance;
screenToTemplate[RCS_RQSUPPLY] = RequestConsoleSupplies;
screenToTemplate[RCS_SENDINFO] = RequestConsoleRelay;
screenToTemplate[RCS_SENTPASS] = RequestConsoleSendPass;
screenToTemplate[RCS_SENTFAIL] = RequestConsoleSendFail;
screenToTemplate[RCS_VIEWMSGS] = RequestConsoleViewMessages;
screenToTemplate[RCS_MESSAUTH] = RequestConsoleMessageAuth;
screenToTemplate[RCS_ANNOUNCE] = RequestConsoleAnnounce;

export const RequestConsole = (props, context) => {
  const { act, data } = useBackend(context);
  const {
    screen,
    newmessagepriority,
    announcementConsole,
  } = data;

  let BodyElement = screenToTemplate[screen];

  return (
    <Window width={520} height={410} resizable>
      <Window.Content scrollable>
        <Tabs>
          <Tabs.Tab
            selected={screen === RCS_VIEWMSGS}
            onClick={() => act("setScreen", { setScreen: RCS_VIEWMSGS })}
            icon="envelope-open-text">
            Messages
          </Tabs.Tab>
          <Tabs.Tab
            selected={screen === RCS_RQASSIST}
            onClick={() => act("setScreen", { setScreen: RCS_RQASSIST })}
            icon="share-square">
            Assistance
          </Tabs.Tab>
          <Tabs.Tab
            selected={screen === RCS_RQSUPPLY}
            onClick={() => act("setScreen", { setScreen: RCS_RQSUPPLY })}
            icon="share-square">
            Supplies
          </Tabs.Tab>
          <Tabs.Tab
            selected={screen === RCS_SENDINFO}
            onClick={() => act("setScreen", { setScreen: RCS_SENDINFO })}
            icon="share-square-o">
            Report
          </Tabs.Tab>
          {announcementConsole && (
            <Tabs.Tab
              selected={screen === RCS_ANNOUNCE}
              onClick={() => act("setScreen", { setScreen: RCS_ANNOUNCE })}
              icon="volume-up">
              Announce
            </Tabs.Tab>
          ) || null}
          <Tabs.Tab
            selected={screen === RCS_MAINMENU}
            onClick={() => act("setScreen", { setScreen: RCS_MAINMENU })}
            icon="cog" />
        </Tabs>
        {newmessagepriority && (
          <Section
            title={newmessagepriority > 1 ? "NEW PRIORITY MESSAGES" : "There are new messages!"}
            color={newmessagepriority > 1 ? "bad" : "average"} bold={newmessagepriority > 1} />
        ) || null}
        <BodyElement />
      </Window.Content>
    </Window>
  );
};