Update brig cell computer to use tgui

code/game/machinery/computer/brigcells.dm

@@ -12,7 +12,7 @@
 
 /obj/machinery/computer/brigcells/attack_ai(mob/user)
     attack_hand(user)
-    ui_interact(user)
+    tgui_interact(user)
 
 /obj/machinery/computer/brigcells/attack_hand(mob/user)
     add_fingerprint(user)
@@ -21,38 +21,46 @@
     if(!allowed(user))
         to_chat(user, "<span class='warning'>Access denied.</span>")
         return
-    ui_interact(user)
+    tgui_interact(user)
 
-/obj/machinery/computer/brigcells/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)
-    if(!ui)
-        ui = new(user, src, ui_key, "brig_cells.tmpl", "Brig Cell Management", 1000, 400)
-        ui.open()
-        ui.set_auto_update(1)
+/obj/machinery/computer/brigcells/tgui_interact(mob/user, ui_key = "main", datum/tgui/ui = null, force_open = TRUE, 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, "BrigCells", "Brig Cell Management", 1000, 400, master_ui, state)
+		ui.open()
+		ui.set_autoupdate(TRUE)
 
-/obj/machinery/computer/brigcells/ui_data(mob/user, ui_key = "main", datum/topic_state/state = GLOB.default_state)
-    var/data[0]
-    var/list/timers = list()
-    for(var/obj/machinery/door_timer/T in GLOB.celltimers_list)
-        var/timer = list()
-        timer["cell_id"] = T.name
-        timer["occupant"] = T.occupant
-        timer["crimes"] = T.crimes
-        timer["brigged_by"] = T.officer
-        if(T.time == 0)
-            timer["background"] = "'background-color:#007f47'"
-        else
-            timer["background"] = "'background-color:#890E26'"
-        timer["time_set"] = seconds_to_clock(T.time / 10)
-        timer["time_left"] = seconds_to_clock(T.timeleft())
-        timer["ref"] = "\ref[T]"
-        timers[++timers.len] += timer
-    timers = sortByKey(timers, "cell_id")
-    data["cells"] = timers
-    return data
+/obj/machinery/computer/brigcells/tgui_data(mob/user)
+	var/list/data = list()
+	var/list/timers = list()
+	for(var/obj/machinery/door_timer/T in GLOB.celltimers_list)
+		var/timer = list()
+		timer["cell_id"] = T.name
+		timer["occupant"] = T.occupant
+		timer["crimes"] = T.crimes
+		timer["brigged_by"] = T.officer
+		timer["time_set_seconds"] = round(T.timetoset / 10, 1)
+		timer["time_left_seconds"] = round(T.timeleft(), 1)
+		timer["ref"] = "\ref[T]"
+		timers[++timers.len] += timer
+	timers = sortByKey(timers, "cell_id")
+	data["cells"] = timers
+	return data
 
-/obj/machinery/computer/brigcells/Topic(href, href_list)
-    if(href_list["release"])
-        var/obj/machinery/door_timer/T = locate(href_list["release"])
-        T.timer_end()
-        T.Radio.autosay("Timer stopped manually from a cell management console.", T.name, "Security", list(z))
+/obj/machinery/computer/brigcells/tgui_act(action, params)
+	if (..())
+		return FALSE
+
+	if(!allowed(usr))
+		to_chat(usr, "<span class='warning'>Access denied.</span>")
+		return FALSE
+
+	if (action == "release")
+		var/ref = params["ref"]
+		var/obj/machinery/door_timer/T = locate(ref)
+		if (T)
+			T.timer_end()
+			T.Radio.autosay("Timer stopped manually from a cell management console.", T.name, "Security", list(z))
+		return TRUE
+
+	return FALSE

nano/templates/brig_cells.tmpl

@@ -1,34 +0,0 @@
-<!-- 
-Title: Brig Cell Management
-Used In File(s): \code\game\machinery\computer\brigcells.dm
- -->
-<div class="statusDisplay" style="overflow: auto;">
-	<span id='maintable_data_archive'>
-		<table style='width: 100%' id='maintable_data'>
-			<thead>
-				<tr>
-					<th>Cell</th>
-					<th>Occupant</th>
-					<th>Crimes</th>
-					<th>Brigged By</th>
-					<th>Time Brigged For</th>
-					<th>Time Left</th>
-					<th>Release</th>
-				</tr>
-			</thead>
-			<tbody>
-				{{for data.cells}}
-					<tr style={{:value.background}}>
-						<td>{{:value.cell_id}}</td>
-						<td>{{:value.occupant}}</td>
-						<td>{{:value.crimes}}</td>
-						<td>{{:value.brigged_by}}</td>
-						<td>{{:value.time_set}}</td>
-						<td>{{:value.time_left}}</td>
-						<td>{{:helper.link('Release', null, {'release' : value.ref}, null, 'infoButton')}}</td>
-					</tr>
-				{{/for}}
-			</tbody>
-		</table>
-	</span>
-</div>

tgui/packages/tgui/components/TimeDisplay.js

@@ -0,0 +1,13 @@
+// see seconds_to_clock
+const secondsToClock = totalSeconds => {
+  if (!totalSeconds || totalSeconds < 0) { totalSeconds = 0; }
+
+  let minutes = Math.floor(totalSeconds / 60).toString(10);
+  let seconds = (Math.floor(totalSeconds) % 60).toString(10);
+
+  return [minutes, seconds].map(p => p.length < 2 ? '0' + p : p).join(':');
+};
+
+export const TimeDisplay = ({ totalSeconds = 0 }) => (
+  secondsToClock(totalSeconds)
+);

tgui/packages/tgui/components/index.js

@@ -26,3 +26,4 @@ export { Slider } from './Slider';
 export { Table } from './Table';
 export { Tabs } from './Tabs';
 export { Tooltip } from './Tooltip';
+export { TimeDisplay } from './TimeDisplay';

tgui/packages/tgui/interfaces/BrigCells.js

@@ -0,0 +1,75 @@
+import { Window } from "../layouts";
+import { TimeDisplay, Box, Button, Flex, Icon, Input, LabeledList, Section, Table, Tabs } from '../components';
+import { useBackend, useLocalState } from "../backend";
+
+const BrigCellsTableRow = (properties, context) => {
+  const { cell } = properties;
+  const { act } = useBackend(context);
+  const {
+    cell_id,
+    occupant,
+    crimes,
+    brigged_by,
+    time_left_seconds,
+    time_set_seconds,
+    ref,
+  } = cell;
+
+  let className = '';
+  if (time_left_seconds > 0) { className += ' BrigCells__listRow--active'; }
+
+  const release = () => {
+    act('release', { ref });
+  };
+
+  return (
+    <Table.Row className={className}>
+      <Table.Cell>{cell_id}</Table.Cell>
+      <Table.Cell>{occupant}</Table.Cell>
+      <Table.Cell>{crimes}</Table.Cell>
+      <Table.Cell>{brigged_by}</Table.Cell>
+      <Table.Cell><TimeDisplay totalSeconds={time_set_seconds} /></Table.Cell>
+      <Table.Cell><TimeDisplay totalSeconds={time_left_seconds} /></Table.Cell>
+      <Table.Cell>
+        <Button type="button" onClick={release}>
+          Release
+        </Button>
+      </Table.Cell>
+    </Table.Row>
+  );
+};
+
+const BrigCellsTable = ({ cells }) => (
+  <Table className="BrigCells__list">
+    <Table.Row>
+      <Table.Cell header>Cell</Table.Cell>
+      <Table.Cell header>Occupant</Table.Cell>
+      <Table.Cell header>Crimes</Table.Cell>
+      <Table.Cell header>Brigged By</Table.Cell>
+      <Table.Cell header>Time Brigged For</Table.Cell>
+      <Table.Cell header>Time Left</Table.Cell>
+      <Table.Cell header>Release</Table.Cell>
+    </Table.Row>
+    {cells.map(cell => (
+      <BrigCellsTableRow key={cell.ref} cell={cell} />
+    ))}
+  </Table>
+);
+
+
+export const BrigCells = (properties, context) => {
+  const { act, data } = useBackend(context);
+  const { cells } = data;
+
+  return (
+    <Window theme="security" resizable>
+      <Window.Content scrollable className="Layout__content--flexColumn">
+        <Flex direction="column" height="100%">
+          <Section height="100%" flexGrow="1">
+            <BrigCellsTable cells={cells} />
+          </Section>
+        </Flex>
+      </Window.Content>
+    </Window>
+  );
+};

tgui/packages/tgui/styles/interfaces/BrigCells.scss

@@ -0,0 +1,15 @@
+
+
+.BrigCells__list {
+  .Table__row--header {
+    text-align: center;
+  }
+
+  .Table__cell {
+    text-align: center;
+  }
+
+  .BrigCells__listRow--active .Table__cell {
+    background-color: #890E26;
+  }
+}

tgui/packages/tgui/styles/main.scss

@@ -39,6 +39,7 @@
 @include meta.load-css('./components/Tooltip.scss');
 
 // Interfaces
+@include meta.load-css('./interfaces/BrigCells.scss');
 @include meta.load-css('./interfaces/CameraConsole.scss');
 @include meta.load-css('./interfaces/NuclearBomb.scss');
 @include meta.load-css('./interfaces/Roulette.scss');