wip:1

src/main/index.js

@@ -3,6 +3,7 @@ import { join } from 'path'
 import { electronApp, optimizer, is } from '@electron-toolkit/utils'
 import icon from '../../resources/icon.png?asset'
 import fs from 'node:fs/promises'
+import {getInstalledApps} from 'get-installed-apps'
 import { SerialPort } from 'serialport'
 import * as logTimestamp from 'log-timestamp'
 
@@ -21,6 +22,10 @@ async function getSerialPorts() {
   return await SerialPort.list()
 }
 
+async function getApps() {
+  return await getInstalledApps()
+}
+
 function createWindow() {
   // Create the browser window.
   const mainWindow = new BrowserWindow({
@@ -75,6 +80,7 @@ app.whenReady().then(() => {
   ipcMain.on('ping', () => console.log('pong'))
   ipcMain.handle('loadConfigurationYML', loadConfigurationYAML)
   ipcMain.handle('getSerialPorts', getSerialPorts)
+  ipcMain.handle('getInstalledApps', getApps)
 
   developmentConsole()
   createWindow()

src/renderer/src/App.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import Versions from './components/Versions.vue'
-import MovieCard from './components/MovieCard.vue'
 import COMselect from './components/COMselect.vue'
 import { onMounted } from 'vue'
 import { ref } from 'vue'
@@ -10,12 +8,13 @@ const movies = ref([])
 const apiKey = 'a0eb411ca9c81896004dce1d27a7245b'
 const configuration = ref('Loading....')
 const serialPorts = ref('Loading Serial ports.... ')
+const insatlledApps = ref({});
 
 const ipcHandle = () => window.electron.ipcRenderer.send('ping')
-const getConfigFileContents = async () => {
-  const returnValue = await window.electron.ipcRenderer.invoke('loadConfigurationYML')
-  configuration.value = returnValue
-}
+// const getConfigFileContents = async () => {
+//   const returnValue = await window.electron.ipcRenderer.invoke('loadConfigurationYML')
+//   configuration.value = returnValue
+// }
 
 const getSerialPorts = async () => {
   serialPorts.value = await window.electron.ipcRenderer.invoke('getSerialPorts')
@@ -30,9 +29,14 @@ const getTrendingMovies = (category) => {
     })
 }
 
+async function getInstalledApps() {
+  insatlledApps.value = await window.electron.ipcRenderer.invoke('getInstalledApps')
+}
+
 onMounted(() => {
   getTrendingMovies('day')
   getSerialPorts()
+  insatlledApps.value = getInstalledApps()
 })
 </script>
 
@@ -43,9 +47,12 @@ onMounted(() => {
 
   <Versions /> -->
 
-  <COMselect :serialports="serialPorts" />
-  <button type="button" @click="ipcHandle">Send Ping</button>
-  <button type="button" @click="getSerialPorts">Load config</button>
+  <COMselect :serialports="serialPorts" :installedApps="insatlledApps" />
+  <div class="row">
+    <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 class="container">

src/renderer/src/components/COMselect.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref } from 'vue'
 
-const props = defineProps(['serialports'])
+const props = defineProps(['serialports', 'installedApps'])
 const com_port = ref('')
 const iterator = ref(1)
 function optioniterator() { return iterator.value++};
@@ -10,10 +10,21 @@ 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'> <option> ${optioniterator()} </option> </select></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>
@@ -34,16 +45,4 @@ function addNewProgram() {
   <div>
     <button class="form-button" @click="addNewProgram">Add program</button>
   </div>
-  <!-- <table>
-    <tr>
-      <td>Select COM Port for device</td>
-      <td>
-        <select v-model="com_port">
-          <option v-for="(serialport, i) in props.serialports" :key="i" :value="serialport.path">
-            {{ serialport.friendlyName }}
-          </option>
-        </select>
-      </td>
-    </tr>
-  </table> --->
 </template>