nabeel/vue_electron_project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added app selectors

Browse Source
This commit is contained in:
nabeel
2024-06-01 15:13:52 +10:00
parent 60c63c5f67
commit f5354cb432
1 changed files with 25 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/renderer/src/components/COMselect.vue
View File

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