From d83d959f8dbdd83d0bac9414952b63e744243f75 Mon Sep 17 00:00:00 2001
From: CHOMPStation2 <58959929+CHOMPStation2@users.noreply.github.com>
Date: Mon, 19 Aug 2024 23:56:19 -0700
Subject: [PATCH] [MIRROR] adds cell names to the battery rack (#8804)

Co-authored-by: Novacat <35587478+Novacat@users.noreply.github.com>
Co-authored-by: Kashargul <144968721+Kashargul@users.noreply.github.com>
---
 code/modules/power/batteryrack.dm             |  1 +
 tgui/packages/tgui/interfaces/Batteryrack.tsx | 17 ++++++++++++++---
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/code/modules/power/batteryrack.dm b/code/modules/power/batteryrack.dm
index 62b162a1d9..200021543d 100644
--- a/code/modules/power/batteryrack.dm
+++ b/code/modules/power/batteryrack.dm
@@ -268,6 +268,7 @@
 		cell["slot"] = cell_index + 1
 		cell["used"] = 1
 		cell["percentage"] = round(C.percent(), 0.01)
+		cell["name"] = C.name
 		cell["id"] = C.c_uid
 		cell_index++
 		cells += list(cell)
diff --git a/tgui/packages/tgui/interfaces/Batteryrack.tsx b/tgui/packages/tgui/interfaces/Batteryrack.tsx
index 0adbbbbf16..27ba0a46a4 100644
--- a/tgui/packages/tgui/interfaces/Batteryrack.tsx
+++ b/tgui/packages/tgui/interfaces/Batteryrack.tsx
@@ -1,10 +1,12 @@
 import { BooleanLike } from 'common/react';
+import { capitalize } from 'common/string';
 
 import { useBackend } from '../backend';
 import {
   AnimatedNumber,
   Box,
   Button,
+  Flex,
   LabeledList,
   ProgressBar,
   Section,
@@ -24,7 +26,8 @@ type Data = {
   cells_list: {
     slot: number;
     used: BooleanLike;
-    percentage: number;
+    percentage: number | undefined;
+    name: string | undefined;
     id: number;
   }[];
 };
@@ -100,12 +103,20 @@ export const Batteryrack = (props) => {
                 <Table.Cell collapsing>Cell {cell.slot}</Table.Cell>
                 <Table.Cell>
                   <ProgressBar
-                    value={cell.used ? cell.percentage : 100}
+                    value={cell.used ? cell.percentage! : 100}
                     minValue={0}
                     maxValue={100}
                     color={cell.used ? 'good' : 'bad'}
                   >
-                    {cell.used ? cell.percentage + '%' : 'N/C'}
+                    <Flex>
+                      <Flex.Item>
+                        {!!cell.name && capitalize(cell.name)}
+                      </Flex.Item>
+                      <Flex.Item grow={1} />
+                      <Flex.Item>
+                        {cell.used ? cell.percentage + '%' : 'N/C'}
+                      </Flex.Item>
+                    </Flex>
                   </ProgressBar>
                 </Table.Cell>
                 <Table.Cell collapsing>