mirror of
https://github.com/DJ2LS/FreeDATA
synced 2024-05-14 08:04:33 +00:00
Handle audio and serial devices for dynamic options
This commit is contained in:
parent
4f7972b546
commit
c7d94b3b63
6 changed files with 47 additions and 76 deletions
|
@ -10,9 +10,6 @@ setActivePinia(pinia);
|
|||
|
||||
import { settingsStore as settings, onChange } from "../store/settingsStore.js";
|
||||
|
||||
import { useAudioStore } from "../store/audioStore.js";
|
||||
const audio = useAudioStore(pinia);
|
||||
|
||||
import { useStateStore } from "../store/stateStore.js";
|
||||
const state = useStateStore(pinia);
|
||||
|
||||
|
@ -209,7 +206,6 @@ function testHamlib() {
|
|||
aria-label=".form-select-sm"
|
||||
@change="onChange"
|
||||
v-model="settings.remote.AUDIO.input_device"
|
||||
v-html="audio.getInputDevices()"
|
||||
></select>
|
||||
</div>
|
||||
|
||||
|
@ -222,7 +218,6 @@ function testHamlib() {
|
|||
aria-label=".form-select-sm"
|
||||
@change="setConfig"
|
||||
v-model="settings.output_device"
|
||||
v-html="audio.getOutputDevices()"
|
||||
></select>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -8,9 +8,6 @@ const state = useStateStore(pinia);
|
|||
|
||||
import { settingsStore as settings} from "../store/settingsStore.js";
|
||||
|
||||
import { useAudioStore } from "../store/audioStore.js";
|
||||
const audioStore = useAudioStore(pinia);
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import { settingsStore as settings, onChange } from "../store/settingsStore.js";
|
||||
import { serialDeviceOptions } from "../js/deviceFormHelper";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
@ -315,8 +316,12 @@ import { settingsStore as settings, onChange } from "../store/settingsStore.js";
|
|||
id="hamlib_deviceport"
|
||||
style="width: 7rem"
|
||||
@change="onChange"
|
||||
v-model="settings.remote.RIGCTLD.port"
|
||||
></select>
|
||||
v-model="settings.remote.RADIO.serial_port"
|
||||
>
|
||||
<option v-for="option in serialDeviceOptions()" v-bind:value="option.port">
|
||||
{{ option.port }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="input-group input-group-sm mb-1">
|
||||
|
|
|
@ -1,13 +1,12 @@
|
|||
<script setup lang="ts">
|
||||
import { settingsStore as settings, onChange } from "../store/settingsStore.js";
|
||||
import pinia from "../store/index";
|
||||
import { useAudioStore } from "../store/audioStore.js";
|
||||
const audio = useAudioStore(pinia);
|
||||
|
||||
import { useStateStore } from "../store/stateStore.js";
|
||||
const state = useStateStore(pinia);
|
||||
|
||||
import { startModem, stopModem } from "../js/api";
|
||||
import { startModem, stopModem } from "../js/api.js";
|
||||
import { audioInputOptions, audioOutputOptions } from "../js/deviceFormHelper";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
@ -75,8 +74,11 @@ import { startModem, stopModem } from "../js/api";
|
|||
aria-label=".form-select-sm"
|
||||
@change="onChange"
|
||||
v-model="settings.remote.AUDIO.input_device"
|
||||
v-html="audio.getInputDevices()"
|
||||
></select>
|
||||
>
|
||||
<option v-for="option in audioInputOptions()" v-bind:value="option.id">
|
||||
{{ option.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Audio Output Device -->
|
||||
|
@ -88,8 +90,11 @@ import { startModem, stopModem } from "../js/api";
|
|||
aria-label=".form-select-sm"
|
||||
@change="onChange"
|
||||
v-model="settings.remote.AUDIO.output_device"
|
||||
v-html="audio.getOutputDevices()"
|
||||
></select>
|
||||
>
|
||||
<option v-for="option in audioOutputOptions()" v-bind:value="option.id">
|
||||
{{ option.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="input-group input-group-sm mb-1">
|
||||
|
|
28
gui/src/js/deviceFormHelper.ts
Normal file
28
gui/src/js/deviceFormHelper.ts
Normal file
|
@ -0,0 +1,28 @@
|
|||
import { getAudioDevices, getSerialDevices } from "./api";
|
||||
|
||||
let audioDevices = await getAudioDevices();
|
||||
let serialDevices = await getSerialDevices();
|
||||
|
||||
export function loadAudioDevices() {
|
||||
getAudioDevices().then((devices) => {
|
||||
audioDevices = devices;
|
||||
});
|
||||
}
|
||||
|
||||
export function loadSerialDevices() {
|
||||
getSerialDevices().then((devices) => {
|
||||
serialDevices = devices;
|
||||
});
|
||||
}
|
||||
|
||||
export function audioInputOptions() {
|
||||
return audioDevices.in;
|
||||
}
|
||||
|
||||
export function audioOutputOptions() {
|
||||
return audioDevices.out;
|
||||
}
|
||||
|
||||
export function serialDeviceOptions() {
|
||||
return serialDevices;
|
||||
}
|
|
@ -1,59 +0,0 @@
|
|||
import { defineStore } from "pinia";
|
||||
import { ref } from "vue";
|
||||
|
||||
import { setActivePinia } from "pinia";
|
||||
import pinia from "../store/index";
|
||||
setActivePinia(pinia);
|
||||
|
||||
import { settingsStore as settings } from "../store/settingsStore.js";
|
||||
|
||||
export const useAudioStore = defineStore("audioStore", () => {
|
||||
var inputDevices = ref([{ id: 0, name: "no input devices" }]);
|
||||
var outputDevices = ref([{ id: 0, name: "no output devices" }]);
|
||||
|
||||
var startupInputDevice = ref(0);
|
||||
var startupOutputDevice = ref(0);
|
||||
|
||||
function getInputDevices() {
|
||||
var html = "";
|
||||
if (inputDevices.value.length > 0) {
|
||||
for (var key in inputDevices.value) {
|
||||
let selected = "";
|
||||
if (inputDevices.value[key]["id"] == settings.input_device) {
|
||||
selected = "selected";
|
||||
} else {
|
||||
selected = "";
|
||||
}
|
||||
|
||||
html += `<option value=${inputDevices.value[key]["id"]} ${selected}>${inputDevices.value[key]["name"]} | ${inputDevices.value[key]["api"]}</option>`;
|
||||
}
|
||||
return html;
|
||||
}
|
||||
}
|
||||
|
||||
function getOutputDevices() {
|
||||
var html = "";
|
||||
|
||||
if (outputDevices.value.length > 0) {
|
||||
for (var key in outputDevices.value) {
|
||||
let selected = "";
|
||||
if (outputDevices.value[key]["id"] == settings.output_device) {
|
||||
selected = "selected";
|
||||
} else {
|
||||
selected = "";
|
||||
}
|
||||
html += `<option value=${outputDevices.value[key]["id"]} ${selected}>${outputDevices.value[key]["name"]} | ${outputDevices.value[key]["api"]}</option>`;
|
||||
}
|
||||
return html;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
inputDevices,
|
||||
outputDevices,
|
||||
getInputDevices,
|
||||
getOutputDevices,
|
||||
startupInputDevice,
|
||||
startupOutputDevice,
|
||||
};
|
||||
});
|
Loading…
Reference in a new issue