CHOMPStation2/tgui/packages/tgui/interfaces/SmartVend.js

import { map } from 'common/collections';
import { useBackend } from '../backend';
import { Button, Box, NoticeBox, Section, Table } from '../components';
import { Window } from '../layouts';

export const SmartVend = (props, context) => {
  const { act, config, data } = useBackend(context);
  return (
    <Window
      width={440}
      height={550}
      resizable>
      <Window.Content scrollable>
        <Section title="Storage">
          {data.secure && (
            <NoticeBox danger={data.locked === -1} info={data.locked !== -1}>
              {data.locked === -1 ? (
                <Box>Sec.re ACC_** //):securi_nt.diag=&gt;##&apos;or 1=1&apos;%($...</Box>
              ) : (
                <Box>Secure Access: Please have your identification ready.</Box>
              )}
            </NoticeBox>
          ) || null}
          {data.contents.length === 0 && (
            <NoticeBox>
              Unfortunately, this {config.title} is empty.
            </NoticeBox>
          ) || (
            <Table>
              <Table.Row header>
                <Table.Cell collapsing>
                  Item
                </Table.Cell>
                <Table.Cell collapsing textAlign="center">
                  Amount
                </Table.Cell>
                <Table.Cell collapsing textAlign="center">
                  Dispense
                </Table.Cell>
              </Table.Row>
              {map((value, key) => (
                <Table.Row key={key}>
                  <Table.Cell collapsing>
                    {value.name}
                  </Table.Cell>
                  <Table.Cell collapsing textAlign="center">
                    {value.amount} in stock
                  </Table.Cell>
                  <Table.Cell collapsing>
                    <Button
                      content="1"
                      disabled={value.amount < 1}
                      onClick={() => act('Release', {
                        index: value.index,
                        amount: 1,
                      })} />
                    <Button
                      content="5"
                      disabled={value.amount < 5}
                      onClick={() => act('Release', {
                        index: value.index,
                        amount: 5,
                      })} />
                    <Button
                      content="Custom"
                      disabled={value.amount < 1}
                      onClick={() => act('Release', {
                        index: value.index,
                      })} />
                    <Button
                      content="All"
                      disabled={value.amount < 1}
                      onClick={() => act('Release', {
                        index: value.index,
                        amount: value.amount,
                      })} />
                  </Table.Cell>
                </Table.Row>
              ))(data.contents)}
            </Table>
          )}
        </Section>
      </Window.Content>
    </Window>
  );
};