Revert "refactor: move program list styling to ProgramRunnerInfo" (#138)

Reverts #134

Author: MegaRedHand

src/graphics/renderables/device_info.ts

@@ -3,10 +3,14 @@ import { Device } from "../../types/devices";
 import { DeviceType } from "../../types/devices/device";
 import { ViewGraph } from "../../types/graphs/viewgraph";
 import { RemoveDeviceMove } from "../../types/undo-redo";
-import { urManager } from "../../types/viewportManager";
-import { createRightBarButton, createRoutingTable } from "../right_bar";
+import { refreshElement, urManager } from "../../types/viewportManager";
+import {
+  createDropdown,
+  createRightBarButton,
+  createTable,
+  createRoutingTable,
+} from "../right_bar";
 import { ProgramInfo } from "./program_info";
-import { ProgramRunnerInfo } from "./program_runner_info";
 import { StyledInfo } from "./styled_info";
 
 export { ProgramInfo } from "./program_info";
@@ -56,8 +60,28 @@ export class DeviceInfo extends StyledInfo {
 
   // First argument is to avoid a circular dependency
   addProgramRunner(runner: ProgramRunner, programs: ProgramInfo[]) {
-    const programRunnerInfo = new ProgramRunnerInfo(runner, programs);
-    this.inputFields.push(...programRunnerInfo.toHTML());
+    const programOptions = programs.map(({ name }, i) => {
+      return { value: i.toString(), text: name };
+    });
+    const inputsContainer = document.createElement("div");
+    let selectedProgram = programs[0];
+    inputsContainer.replaceChildren(...selectedProgram.toHTML());
+    this.inputFields.push(
+      // Dropdown for selecting program
+      createDropdown("Program", programOptions, "program-selector", (v) => {
+        selectedProgram = programs[parseInt(v)];
+        inputsContainer.replaceChildren(...selectedProgram.toHTML());
+      }),
+      inputsContainer,
+      // Button to send a packet
+      createRightBarButton("Start program", () => {
+        const { name } = selectedProgram;
+        console.log("Started program: ", name);
+        const inputs = selectedProgram.getInputValues();
+        runner.addRunningProgram(name, inputs);
+        refreshElement();
+      }),
+    );
   }
 
   addRunningProgramsList(

src/graphics/renderables/program_runner_info.ts

@@ -13,26 +13,8 @@ export interface RunningProgram {
 
 // Currently used only for Host, due to a circular dependency
 export interface ProgramRunner {
-  /**
-   * Adds a new program to run.
-   * @param name program name
-   * @param inputs program inputs
-   * @returns the running program data
-   */
-  addRunningProgram(name: string, inputs: string[]): RunningProgram;
-
-  /**
-   * Lists running programs.
-   * @returns the list of running programs
-   */
-  getRunningPrograms(): RunningProgram[];
-
-  /**
-   * Stops a running program.
-   * @param pid running program ID
-   * @returns `true` if the program exists and was stopped, `false` otherwise
-   */
-  removeRunningProgram(pid: Pid): boolean;
+  addRunningProgram(name: string, inputs: string[]): void;
+  removeRunningProgram(pid: Pid): void;
 }
 
 export interface Program {

src/programs/index.ts

@@ -48,6 +48,7 @@ export class Host extends Device {
     const info = new DeviceInfo(this);
     info.addField("IP Address", this.ip.octets.join("."));
     info.addProgramRunner(this, programList);
+    info.addRunningProgramsList(this, runningProgramsList);
     RightBar.getInstance().renderInfo(info);
   }
 
@@ -77,7 +78,6 @@ export class Host extends Device {
       device.runningPrograms.push(runningProgram);
     });
     this.runProgram(runningProgram);
-    return runningProgram;
   }
 
   removeRunningProgram(pid: Pid) {
@@ -93,14 +93,13 @@ export class Host extends Device {
     const program = this.runningPrograms.get(pid);
     if (!program) {
       console.error("Program not found");
-      return false;
+      return;
     }
     program.stop();
     this.runningPrograms.delete(pid);
-    return true;
   }
 
-  getRunningPrograms() {
+  private getRunningPrograms() {
     const thisDevice = this.viewgraph.getDataGraph().getDevice(this.id);
     if (!isHost(thisDevice)) {
       console.error("Node is not a Host");