Merge pull request #14333 from SteelSlayer/tgui-mixer

[TGUI] Atmos Mixers

code/ATMOSPHERICS/components/trinary_devices/mixer.dm

@@ -152,7 +152,7 @@
 	return 1
 
 /obj/machinery/atmospherics/trinary/mixer/attack_ghost(mob/user)
-	ui_interact(user)
+	tgui_interact(user)
 
 /obj/machinery/atmospherics/trinary/mixer/attack_hand(mob/user)
 	if(..())
@@ -163,62 +163,62 @@
 		return
 
 	add_fingerprint(user)
-	ui_interact(user)
+	tgui_interact(user)
 
-/obj/machinery/atmospherics/trinary/mixer/ui_interact(mob/user, ui_key = "main", datum/nanoui/ui = null, force_open = 1, var/master_ui = null, var/datum/topic_state/state = GLOB.default_state)
+/obj/machinery/atmospherics/trinary/mixer/tgui_interact(mob/user, ui_key = "main", datum/tgui/ui = null, force_open = FALSE, datum/tgui/master_ui = null, datum/tgui_state/state = GLOB.tgui_default_state)
 	user.set_machine(src)
-	ui = SSnanoui.try_update_ui(user, src, ui_key, ui, force_open)
+	ui = SStgui.try_update_ui(user, src, ui_key, ui, force_open)
 	if(!ui)
-		ui = new(user, src, ui_key, "atmos_mixer.tmpl", name, 370, 165, state = state)
+		ui = new(user, src, ui_key, "AtmosMixer", name, 330, 165, master_ui, state)
 		ui.open()
 
-/obj/machinery/atmospherics/trinary/mixer/ui_data(mob/user)
-	var/list/data = list()
-	data["on"] = on
-	data["pressure"] = round(target_pressure)
-	data["max_pressure"] = round(MAX_OUTPUT_PRESSURE)
-	data["node1_concentration"] = round(node1_concentration*100)
-	data["node2_concentration"] = round(node2_concentration*100)
+/obj/machinery/atmospherics/trinary/mixer/tgui_data(mob/user)
+	var/list/data = list(
+		"on" = on,
+		"pressure" = round(target_pressure, 0.01),
+		"max_pressure" = MAX_OUTPUT_PRESSURE,
+		"node1_concentration" = round(node1_concentration * 100),
+		"node2_concentration" = round(node2_concentration * 100)
+	)
 	return data
 
-/obj/machinery/atmospherics/trinary/mixer/Topic(href,href_list)
+
+
+/obj/machinery/atmospherics/trinary/mixer/tgui_act(action, list/params)
 	if(..())
-		return 1
+		return
 
-	if(href_list["power"])
-		on = !on
-		investigate_log("was turned [on ? "on" : "off"] by [key_name(usr)]", "atmos")
-		. = TRUE
-	if(href_list["pressure"])
-		var/pressure = href_list["pressure"]
-		if(pressure == "max")
-			pressure = MAX_OUTPUT_PRESSURE
-			. = TRUE
-		else if(pressure == "input")
-			pressure = input("New output pressure (0-[MAX_OUTPUT_PRESSURE] kPa):", name, target_pressure) as num|null
-			if(!isnull(pressure) && !..())
-				. = TRUE
-		else if(text2num(pressure) != null)
-			pressure = text2num(pressure)
-			. = TRUE
-		if(.)
-			target_pressure = clamp(pressure, 0, MAX_OUTPUT_PRESSURE)
-			investigate_log("was set to [target_pressure] kPa by [key_name(usr)]", "atmos")
-	if(href_list["node1"])
-		var/value = text2num(href_list["node1"])
-		node1_concentration = max(0, min(1, node1_concentration + value))
-		node2_concentration = max(0, min(1, node2_concentration - value))
-		investigate_log("was set to [node1_concentration] % on node 1 by [key_name(usr)]", "atmos")
-		. = TRUE
-	if(href_list["node2"])
-		var/value = text2num(href_list["node2"])
-		node2_concentration = max(0, min(1, node2_concentration + value))
-		node1_concentration = max(0, min(1, node1_concentration - value))
-		investigate_log("was set to [node2_concentration] % on node 2 by [key_name(usr)]", "atmos")
-		. = TRUE
+	switch(action)
+		if("power")
+			toggle()
+			investigate_log("was turned [on ? "on" : "off"] by [key_name(usr)]", "atmos")
+			return TRUE
 
-	update_icon()
-	SSnanoui.update_uis(src)
+		if("set_node")
+			if(params["node_name"] == "Node 1")
+				node1_concentration = clamp(round(text2num(params["concentration"]), 0.01), 0, 1)
+				node2_concentration = round(1 - node1_concentration, 0.01)
+				investigate_log("was set to [node1_concentration] % on node 1 by [key_name(usr)]", "atmos")
+				return TRUE
+			else
+				node2_concentration = clamp(round(text2num(params["concentration"]), 0.01), 0, 1)
+				node1_concentration = round(1 - node2_concentration, 0.01)
+				investigate_log("was set to [node2_concentration] % on node 2 by [key_name(usr)]", "atmos")
+				return TRUE
+
+		if("max_pressure")
+			target_pressure = MAX_OUTPUT_PRESSURE
+			. = TRUE
+
+		if("min_pressure")
+			target_pressure = 0
+			. = TRUE
+
+		if("custom_pressure")
+			target_pressure = clamp(text2num(params["pressure"]), 0, MAX_OUTPUT_PRESSURE)
+			. = TRUE
+	if(.)
+		investigate_log("was set to [target_pressure] kPa by [key_name(usr)]", "atmos")
 
 /obj/machinery/atmospherics/trinary/mixer/attackby(obj/item/W, mob/user, params)
 	if(istype(W, /obj/item/pen))

nano/templates/atmos_mixer.tmpl

@@ -1,32 +0,0 @@
-<div class="item">
-	<div class="itemLabel">Power:</div>
-	<div class="itemContent">{{:helper.link(data.on ? 'On' : 'Off', data.on ? 'power-off' : 'times', {'power' : 1}, null, data.on ? 'selected' : null)}}</div>
-</div>
-<div class="item">
-	<div class="itemLabel">Output Pressure:</div>
-	<div class="itemContent">
-		{{:helper.link('Set', 'pencil', {'pressure' : 'input'})}}
-		{{:helper.link('Max', 'plus', {'pressure' : 'max'}, data.pressure == data.max_pressure ? 'disabled' : null)}}
-		{{:helper.smoothRound(data.pressure)}} kPa
-	</div>
-</div>
-<div class="item">
-	<div class="itemLabel">Node 1:</div>
-	<div class="itemContent">
-		{{:helper.link('<i class="fa fa-fast-backward"></i>', null, {'node1' : -0.1}, data.node1_concentration == 0 ? 'disabled' : null)}}
-		{{:helper.link('<i class="fa fa-backward"></i>', null, {'node1' : -0.01}, data.node1_concentration == 0 ? 'disabled' : null)}}
-		{{:helper.link('<i class="fa fa-forward"></i>', null, {'node1' : 0.01}, data.node1_concentration == 100 ? 'disabled' : null)}}
-		{{:helper.link('<i class="fa fa-fast-forward"></i>', null, {'node1' : 0.1}, data.node1_concentration == 100 ? 'disabled' : null)}}
-		{{:helper.smoothRound(data.node1_concentration)}}%
-	</div>
-</div>
-<div class="item">
-	<div class="itemLabel">Node 2:</div>
-	<div class="itemContent">
-		{{:helper.link('<i class="fa fa-fast-backward"></i>', null, {'node2' : -0.1}, data.node2_concentration == 0 ? 'disabled' : null)}}
-		{{:helper.link('<i class="fa fa-backward"></i>', null, {'node2' : -0.01}, data.node2_concentration == 0 ? 'disabled' : null)}}
-		{{:helper.link('<i class="fa fa-forward"></i>', null, {'node2' : 0.01}, data.node2_concentration == 100 ? 'disabled' : null)}}
-		{{:helper.link('<i class="fa fa-fast-forward"></i>', null, {'node2' : 0.1}, data.node2_concentration == 100 ? 'disabled' : null)}}
-		{{:helper.smoothRound(data.node2_concentration)}}%
-	</div>
-</div>

tgui/packages/tgui/interfaces/AtmosMixer.js

@@ -0,0 +1,109 @@
+import { useBackend } from "../backend";
+import { Button, Section, NumberInput, LabeledList, Flex } from "../components";
+import { Window } from "../layouts";
+
+export const AtmosMixer = (props, context) => {
+  const { act, data } = useBackend(context);
+  const {
+    on,
+    pressure,
+    max_pressure,
+    node1_concentration,
+    node2_concentration,
+  } = data;
+
+  return (
+    <Window>
+      <Window.Content>
+        <Section>
+          <LabeledList>
+            <LabeledList.Item label="Power">
+              <Button
+                icon={on ? "power-off" : "power-off"}
+                content={on ? "On" : "Off"}
+                color={on ? null : "red"}
+                selected={on}
+                onClick={() => act('power')} />
+            </LabeledList.Item>
+            <LabeledList.Item label="Rate">
+              <Button
+                icon="fast-backward"
+                textAlign="center"
+                disabled={pressure === 0}
+                width={2.2}
+                onClick={() => act('min_pressure')} />
+              <NumberInput
+                animated
+                unit="kPa"
+                width={6.1}
+                lineHeight={1.5}
+                step={10}
+                minValue={0}
+                maxValue={max_pressure}
+                value={pressure}
+                onDrag={(e, value) => act('custom_pressure', {
+                  pressure: value,
+                })} />
+              <Button
+                icon="fast-forward"
+                textAlign="center"
+                disabled={pressure === max_pressure}
+                width={2.2}
+                onClick={() => act('max_pressure')} />
+            </LabeledList.Item>
+            <NodeControls
+              node_name="Node 1"
+              node_ref={node1_concentration} />
+            <NodeControls
+              node_name="Node 2"
+              node_ref={node2_concentration} />
+          </LabeledList>
+        </Section>
+      </Window.Content>
+    </Window>
+  );
+};
+
+const NodeControls = (props, context) => {
+  const { act, data } = useBackend(context);
+  const {
+    node_name,
+    node_ref,
+  } = props;
+
+  return (
+    <LabeledList.Item label={node_name}>
+      <Button
+        icon="fast-backward"
+        textAlign="center"
+        width={2.2}
+        disabled={node_ref === 0}
+        onClick={() => act('set_node', {
+          node_name: node_name,
+          concentration: (node_ref - 10) / 100,
+        })} />
+      <NumberInput
+        animated
+        unit="%"
+        width={6.1}
+        lineHeight={1.5}
+        stepPixelSize={10}
+        minValue={0}
+        maxValue={100}
+        value={node_ref}
+        onChange={(e, value) => act('set_node', {
+          node_name: node_name,
+          concentration: (value / 100),
+        })} />
+      <Button
+        icon="fast-forward"
+        textAlign="center"
+        width={2.2}
+        disabled={node_ref === 100}
+        onClick={() => act('set_node', {
+          node_name: node_name,
+          concentration: (node_ref + 10) / 100,
+        })} />
+    </LabeledList.Item>
+  );
+};