TGUI TachyonArray

code/game/machinery/doppler_array.dm

@@ -37,9 +37,6 @@ GLOBAL_LIST_EMPTY(doppler_arrays)
 	logged_explosions.Cut()
 	return ..()
 
-/obj/machinery/doppler_array/process()
-	return PROCESS_KILL
-
 /obj/machinery/doppler_array/attackby(obj/item/I, mob/user, params)
 	if(istype(I, /obj/item/disk/tech_disk))
 		var/obj/item/disk/tech_disk/disk = I
@@ -64,10 +61,10 @@ GLOBAL_LIST_EMPTY(doppler_arrays)
 	if(..())
 		return
 	add_fingerprint(user)
-	ui_interact(user)
+	tgui_interact(user)
 
 /obj/machinery/doppler_array/attack_ghost(mob/user)
-	ui_interact(user)
+	tgui_interact(user)
 
 /obj/machinery/doppler_array/AltClick(mob/user)
 	rotate(user)
@@ -176,47 +173,50 @@ GLOBAL_LIST_EMPTY(doppler_arrays)
 			icon_state = "[initial(icon_state)]-off"
 			stat |= NOPOWER
 
-/obj/machinery/doppler_array/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/doppler_array/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, "doppler_array.tmpl", "Tachyon-doppler array", 500, 650)
+		ui = new(user, src, ui_key, "TachyonArray", name, 500, 600, master_ui, state)
 		ui.open()
-		ui.set_auto_update(1)
 
-/obj/machinery/doppler_array/ui_data(mob/user, ui_key = "main", datum/topic_state/state = GLOB.default_state)
-	var/data[0]
-	var/list/explosion_data = list()
-	for(var/D in logged_explosions)
-		var/datum/explosion_log/E = D
-		explosion_data += list(list(
+/obj/machinery/doppler_array/tgui_data(mob/user)
+	var/list/data = list()
+	var/list/records = list()
+	for(var/i in 1 to length(logged_explosions))
+		var/datum/explosion_log/E = logged_explosions[i]
+		records += list(list(
 			"logged_time" = E.logged_time,
 			"epicenter" = E.epicenter,
 			"actual_size_message" = E.actual_size_message,
 			"theoretical_size_message" = E.theoretical_size_message,
-			"unique_datum_id" = E.UID()))
+			"index" = i))
 	data["explosion_target"] = explosion_target
 	data["toxins_tech"] = toxins_tech.level
-	data["explosion_data"] = explosion_data
+	data["records"] = records
 	data["printing"] = active_timers
 	return data
 
-/obj/machinery/doppler_array/Topic(href, href_list)
+/obj/machinery/doppler_array/tgui_act(action, params)
 	if(..())
 		return
-	if(href_list["log_to_delete"])
-		var/log_to_delete = sanitize(href_list["log_to_delete"])
-		for(var/D in logged_explosions)
-			var/datum/explosion_log/E = D
-			if(E.UID() == log_to_delete)
-				logged_explosions -= E
-				qdel(E)
-				to_chat(usr, "<span class='notice'>Log deletion successful.</span>")
-				break
-	else if(href_list["print_logs"])
-		print_explosive_logs(usr)
-	else
-		return
-	SSnanoui.update_uis(src)
+	switch(action)
+		if("delete_logs")
+			QDEL_LIST(logged_explosions)
+			to_chat(usr, "<span class='notice'>All logs deleted successfully.</span>")
+		if("delete_record")
+			var/index = text2num(params["index"])
+			if(index < 0 || index > length(logged_explosions))
+				return
+
+			var/datum/explosion_log/E = logged_explosions[index]
+			logged_explosions -= E
+			qdel(E)
+			to_chat(usr, "<span class='notice'>Log deletion successful.</span>")
+		if("print_logs")
+			print_explosive_logs(usr)
+		else
+			return
+	return TRUE
 
 /obj/item/paper/explosive_log
 	name = "explosive log"

nano/templates/doppler_array.tmpl

@@ -1,27 +0,0 @@
-<h2>Shift's target : {{:data.explosion_target}}</h2>
-<h2>Current Technology Level : {{:data.toxins_tech}}</h2>
-<h2>Logged explosions:</h2>
-{{if data.explosion_data == 0}}
-	<p>No explosions logged this shift.</p>
-{{else}}
-	<div>
-		<span style="display:inline-block;width:20%;">Time logged</span>
-		<span style="display:inline-block;width:20%;">Epicenter</span>
-		<span style="display:inline-block;width:20%;">Actual size</span>
-		<span style="display:inline-block;width:25%;">Theoretical size<span>
-	</div>
-	<hr/>
-	{{for data.explosion_data}}
-		<div style = "min-height:30px;">
-			<span>
-				<span style="display:inline-block;width:20%;">{{:value.logged_time}}</span>
-				<span style="display:inline-block;width:20%;">{{:value.epicenter}}</span>
-				<span style="display:inline-block;width:20%;">{{:value.actual_size_message}}</span>
-				<span style="display:inline-block;width:25%;">{{:value.theoretical_size_message}}</span>
-				<span style="display:inline-block;width:15%;vertical-align:middle;">{{:helper.link("Delete", "trash", {"log_to_delete": value.unique_datum_id})}}</span>
-			</span>
-		</div>
-	{{/for}}
-	<br/>
-	{{:helper.link("Print all logs", "print", {"print_logs": 'yes'}, data.printing ? 'disabled' : null)}}
-{{/if}}

tgui/packages/tgui/interfaces/TachyonArray.js

@@ -0,0 +1,108 @@
+import { useBackend } from '../backend';
+import { Button, Flex, Table, NoticeBox, Section, LabeledList } from '../components';
+import { Window } from '../layouts';
+
+export const TachyonArray = (props, context) => {
+  const { act, data } = useBackend(context);
+  const {
+    records = [],
+    explosion_target,
+    toxins_tech,
+    printing,
+  } = data;
+  return (
+    <Window>
+      <Window.Content scrollable>
+        <Section>
+          <LabeledList>
+            <LabeledList.Item label="Shift's Target">
+              {explosion_target}
+            </LabeledList.Item>
+            <LabeledList.Item label="Current Toxins Level">
+              {toxins_tech}
+            </LabeledList.Item>
+            <LabeledList.Item label="Administration">
+              <Button
+                icon="print"
+                content="Print All Logs"
+                disabled={!records.length || printing}
+                align="center"
+                onClick={() => act('print_logs')} />
+              <Button.Confirm
+                icon="trash"
+                content="Delete All Logs"
+                disabled={!records.length}
+                color="bad"
+                align="center"
+                onClick={() => act('delete_logs')} />
+            </LabeledList.Item>
+          </LabeledList>
+        </Section>
+        {!records.length ? (
+          <NoticeBox>
+            No Records
+          </NoticeBox>
+        ) : (<TachyonArrayContent />)}
+      </Window.Content>
+    </Window>
+  );
+};
+
+export const TachyonArrayContent = (props, context) => {
+  const { act, data } = useBackend(context);
+  const {
+    records = [],
+  } = data;
+
+  return (
+    <Section>
+      <Flex>
+        <Flex.Item>
+          <Section label="Logged Explosions">
+            <Table m="0.5rem">
+              <Table.Row header>
+                <Table.Cell>
+                  Time
+                </Table.Cell>
+                <Table.Cell>
+                  Epicenter
+                </Table.Cell>
+                <Table.Cell>
+                  Actual Size
+                </Table.Cell>
+                <Table.Cell>
+                  Theoretical Size
+                </Table.Cell>
+              </Table.Row>
+              {records.map(a => (
+                <Table.Row key={a.index}>
+                  <Table.Cell>
+                    {a.logged_time}
+                  </Table.Cell>
+                  <Table.Cell>
+                    {a.epicenter}
+                  </Table.Cell>
+                  <Table.Cell>
+                    {a.actual_size_message}
+                  </Table.Cell>
+                  <Table.Cell>
+                    {a.theoretical_size_message}
+                  </Table.Cell>
+                  <Table.Cell>
+                    <Button.Confirm
+                      icon="trash"
+                      content="Delete"
+                      color="bad"
+                      onClick={() => act('delete_record', {
+                        'index': a.index,
+                      })} />
+                  </Table.Cell>
+                </Table.Row>
+              ))}
+            </Table>
+          </Section>
+        </Flex.Item>
+      </Flex>
+    </Section>
+  );
+};