added app selectors

src/renderer/src/components/COMselect.vue

@@ -1,31 +1,3 @@
-<script setup>
-import { ref } from 'vue'
-
-const props = defineProps(['serialports', 'installedApps'])
-const com_port = ref('')
-const iterator = ref(1)
-function optioniterator() { return iterator.value++};
-
-
-function addNewProgram() {
-  const programsContent = document.getElementById('programs')
-  const programNode = document.createElement('div')
-  // programNode.innerHTML = `<div class='row'><select class='form-select' class='col-auto'> <option> ${optioniterator()} </option> </select></div>`
-  programNode.innerHTML = generateAppSelector()
-  programsContent.appendChild(programNode.firstChild)
-}
-
-function generateAppSelector() {
-  let optionsString = ""
-  // foreach (app in props.installedApps)
-  // props.installedApps.array.forEach(element => {
-    for (let app in props.installedApps) {
-    optionsString += `<option value=${props.installedApps[app].path}> ${ props.installedApps[app].path } </option>`
-  }
-  return `<div class="row"><select class="form-select"> ${optionsString} </select></div>`
-}
-
-</script>
 <template>
   <p>Select COM port for device: {{ com_port }}</p>
 
@@ -35,7 +7,7 @@ function generateAppSelector() {
     </div>
     <div class="col-auto">
       <select v-model="com_port" class="form-select">
-        <option v-for="(serialport, i) in props.serialports" :key="i" :value="serialport.path">
+        <option v-for="(serialport, i) in props.serialports" :key="i" :value="serialport.path" class="form-option">
           {{ serialport.friendlyName }}
         </option>
       </select>
@@ -46,3 +18,27 @@ function generateAppSelector() {
     <button class="form-button" @click="addNewProgram">Add program</button>
   </div>
 </template>
+
+<script setup>
+import { ref } from 'vue'
+
+const props = defineProps(['serialports', 'installedApps'])
+const com_port = ref('')
+
+function addNewProgram() {
+  const programsContent = document.getElementById('programs')
+  const programNode = document.createElement('div')
+  // programNode.innerHTML = `<div class='row'><select class='form-select' class='col-auto'> <option> ${optioniterator()} </option> </select></div>`
+  programNode.innerHTML = generateAppSelector()
+  programsContent.appendChild(programNode.firstChild)
+}
+
+function generateAppSelector() {
+  let optionsString = ''
+
+  for (let app in props.installedApps) {
+    optionsString += `<option value=${props.installedApps[app].appName}> ${props.installedApps[app].appName} </option>`
+  }
+  return `<div class="row mt-3"><select class="form-select"> ${optionsString} </select></div>`
+}
+</script>