TGUI Stacking Machine

code/modules/mining/machine_stacking.dm

@@ -25,46 +25,47 @@
 
 /obj/machinery/mineral/stacking_unit_console/attack_hand(mob/user)
 	add_fingerprint(user)
-	interact(user)
+	tgui_interact(user)
 
-/obj/machinery/mineral/stacking_unit_console/interact(mob/user)
-	user.set_machine(src)
+/obj/machinery/mineral/stacking_unit_console/tgui_interact(mob/user, datum/tgui/ui)
+	ui = SStgui.try_update_ui(user, src, ui)
+	if(!ui)
+		ui = new(user, src, "MiningStackingConsole", name)
+		ui.open()
 
-	var/dat
-
-	dat += text("<h1>Stacking unit console</h1><hr><table>")
+/obj/machinery/mineral/stacking_unit_console/tgui_data(mob/user)
+	var/list/data = ..()
 
+	data["stacktypes"] = list()
 	for(var/stacktype in machine.stack_storage)
 		if(machine.stack_storage[stacktype] > 0)
-			dat += "<tr><td width = 150><b>[capitalize(stacktype)]:</b></td><td width = 30>[machine.stack_storage[stacktype]]</td><td width = 50><A href='?src=\ref[src];release_stack=[stacktype]'>\[release\]</a></td></tr>"
-	dat += "</table><hr>"
-	dat += text("<br>Stacking: [machine.stack_amt] <A href='?src=\ref[src];change_stack=1'>\[change\]</a><br><br>")
+			data["stacktypes"].Add(list(list(
+				"type" = stacktype,
+				"amt" = machine.stack_storage[stacktype],
+			)))
+	data["stackingAmt"] = machine.stack_amt
+	return data
 
-	user << browse("[dat]", "window=console_stacking_machine")
-	onclose(user, "console_stacking_machine")
-
-
-/obj/machinery/mineral/stacking_unit_console/Topic(href, href_list)
+/obj/machinery/mineral/stacking_unit_console/tgui_act(action, list/params)
 	if(..())
-		return 1
+		return TRUE
 
-	if(href_list["change_stack"])
-		var/choice = input("What would you like to set the stack amount to?") as null|anything in list(1,5,10,20,50)
-		if(!choice) return
-		machine.stack_amt = choice
+	switch(action)
+		if("change_stack")
+			machine.stack_amt = clamp(text2num(params["amt"]), 1, 50)
+			. = TRUE
 
-	if(href_list["release_stack"])
-		if(machine.stack_storage[href_list["release_stack"]] > 0)
-			var/stacktype = machine.stack_paths[href_list["release_stack"]]
-			var/obj/item/stack/material/S = new stacktype (get_turf(machine.output))
-			S.amount = machine.stack_storage[href_list["release_stack"]]
-			machine.stack_storage[href_list["release_stack"]] = 0
-			S.update_icon()
+		if("release_stack")
+			var/stack = params["stack"]
+			if(machine.stack_storage[stack] > 0)
+				var/stacktype = machine.stack_paths[stack]
+				var/obj/item/stack/material/S = new stacktype(get_turf(machine.output))
+				S.amount = machine.stack_storage[stack]
+				machine.stack_storage[stack] = 0
+				S.update_icon()
+			. = TRUE
 
-	src.add_fingerprint(usr)
-	src.updateUsrDialog()
-
-	return
+	add_fingerprint(usr)
 
 /**********************Mineral stacking unit**************************/
 

tgui/packages/tgui/interfaces/MiningStackingConsole.js

@@ -0,0 +1,51 @@
+import { toTitleCase } from 'common/string';
+import { Fragment } from 'inferno';
+import { useBackend, useLocalState } from "../backend";
+import { Box, Button, Collapsible, Dropdown, Flex, Input, NoticeBox, Section, LabeledList, AnimatedNumber, NumberInput } from '../components';
+import { Window } from "../layouts";
+import { sortBy } from 'common/collections';
+
+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>
+  );
+};