v0.52.9

src/ui/ActiveScripts/ServerAccordion.tsx

@@ -6,6 +6,7 @@ import * as React from "react";
 
 import { WorkerScriptAccordion } from "./WorkerScriptAccordion";
 import { Accordion } from "../React/Accordion";
+import { ServerAccordionContent } from "./ServerAccordionContent";
 
 import { BaseServer } from "../../Server/BaseServer";
 import { WorkerScript } from "../../Netscript/WorkerScript";
@@ -42,7 +43,7 @@ export function ServerAccordion(props: IProps): React.ReactElement {
                 <pre>{headerTxt}</pre>
             }
             panelContent={
-                <ul>{scripts}</ul>
+                <ServerAccordionContent workerScripts={props.workerScripts} />
             }
         />
     )

src/ui/ActiveScripts/ServerAccordionContent.tsx

@@ -0,0 +1,83 @@
+import React, { useState } from "react";
+import { WorkerScript } from "../../Netscript/WorkerScript";
+import { WorkerScriptAccordion } from "./WorkerScriptAccordion";
+import { AccordionButton } from "../React/AccordionButton";
+
+const pageSize = 20;
+
+interface IProps {
+    workerScripts: WorkerScript[];
+
+}
+
+export function ServerAccordionContent(props: IProps): React.ReactElement {
+    if(props.workerScripts.length > pageSize) {
+        return <ServerAccordionContentPaginated workerScripts={props.workerScripts} />
+    }
+
+    const scripts = props.workerScripts.map((ws) => {
+        return (
+            <WorkerScriptAccordion key={`${ws.name}_${ws.args}`} workerScript={ws} />
+        )
+    });
+
+    return (<ul>{scripts}</ul>);
+}
+
+
+export function ServerAccordionContentPaginated(props: IProps): React.ReactElement {
+    const [page, setPage] = useState(0);
+    const scripts: React.ReactElement[] = [];
+    const maxPage = Math.ceil(props.workerScripts.length/pageSize);
+    const maxScript = Math.min((page+1)*pageSize, props.workerScripts.length);
+    for(let i = page*pageSize; i < maxScript; i++) {
+        const ws = props.workerScripts[i];
+        scripts.push(<WorkerScriptAccordion key={`${ws.name}_${ws.args}`} workerScript={ws} />)
+    }
+
+    function capPage(page: number): number {
+        if(page < 0) {
+            page = 0;
+        }
+
+        if(maxPage-1 < page) {
+            page = maxPage-1;
+        }
+
+        return page;
+    }
+
+    // in case we're on an invalid page number because scripts were killed.
+    const capped = capPage(page);
+    if(capped !== page)
+        setPage(capped);
+
+    function changePage(n: number): void {
+        setPage(newPage => {
+            newPage += n;
+            newPage = Math.round(newPage);
+            return capPage(newPage);
+        })
+    }
+
+    return (<><ul>{scripts}</ul>
+        <AccordionButton
+            onClick={() => changePage(-1e99)}
+            text="<<"
+        />
+        <AccordionButton
+            onClick={() => changePage(-1)}
+            text="<"
+        />
+        <span className="text">{page+1} / {maxPage}</span>
+        <AccordionButton
+            onClick={() => changePage(1)}
+            text=">"
+        />
+        <AccordionButton
+            onClick={() => changePage(1e99)}
+            text=">>"
+        />
+    </>);
+}
+