Merge pull request #14678 from variableundefined/tgui-sat

Update Satellite Control to TGUI

code/modules/station_goals/shield.dm

@@ -50,28 +50,15 @@
 /obj/machinery/computer/sat_control/attack_hand(mob/user)
 	if(..())
 		return 1
-	ui_interact(user)
+	tgui_interact(user)
 
-/obj/machinery/computer/sat_control/ui_interact(mob/user, ui_key = "main", var/datum/nanoui/ui = null, var/force_open = 1)
-	ui = SSnanoui.try_update_ui(user, src, ui_key, ui, force_open)
+/obj/machinery/computer/sat_control/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)
+	ui = SStgui.try_update_ui(user, src, ui_key, ui, force_open)
 	if(!ui)
-		ui = new(user, src, ui_key, "sat_control.tmpl", name, 475, 400)
+		ui = new(user, src, ui_key, "SatelliteControl", name, 475, 400)
 		ui.open()
 
-/obj/machinery/computer/sat_control/Topic(href, href_list)
-	if(..())
-		return 1
-
-	if(href_list["toggle"])
-		toggle(text2num(href_list["id"]))
-		. = TRUE
-
-/obj/machinery/computer/sat_control/proc/toggle(id)
-	for(var/obj/machinery/satellite/S in GLOB.machines)
-		if(S.id == id && atoms_share_level(src, S))
-			S.toggle()
-
-/obj/machinery/computer/sat_control/ui_data(mob/user, ui_key = "main", datum/topic_state/state = GLOB.default_state)
+/obj/machinery/computer/sat_control/tgui_data(mob/user)
 	var/list/data = list()
 
 	data["satellites"] = list()
@@ -91,6 +78,24 @@
 		data["meteor_shield_coverage_percentage"] = (G.get_coverage() / G.coverage_goal) * 100
 	return data
 
+/obj/machinery/computer/sat_control/tgui_act(action, params)
+	if(..())
+		return
+
+	switch(action)
+		if("toggle")
+			toggle(text2num(params["id"]))
+			. = TRUE
+
+/obj/machinery/computer/sat_control/proc/toggle(id)
+	for(var/obj/machinery/satellite/S in GLOB.machines)
+		if(S.id == id && atoms_share_level(src, S))
+			if(!S.toggle())
+				notice = "You can only activate satellites which are in space"
+			else
+				notice = null
+
+
 /obj/machinery/satellite
 	name = "Defunct Satellite"
 	desc = ""
@@ -118,8 +123,8 @@
 /obj/machinery/satellite/proc/toggle(mob/user)
 	if(!active && !isinspace())
 		if(user)
-			to_chat(user, "<span class='warning'>You can only active the [src] in space.</span>")
-		return TRUE
+			to_chat(user, "<span class='warning'>You can only activate satellites which are in space.</span>")
+		return FALSE
 	if(user)
 		to_chat(user, "<span class='notice'>You [active ? "deactivate": "activate"] the [src]</span>")
 	active = !active
@@ -130,6 +135,7 @@
 		animate(src, pixel_y = 0, time = 10)
 		anchored = 0
 	update_icon()
+	return TRUE
 
 /obj/machinery/satellite/update_icon()
 	icon_state = active ? "sat_active" : "sat_inactive"

nano/templates/sat_control.tmpl

@@ -1,32 +0,0 @@
-<!--
-Title: Satellite Control UI
-Used In File(s): \code\modules\station_goals\shield.dm
--->
-{{if data.notice}}
-	<div class="notice">{{:data.notice}}</div>
-{{/if}}
-<h3>Satellite Network Control</h3>
-{{for data.satellites}}
-	<div class="item">
-		<div class="itemLabel">
-			#{{:value.id}} - {{:value.mode}}
-		</div>
-		<div class="itemContent">
-			
-			{{:helper.link(value.active ? 'Deactivate' : 'Activate', null, {'toggle' : 1, 'id' : value.id})}}
-		</div>
-	</div>
-{{/for}}
-{{if data.meteor_shield}}
-<div class="item">
-	<div class="itemLabel">
-		Station Shield Coverage:
-	</div>
-	<div class="itemContent">
-		{{:helper.displayBar(data.meteor_shield_coverage, 0, data.meteor_shield_coverage_max, data.meteor_shield_coverage_percentage >= 100 ? 'good' : 'average')}}
-		<div class="statusValue">
-			{{:data.meteor_shield_coverage_percentage}}%
-		</div>
-	</div>
-</div>
-{{/if}}

tgui/packages/tgui/interfaces/SatelliteControl.js

@@ -0,0 +1,50 @@
+import { useBackend } from '../backend';
+import { Button, LabeledList, Section, ProgressBar } from '../components';
+import { Window } from '../layouts';
+
+export const SatelliteControl = (props, context) => {
+  const { act, data } = useBackend(context);
+  const {
+    satellites,
+    notice,
+    meteor_shield,
+    meteor_shield_coverage,
+    meteor_shield_coverage_max,
+    meteor_shield_coverage_percentage,
+  } = data;
+  return (
+    <Window resizable>
+      <Window.Content scrollable>
+        {meteor_shield && (
+          <Section title="Station Shield Coverage">
+            <ProgressBar
+              color={meteor_shield_coverage_percentage >= 100 ? 'good': 'average'}
+              value={meteor_shield_coverage}
+              maxValue={meteor_shield_coverage_max}>
+              {meteor_shield_coverage_percentage} %
+            </ProgressBar>
+          </Section>
+        )}
+        <Section title="Satellite Network Control">
+          <LabeledList>
+            {notice && (
+              <LabeledList.Item label="Alert" color="red">
+                {data.notice}
+              </LabeledList.Item>
+            )}
+            {satellites.map(sat => (
+              <LabeledList.Item key={sat.id} label={"#" + sat.id}>
+                {sat.mode}
+                {" "}
+                <Button
+                  content={sat.active ? "Deactivate": "Activate"}
+                  icon={"arrow-circle-right"}
+                  onClick={() => act("toggle", { id: sat.id })} />
+              </LabeledList.Item>
+            ))}
+          </LabeledList>
+        </Section>
+      </Window.Content>
+    </Window>
+  );
+};