added 2 way data binding between parent vue control and child controls to track addition of programs and defnition of Serial port

.prettierrc.yaml

@@ -2,3 +2,4 @@ singleQuote: true
 semi: false
 printWidth: 100
 trailingComma: none
+endOfLine: "auto"

src/renderer/src/App.vue

@@ -1,14 +1,19 @@
 <script setup lang="ts">
 import COMselect from './components/COMselect.vue'
+import ProgramSelector from './components/ProgramSelector.vue'
 import { onMounted } from 'vue'
 import { ref } from 'vue'
 import * as logTimestamp from 'log-timestamp'
 
-const movies = ref([])
-const apiKey = 'a0eb411ca9c81896004dce1d27a7245b'
+// const movies = ref([])
+// const apiKey = 'a0eb411ca9c81896004dce1d27a7245b'
 const configuration = ref('Loading....')
 const serialPorts = ref('Loading Serial ports.... ')
-const insatlledApps = ref({})
+const installedApps = ref({})
+
+//model variables for user provided input
+const programCounter = ref([''])
+const serialPortSelection = ref('select the COM port... ')
 
 const ipcHandle = () => window.electron.ipcRenderer.send('ping')
 // const getConfigFileContents = async () => {
@@ -30,29 +35,66 @@ const getTrendingMovies = (category) => {
 }
 
 async function getInstalledApps() {
-  insatlledApps.value = await window.electron.ipcRenderer.invoke('getInstalledApps')
+  installedApps.value = await window.electron.ipcRenderer.invoke('getInstalledApps')
+}
+
+function deleteProgramRow(index) {
+  programCounter.value.splice(index, 1)
+  // Vue.delete(programCounter.value, index)
+  console.log(`Got event to delete row for index : ${index}`)
+}
+
+function addProgram() {
+  programCounter.value.push('')
+}
+function removeProgram(id) {
+  programCounter.value.splice(id, 1)
 }
 
 onMounted(() => {
-  getTrendingMovies('day')
+  // getTrendingMovies('day')
   getSerialPorts()
-  insatlledApps.value = getInstalledApps()
+  getInstalledApps()
 })
 </script>
 
 <template>
-  <!-- <img alt="logo" class="logo" src="./assets/electron.svg" />
-  <div class="creator">Powered by electron-vite</div>
+  <img alt="logo" class="logo" src="./assets/electron.svg" />
+  <!-- <div class="creator">Powered by electron-vite</div>
 
 
   <Versions /> -->
 
-  <COMselect :serialports="serialPorts" :installedApps="insatlledApps" />
-  <div class="row">
+  <COMselect
+    v-model="serialPortSelection"
+    :serialports="serialPorts"
+    :installed-apps="installedApps"
+  />
+  <div class="row mt-2">
     <button type="button" class="col-auto" @click="ipcHandle">Send Ping</button>
     <button type="button" class="col-auto" @click="getSerialPorts">Load config</button>
   </div>
   <div>{{ configuration }}</div>
+  <div>
+    <div v-for="(count, i) in programCounter" :key="i">
+      <ProgramSelector
+        v-model="programCounter[i]"
+        :installed-apps="installedApps"
+        @delete-row="deleteProgramRow(i)"
+      />
+    </div>
+  </div>
+  <div class="row mt-2">
+    <button class="col-auto" @click="addProgram">Add</button>
+    <button class="col-auto" click="removeProgram">Remove</button>
+  </div>
+
+  <div class="row">
+    <div class="col-auto"> COM Port</div>
+    <div class="col-auto"> {{ serialPortSelection }}</div>
+  </div>
+  <div>{{ programCounter }}</div>
+
   <!-- 
   <div class="container">
     <div class="text-center">

src/renderer/src/components/COMselect.vue

@@ -1,49 +1,29 @@
 <template>
-  <p>Select COM port for device: {{ com_port }}</p>
-
   <div class="row">
     <div class="col-auto">
       <label class="form-label">Select COM Port for your deej device</label>
     </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" class="form-option">
+        <option
+          v-for="(serialport, i) in props.serialports"
+          :key="i"
+          :value="serialport.path"
+          class="form-option"
+        >
           {{ serialport.friendlyName }}
         </option>
       </select>
     </div>
   </div>
-  <div id="programs"></div>
-  <div>
-    <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)
-}
+console.log (`Inside COMSelect the length of installedApps is ${props.installedApps.length}`)
+const com_port = defineModel()
 
-function generateAppSelector() {
-  let optionsString = ''
-
-  for (let app in props.installedApps) {
-    optionsString += `<option value=${props.installedApps[app].name}> ${props.installedApps[app].name} </option>`
-  }
-  return `<div class="row mt-3">
-    <div class="col-auto">Program</div>
-    <div class="col-auto">
-    <select class="form-select"> ${optionsString} </select>
-    </div>
-    </div>`
-}
 </script>

src/renderer/src/components/ProgramSelector.vue

@@ -0,0 +1,31 @@
+<script setup>
+import { onUnmounted, ref } from 'vue'
+
+defineEmits(['delete-row'])
+
+const props = defineProps({ installedApps: Object })
+const model = defineModel()
+console.log(props.installedApps)
+console.log(model)
+
+</script>
+
+<template>
+  <div class="row mt-2 d-flex align-items-center">
+    <div class="col-auto">Program</div>
+    <div class="col-auto">
+      <select v-model="model" class="form-select">
+        <option
+          v-for="(app, i) in props.installedApps"
+          :key="i"
+          class="col-auto mt-3"
+          :value="app.appid"
+        >
+          {{ app.name }}
+        </option>
+      </select>
+    </div>
+    <div class="col-auto"><i class="fas fa-trash-alt" @click="$emit('delete-row')"></i></div>
+  </div>
+  <div>{{ selected }}</div>
+</template>