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

ref: N25B-400

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")}