Add connection types to devices

client/src/components/FlowCard.vue

@@ -2,28 +2,27 @@
 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) => {
   const currentPath = router.currentRoute.value.fullPath
   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()

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'
@@ -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>

client/src/components/navigation/NavButton.vue → client/src/components/PageNavigationButton.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>

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>

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>

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);

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>

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>

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))]
 })