RCON Improvement

code/modules/tgui/modules/rcon.dm

@@ -1,3 +1,5 @@
+#define SMES_PER_PAGE 4
+
 /datum/tgui_module/rcon
 	name = "Power RCON"
 	tgui_id = "RCON"
@@ -5,17 +7,41 @@
 	var/list/known_SMESs = null
 	var/list/known_breakers = null
 
+	var/filtered_smeslist = list()
+
+	var/current_page = 1
+	var/number_pages = 0
+
+/datum/tgui_module/rcon/proc/filter_smeslist(var/page)
+	number_pages = known_SMESs.len / SMES_PER_PAGE 
+
+	if(number_pages != round(number_pages))
+		number_pages = round(number_pages) + 1
+	var/page_index = page - 1
+
+	var/lower_bound = page_index * SMES_PER_PAGE + 1
+	var/upper_bound = (page_index + 1) * SMES_PER_PAGE
+	upper_bound = min(upper_bound, known_SMESs.len)
+	filtered_smeslist = list()
+
+	for(var/index = lower_bound, index <= upper_bound, index++)
+		filtered_smeslist += known_SMESs[index]
+
 /datum/tgui_module/rcon/tgui_data(mob/user)
 	FindDevices() // Update our devices list
 	var/list/data = ..()
 
+	filter_smeslist(current_page)
+
 	// SMES DATA (simplified view)
 	var/list/smeslist[0]
-	for(var/obj/machinery/power/smes/buildable/SMES in known_SMESs)
+	for(var/obj/machinery/power/smes/buildable/SMES in filtered_smeslist)
 		var/list/smes_data = SMES.tgui_data()
 		smes_data["RCON_tag"] = SMES.RCon_tag
 		smeslist.Add(list(smes_data))
 
+	data["pages"] = number_pages
+	data["current_page"] = current_page
 	data["smes_info"] = sortByKey(smeslist, "RCON_tag")
 
 	// BREAKER DATA (simplified view)
@@ -34,6 +60,10 @@
 		return TRUE
 
 	switch(action)
+		if("set_smes_page")
+			var/page = params["index"]
+			current_page = page
+			. = TRUE
 		if("smes_in_toggle")
 			var/obj/machinery/power/smes/buildable/SMES = GetSMESByTag(params["smes"])
 			if(SMES)

tgui/packages/tgui/components/Tooltip.tsx

@@ -53,6 +53,10 @@ export class Tooltip extends Component<TooltipProps, TooltipState> {
       <Popper
         options={{
           placement: this.props.position || "auto",
+          modifiers: [{
+            name: "eventListeners",
+            enabled: false,
+          }],
         }}
         popperContent={
           <div

tgui/packages/tgui/interfaces/AlertModal.js

@@ -4,7 +4,7 @@
  * @license MIT
  */
 
-import { clamp01 } from 'common/math';
+import { Loader } from "./common/Loader";
 import { useBackend } from '../backend';
 import { Component, createRef } from 'inferno';
 import { Box, Flex, Section } from '../components';
@@ -135,15 +135,3 @@ export class AlertModal extends Component {
   }
 
 }
-
-export const Loader = props => {
-  const { value } = props;
-
-  return (
-    <div className="AlertModal__Loader">
-      <Box
-        className="AlertModal__LoaderProgress"
-        style={{ width: clamp01(value) * 100 + '%' }} />
-    </div>
-  );
-};

tgui/packages/tgui/interfaces/ListInput.js

@@ -4,9 +4,9 @@
  * @license MIT
  */
 
-import { clamp01 } from 'common/math';
+import { Loader } from "./common/Loader";
 import { useBackend, useLocalState } from '../backend';
-import { Box, Button, Section, Input, Stack } from '../components';
+import { Button, Section, Input, Stack } from '../components';
 import { KEY_DOWN, KEY_UP, KEY_ENTER, KEY_SPACE, KEY_ESCAPE, KEY_HOME, KEY_END } from 'common/keycodes';
 import { Window } from '../layouts';
 
@@ -210,16 +210,3 @@ export const ListInput = (props, context) => {
     </Window>
   );
 };
-
-export const Loader = props => {
-  const { value } = props;
-  return (
-    <div className="ListInput__Loader">
-      <Box
-        className="ListInput__LoaderProgress"
-        style={{
-          width: clamp01(value) * 100 + '%',
-        }} />
-    </div>
-  );
-};

tgui/packages/tgui/interfaces/RCON.js

@@ -14,7 +14,7 @@ export const RCON = (props, context) => {
   return (
     <Window
       width={630}
-      height={440}
+      height={540}
       resizable>
       <Window.Content scrollable>
         <RCONContent />
@@ -61,10 +61,16 @@ const RCONSmesList = (props, context) => {
 
   const {
     smes_info,
+    pages,
+    current_page,
   } = data;
 
+  const runCallback = (cb) => {
+    return cb();
+  };
+
   return (
-    <Section title="SMESs">
+    <Section title={"SMESs (Page " + current_page + ")"}>
       <Stack vertical>
         {smes_info.map(smes => (
           <Stack.Item key={smes.RCON_tag}>
@@ -72,6 +78,23 @@ const RCONSmesList = (props, context) => {
           </Stack.Item>
         ))}
       </Stack>
+      Page Selection:<br />
+      {runCallback(() => {
+        const row = [];
+        for (let i = 1; i < pages; i++) {
+          row.push(
+            <Button
+              selected={current_page === i}
+              key={i}
+              onClick={() => act("set_smes_page", {
+                index: i,
+              })}>
+              {i}
+            </Button>
+          );
+        }
+        return row;
+      })}
     </Section>
   );
 };

tgui/packages/tgui/interfaces/common/Loader.tsx

@@ -0,0 +1,14 @@
+import { Box } from '../../components';
+import { clamp01 } from 'common/math';
+
+export const Loader = props => {
+  const { value } = props;
+
+  return (
+    <div className="AlertModal__Loader">
+      <Box
+        className="AlertModal__LoaderProgress"
+        style={{ width: clamp01(value) * 100 + '%' }} />
+    </div>
+  );
+};