Handle audio and serial devices for dynamic options

gui/src/components/main_startup_check.vue

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

gui/src/components/main_top_navbar.vue

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

gui/src/components/settings_hamlib.vue

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

gui/src/components/settings_modem.vue

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

gui/src/js/deviceFormHelper.ts

@@ -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;
+}

gui/src/store/audioStore.js

@@ -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,
-  };
-});