From 653005c7fc7854ca98f9f91aca9747f89b9b49be Mon Sep 17 00:00:00 2001
From: Timon Alexander Selnes <timonas@stud.ntnu.no>
Date: Sun, 3 Nov 2024 14:23:29 +0100
Subject: [PATCH 1/2] Add connection types to devices (wip), cleanup to follow
 vue best practises

---
 client/src/components/FlowCard.vue            |  15 +-
 client/src/components/PageNavigation.vue      |   2 +-
 client/src/components/common/BaseButton.vue   |  34 ++---
 .../src/components/common/BaseInputField.vue  |  42 +++---
 client/src/components/common/BaseModal.vue    |  40 ++---
 .../src/components/devices/DeviceInstance.vue |  41 ++---
 client/src/components/devices/DeviceModal.vue |  74 +++++++++
 client/src/components/devices/DevicesCard.vue |  13 +-
 client/src/components/flow/FlowHeader.vue     |  13 +-
 client/src/components/flow/FlowLog.vue        |   8 +-
 client/src/components/flow/FlowLogList.vue    |  11 +-
 client/src/components/flow/FlowNode.vue       |   3 +-
 client/src/components/flow/FlowNodeInput.vue  |   3 +-
 client/src/components/flow/NodesList.vue      | 142 +++++++++---------
 client/src/components/flow/NodesListItem.vue  |  91 +++++------
 .../src/components/navigation/NavButton.vue   |  16 +-
 client/src/router/index.ts                    |  14 +-
 client/src/services/DevicesService.ts         |  20 ++-
 client/src/types/DeviceTypes.ts               |  21 ++-
 .../{DevicesView.vue => CategoryView.vue}     |  86 +++++------
 client/src/views/DeviceView.vue               |  45 +++---
 client/src/views/FlowView.vue                 |   7 +-
 22 files changed, 412 insertions(+), 329 deletions(-)
 create mode 100644 client/src/components/devices/DeviceModal.vue
 rename client/src/views/{DevicesView.vue => CategoryView.vue} (98%)

diff --git a/client/src/components/FlowCard.vue b/client/src/components/FlowCard.vue
index df3683b..4613aab 100644
--- a/client/src/components/FlowCard.vue
+++ b/client/src/components/FlowCard.vue
@@ -2,16 +2,20 @@
 import BaseButton from '@/components/common/BaseButton.vue'
 import BaseInputField from './common/BaseInputField.vue'
 import BaseModal from './common/BaseModal.vue'
-import type { Flow } from '@/types/FlowType'
-import EditPen from '@/icons/EditPen.vue'
-import { router } from '@/router'
+
 import PlayIcon from '@/icons/RightArrow.vue'
+import EditPen from '@/icons/EditPen.vue'
+
+import type { Flow } from '@/types/FlowType'
 import { inject, ref, type Ref } from 'vue'
+import { router } from '@/router'
 
 const props = defineProps<{
   flow: Flow
 }>()
 
+const showEditFlowForm = ref(false)
+const editFlowType = ref<Flow | null>(null)
 const flows = inject<Ref<Flow[]>>('flows', ref([]))
 
 const navigateToFlow = (id: string) => {
@@ -19,11 +23,6 @@ const navigateToFlow = (id: string) => {
   router.push(`${currentPath}/${id}`)
 }
 
-// Flow editor
-const showEditFlowForm = ref(false)
-
-const editFlowType = ref<Flow | null>(null)
-
 const editFlow = (flow: Flow) => {
   editFlowType.value = { ...flow }
   ;(document.getElementById(`editFlowForm${flow.id}`) as HTMLDialogElement).showModal()
diff --git a/client/src/components/PageNavigation.vue b/client/src/components/PageNavigation.vue
index 82c5635..f47388b 100644
--- a/client/src/components/PageNavigation.vue
+++ b/client/src/components/PageNavigation.vue
@@ -34,7 +34,7 @@ onMounted(() => {
   <div class="flex h-screen min-w-max flex-col gap-12 bg-accent-800 py-5 pl-5">
     <h1 class="text-3xl font-light text-accent-400">liltest</h1>
     <nav class="flex flex-col gap-4">
-      <nav-button to="/devices">
+      <nav-button to="/categories">
         <devices-icon class="w-12" />
         Configure Devices
       </nav-button>
diff --git a/client/src/components/common/BaseButton.vue b/client/src/components/common/BaseButton.vue
index a2684ba..2a70233 100644
--- a/client/src/components/common/BaseButton.vue
+++ b/client/src/components/common/BaseButton.vue
@@ -1,20 +1,3 @@
-<template>
-  <button
-    :type="type"
-    class="rounded-md transition-colors duration-200"
-    :class="[
-      'inline-flex justify-center px-4 py-2 shadow-md',
-      variantClass,
-      sizeClass,
-      { 'hover:bg-opacity-80': hoverEffect, 'cursor-not-allowed opacity-50': disabled }
-    ]"
-    :disabled="disabled"
-    @click="handleClick"
-  >
-    <slot />
-  </button>
-</template>
-
 <script setup lang="ts">
 import { computed } from 'vue'
 
@@ -83,4 +66,19 @@ const sizeClass = computed(() => {
 })
 </script>
 
-<style scoped></style>
+<template>
+  <button
+    :type="type"
+    class="rounded-md transition-colors duration-200"
+    :class="[
+      'inline-flex justify-center px-4 py-2 shadow-md',
+      variantClass,
+      sizeClass,
+      { 'hover:bg-opacity-80': hoverEffect, 'cursor-not-allowed opacity-50': disabled }
+    ]"
+    :disabled="disabled"
+    @click="handleClick"
+  >
+    <slot />
+  </button>
+</template>
diff --git a/client/src/components/common/BaseInputField.vue b/client/src/components/common/BaseInputField.vue
index 8727da9..0882b2f 100644
--- a/client/src/components/common/BaseInputField.vue
+++ b/client/src/components/common/BaseInputField.vue
@@ -1,24 +1,3 @@
-<template>
-  <div class="flex flex-col gap-1">
-    <label v-if="label">{{ label }}</label>
-    <component
-      :is="inputComponent"
-      :type="type"
-      :placeholder="placeholder"
-      :class="computedClass"
-      :value="modelValue"
-      @input="onInput"
-      v-bind="$attrs"
-      v-on="listeners"
-    >
-      <option value="" disabled selected>Select</option>
-      <option v-for="option in options" :key="option" :value="option">
-        {{ option }}
-      </option>
-    </component>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { computed, useAttrs } from 'vue'
 
@@ -74,4 +53,23 @@ const inputComponent = computed(() => {
 })
 </script>
 
-<style scoped></style>
+<template>
+  <div class="flex flex-col gap-1">
+    <label v-if="label">{{ label }}</label>
+    <component
+      :is="inputComponent"
+      :type="type"
+      :placeholder="placeholder"
+      :class="computedClass"
+      :value="modelValue"
+      @input="onInput"
+      v-bind="$attrs"
+      v-on="listeners"
+    >
+      <option value="" disabled selected>Select</option>
+      <option v-for="option in options" :key="option" :value="option">
+        {{ option }}
+      </option>
+    </component>
+  </div>
+</template>
diff --git a/client/src/components/common/BaseModal.vue b/client/src/components/common/BaseModal.vue
index 7401e1d..b359e94 100644
--- a/client/src/components/common/BaseModal.vue
+++ b/client/src/components/common/BaseModal.vue
@@ -1,3 +1,23 @@
+<script setup lang="ts">
+import BaseButton from './BaseButton.vue'
+
+const props = defineProps<{
+  id: string
+  submitButtonText: string
+  title?: string
+  onSubmit: () => void
+}>()
+
+const close = () => {
+  ;(document.getElementById(props.id) as HTMLDialogElement).close()
+}
+
+const submit = () => {
+  props.onSubmit()
+  close()
+}
+</script>
+
 <template>
   <teleport to="body">
     <dialog
@@ -19,26 +39,6 @@
   </teleport>
 </template>
 
-<script setup lang="ts">
-import BaseButton from './BaseButton.vue'
-
-const props = defineProps<{
-  id: string
-  submitButtonText: string
-  title?: string
-  onSubmit: () => void
-}>()
-
-const close = () => {
-  ;(document.getElementById(props.id) as HTMLDialogElement).close()
-}
-
-const submit = () => {
-  props.onSubmit()
-  close()
-}
-</script>
-
 <style scoped>
 dialog[open]::backdrop {
   background-color: rgba(0, 0, 0, 0.5);
diff --git a/client/src/components/devices/DeviceInstance.vue b/client/src/components/devices/DeviceInstance.vue
index 203a617..602fe8d 100644
--- a/client/src/components/devices/DeviceInstance.vue
+++ b/client/src/components/devices/DeviceInstance.vue
@@ -1,15 +1,12 @@
 <script setup lang="ts">
-import type { Device } from '@/types/DeviceTypes'
 import CheckIcon from '@/icons/CheckIcon.vue'
 import EditPen from '@/icons/EditPen.vue'
 import DeleteIcon from '@/icons/DeleteIcon.vue'
 
 import BaseButton from '../common/BaseButton.vue'
-import BaseInputField from '../common/BaseInputField.vue'
-import BaseModal from '../common/BaseModal.vue'
-
+import DeviceModal from '@/components/devices/DeviceModal.vue'
+import type { Device, DeviceModel } from '@/types/DeviceTypes'
 import { updateDevice, deleteDevice as removeDevice } from '@/services/DevicesService'
-import { ref } from 'vue'
 
 const emit = defineEmits(['update'])
 const props = defineProps<{
@@ -20,16 +17,18 @@ const openModal = () => {
   ;(document.getElementById('editDeviceModal' + props.device.id) as HTMLDialogElement).showModal()
 }
 
-const editDeviceModel = ref({
-  name: props.device.device_id,
-  category: props.device.category.toString()
-})
-
-const editDevice = () => {
+const editDevice = (editDeviceModel: DeviceModel) => {
   const device = {
     id: props.device.id,
-    device_id: editDeviceModel.value.name,
-    category: Number(editDeviceModel.value.category)
+    device_id: editDeviceModel.device_id,
+    category: parseInt(editDeviceModel.category),
+    connection_ids: {
+      adb_device_id: editDeviceModel.connection_ids.adb_device_id,
+      serial_number: editDeviceModel.connection_ids.serial_number
+    },
+    communication_ids: {
+      mac_address: editDeviceModel.communication_ids.mac_address
+    }
   }
   updateDevice(props.device.id, device).then(() => {
     emit('update')
@@ -62,20 +61,12 @@ const deleteDevice = () => {
         <delete-icon class="fill-error" />
       </base-button>
     </div>
-    <base-modal
+    <device-modal
       :id="'editDeviceModal' + device.id"
+      :device="device"
+      submit="Save"
       title="Edit Device"
-      submitButtonText="Add"
       @submit="editDevice"
-    >
-      <base-input-field v-model="editDeviceModel.name" label="Name" name="name" placeholder="" />
-      <base-input-field
-        v-model="editDeviceModel.category"
-        label="Category"
-        name="category"
-        placeholder=""
-        type="number"
-      />
-    </base-modal>
+    />
   </div>
 </template>
diff --git a/client/src/components/devices/DeviceModal.vue b/client/src/components/devices/DeviceModal.vue
new file mode 100644
index 0000000..393097b
--- /dev/null
+++ b/client/src/components/devices/DeviceModal.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import BaseModal from '../common/BaseModal.vue'
+import BaseInputField from '../common/BaseInputField.vue'
+import type { Device } from '@/types/DeviceTypes'
+import { defineProps, ref } from 'vue'
+
+defineEmits(['submit'])
+const props = defineProps({
+  id: {
+    type: String,
+    required: true
+  },
+  submit: {
+    type: String,
+    required: true
+  },
+  title: {
+    type: String,
+    required: true
+  },
+  device: {
+    type: Object as () => Device,
+    required: false
+  }
+})
+
+const deviceModel = ref({
+  device_id: props.device?.device_id || '',
+  category: props.device?.category.toString(),
+  connection_ids: {
+    adb_device_id: props.device?.connection_ids.adb_device_id,
+    serial_number: props.device?.connection_ids.serial_number
+  },
+  communication_ids: {
+    mac_address: props.device?.communication_ids.mac_address
+  }
+})
+</script>
+
+<template>
+  <base-modal
+    :id="id"
+    :title="title"
+    :submitButtonText="submit"
+    @submit="$emit('submit', deviceModel)"
+  >
+    <base-input-field v-model="deviceModel.device_id" label="Name" name="name" placeholder="" />
+    <base-input-field
+      v-model="deviceModel.category"
+      label="Category"
+      name="category"
+      placeholder=""
+      type="number"
+    />
+    <base-input-field
+      v-model="deviceModel.connection_ids.adb_device_id"
+      label="ADB Device ID"
+      name="adb_device_id"
+      placeholder=""
+    />
+    <base-input-field
+      v-model="deviceModel.connection_ids.serial_number"
+      label="Serial Number"
+      name="serial_number"
+      placeholder=""
+    />
+    <base-input-field
+      v-model="deviceModel.communication_ids.mac_address"
+      label="MAC Address"
+      name="mac_address"
+      placeholder=""
+    />
+  </base-modal>
+</template>
diff --git a/client/src/components/devices/DevicesCard.vue b/client/src/components/devices/DevicesCard.vue
index 4849fc2..758b6e4 100644
--- a/client/src/components/devices/DevicesCard.vue
+++ b/client/src/components/devices/DevicesCard.vue
@@ -1,28 +1,27 @@
 <script setup lang="ts">
 import { computed, inject, ref, type Ref } from 'vue'
+import type { DeviceType } from '../../types/DeviceTypes'
+import { useRouter } from 'vue-router'
+
 import BaseButton from '../common/BaseButton.vue'
 import BaseInputField from '@/components/common/BaseInputField.vue'
 import BaseModal from '../common/BaseModal.vue'
-import '@mdi/font/css/materialdesignicons.css'
+
 import EditPen from '@/icons/EditPen.vue'
 import RightArrow from '@/icons/RightArrow.vue'
-import type { DeviceType } from '../../types/DeviceTypes'
-import { useRouter } from 'vue-router'
 
+const router = useRouter()
 const props = defineProps<{
   deviceType: DeviceType
 }>()
 
-const router = useRouter()
-
+const editDeviceType = ref<DeviceType | null>(null)
 const deviceTypes = inject<Ref<DeviceType[]>>('deviceTypes', ref([]))
 const updateDeviceTypes = inject<(newDeviceTypes: DeviceType[]) => void>(
   'updateDeviceTypes',
   () => {}
 )
 
-const editDeviceType = ref<DeviceType | null>(null)
-
 const connectionTypes = computed(() => {
   return [...new Set(deviceTypes.value.map((deviceType) => deviceType.connectionType))]
 })
diff --git a/client/src/components/flow/FlowHeader.vue b/client/src/components/flow/FlowHeader.vue
index edccbd6..86c8e08 100644
--- a/client/src/components/flow/FlowHeader.vue
+++ b/client/src/components/flow/FlowHeader.vue
@@ -1,16 +1,17 @@
 <script setup lang="ts">
-defineEmits(['update:displayLog'])
-defineProps({
-  displayLog: Boolean,
-  nodes: Array
-})
-
 import { listItems } from '@/assets/mock_data'
 import BaseButton from '@/components/common/BaseButton.vue'
 import ExitIcon from '@/icons/ExitIcon.vue'
 import NodesList from '@/components/flow/NodesList.vue'
 import ExportIcon from '@/icons/ExportIcon.vue'
+
+defineEmits(['update:displayLog'])
+defineProps({
+  displayLog: Boolean,
+  nodes: Array
+})
 </script>
+
 <template>
   <header
     class="relative flex items-center gap-2 rounded-xl bg-white-100 p-2 shadow-md dark:bg-accent-800"
diff --git a/client/src/components/flow/FlowLog.vue b/client/src/components/flow/FlowLog.vue
index 401303f..145640a 100644
--- a/client/src/components/flow/FlowLog.vue
+++ b/client/src/components/flow/FlowLog.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
-defineProps<{
-  show: boolean
-}>()
-
 import FlowLogList from './FlowLogList.vue'
 import WebSocketProvider from '@/providers/WebSocketProvider.vue'
 
 import { logItems } from '@/assets/mock_data'
 import { ref } from 'vue'
 
+defineProps<{
+  show: boolean
+}>()
+
 const currentDevices = ref([{ key: 0, item: 0 }] as { key: number; item: number }[])
 
 const modifyCurrentDevices = (id: number) => {
diff --git a/client/src/components/flow/FlowLogList.vue b/client/src/components/flow/FlowLogList.vue
index 6c87fa0..969efb0 100644
--- a/client/src/components/flow/FlowLogList.vue
+++ b/client/src/components/flow/FlowLogList.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
+import type { Log } from '@/types/WebSocketServiceTypes'
+import type { IWebSocketService } from '@/interfaces/IWebSocketService'
+import { reactive, onMounted, onUnmounted, inject, watch } from 'vue'
+import { logItems } from '@/assets/mock_data'
+
 const props = defineProps<{
   deviceId: number
   devices: { key: number; item: number }[]
 }>()
 
-import { reactive, onMounted, onUnmounted, inject, watch } from 'vue'
-import type { Log } from '@/types/WebSocketServiceTypes'
-import type { IWebSocketService } from '@/interfaces/IWebSocketService'
-import { logItems } from '@/assets/mock_data'
-
 const webSocketService = inject<IWebSocketService>('webSocketService')
 
 const state = reactive({
@@ -58,6 +58,7 @@ watch(
   }
 )
 </script>
+
 <template>
   <section
     :id="`log-${deviceId}`"
diff --git a/client/src/components/flow/FlowNode.vue b/client/src/components/flow/FlowNode.vue
index 73173f8..fead173 100644
--- a/client/src/components/flow/FlowNode.vue
+++ b/client/src/components/flow/FlowNode.vue
@@ -7,11 +7,12 @@
  * produce any runtime errors relevant to the issue.
  */
 
+import type { NodeProps } from '@vue-flow/core'
 import type { BaseNode } from '@/types/NodeType'
 import { Handle, Position } from '@vue-flow/core'
-import type { NodeProps } from '@vue-flow/core'
 import { blue, green, pink, purple } from '@/utils/colorRanges'
 import { ref } from 'vue'
+
 import NodeFieldInput from './FlowNodeInput.vue'
 import SuccessIcon from '@/icons/SuccessIcon.vue'
 import WarningIcon from '@/icons/WarningIcon.vue'
diff --git a/client/src/components/flow/FlowNodeInput.vue b/client/src/components/flow/FlowNodeInput.vue
index a3dfbab..c5a4cd6 100644
--- a/client/src/components/flow/FlowNodeInput.vue
+++ b/client/src/components/flow/FlowNodeInput.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
+defineEmits(['edit'])
 defineProps({
   colour: String,
   label: String,
   value: String
 })
-
-defineEmits(['edit'])
 </script>
 
 <template>
diff --git a/client/src/components/flow/NodesList.vue b/client/src/components/flow/NodesList.vue
index 0988e42..98792c8 100644
--- a/client/src/components/flow/NodesList.vue
+++ b/client/src/components/flow/NodesList.vue
@@ -1,74 +1,3 @@
-<template>
-  <div class="z-50">
-    <base-button
-      variant="light"
-      @click="storedNodesOpen = !storedNodesOpen"
-      class="h-9 w-48 gap-2 rounded-lg leading-tight"
-      >Nodes
-      <chevron-up-icon v-if="storedNodesOpen" class="h-5" />
-      <chevron-down-icon v-else class="h-5" />
-    </base-button>
-    <div
-      v-if="storedNodesOpen"
-      class="absolute right-0 top-16 h-[calc(100vh-7rem)] rounded-xl bg-primary-100"
-    >
-      <nav class="flex gap-2 rounded-xl p-2">
-        <base-button
-          @click="selectedTab = 0"
-          :aria-expanded="selectedTab === 0"
-          class="h-9 flex-grow bg-opacity-0 leading-tight aria-expanded:bg-accent-500 aria-expanded:text-accent-900"
-          >Assertions</base-button
-        >
-        <base-button
-          @click="selectedTab = 1"
-          :aria-expanded="selectedTab === 1"
-          class="h-9 flex-grow bg-opacity-0 leading-tight aria-expanded:bg-accent-500 aria-expanded:text-accent-900"
-          >Actions</base-button
-        >
-      </nav>
-      <div class="flex gap-1 px-2">
-        <base-input-field class="h-9" />
-        <base-button
-          @click="openModal"
-          variant="icon"
-          aria-label="Create new node"
-          class="aspect-square h-9 items-center rounded-lg leading-tight"
-        >
-          <plus-icon />
-        </base-button>
-      </div>
-      <ul class="m-1 flex flex-col gap-1 pt-0.5">
-        <nodes-list-item @update="getNodes" v-for="node in nodes" :key="node.id" :node="node" />
-      </ul>
-    </div>
-    <base-modal id="newNode" submitButtonText="Create" title="Create New Node" @submit="newNode">
-      <base-input-field v-model="newNodeModel.label" label="Label" name="label" placeholder="" />
-      <base-input-field
-        v-model="newNodeModel.node_type"
-        label="Node type"
-        name="node-type"
-        placeholder=""
-        type="select"
-        :options="['Assert', 'Action']"
-      />
-      <base-input-field
-        v-model="newNodeModel.device"
-        label="Device"
-        name="device"
-        placeholder=""
-        type="number"
-      />
-      <base-input-field
-        v-model="newNodeModel.function"
-        type="textarea"
-        label="Function"
-        name="Function"
-        placeholder=""
-      />
-    </base-modal>
-  </div>
-</template>
-
 <script setup lang="ts">
 import BaseButton from '@/components/common/BaseButton.vue'
 import BaseInputField from '@/components/common/BaseInputField.vue'
@@ -142,3 +71,74 @@ const newNode = () => {
   })
 }
 </script>
+
+<template>
+  <div class="z-50">
+    <base-button
+      variant="light"
+      @click="storedNodesOpen = !storedNodesOpen"
+      class="h-9 w-48 gap-2 rounded-lg leading-tight"
+      >Nodes
+      <chevron-up-icon v-if="storedNodesOpen" class="h-5" />
+      <chevron-down-icon v-else class="h-5" />
+    </base-button>
+    <div
+      v-if="storedNodesOpen"
+      class="absolute right-0 top-16 h-[calc(100vh-7rem)] rounded-xl bg-primary-100"
+    >
+      <nav class="flex gap-2 rounded-xl p-2">
+        <base-button
+          @click="selectedTab = 0"
+          :aria-expanded="selectedTab === 0"
+          class="h-9 flex-grow bg-opacity-0 leading-tight aria-expanded:bg-accent-500 aria-expanded:text-accent-900"
+          >Assertions</base-button
+        >
+        <base-button
+          @click="selectedTab = 1"
+          :aria-expanded="selectedTab === 1"
+          class="h-9 flex-grow bg-opacity-0 leading-tight aria-expanded:bg-accent-500 aria-expanded:text-accent-900"
+          >Actions</base-button
+        >
+      </nav>
+      <div class="flex gap-1 px-2">
+        <base-input-field class="h-9" />
+        <base-button
+          @click="openModal"
+          variant="icon"
+          aria-label="Create new node"
+          class="aspect-square h-9 items-center rounded-lg leading-tight"
+        >
+          <plus-icon />
+        </base-button>
+      </div>
+      <ul class="m-1 flex flex-col gap-1 pt-0.5">
+        <nodes-list-item @update="getNodes" v-for="node in nodes" :key="node.id" :node="node" />
+      </ul>
+    </div>
+    <base-modal id="newNode" submitButtonText="Create" title="Create New Node" @submit="newNode">
+      <base-input-field v-model="newNodeModel.label" label="Label" name="label" placeholder="" />
+      <base-input-field
+        v-model="newNodeModel.node_type"
+        label="Node type"
+        name="node-type"
+        placeholder=""
+        type="select"
+        :options="['Assert', 'Action']"
+      />
+      <base-input-field
+        v-model="newNodeModel.device"
+        label="Device"
+        name="device"
+        placeholder=""
+        type="number"
+      />
+      <base-input-field
+        v-model="newNodeModel.function"
+        type="textarea"
+        label="Function"
+        name="Function"
+        placeholder=""
+      />
+    </base-modal>
+  </div>
+</template>
diff --git a/client/src/components/flow/NodesListItem.vue b/client/src/components/flow/NodesListItem.vue
index 91651c2..8015a85 100644
--- a/client/src/components/flow/NodesListItem.vue
+++ b/client/src/components/flow/NodesListItem.vue
@@ -1,57 +1,16 @@
-<template>
-  <li
-    :draggable="true"
-    @dragstart="onDragStart($event, node)"
-    class="mx-1 flex h-9 items-center gap-1 rounded-lg bg-primary-200 py-1.5 pl-4 shadow-md hover:cursor-grab"
-  >
-    <p>{{ node.data.label }}</p>
-    <base-button @click="openModal" variant="icon" class="ml-auto h-7 items-center">
-      <edit-pen class="fill-accent-900 dark:fill-white-100" />
-    </base-button>
-    <base-button @click="deleteNode" variant="icon" class="mr-1 h-7 items-center">
-      <delete-icon class="fill-error" />
-    </base-button>
-
-    <base-modal id="editNode" 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"
-        label="Node type"
-        name="node-type"
-        placeholder=""
-        type="select"
-        :options="['Assert', 'Action']"
-      />
-      <base-input-field
-        v-model="editNodeModel.device"
-        label="Device"
-        name="device"
-        placeholder=""
-        type="number"
-      />
-      <base-input-field
-        v-model="editNodeModel.function"
-        type="textarea"
-        label="Function"
-        name="Function"
-        placeholder=""
-      />
-    </base-modal>
-  </li>
-</template>
-
 <script setup lang="ts">
 import type { BaseNode as Node } from '@/types/NodeType'
+import { updateNode, deleteNode as removeNode } from '@/services/NodesService'
 import useDragAndDrop from '@/composables/useDragAndDrop'
+import { ref } from 'vue'
+
 import BaseInputField from '../common/BaseInputField.vue'
 import BaseModal from '../common/BaseModal.vue'
 import BaseButton from '../common/BaseButton.vue'
+
 import DeleteIcon from '@/icons/DeleteIcon.vue'
 import EditPen from '@/icons/EditPen.vue'
 
-import { updateNode, deleteNode as removeNode } from '@/services/NodesService'
-import { ref } from 'vue'
-
 const emit = defineEmits(['update'])
 const props = defineProps({
   node: {
@@ -91,3 +50,45 @@ const openModal = () => {
   ;(document.getElementById('editNode') as HTMLDialogElement).showModal()
 }
 </script>
+
+<template>
+  <li
+    :draggable="true"
+    @dragstart="onDragStart($event, node)"
+    class="mx-1 flex h-9 items-center gap-1 rounded-lg bg-primary-200 py-1.5 pl-4 shadow-md hover:cursor-grab"
+  >
+    <p>{{ node.data.label }}</p>
+    <base-button @click="openModal" variant="icon" class="ml-auto h-7 items-center">
+      <edit-pen class="fill-accent-900 dark:fill-white-100" />
+    </base-button>
+    <base-button @click="deleteNode" variant="icon" class="mr-1 h-7 items-center">
+      <delete-icon class="fill-error" />
+    </base-button>
+
+    <base-modal id="editNode" 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"
+        label="Node type"
+        name="node-type"
+        placeholder=""
+        type="select"
+        :options="['Assert', 'Action']"
+      />
+      <base-input-field
+        v-model="editNodeModel.device"
+        label="Device"
+        name="device"
+        placeholder=""
+        type="number"
+      />
+      <base-input-field
+        v-model="editNodeModel.function"
+        type="textarea"
+        label="Function"
+        name="Function"
+        placeholder=""
+      />
+    </base-modal>
+  </li>
+</template>
diff --git a/client/src/components/navigation/NavButton.vue b/client/src/components/navigation/NavButton.vue
index 4f06a1d..11e2fa8 100644
--- a/client/src/components/navigation/NavButton.vue
+++ b/client/src/components/navigation/NavButton.vue
@@ -1,3 +1,11 @@
+<script setup lang="ts">
+import { defineProps } from 'vue'
+
+defineProps<{
+  to: string
+}>()
+</script>
+
 <template>
   <router-link
     :to="to"
@@ -7,11 +15,3 @@
     <slot />
   </router-link>
 </template>
-
-<script setup lang="ts">
-import { defineProps } from 'vue'
-
-defineProps<{
-  to: string
-}>()
-</script>
diff --git a/client/src/router/index.ts b/client/src/router/index.ts
index 649ac1b..8539d78 100644
--- a/client/src/router/index.ts
+++ b/client/src/router/index.ts
@@ -2,7 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router'
 
 import FlowView from '@/views/FlowView.vue'
 import LogView from '@/components/flow/FlowLog.vue'
-import DevicesView from '@/views/DevicesView.vue'
+import CategoryView from '@/views/CategoryView.vue'
 import DeviceView from '@/views/DeviceView.vue'
 import FlowDetailedView from '@/views/FlowDetailedView.vue'
 
@@ -10,7 +10,7 @@ const routes = [
   {
     path: '/',
     name: 'home',
-    component: DevicesView
+    component: FlowView
   },
   {
     path: '/flow',
@@ -29,13 +29,13 @@ const routes = [
     props: true
   },
   {
-    path: '/devices',
-    name: 'devices',
-    component: DevicesView
+    path: '/categories',
+    name: 'categories',
+    component: CategoryView
   },
   {
-    path: '/devices/:deviceTypeName',
-    name: 'deviceTypeDetail',
+    path: '/categories/:category',
+    name: 'category',
     component: DeviceView
   }
 ]
diff --git a/client/src/services/DevicesService.ts b/client/src/services/DevicesService.ts
index f8989e0..255a0ac 100644
--- a/client/src/services/DevicesService.ts
+++ b/client/src/services/DevicesService.ts
@@ -24,18 +24,26 @@ export async function fetchDevices(): Promise<Device[]> {
  * @returns true if response is 200/OK, signifying that the device was created successfully
  */
 export async function createDevice(device: Device): Promise<Boolean> {
+  if (device.connection_ids.adb_device_id === '') {
+    delete device.connection_ids.adb_device_id
+  }
+  if (device.connection_ids.serial_number === '') {
+    delete device.connection_ids.serial_number
+  }
+  if (device.communication_ids.mac_address === '') {
+    delete device.communication_ids.mac_address
+  }
+
+  console.log('Here, ', device)
+
   const requestOptions = {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({
       device_id: device.device_id,
       category: device.category,
-      connection_ids: {
-        adb_device_id: 'adb-001'
-      },
-      communication_ids: {
-        mac_address: 'A1:B2:C3:D4:E5:F6'
-      }
+      connection_ids: device.connection_ids,
+      communication_ids: device.communication_ids
     })
   }
   return (await fetch(`http://127.0.0.1:8000/data_manager/api/devices/`, requestOptions)).ok
diff --git a/client/src/types/DeviceTypes.ts b/client/src/types/DeviceTypes.ts
index c5fc9ee..aa6f52e 100644
--- a/client/src/types/DeviceTypes.ts
+++ b/client/src/types/DeviceTypes.ts
@@ -2,6 +2,13 @@ type Device = {
   id: number
   device_id: string
   category: number
+  connection_ids: {
+    adb_device_id?: string
+    serial_number?: string
+  }
+  communication_ids: {
+    mac_address?: string
+  }
 }
 
 type DeviceType = {
@@ -10,4 +17,16 @@ type DeviceType = {
   devices?: Device[]
 }
 
-export type { Device, DeviceType }
+type DeviceModel = {
+  device_id: string
+  category: string
+  connection_ids: {
+    adb_device_id: string
+    serial_number: string
+  }
+  communication_ids: {
+    mac_address: string
+  }
+}
+
+export type { Device, DeviceType, DeviceModel }
diff --git a/client/src/views/DevicesView.vue b/client/src/views/CategoryView.vue
similarity index 98%
rename from client/src/views/DevicesView.vue
rename to client/src/views/CategoryView.vue
index 7894365..c286827 100644
--- a/client/src/views/DevicesView.vue
+++ b/client/src/views/CategoryView.vue
@@ -1,53 +1,12 @@
-<template>
-  <main class="flex flex-col gap-6">
-    <section class="flex h-10 gap-2">
-      <h1 class="flex-shrink-0 p-2 pt-1 text-2xl font-semibold">Configure devices</h1>
-      <form action="" class="ml-auto flex-grow">
-        <base-input-field
-          v-model="searchQuery"
-          placeholder="Search device types"
-          class="flex-shrink rounded-lg"
-        />
-      </form>
-      <base-button @click="openModal" class="flex w-48 flex-shrink-0 items-center gap-2">
-        New device type
-        <i class="mdi mdi-plus p-1 text-xl"></i>
-      </base-button>
-    </section>
-    <ul class="grid gap-2 md:grid-cols-2 lg:grid-cols-3">
-      <devices-card
-        v-for="deviceType in filteredDeviceTypes"
-        :key="deviceType.name"
-        :deviceType="deviceType"
-      />
-    </ul>
-    <base-modal
-      id="newDeviceTypeModal"
-      title="Create Device Type"
-      submit-button-text="Create"
-      @submit="addNewDeviceType"
-    >
-      <base-input-field v-model="newDeviceTypeName" label="Name" name="name" placeholder="" />
-      <base-input-field
-        v-model="newDeviceTypeConnection"
-        label="Connection type"
-        name="connection-type"
-        placeholder=""
-        type="select"
-        :options="connectionTypes"
-      />
-    </base-modal>
-  </main>
-</template>
-
 <script setup lang="ts">
+import type { DeviceType } from '@/types/DeviceTypes'
 import { ref, inject, computed } from 'vue'
 import type { Ref } from 'vue'
+
 import DevicesCard from '@/components/devices/DevicesCard.vue'
 import BaseButton from '../components/common/BaseButton.vue'
 import BaseInputField from '@/components/common/BaseInputField.vue'
 import BaseModal from '../components/common/BaseModal.vue'
-import type { DeviceType } from '@/types/DeviceTypes'
 
 const openModal = () => {
   ;(document.getElementById('newDeviceTypeModal') as HTMLDialogElement).showModal()
@@ -94,3 +53,44 @@ const filteredDeviceTypes = computed(() => {
   )
 })
 </script>
+<template>
+  <main class="flex flex-col gap-6">
+    <section class="flex h-10 gap-2">
+      <h1 class="flex-shrink-0 p-2 pt-1 text-2xl font-semibold">Device categories</h1>
+      <form action="" class="ml-auto flex-grow">
+        <base-input-field
+          v-model="searchQuery"
+          placeholder="Search device types"
+          class="flex-shrink rounded-lg"
+        />
+      </form>
+      <base-button @click="openModal" class="flex w-48 flex-shrink-0 items-center gap-2">
+        New category
+        <i class="mdi mdi-plus p-1 text-xl"></i>
+      </base-button>
+    </section>
+    <ul class="grid gap-2 md:grid-cols-2 lg:grid-cols-3">
+      <devices-card
+        v-for="deviceType in filteredDeviceTypes"
+        :key="deviceType.name"
+        :deviceType="deviceType"
+      />
+    </ul>
+    <base-modal
+      id="newDeviceTypeModal"
+      title="Create Device Type"
+      submit-button-text="Create"
+      @submit="addNewDeviceType"
+    >
+      <base-input-field v-model="newDeviceTypeName" label="Name" name="name" placeholder="" />
+      <base-input-field
+        v-model="newDeviceTypeConnection"
+        label="Connection type"
+        name="connection-type"
+        placeholder=""
+        type="select"
+        :options="connectionTypes"
+      />
+    </base-modal>
+  </main>
+</template>
diff --git a/client/src/views/DeviceView.vue b/client/src/views/DeviceView.vue
index 6ad1210..cef0e11 100644
--- a/client/src/views/DeviceView.vue
+++ b/client/src/views/DeviceView.vue
@@ -1,14 +1,15 @@
 <script setup lang="ts">
-import type { Device, DeviceType } from '@/types/DeviceTypes'
+import type { Device, DeviceModel, DeviceType } from '@/types/DeviceTypes'
 import { computed, inject, onMounted, ref, type Ref } from 'vue'
 import { useRoute } from 'vue-router'
-import BaseButton from '@/components/common/BaseButton.vue'
-import BaseInputField from '@/components/common/BaseInputField.vue'
+
+import { createDevice, fetchDevices } from '@/services/DevicesService'
 import DeviceInstance from '@/components/devices/DeviceInstance.vue'
+import BaseButton from '@/components/common/BaseButton.vue'
+import DeviceModal from '@/components/devices/DeviceModal.vue'
+
 import PlusIcon from '@/icons/PlusIcon.vue'
-import { createDevice, fetchDevices } from '@/services/DevicesService'
 import ChevronRightIcon from '@/icons/ChevronRightIcon.vue'
-import BaseModal from '@/components/common/BaseModal.vue'
 
 const devices = ref<Device[]>([])
 // Inject the device types, and find the device type that matches the current route
@@ -18,11 +19,6 @@ const deviceType = computed(() => {
   return deviceTypes.value.find((deviceType) => deviceType.name === route.fullPath.split('/').pop())
 })
 
-const newDeviceModel = ref({
-  name: '',
-  category: ''
-})
-
 const openModal = () => {
   ;(document.getElementById('newDeviceModal') as HTMLDialogElement).showModal()
 }
@@ -33,12 +29,20 @@ onMounted(() => {
   })
 })
 
-const newDevice = () => {
+const newDevice = (newDeviceModel: DeviceModel) => {
   const device = {
     id: devices.value.length + 1,
-    device_id: newDeviceModel.value.name,
-    category: parseInt(newDeviceModel.value.category)
+    device_id: newDeviceModel.device_id,
+    category: parseInt(newDeviceModel.category),
+    connection_ids: {
+      adb_device_id: newDeviceModel.connection_ids.adb_device_id,
+      serial_number: newDeviceModel.connection_ids.serial_number
+    },
+    communication_ids: {
+      mac_address: newDeviceModel.communication_ids.mac_address
+    }
   }
+
   createDevice(device).then((res: Boolean) => {
     if (res) {
       update()
@@ -60,9 +64,9 @@ const update = () => {
     <div class="flex h-full flex-col gap-2">
       <div class="flex grow-0 items-center gap-2">
         <router-link
-          to="/devices"
+          to="/categories"
           class="rounded-md px-2 py-1 text-xl font-semibold hover:bg-accent-800 hover:text-white-100"
-          >Device Types</router-link
+          >Device categories</router-link
         >
         <chevron-right-icon />
         <h1 class="text-xl font-semibold">{{ $route.fullPath.split('/').pop() }}</h1>
@@ -112,15 +116,6 @@ const update = () => {
         </div>
       </div>
     </div>
-    <base-modal id="newDeviceModal" title="Edit Device" submitButtonText="Save" @submit="newDevice">
-      <base-input-field v-model="newDeviceModel.name" label="Name" name="name" placeholder="" />
-      <base-input-field
-        v-model="newDeviceModel.category"
-        label="Category"
-        name="category"
-        placeholder=""
-        type="number"
-      />
-    </base-modal>
+    <device-modal id="newDeviceModal" submit="Create" title="New Device" @submit="newDevice" />
   </main>
 </template>
diff --git a/client/src/views/FlowView.vue b/client/src/views/FlowView.vue
index ae053e4..0e3e408 100644
--- a/client/src/views/FlowView.vue
+++ b/client/src/views/FlowView.vue
@@ -1,13 +1,15 @@
 <script setup lang="ts">
 import { ref, inject, computed, type Ref } from 'vue'
 import type { Flow, Flows } from '@/types/FlowType'
+
 import FlowCard from '@/components/FlowCard.vue'
 import BaseInputField from '@/components/common/BaseInputField.vue'
 import BaseButton from '@/components/common/BaseButton.vue'
 import BaseModal from '../components/common/BaseModal.vue'
 
+const newFlowStatus = 'Untested'
+const newFlowName = ref('')
 const searchQuery = ref('')
-
 const flows = inject<Ref<Flows>>('flows', ref([]))
 
 const filteredFlows = computed(() => {
@@ -18,9 +20,6 @@ const filteredFlows = computed(() => {
   )
 })
 
-const newFlowStatus = 'Untested'
-const newFlowName = ref('')
-
 const createNewFlow = () => {
   ;(document.getElementById('newFlowModal') as HTMLDialogElement).showModal()
 }

From 88c80ae479d8d251b9e9ee23fe369026e8abc92f Mon Sep 17 00:00:00 2001
From: Timon Alexander Selnes <timonas@stud.ntnu.no>
Date: Sun, 3 Nov 2024 14:36:27 +0100
Subject: [PATCH 2/2] Update directory structure to remove unnecessary
 subfolder.

---
 client/src/components/PageNavigation.vue                        | 2 +-
 .../{navigation/NavButton.vue => PageNavigationButton.vue}      | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename client/src/components/{navigation/NavButton.vue => PageNavigationButton.vue} (100%)

diff --git a/client/src/components/PageNavigation.vue b/client/src/components/PageNavigation.vue
index f47388b..832d165 100644
--- a/client/src/components/PageNavigation.vue
+++ b/client/src/components/PageNavigation.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import NavButton from './navigation/NavButton.vue'
+import NavButton from './PageNavigationButton.vue'
 import DevicesIcon from '@/icons/DevicesIcon.vue'
 import FlowsIcon from '@/icons/FlowsIcon.vue'
 import ThemeIcon from '@/icons/ThemeIcon.vue'
diff --git a/client/src/components/navigation/NavButton.vue b/client/src/components/PageNavigationButton.vue
similarity index 100%
rename from client/src/components/navigation/NavButton.vue
rename to client/src/components/PageNavigationButton.vue