Bundle Copy

tgui/packages/tgui_ch/interfaces/MiningStackingConsole.js

@@ -0,0 +1,49 @@
+import { toTitleCase } from 'common/string';
+import { useBackend } from '../backend';
+import { Button, Section, LabeledList, AnimatedNumber, NumberInput } from '../components';
+import { Window } from '../layouts';
+
+export const MiningStackingConsole = (props, context) => {
+  const { act, data } = useBackend(context);
+
+  const { stacktypes, stackingAmt } = data;
+
+  return (
+    <Window width={400} height={500} resizable>
+      <Window.Content>
+        <Section title="Stacker Controls">
+          <LabeledList>
+            <LabeledList.Item label="Stacking">
+              <NumberInput
+                fluid
+                value={stackingAmt}
+                minValue={1}
+                maxValue={50}
+                stepPixelSize={5}
+                onChange={(e, val) => act('change_stack', { amt: val })}
+              />
+            </LabeledList.Item>
+            <LabeledList.Divider />
+            {(stacktypes.length &&
+              stacktypes.sort().map((stack) => (
+                <LabeledList.Item
+                  key={stack.type}
+                  label={toTitleCase(stack.type)}
+                  buttons={
+                    <Button icon="eject" onClick={() => act('release_stack', { stack: stack.type })}>
+                      Eject
+                    </Button>
+                  }>
+                  <AnimatedNumber value={stack.amt} />
+                </LabeledList.Item>
+              ))) || (
+              <LabeledList.Item label="Empty" color="average">
+                No stacks in machine.
+              </LabeledList.Item>
+            )}
+          </LabeledList>
+        </Section>
+      </Window.Content>
+    </Window>
+  );
+};