feat: added the functionality for the play, pause, next phase, reset phase, reset experiment buttons

ref: N25B-400

src/pages/MonitoringPage/Components.tsx

@@ -103,9 +103,17 @@ export const DirectSpeechInput: React.FC = () => {
 };
 
 // --- interface for goals/triggers/norms/conditional norms ---
+type StatusItem = {
+  id?: string | number;
+  achieved?: boolean;
+  description?: string;
+  label?: string;
+  norm?: string;
+};
+
 interface StatusListProps {
   title: string;
-  items: any[];
+  items: StatusItem[];
   type: 'goal' | 'trigger' | 'norm'| 'cond_norm';
 }
 

src/pages/MonitoringPage/MonitoringPage.module.css

@@ -53,12 +53,16 @@
   font-weight: bold;
 }
 
-.pause{
+.pausePlayInactive{
+  background-color: gray;
+}
+
+.pausePlayActive{
   background-color: green;
 }
 
 .next {
-  background-color: #ccc;
+  background-color: lightgray;
 }
 
 .restartPhase{

src/pages/MonitoringPage/MonitoringPage.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import styles from './MonitoringPage.module.css';
 import useProgramStore from "../../utils/programStore.ts";
 import { GestureControls, SpeechPresets, DirectSpeechInput, StatusList } from './Components';
-import { nextPhase, resetExperiment, resetPhase } from ".//MonitoringPageAPI.ts"
+import { nextPhase, pauseExperiment, playExperiment, resetExperiment, resetPhase } from ".//MonitoringPageAPI.ts"
 
 type Goal = { id?: string | number; description?: string; achieved?: boolean };
 type Trigger = { id?: string | number; label?: string ; achieved?: boolean };
@@ -17,9 +17,10 @@ const MonitoringPage: React.FC = () => {
 
   // Can be used to block actions until feedback from CB.
   const [loading, setLoading] = React.useState(false);
+  const [isPlaying, setIsPlaying] = React.useState(false);
 
   const phaseIds = getPhaseIds();
-  const [phaseIndex, setPhaseIndex] = React.useState(0);
+  const [phaseIndex, _] = React.useState(0);
 
   if (phaseIds.length === 0) {
     return <p className={styles.empty}>No program loaded.</p>;
@@ -37,6 +38,12 @@ const MonitoringPage: React.FC = () => {
     try {
       setLoading(true);
       switch (button)  {
+        case "pause":
+          await pauseExperiment();
+          break;
+        case "play":
+          await playExperiment();
+          break;
         case "nextPhase":
           await nextPhase();
           break;
@@ -73,7 +80,27 @@ const MonitoringPage: React.FC = () => {
         <div className={styles.experimentControls}>
           <h3>Experiment Controls</h3>
           <div className={styles.controlsButtons}>
-            <button className={styles.pause}>▶</button>
+            {/*Pause button*/}
+            <button 
+            className={`${!isPlaying ? styles.pausePlayActive : styles.pausePlayInactive}`}
+            onClick={() => {
+              setIsPlaying(false);
+              handleButton("pause");}
+            }
+            disabled={loading}
+            >❚❚</button>
+
+            {/*Play button*/}
+            <button 
+            className={`${isPlaying ? styles.pausePlayActive : styles.pausePlayInactive}`}
+            onClick={() => {
+              setIsPlaying(true);
+              handleButton("play");}
+            }
+            disabled={loading}
+            >▶</button>
+
+            {/*Next button*/}
             <button
               className={styles.next}
               onClick={() => handleButton("nextPhase")}
@@ -81,6 +108,8 @@ const MonitoringPage: React.FC = () => {
             >
               ⏭
             </button>
+
+            {/*Restart Phase button*/}
             <button 
               className={styles.restartPhase}
               onClick={() => handleButton("resetPhase")}
@@ -88,6 +117,8 @@ const MonitoringPage: React.FC = () => {
             >
               ↩
             </button>
+
+            {/*Restart Experiment button*/}
             <button 
               className={styles.restartExperiment}
               onClick={() => handleButton("resetExperiment")}

src/pages/MonitoringPage/MonitoringPageAPI.ts

@@ -50,3 +50,15 @@ export async function resetExperiment(): Promise<void> {
   const context = ""
   sendAPICall(type, context)
 }
+
+export async function pauseExperiment(): Promise<void> {
+  const type = "pause"
+  const context = "true"
+  sendAPICall(type, context)
+}
+
+export async function playExperiment(): Promise<void> {
+  const type = "pause"
+  const context = "false"
+  sendAPICall(type, context)
+}

src/pages/VisProgPage/VisProg.tsx

@@ -16,7 +16,6 @@ import type {FlowState} from './visualProgrammingUI/VisProgTypes.tsx';
 import styles from './VisProg.module.css'
 import { NodeReduces, NodeTypes } from './visualProgrammingUI/NodeRegistry.ts';
 import SaveLoadPanel from './visualProgrammingUI/components/SaveLoadPanel.tsx';
-import SimpleProgram from "../SimpleProgram/SimpleProgram.tsx";
 import MonitoringPage from '../MonitoringPage/MonitoringPage.tsx';
 
 // --| config starting params for flow |--