Add abort button (#26)

* add abort button

Author: EmsArnold

src/components/AbortButton.tsx

@@ -0,0 +1,25 @@
+import { Button } from "@mui/material";
+
+import { setWorkerState, type WorkerRequest } from "../utils/api";
+
+const AbortButton = () => {
+  return (
+    <Button
+      variant="contained"
+      color="error"
+      sx={{ width: "150px" }}
+      onClick={async () => {
+        const workerRequest: WorkerRequest = {
+          new_state: "ABORTING",
+          defer: false,
+          reason: "UI Intervention",
+        };
+        await setWorkerState(workerRequest);
+      }}
+    >
+      Abort
+    </Button>
+  );
+};
+
+export default AbortButton;

src/components/spectroscopy/SpectroscopyForm.tsx

@@ -1,5 +1,6 @@
 import { useInstrumentSession } from "../../context/instrumentSession/useInstrumentSession";
 import RunPlanButton from "../RunPlanButton";
+import AbortButton from "../AbortButton";
 import { useState } from "react";
 import { NumberInput } from "../NumberInput";
 import { Box } from "@mui/material";
@@ -97,6 +98,9 @@ export function SpectroscopyForm() {
           instrumentSession={instrumentSession}
         />
       </Box>
+      <Box sx={{ mt: 4 }} display={"flex"} justifyContent={"center"}>
+        <AbortButton />
+      </Box>
     </Box>
   );
 }

src/mocks/handlers.ts

@@ -41,6 +41,10 @@ export const handlers = [
     });
   }),
 
+  http.put("/api/worker/state", () => {
+    return HttpResponse.json("IDLE");
+  }),
+
   http.get("/api/data/map", ({ request }) => {
     const url = new URL(request.url);
     const filepath = url.searchParams.get("filepath");

src/utils/api.ts

@@ -77,3 +77,35 @@ export async function startTask(task_id: string): Promise<TaskResponse> {
 
   return await response.json();
 }
+
+export interface WorkerRequest {
+  new_state: string;
+  defer: boolean;
+  reason: string;
+}
+
+export interface WorkerResponse {
+  worker_state: string;
+}
+
+export async function setWorkerState(
+  worker_request: WorkerRequest,
+): Promise<WorkerResponse> {
+  const url = "/api/worker/state";
+
+  const headers = new Headers();
+  headers.append("Content-Type", "application/json");
+  headers.append("X-Requested-By", "XMLHttpRequest");
+
+  const response = await fetch(url, {
+    method: "PUT",
+    headers: headers,
+    body: JSON.stringify({
+      new_state: worker_request.new_state,
+      defer: worker_request.defer,
+      reason: worker_request.reason,
+    }),
+  });
+
+  return await response.json();
+}