[MIRROR] tgui: Stacking Machine Console and Safe UI fix (#1866)

* tgui: Stacking Machine Console and Safe UI fix

* frds

Co-authored-by: Arkatos1 <43862960+Arkatos1@users.noreply.github.com>
Co-authored-by: Gandalf <jzo123@hotmail.com>

code/modules/mining/machine_stacking.dm

@@ -7,7 +7,9 @@
 	desc = "Controls a stacking machine... in theory."
 	density = FALSE
 	circuit = /obj/item/circuitboard/machine/stacking_unit_console
+	/// Connected stacking machine
 	var/obj/machinery/mineral/stacking_machine/machine
+	/// Direction for which console looks for stacking machine to connect to
 	var/machinedir = SOUTHEAST
 
 /obj/machinery/mineral/stacking_unit_console/Initialize()
@@ -16,27 +18,6 @@
 	if (machine)
 		machine.CONSOLE = src
 
-/obj/machinery/mineral/stacking_unit_console/ui_interact(mob/user)
-	. = ..()
-
-	if(!machine)
-		to_chat(user, "<span class='notice'>[src] is not linked to a machine!</span>")
-		return
-
-	var/obj/item/stack/sheet/s
-	var/dat
-
-	dat += text("<b>Stacking unit console</b><br><br>")
-
-	for(var/O in machine.stack_list)
-		s = machine.stack_list[O]
-		if(s.amount > 0)
-			dat += text("[capitalize(s.name)]: [s.amount] <A href='?src=[REF(src)];release=[s.type]'>Release</A><br>")
-
-	dat += text("<br>Stacking: [machine.stack_amt]<br><br>")
-
-	user << browse(dat, "window=console_stacking_machine")
-
 /obj/machinery/mineral/stacking_unit_console/multitool_act(mob/living/user, obj/item/I)
 	if(!multitool_check_buffer(user, I))
 		return
@@ -45,22 +26,45 @@
 	to_chat(user, "<span class='notice'>You store linkage information in [I]'s buffer.</span>")
 	return TRUE
 
-/obj/machinery/mineral/stacking_unit_console/Topic(href, href_list)
-	if(..())
+/obj/machinery/mineral/stacking_unit_console/ui_interact(mob/user, datum/tgui/ui)
+	ui = SStgui.try_update_ui(user, src, ui)
+	if(!ui)
+		ui = new(user, src, "StackingConsole", name)
+		ui.open()
+
+/obj/machinery/mineral/stacking_unit_console/ui_data(mob/user)
+	var/list/data = list()
+	data["machine"] = machine ? TRUE : FALSE
+	data["stacking_amount"] = null
+	data["contents"] = list()
+	if(machine)
+		data["stacking_amount"] = machine.stack_amt
+		for(var/stack_type in machine.stack_list)
+			var/obj/item/stack/sheet/stored_sheet = machine.stack_list[stack_type]
+			if(stored_sheet.amount <= 0)
+				continue
+			data["contents"] += list(list(
+				"type" = stored_sheet.type,
+				"name" = capitalize(stored_sheet.name),
+				"amount" = stored_sheet.amount,
+			))
+	return data
+
+/obj/machinery/mineral/stacking_unit_console/ui_act(action, list/params)
+	. = ..()
+	if(.)
 		return
-	usr.set_machine(src)
-	src.add_fingerprint(usr)
-	if(href_list["release"])
-		if(!(text2path(href_list["release"]) in machine.stack_list))
-			return //someone tried to spawn materials by spoofing hrefs
-		var/obj/item/stack/sheet/inp = machine.stack_list[text2path(href_list["release"])]
-		var/obj/item/stack/sheet/out = new inp.type(null, inp.amount)
-		inp.amount = 0
-		machine.unload_mineral(out)
-
-	src.updateUsrDialog()
-	return
 
+	switch(action)
+		if("release")
+			var/obj/item/stack/sheet/released_type = text2path(params["type"])
+			if(!released_type || !(initial(released_type.merge_type) in machine.stack_list))
+				return //someone tried to spawn materials by spoofing hrefs
+			var/obj/item/stack/sheet/inp = machine.stack_list[initial(released_type.merge_type)]
+			var/obj/item/stack/sheet/out = new inp.type(null, inp.amount)
+			inp.amount = 0
+			machine.unload_mineral(out)
+			return TRUE
 
 /**********************Mineral stacking unit**************************/
 

tgui/packages/tgui/interfaces/Safe.js

@@ -13,7 +13,7 @@ export const Safe = (properties, context) => {
   return (
     <Window
       width={625}
-      height={760}
+      height={800}
       theme="ntos">
       <Window.Content>
         <Box className="Safe__engraving">
@@ -29,7 +29,7 @@ export const Safe = (properties, context) => {
           <Icon
             className="Safe__engraving-arrow"
             name="long-arrow-alt-down"
-            size="3"
+            size="5"
           /><br />
           {open ? (
             <Contents />

tgui/packages/tgui/interfaces/StackingConsole.js

@@ -0,0 +1,71 @@
+import { Fragment } from 'inferno';
+import { useBackend } from '../backend';
+import { Button, LabeledList, NoticeBox, Section } from '../components';
+import { Window } from '../layouts';
+
+export const StackingConsole = (props, context) => {
+  const { act, data } = useBackend(context);
+  const {
+    machine,
+  } = data;
+  return (
+    <Window
+      width={320}
+      height={340}
+      resizable>
+      <Window.Content scrollable>
+        {!machine ? (
+          <NoticeBox>
+            No connected stacking machine
+          </NoticeBox>
+        ) : (
+          <StackingConsoleContent />
+        )}
+      </Window.Content>
+    </Window>
+  );
+};
+
+export const StackingConsoleContent = (props, context) => {
+  const { act, data } = useBackend(context);
+  const {
+    stacking_amount,
+    contents = [],
+  } = data;
+  return (
+    <Fragment>
+      <Section>
+        <LabeledList>
+          <LabeledList.Item label="Stacking Amount">
+            {stacking_amount || "Unknown"}
+          </LabeledList.Item>
+        </LabeledList>
+      </Section>
+      <Section title="Stored Materials">
+        {!contents.length ? (
+          <NoticeBox>
+            No stored materials
+          </NoticeBox>
+        ) : (
+          <LabeledList>
+            {contents.map(sheet => (
+              <LabeledList.Item
+                key={sheet.type}
+                label={sheet.name}
+                buttons={(
+                  <Button
+                    icon="eject"
+                    content="Release"
+                    onClick={() => act('release', {
+                      type: sheet.type,
+                    })} />
+                )}>
+                {sheet.amount || "Unknown"}
+              </LabeledList.Item>
+            ))}
+          </LabeledList>
+        )}
+      </Section>
+    </Fragment>
+  );
+};

tgui/packages/tgui/styles/interfaces/Safe.scss

@@ -24,7 +24,7 @@
 }
 
 .Safe__dialer {
-  margin-bottom: 0.5rem;
+  margin-bottom: 1.25rem;
   .Button {
     width: 80px;
   }