[feat] Servers on Active Scripts now show a ram usage bar

src/ActiveScriptsUI.js

@@ -8,12 +8,14 @@ import {dialogBoxCreate}           from "../utils/DialogBox";
 import {createAccordionElement}    from "../utils/uiHelpers/createAccordionElement";
 import {arrayToString}             from "../utils/helpers/arrayToString";
 import {createElement}             from "../utils/uiHelpers/createElement";
+import {createProgressBarText}     from "../utils/helpers/createProgressBarText";
 import {exceptionAlert}            from "../utils/helpers/exceptionAlert";
 import {logBoxCreate}              from "../utils/LogBox";
 import numeral                     from "numeral/min/numeral.min";
 import {formatNumber}              from "../utils/StringHelperFunctions";
 import {removeChildrenFromElement} from "../utils/uiHelpers/removeChildrenFromElement";
 import {removeElement}             from "../utils/uiHelpers/removeElement";
+import {roundToTwo}                from "../utils/helpers/roundToTwo";
 
 /* {
  *     serverName: {
@@ -28,12 +30,39 @@ import {removeElement}             from "../utils/uiHelpers/removeElement";
 let ActiveScriptsUI = {};
 let ActiveScriptsTasks = []; //Sequentially schedule the creation/deletion of UI elements
 
+const getHeaderHtml = (server) => {
+    // TODO: calculate the longest hostname length rather than hard coding it
+    const longestHostnameLength = 18;
+    const paddedName = `${server.hostname}${" ".repeat(longestHostnameLength)}`.slice(0, Math.max(server.hostname.length, longestHostnameLength));
+    const barOptions = {
+        progress: server.ramUsed / server.maxRam,
+        totalTicks: 30
+    };
+    return `${paddedName} ${createProgressBarText(barOptions)}`.replace(/\s/g, ' ');
+};
+
+const updateHeaderHtml = (server) => {
+    const accordion = ActiveScriptsUI[server.hostname];
+    if (accordion === null || accordion === undefined) {
+        return;
+    }
+
+    // convert it to a string, as that's how it's stored it will come out of the data attributes
+    const ramPercentage = '' + roundToTwo(server.ramUsed / server.maxRam);
+    if (accordion.header.dataset.ramPercentage !== ramPercentage) {
+        accordion.header.dataset.ramPercentage = ramPercentage;
+        accordion.header.innerHTML = getHeaderHtml(server);
+    }
+}
+
 function createActiveScriptsServerPanel(server) {
     let hostname = server.hostname;
 
     var activeScriptsList = document.getElementById("active-scripts-list");
 
-    let res     = createAccordionElement({hdrText:hostname});
+    let res     = createAccordionElement({
+        hdrText: getHeaderHtml(server)
+    });
     let li      = res[0];
     var hdr     = res[1];
     let panel   = res[2];
@@ -225,6 +254,8 @@ function updateActiveScriptsItemContent(workerscript) {
         return; //Hasn't been created yet. We'll skip it
     }
 
+    updateHeaderHtml(server);
+
     var itemNameArray = ["active", "scripts", server.hostname, workerscript.name];
     for (var i = 0; i < workerscript.args.length; ++i) {
         itemNameArray.push(String(workerscript.args[i]));
@@ -252,6 +283,7 @@ function updateActiveScriptsText(workerscript, item, itemName) {
         return;
     }
 
+    updateHeaderHtml(server);
     var onlineMps = workerscript.scriptRef.onlineMoneyMade / workerscript.scriptRef.onlineRunningTime;
 
     //Only update if the item is visible