feat: stop experiment button
This commit is contained in:
@@ -98,6 +98,11 @@ University within the Software Project course.
|
|||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.stop {
|
||||||
|
background-color: red;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
.restartExperiment{
|
.restartExperiment{
|
||||||
background-color: red;
|
background-color: red;
|
||||||
color: white;
|
color: white;
|
||||||
|
|||||||
@@ -8,6 +8,7 @@ import styles from './MonitoringPage.module.css';
|
|||||||
import useProgramStore from "../../utils/programStore";
|
import useProgramStore from "../../utils/programStore";
|
||||||
import {
|
import {
|
||||||
nextPhase,
|
nextPhase,
|
||||||
|
stopExperiment,
|
||||||
useExperimentLogger,
|
useExperimentLogger,
|
||||||
useStatusLogger,
|
useStatusLogger,
|
||||||
pauseExperiment,
|
pauseExperiment,
|
||||||
@@ -144,7 +145,7 @@ function useExperimentLogic() {
|
|||||||
}
|
}
|
||||||
}, [setProgramState]);
|
}, [setProgramState]);
|
||||||
|
|
||||||
const handleControlAction = async (action: "pause" | "play" | "nextPhase") => {
|
const handleControlAction = async (action: "pause" | "play" | "nextPhase" | "stop") => {
|
||||||
try {
|
try {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
switch (action) {
|
switch (action) {
|
||||||
@@ -159,6 +160,9 @@ function useExperimentLogic() {
|
|||||||
case "nextPhase":
|
case "nextPhase":
|
||||||
await nextPhase();
|
await nextPhase();
|
||||||
break;
|
break;
|
||||||
|
case "stop":
|
||||||
|
await stopExperiment();
|
||||||
|
break;
|
||||||
}
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error(err);
|
console.error(err);
|
||||||
@@ -226,7 +230,7 @@ function ControlPanel({
|
|||||||
}: {
|
}: {
|
||||||
loading: boolean,
|
loading: boolean,
|
||||||
isPlaying: boolean,
|
isPlaying: boolean,
|
||||||
onAction: (a: "pause" | "play" | "nextPhase") => void,
|
onAction: (a: "pause" | "play" | "nextPhase" | "stop") => void,
|
||||||
onReset: () => void
|
onReset: () => void
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
@@ -256,6 +260,12 @@ function ControlPanel({
|
|||||||
onClick={onReset}
|
onClick={onReset}
|
||||||
disabled={loading}
|
disabled={loading}
|
||||||
>⟲</button>
|
>⟲</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
className={styles.stop}
|
||||||
|
onClick={() => onAction("stop")}
|
||||||
|
disabled={loading}
|
||||||
|
>⏹</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -32,6 +32,12 @@ export async function nextPhase(): Promise<void> {
|
|||||||
sendAPICall(type, context)
|
sendAPICall(type, context)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export async function stopExperiment(): Promise<void> {
|
||||||
|
const type = "stop"
|
||||||
|
const context = ""
|
||||||
|
sendAPICall(type, context)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Sends an API call to the CB for going to pause experiment
|
* Sends an API call to the CB for going to pause experiment
|
||||||
|
|||||||
Reference in New Issue
Block a user