From a1e242e391bf6603e25a668b3ee67e0c0b32ccf9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Otgaar?= <b.r.c.otgaar@students.uu.nl>
Date: Wed, 7 Jan 2026 18:31:56 +0100
Subject: [PATCH] feat: added the functionality for the play, pause, next
 phase, reset phase, reset experiment buttons

ref: N25B-400
---
 src/pages/MonitoringPage/Components.tsx       | 10 ++++-
 .../MonitoringPage/MonitoringPage.module.css  |  8 +++-
 src/pages/MonitoringPage/MonitoringPage.tsx   | 37 +++++++++++++++++--
 src/pages/MonitoringPage/MonitoringPageAPI.ts | 12 ++++++
 src/pages/VisProgPage/VisProg.tsx             |  1 -
 5 files changed, 61 insertions(+), 7 deletions(-)

diff --git a/src/pages/MonitoringPage/Components.tsx b/src/pages/MonitoringPage/Components.tsx
index 5dc05f6..1e21eb1 100644
--- a/src/pages/MonitoringPage/Components.tsx
+++ b/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';
 }
 
diff --git a/src/pages/MonitoringPage/MonitoringPage.module.css b/src/pages/MonitoringPage/MonitoringPage.module.css
index 451b229..1d76c46 100644
--- a/src/pages/MonitoringPage/MonitoringPage.module.css
+++ b/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{
diff --git a/src/pages/MonitoringPage/MonitoringPage.tsx b/src/pages/MonitoringPage/MonitoringPage.tsx
index 1ffee92..e6dbd25 100644
--- a/src/pages/MonitoringPage/MonitoringPage.tsx
+++ b/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")}
diff --git a/src/pages/MonitoringPage/MonitoringPageAPI.ts b/src/pages/MonitoringPage/MonitoringPageAPI.ts
index bd0a3ca..5f56995 100644
--- a/src/pages/MonitoringPage/MonitoringPageAPI.ts
+++ b/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)
+}
diff --git a/src/pages/VisProgPage/VisProg.tsx b/src/pages/VisProgPage/VisProg.tsx
index f1b5f30..8fffe10 100644
--- a/src/pages/VisProgPage/VisProg.tsx
+++ b/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 |--