From 76e026a301529149e8945cac929e66ca6fa2e019 Mon Sep 17 00:00:00 2001
From: Timon Alexander Selnes <timonas@stud.ntnu.no>
Date: Tue, 5 Nov 2024 12:10:57 +0100
Subject: [PATCH] Add api connection to run tests, complete node create and
 patch

---
 client/src/components/flow/NodesList.vue     |  4 +++-
 client/src/components/flow/NodesListItem.vue | 18 ++++++++++++++----
 client/src/services/NodesService.ts          | 16 +++-------------
 client/src/services/TestService.ts           | 11 +++++++++++
 client/src/views/FlowDetailedView.vue        |  3 +++
 5 files changed, 34 insertions(+), 18 deletions(-)
 create mode 100644 client/src/services/TestService.ts

diff --git a/client/src/components/flow/NodesList.vue b/client/src/components/flow/NodesList.vue
index 98792c8..705b09a 100644
--- a/client/src/components/flow/NodesList.vue
+++ b/client/src/components/flow/NodesList.vue
@@ -59,7 +59,9 @@ const newNode = () => {
     label: newNodeModel.value.label,
     node_type: newNodeModel.value.node_type,
     device: Number(newNodeModel.value.device),
-    function: newNodeModel.value.function
+    function: newNodeModel.value.function,
+    x_pos: 0,
+    y_pos: 0
   }
   createNode(node).then((res: Boolean) => {
     if (res) {
diff --git a/client/src/components/flow/NodesListItem.vue b/client/src/components/flow/NodesListItem.vue
index 8015a85..3175d3a 100644
--- a/client/src/components/flow/NodesListItem.vue
+++ b/client/src/components/flow/NodesListItem.vue
@@ -23,17 +23,22 @@ const editNodeModel = ref({
   label: props.node.data.label,
   node_type: props.node.data.node_type,
   device: props.node.data.device.toString(),
-  function: props.node.data.function
+  function: props.node.data.function,
+  x_pos: props.node.position.x,
+  y_pos: props.node.position.y
 })
 
 const { onDragStart } = useDragAndDrop()
 
 const editNode = () => {
   const node = {
+    id: parseInt(props.node.id),
     label: editNodeModel.value.label,
     node_type: editNodeModel.value.node_type,
     device: Number(editNodeModel.value.device),
-    function: editNodeModel.value.function
+    function: editNodeModel.value.function,
+    x_pos: editNodeModel.value.x_pos,
+    y_pos: editNodeModel.value.y_pos
   }
   updateNode(parseInt(props.node.id), node).then(() => {
     emit('update')
@@ -47,7 +52,7 @@ const deleteNode = () => {
 }
 
 const openModal = () => {
-  ;(document.getElementById('editNode') as HTMLDialogElement).showModal()
+  ;(document.getElementById('editNode-' + props.node.id) as HTMLDialogElement).showModal()
 }
 </script>
 
@@ -65,7 +70,12 @@ const openModal = () => {
       <delete-icon class="fill-error" />
     </base-button>
 
-    <base-modal id="editNode" submitButtonText="Change" title="Edit Node" @submit="editNode">
+    <base-modal
+      :id="'editNode-' + node.id"
+      submitButtonText="Change"
+      title="Edit Node"
+      @submit="editNode"
+    >
       <base-input-field v-model="editNodeModel.label" label="Label" name="label" placeholder="" />
       <base-input-field
         v-model="editNodeModel.node_type"
diff --git a/client/src/services/NodesService.ts b/client/src/services/NodesService.ts
index 378e59e..290260f 100644
--- a/client/src/services/NodesService.ts
+++ b/client/src/services/NodesService.ts
@@ -36,15 +36,7 @@ export async function createNode(node: Partial<ImportNode>): Promise<Boolean> {
   const requestOptions = {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({
-      node,
-      /* label: node.label,
-      device: node.device,
-      node_type: node.node_type,
-      function: node.function, */
-      x_pos: 0,
-      y_pos: 0
-    })
+    body: JSON.stringify(node)
   }
   return (await fetch(`http://127.0.0.1:8000/data_manager/api/nodes/`, requestOptions)).ok
 }
@@ -64,13 +56,11 @@ export async function deleteNode(id: number): Promise<Boolean> {
  * @param node node to update, with the new values
  * @returns true if response is 200/OK, signifying that the node was updated successfully
  */
-export async function updateNode(id: number, node: Partial<ImportNode>): Promise<Boolean> {
+export async function updateNode(id: number, node: ImportNode): Promise<Boolean> {
   const requestOptions = {
     method: 'PATCH',
     headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({
-      node
-    })
+    body: JSON.stringify(node)
   }
   return (await fetch(`http://127.0.0.1:8000/data_manager/api/nodes/${id}/`, requestOptions)).ok
 }
diff --git a/client/src/services/TestService.ts b/client/src/services/TestService.ts
new file mode 100644
index 0000000..8330a3e
--- /dev/null
+++ b/client/src/services/TestService.ts
@@ -0,0 +1,11 @@
+/**
+ * @param testFlow ID of the test flow to run
+ * @returns the response from the server
+ */
+export async function runTest(testFlow: string): Promise<Object> {
+  const requestOptions = {
+    method: 'POST'
+  }
+  const res = await fetch(`http://127.0.0.1:8000/test_runner/run/${testFlow}/`, requestOptions)
+  return await res.json()
+}
diff --git a/client/src/views/FlowDetailedView.vue b/client/src/views/FlowDetailedView.vue
index 59635c9..dccabeb 100644
--- a/client/src/views/FlowDetailedView.vue
+++ b/client/src/views/FlowDetailedView.vue
@@ -18,6 +18,8 @@ import { useRoute } from 'vue-router'
 import { webSocketService } from '@/services/WebSocketService'
 import type { Log } from '@/types/WebSocketServiceTypes'
 
+import { runTest } from '@/services/TestService'
+
 const flows = inject<Ref<Flows>>('flows', ref([]))
 
 const route = useRoute()
@@ -59,6 +61,7 @@ const toggleWebSocket = () => {
   isRunning.value = !isRunning.value
 
   if (isRunning.value) {
+    runTest(flowId[0])
     webSocketService.connect(8765)
     webSocketService.subscribe(handleNewLog)
   } else {