tgui-next: Gravity Generator (#48082)

* Basic ui procs

* Basic tgui-next

* tgui-next gravity generator

* Review fixes

* Code cleanup

* rebuild

code/modules/power/gravitygenerator.dm

@@ -117,6 +117,8 @@ GLOBAL_LIST_EMPTY(gravity_generators) // We will keep track of this by adding ne
 	sprite_number = 8
 	use_power = IDLE_POWER_USE
 	interaction_flags_machine = INTERACT_MACHINE_ALLOW_SILICON | INTERACT_MACHINE_OFFLINE
+	ui_x = 400
+	ui_y = 200
 	var/on = TRUE
 	var/breaker = TRUE
 	var/list/parts = list()
@@ -220,40 +222,33 @@ GLOBAL_LIST_EMPTY(gravity_generators) // We will keep track of this by adding ne
 				return
 	return ..()
 
-/obj/machinery/gravity_generator/main/ui_interact(mob/user)
-	if(stat & BROKEN)
-		return
-	var/dat = "Gravity Generator Breaker: "
-	if(breaker)
-		dat += "<span class='linkOn'>ON</span> <A href='?src=[REF(src)];gentoggle=1'>OFF</A>"
-	else
-		dat += "<A href='?src=[REF(src)];gentoggle=1'>ON</A> <span class='linkOn'>OFF</span> "
+/obj/machinery/gravity_generator/main/ui_interact(mob/user, ui_key = "main", datum/tgui/ui = null, force_open = FALSE, \
+									datum/tgui/master_ui = null, datum/ui_state/state = GLOB.default_state)
+	ui = SStgui.try_update_ui(user, src, ui_key, ui, force_open)
+	if(!ui)
+		ui = new(user, src, ui_key, "gravity_generator", name, ui_x, ui_y, master_ui, state)
+		ui.open()
 
-	dat += "<br>Generator Status:<br><div class='statusDisplay'>"
-	if(charging_state != POWER_IDLE)
-		dat += "<font class='bad'>WARNING</font> Radiation Detected. <br>[charging_state == POWER_UP ? "Charging..." : "Discharging..."]"
-	else if(on)
-		dat += "Powered."
-	else
-		dat += "Unpowered."
+/obj/machinery/gravity_generator/main/ui_data(mob/user)
+	var/list/data = list()
 
-	dat += "<br>Gravity Charge: [charge_count]%</div>"
+	data["breaker"] = breaker
+	data["charge_count"] = charge_count
+	data["charging_state"] = charging_state
+	data["on"] = on
+	data["operational"] = (stat & BROKEN) ? FALSE : TRUE
 
-	var/datum/browser/popup = new(user, "gravgen", name)
-	popup.set_content(dat)
-	popup.open()
-
-
-/obj/machinery/gravity_generator/main/Topic(href, href_list)
+	return data
 
+/obj/machinery/gravity_generator/main/ui_act(action, params)
 	if(..())
 		return
 
-	if(href_list["gentoggle"])
-		breaker = !breaker
-		investigate_log("was toggled [breaker ? "<font color='green'>ON</font>" : "<font color='red'>OFF</font>"] by [key_name(usr)].", INVESTIGATE_GRAVITY)
-		set_power()
-		src.updateUsrDialog()
+	switch(action)
+		if("gentoggle")
+			breaker = !breaker
+			investigate_log("was toggled [breaker ? "<font color='green'>ON</font>" : "<font color='red'>OFF</font>"] by [key_name(usr)].", INVESTIGATE_GRAVITY)
+			set_power()
 
 // Power and Icon States
 

tgui-next/packages/tgui/interfaces/GravityGenerator.js

@@ -0,0 +1,68 @@
+import { Fragment } from 'inferno';
+import { useBackend } from '../backend';
+import { Box, Button, LabeledList, NoticeBox, ProgressBar, Section } from '../components';
+
+export const GravityGenerator = props => {
+  const { act, data } = useBackend(props);
+  const {
+    breaker,
+    charge_count,
+    charging_state,
+    on,
+    operational,
+  } = data;
+  return (
+    <Fragment>
+      <Section>
+        {!operational && (
+          <NoticeBox>No data available</NoticeBox>
+        ) || (
+          <LabeledList>
+            <LabeledList.Item
+              label="Status"
+              buttons={(
+                <Button
+                  icon={breaker ? 'power-off' : 'times'}
+                  content={breaker ? 'Online' : 'Offline'}
+                  selected={breaker}
+                  disabled={!operational}
+                  onClick={() => act('gentoggle')} />
+              )}>
+              <Box
+                color={on ? 'good' : 'bad'}>
+                {on ? 'Powered' : 'Unpowered'}
+              </Box>
+            </LabeledList.Item>
+            <LabeledList.Item label="Gravity Charge">
+              <ProgressBar
+                value={charge_count / 100}
+                ranges={{
+                  good: [0.7, Infinity],
+                  average: [0.3, 0.7],
+                  bad: [-Infinity, 0.3],
+                }} />
+            </LabeledList.Item>
+            {charging_state !== 0 && (
+              <LabeledList.Item label="Charge Mode">
+                {charging_state === 1 && (
+                  <NoticeBox>Charging...</NoticeBox>
+                ) || charging_state === 2 && (
+                  <NoticeBox>Discharging...</NoticeBox>
+                )}
+              </LabeledList.Item>
+            )}
+          </LabeledList>
+        )}
+      </Section>
+      {operational && charging_state !== 0 && (
+        <Section>
+          <NoticeBox textAlign="center">
+            WARNING - Radiation detected
+          </NoticeBox>
+        </Section>
+      ) || (
+        ""
+      )}
+    </Fragment>
+  );
+};

tgui-next/packages/tgui/routes.js

@@ -34,6 +34,7 @@ import { DisposalUnit } from './interfaces/DisposalUnit';
 import { DnaVault } from './interfaces/DnaVault';
 import { EngravedMessage } from './interfaces/EngravedMessage';
 import { Gps } from './interfaces/Gps';
+import { GravityGenerator } from './interfaces/GravityGenerator';
 import { GulagItemReclaimer } from './interfaces/GulagItemReclaimer';
 import { Holodeck } from './interfaces/Holodeck';
 import { ImplantChair } from './interfaces/ImplantChair';
@@ -227,6 +228,10 @@ const ROUTES = {
     component: () => Gps,
     scrollable: true,
   },
+  gravity_generator: {
+    component: () => GravityGenerator,
+    scrollable: false,
+  },
   gulag_item_reclaimer: {
     component: () => GulagItemReclaimer,
     scrollable: true,