CHOMPStation2/tgui/packages/tgui/interfaces/TelecommsLogBrowser.js

import { round } from 'common/math';
import { Fragment } from 'inferno';
import { useBackend } from "../backend";
import { Box, Button, Flex, NoticeBox, LabeledList, Section } from "../components";
import { Window } from "../layouts";

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

  const {
    universal_translate,
    network,
    temp,
    servers,
    selectedServer,
  } = data;
  
  return (
    <Window
      width={575}
      height={450}
      resizable>
      <Window.Content scrollable>
        {temp ? (
          <NoticeBox danger={temp.color === "bad"} warning={temp.color !== "bad"}>
            <Box display="inline-box" verticalAlign="middle">
              {temp.text}
            </Box>
            <Button
              icon="times-circle"
              float="right"
              onClick={() => act('cleartemp')} />
            <Box clear="both" />
          </NoticeBox>
        ) : null}
        <Section title="Network Control">
          <LabeledList>
            <LabeledList.Item
              label="Current Network"
              buttons={(
                <Fragment>
                  <Button
                    icon="search"
                    content="Refresh"
                    onClick={() => act("scan")} />
                  <Button
                    color="bad"
                    icon="exclamation-triangle"
                    content="Flush Buffer"
                    disabled={servers.length === 0}
                    onClick={() => act('release')} />
                </Fragment>
              )}>
              <Button
                content={network}
                icon="pen"
                onClick={() => act('network')} />
            </LabeledList.Item>
          </LabeledList>
        </Section>
        {selectedServer
          ? (
            <TelecommsSelectedServer
              network={network}
              server={selectedServer}
              universal_translate={universal_translate} />
          ) : (
            <TelecommsServerSelection
              network={network}
              servers={servers} />
          )}
      </Window.Content>
    </Window>
  );
};

const TelecommsServerSelection = (props, context) => {
  const { act, data } = useBackend(context);
  const {
    network,
    servers,
  } = props;

  if (!servers || !servers.length) {
    return (
      <Section title="Detected Telecommunications Servers">
        <Box color="bad">
          No servers detected.
        </Box>
        <Button
          fluid
          content="Scan"
          icon="search"
          onClick={() => act('scan')} />
      </Section>
    );
  }

  return (
    <Section title="Detected Telecommunications Servers">
      <LabeledList>
        {servers.map(server => (
          <LabeledList.Item
            key={server.id}
            label={server.name+ " (" + server.id + ")"}>
            <Button
              content="View"
              icon="eye"
              onClick={() => act('view', { id: server.id })} />
          </LabeledList.Item>
        ))}
      </LabeledList>
    </Section>
  );
};

const TelecommsSelectedServer = (props, context) => {
  const { act, data } = useBackend(context);
  const {
    network,
    server,
    universal_translate,
  } = props;

  return (
    <Section
      title={"Server (" + server.id + ")"}
      buttons={
        <Button
          content="Return"
          icon="undo"
          onClick={() => act("mainmenu")} />
      }>
      <LabeledList>
        <LabeledList.Item label="Total Recorded Traffic">
          {server.totalTraffic >= 1024 
            ? round(server.totalTraffic / 1024) + " Terrabytes"
            : server.totalTraffic + " Gigabytes"}
        </LabeledList.Item>
      </LabeledList>
      <Section title="Stored Logs" mt="4px">
        <Flex wrap="wrap">
          {(!server.logs || !server.logs.length)
            ? "No Logs Detected."
            : server.logs.map(log => (
              <Flex.Item m="2px" key={log.id} basis="49%" grow={log.id % 2}>
                <Section
                  title={(universal_translate
                      || log.parameters["uspeech"]
                      || log.parameters["intelligible"]
                      || log.input_type === "Execution Error")
                    ? log.input_type
                    : "Audio File"}
                  buttons={
                    <Button.Confirm
                      confirmContent="Delete Log?"
                      color="bad"
                      icon="trash"
                      confirmIcon="trash"
                      onClick={() => act('delete', { id: log.id })} />
                  }>
                  {log.input_type === "Execution Error" ? (
                    <LabeledList>
                      <LabeledList.Item label="Data type">
                        Error
                      </LabeledList.Item>
                      <LabeledList.Item label="Output">
                        {log.parameters["message"]}
                      </LabeledList.Item>
                      <LabeledList.Item label="Delete">
                        <Button
                          icon="trash"
                          onClick={() => act('delete', { id: log.id })} />
                      </LabeledList.Item>
                    </LabeledList>
                  ) : (universal_translate
                      || log.parameters["uspeech"]
                      || log.parameters["intelligible"])
                    ? <TelecommsLog log={log} />
                    : <TelecommsLog error />}
                </Section>
              </Flex.Item>
            )) }
        </Flex>
      </Section>
    </Section>
  );
};


const TelecommsLog = (props, context) => {
  const { act, data } = useBackend(context);
  const {
    log,
    error,
  } = props;

  const {
    timecode,
    name,
    race,
    job,
    message,
  } = (log && log.parameters) || { "none": "none" };

  if (error) {
    return (
      <LabeledList>
        <LabeledList.Item label="Time Recieved">
          {timecode}
        </LabeledList.Item>
        <LabeledList.Item label="Source">
          Unidentifiable
        </LabeledList.Item>
        <LabeledList.Item label="Class">
          {race}
        </LabeledList.Item>
        <LabeledList.Item label="Contents">
          Unintelligible
        </LabeledList.Item>
      </LabeledList>
    );
  }

  return (
    <LabeledList>
      <LabeledList.Item label="Time Recieved">
        {timecode}
      </LabeledList.Item>
      <LabeledList.Item label="Source">
        {name} (Job: {job})
      </LabeledList.Item>
      <LabeledList.Item label="Class">
        {race}
      </LabeledList.Item>
      <LabeledList.Item label="Contents" className="LabeledList__breakContents">
        {message}
      </LabeledList.Item>
    </LabeledList>
  );
};