From eeb72faf83860f939dd163f1968f847bc794c3eb Mon Sep 17 00:00:00 2001
From: DJ2LS <dj2ls@proton.me>
Date: Mon, 4 Mar 2024 11:36:44 +0100
Subject: [PATCH] introduced store for serial and audio devices for fixing
 audio related problems

---
 freedata-nsis-config.nsi                  |  16 ++-
 gui/src/components/main.vue               |  12 +--
 gui/src/components/main_startup_check.vue | 117 +++++++---------------
 gui/src/components/settings_hamlib.vue    |  62 ++++++------
 gui/src/components/settings_modem.vue     |  39 ++++----
 gui/src/components/settings_tci.vue       |   1 -
 gui/src/js/deviceFormHelper.ts            |  53 ----------
 gui/src/js/eventHandler.js                |  41 ++++----
 gui/src/main.ts                           |   3 -
 gui/src/store/audioStore.js               |  37 +++++++
 gui/src/store/serialStore.js              |  35 +++++++
 11 files changed, 190 insertions(+), 226 deletions(-)
 delete mode 100644 gui/src/js/deviceFormHelper.ts
 create mode 100644 gui/src/store/audioStore.js
 create mode 100644 gui/src/store/serialStore.js

diff --git a/freedata-nsis-config.nsi b/freedata-nsis-config.nsi
index 504dfa10..ced5ad91 100644
--- a/freedata-nsis-config.nsi
+++ b/freedata-nsis-config.nsi
@@ -42,8 +42,6 @@ InstallDirRegKey HKCU "Software\FreeDATA" "Install_Dir"
 ; Language (you can choose and configure the language(s) you want)
 !insertmacro MUI_LANGUAGE "English"
 
-!define StartMenuFolder "FreeDATA"
-
 
 ; Installer Sections
 Section "FreeData Server" SEC01
@@ -67,13 +65,13 @@ doneBackup:
   WriteUninstaller "$INSTDIR\Uninstall.exe"
 
   ; Create a Start Menu directory
-  CreateDirectory "$COMMON_STARTMENU\${StartMenuFolder}"
+  CreateDirectory "$SMPROGRAMS\FreeDATA"
 
   ; Create shortcut in the Start Menu directory
-  CreateShortCut "$COMMON_STARTMENU\${StartMenuFolder}\FreeDATA Server.lnk" "$INSTDIR\freedata-server\freedata-server.exe"
+  CreateShortCut "$SMPROGRAMS\FreeDATA\FreeDATA Server.lnk" "$INSTDIR\freedata-server\freedata-server.exe"
 
   ; Create an Uninstall shortcut
-  CreateShortCut "$COMMON_STARTMENU\${StartMenuFolder}\Uninstall FreeDATA.lnk" "$INSTDIR\Uninstall.exe"
+  CreateShortCut "$SMPROGRAMS\FreeDATA\Uninstall FreeDATA.lnk" "$INSTDIR\Uninstall.exe"
 
 
   ; Backup "config.ini" before overwriting files
@@ -101,10 +99,10 @@ Section "FreeData x64 GUI" SEC02
   CreateShortCut "$DESKTOP\FreeDATA GUI.lnk" "$INSTDIR\freedata-gui\freedata.exe"
 
   ; Create a start menu shortcut
-  CreateShortCut "$COMMON_STARTMENU\${StartMenuFolder}\FreeDATA GUI.lnk" "$INSTDIR\freedata-gui\freedata.exe"
+  CreateShortCut "$SMPROGRAMS\FreeDATA\FreeDATA GUI.lnk" "$INSTDIR\freedata-gui\freedata.exe"
 
   ; Create an Uninstall shortcut
-  CreateShortCut "$COMMON_STARTMENU\${StartMenuFolder}\Uninstall FreeDATA.lnk" "$INSTDIR\Uninstall.exe"
+  CreateShortCut "$SMPROGRAMS\FreeDATA\Uninstall FreeDATA.lnk" "$INSTDIR\Uninstall.exe"
 
 SectionEnd
 
@@ -123,8 +121,8 @@ Section "Uninstall"
   Delete "$DESKTOP\FreeDATA GUI.lnk"
 
 ; Remove Start Menu shortcuts
-  Delete "$COMMON_STARTMENU\${StartMenuFolder}\*.*"
-  RMDir "$COMMON_STARTMENU\${StartMenuFolder}"
+  Delete "$SMPROGRAMS\FreeDATA\*.*"
+  RMDir "$SMPROGRAMS\FreeDATA"
 
   ; Attempt to delete the uninstaller itself
   Delete $EXEPATH
diff --git a/gui/src/components/main.vue b/gui/src/components/main.vue
index 156eeb58..7de1d9e9 100644
--- a/gui/src/components/main.vue
+++ b/gui/src/components/main.vue
@@ -22,15 +22,9 @@ import Dynamic_components from "./dynamic_components.vue";
 
 import { getFreedataMessages } from "../js/api";
 import { getRemote } from "../store/settingsStore.js";
-import { loadAudioDevices, loadSerialDevices } from "../js/deviceFormHelper";
+import { loadAllData } from "../js/eventHandler";
 
 
-function getAllSettings(){
-    getRemote()
-    loadAudioDevices()
-    loadSerialDevices()
-}
-
 </script>
 
 <template>
@@ -57,7 +51,7 @@ function getAllSettings(){
             id="main-list-tab"
             role="tablist"
             style="margin-top: 100px"
-            @click="getAllSettings"
+            @click="loadAllData"
           >
             <main_modem_healthcheck />
 
@@ -122,7 +116,7 @@ function getAllSettings(){
               role="tab"
               aria-controls="list-settings"
               title="Settings"
-              @click="getAllSettings"
+              @click="loadAllData"
               ><i class="bi bi-gear-wide-connected h3"></i
             ></a>
           </div>
diff --git a/gui/src/components/main_startup_check.vue b/gui/src/components/main_startup_check.vue
index 168ac6a2..00ce41ff 100644
--- a/gui/src/components/main_startup_check.vue
+++ b/gui/src/components/main_startup_check.vue
@@ -9,11 +9,16 @@ setActivePinia(pinia);
 
 import { settingsStore as settings, onChange } from "../store/settingsStore.js";
 import { sendModemCQ } from "../js/api.js";
-import { loadAudioDevices } from "../js/deviceFormHelper";
 
 import { useStateStore } from "../store/stateStore.js";
 const state = useStateStore(pinia);
 
+import { useAudioStore } from "../store/audioStore";
+const audioStore = useAudioStore();
+import { useSerialStore } from "../store/serialStore";
+const serialStore = useSerialStore();
+
+
 import {
   getVersion,
   setConfig,
@@ -21,8 +26,8 @@ import {
   stopModem,
   getModemState,
 } from "../js/api";
-import { audioInputOptions, audioOutputOptions } from "../js/deviceFormHelper";
-import { serialDeviceOptions } from "../js/deviceFormHelper";
+
+
 
 const version = import.meta.env.PACKAGE_VERSION;
 
@@ -34,6 +39,8 @@ onMounted(() => {
   new Modal("#modemCheck", {}).show();
 });
 
+
+
 function getModemStateLocal() {
   // Returns active/inactive if modem is running for modem status label
   if (state.is_modem_running == true) return "Active";
@@ -205,74 +212,26 @@ function testHamlib() {
 
 
                   <!-- Audio Input Device -->
-                  <div class="input-group input-group-sm mb-1">
-                    <label class="input-group-text w-50"
-                      >Audio Input device</label
-                    >
-
-                    <button
-                        type="button"
-                        id="stopModem"
-                        class="btn btn-sm btn-secondary"
-                        data-bs-toggle="tooltip"
-                        data-bs-trigger="hover"
-                        data-bs-html="false"
-                        title="Refresh audio devices"
-                        @click="loadAudioDevices"
-
-                      >
-                        <i class="bi bi-arrow-clockwise"></i>
-                      </button>
-
-                    <select
-                      class="form-select form-select-sm"
-                      aria-label=".form-select-sm"
-                      @change="onChange"
-                      v-model="settings.remote.AUDIO.input_device"
-                    >
-                      <option
-                        v-for="option in audioInputOptions()"
-                        v-bind:value="option.id"
-                      >
-                        {{ option.name }} [{{ option.api }}]
-                      </option>
-                    </select>
-                  </div>
+  <div class="input-group input-group-sm mb-1">
+    <label class="input-group-text w-50">Audio Input device</label>
+    <select class="form-select form-select-sm" aria-label=".form-select-sm" @change="onChange" v-model="settings.remote.AUDIO.input_device">
+      <option v-for="device in audioStore.audioInputs" :value="device.id">
+        {{ device.name }} [{{ device.api }}]
+      </option>
+    </select>
+  </div>
 
                   <!-- Audio Output Device -->
-                  <div class="input-group input-group-sm mb-1">
-                    <label class="input-group-text w-50"
-                      >Audio Output device</label
-                    >
+  <div class="input-group input-group-sm mb-1">
+    <label class="input-group-text w-50">Audio Output device</label>
+    <select class="form-select form-select-sm" aria-label=".form-select-sm" @change="onChange" v-model="settings.remote.AUDIO.output_device">
+      <option v-for="device in audioStore.audioOutputs" :value="device.id">
+        {{ device.name }} [{{ device.api }}]
+      </option>
+    </select>
+  </div>
 
-                    <button
-                        type="button"
-                        id="stopModem"
-                        class="btn btn-sm btn-secondary"
-                        data-bs-toggle="tooltip"
-                        data-bs-trigger="hover"
-                        data-bs-html="false"
-                        title="Refresh audio devices"
-                        @click="loadAudioDevices"
 
-                      >
-                        <i class="bi bi-arrow-clockwise"></i>
-                      </button>
-
-                    <select
-                      class="form-select form-select-sm"
-                      aria-label=".form-select-sm"
-                      @change="onChange"
-                      v-model="settings.remote.AUDIO.output_device"
-                    >
-                      <option
-                        v-for="option in audioOutputOptions()"
-                        v-bind:value="option.id"
-                      >
-                        {{ option.name }} [{{ option.api }}]
-                      </option>
-                    </select>
-                  </div>
                 </div>
               </div>
             </div>
@@ -340,21 +299,15 @@ function testHamlib() {
                         >Radio port</span
                       >
 
-                      <select
-                        class="form-select form-select-sm"
-                        aria-label=".form-select-sm"
-                        id="hamlib_deviceport"
-                        style="width: 7rem"
-                        @change="onChange"
-                        v-model="settings.remote.RADIO.serial_port"
-                      >
-                        <option
-                          v-for="option in serialDeviceOptions()"
-                          v-bind:value="option.port"
-                        >
-                          {{ option.description }}
-                        </option>
-                      </select>
+
+
+                      <select @change="onChange" v-model="settings.remote.RADIO.serial_port" class="form-select form-select-sm">
+    <option v-for="device in serialStore.serialDevices" :value="device.port" :key="device.port">
+      {{ device.description }}
+    </option>
+  </select>
+
+
                     </div>
 
                     <div class="input-group input-group-sm mb-1">
diff --git a/gui/src/components/settings_hamlib.vue b/gui/src/components/settings_hamlib.vue
index e8e80325..3619e0dd 100644
--- a/gui/src/components/settings_hamlib.vue
+++ b/gui/src/components/settings_hamlib.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { settingsStore as settings, onChange } from "../store/settingsStore.js";
-import { serialDeviceOptions } from "../js/deviceFormHelper";
+import { useSerialStore } from "../store/serialStore";
+const serialStore = useSerialStore();
+
 </script>
 
 <template>
@@ -333,21 +335,23 @@ import { serialDeviceOptions } from "../js/deviceFormHelper";
     <div class="input-group input-group-sm mb-1">
       <span class="input-group-text" style="width: 180px">Radio port</span>
 
-      <select
-        class="form-select form-select-sm"
-        aria-label=".form-select-sm"
-        id="hamlib_deviceport"
-        style="width: 7rem"
-        @change="onChange"
-        v-model="settings.remote.RADIO.serial_port"
-      >
-        <option
-          v-for="option in serialDeviceOptions()"
-          v-bind:value="option.port"
-        >
-          {{ option.description }}
-        </option>
-      </select>
+
+
+
+
+
+  <select @change="onChange" v-model="settings.remote.RADIO.serial_port" class="form-select form-select-sm">
+    <option v-for="device in serialStore.serialDevices" :value="device.port" :key="device.port">
+      {{ device.description }}
+    </option>
+  </select>
+
+
+
+
+
+
+
     </div>
 
     <div class="input-group input-group-sm mb-1">
@@ -422,20 +426,18 @@ import { serialDeviceOptions } from "../js/deviceFormHelper";
 
     <div class="input-group input-group-sm mb-1">
       <span class="input-group-text" style="width: 180px">PTT device port</span>
-      <select
-        class="form-select form-select-sm"
-        aria-label=".form-select-sm"
-        id="hamlib_ptt_port"
-        @change="onChange"
-        v-model="settings.remote.RADIO.ptt_port"
-      >
-        <option
-          v-for="option in serialDeviceOptions()"
-          v-bind:value="option.port"
-        >
-          {{ option.description }}
-        </option>
-      </select>
+
+
+
+
+  <select @change="onChange" v-model="settings.remote.RADIO.ptt_port" class="form-select form-select-sm">
+    <option v-for="device in serialStore.serialDevices" :value="device.port" :key="device.port">
+      {{ device.description }}
+    </option>
+  </select>
+
+
+
     </div>
     <div class="input-group input-group-sm mb-1">
       <span class="input-group-text" style="width: 180px">PTT type</span>
diff --git a/gui/src/components/settings_modem.vue b/gui/src/components/settings_modem.vue
index ba4d4beb..7d79b3df 100644
--- a/gui/src/components/settings_modem.vue
+++ b/gui/src/components/settings_modem.vue
@@ -6,7 +6,12 @@ import { useStateStore } from "../store/stateStore.js";
 const state = useStateStore(pinia);
 
 import { startModem, stopModem } from "../js/api.js";
-import { audioInputOptions, audioOutputOptions } from "../js/deviceFormHelper";
+
+import { useAudioStore } from "../store/audioStore";
+const audioStore = useAudioStore();
+
+
+
 </script>
 
 <template>
@@ -65,35 +70,31 @@ import { audioInputOptions, audioOutputOptions } from "../js/deviceFormHelper";
     />
   </div>
 
-  <!-- Audio Input Device -->
+
+
+
+                    <!-- Audio Input Device -->
   <div class="input-group input-group-sm mb-1">
     <label class="input-group-text w-50">Audio Input device</label>
-    <select
-      class="form-select form-select-sm"
-      aria-label=".form-select-sm"
-      @change="onChange"
-      v-model="settings.remote.AUDIO.input_device"
-    >
-      <option v-for="option in audioInputOptions()" v-bind:value="option.id">
-        {{ option.name }} [{{ option.api }}]
+    <select class="form-select form-select-sm" aria-label=".form-select-sm" @change="onChange" v-model="settings.remote.AUDIO.input_device">
+      <option v-for="device in audioStore.audioInputs" :value="device.id">
+        {{ device.name }} [{{ device.api }}]
       </option>
     </select>
   </div>
 
-  <!-- Audio Output Device -->
+                  <!-- Audio Output Device -->
   <div class="input-group input-group-sm mb-1">
     <label class="input-group-text w-50">Audio Output device</label>
-    <select
-      class="form-select form-select-sm"
-      aria-label=".form-select-sm"
-      @change="onChange"
-      v-model="settings.remote.AUDIO.output_device"
-    >
-      <option v-for="option in audioOutputOptions()" v-bind:value="option.id">
-        {{ option.name }} [{{ option.api }}]
+    <select class="form-select form-select-sm" aria-label=".form-select-sm" @change="onChange" v-model="settings.remote.AUDIO.output_device">
+      <option v-for="device in audioStore.audioOutputs" :value="device.id">
+        {{ device.name }} [{{ device.api }}]
       </option>
     </select>
   </div>
+
+
+
   <!-- Audio rx level-->
   <div class="input-group input-group-sm mb-1">
     <span class="input-group-text w-25">RX Audio Level</span>
diff --git a/gui/src/components/settings_tci.vue b/gui/src/components/settings_tci.vue
index 03ae05ec..3161bbfe 100644
--- a/gui/src/components/settings_tci.vue
+++ b/gui/src/components/settings_tci.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { settingsStore as settings, onChange } from "../store/settingsStore.js";
-import { serialDeviceOptions } from "../js/deviceFormHelper";
 </script>
 
 <template>
diff --git a/gui/src/js/deviceFormHelper.ts b/gui/src/js/deviceFormHelper.ts
deleted file mode 100644
index b4581a7b..00000000
--- a/gui/src/js/deviceFormHelper.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import { getAudioDevices, getSerialDevices } from "./api";
-
-let audioDevices = await getAudioDevices();
-let serialDevices = await getSerialDevices();
-
-//Dummy device data sent if unable to get devices from modem to prevent GUI crash
-const skel = JSON.parse(`
-  [{
-    "api": "MME",
-    "id": "0000",
-    "name": "No devices received from modem",
-    "native_index": 0
-}]`);
-
-export function loadAudioDevices() {
-  getAudioDevices().then((devices) => {
-    audioDevices = devices;
-  });
-}
-
-export function loadSerialDevices() {
-  getSerialDevices().then((devices) => {
-    serialDevices = devices;
-  });
-}
-
-export function audioInputOptions() {
-  if (audioDevices === undefined) {
-    return skel;
-  }
-  return audioDevices.in;
-}
-
-export function audioOutputOptions() {
-  if (audioDevices === undefined) {
-    return skel;
-  }
-
-  return audioDevices.out;
-}
-
-export function serialDeviceOptions() {
-  //Return ignore option if no serialDevices
-  if (serialDevices === undefined)
-    return [{ description: "-- ignore --", port: "ignore" }];
-
-  if (serialDevices.findIndex((device) => device.port == "ignore") == -1) {
-    //Add an ignore option for rig and ptt for transceivers that don't require them
-    serialDevices.push({ description: "-- ignore --", port: "ignore" });
-  }
-
-  return serialDevices;
-}
diff --git a/gui/src/js/eventHandler.js b/gui/src/js/eventHandler.js
index 613776d2..96b91ca7 100644
--- a/gui/src/js/eventHandler.js
+++ b/gui/src/js/eventHandler.js
@@ -11,11 +11,15 @@ import { displayToast } from "./popupHandler";
 import {
   getFreedataMessages,
   getModemState,
+  getAudioDevices,
 } from "./api";
 import { processFreedataMessages } from "./messagesHandler.ts";
 import { processRadioStatus } from "./radioHandler.ts";
-import { loadAudioDevices, loadSerialDevices } from "./deviceFormHelper.ts";
 
+import { useAudioStore } from "../store/audioStore";
+const audioStore = useAudioStore();
+import { useSerialStore } from "../store/serialStore";
+const serialStore = useSerialStore();
 
 // ----------------- init pinia stores -------------
 import { setActivePinia } from "pinia";
@@ -29,6 +33,19 @@ import {
   getRemote,
 } from "../store/settingsStore.js";
 
+
+export function loadAllData(){
+    getModemState();
+    getRemote();
+    getOverallHealth();
+    audioStore.loadAudioDevices();
+    serialStore.loadSerialDevices();
+    getFreedataMessages();
+    processFreedataMessages();
+    processRadioStatus();
+
+}
+
 export function connectionFailed(endpoint, event) {
   stateStore.modem_connection = "disconnected";
 }
@@ -94,12 +111,7 @@ export function eventDispatcher(data) {
   switch (data["modem"]) {
     case "started":
       displayToast("success", "bi-arrow-left-right", "Modem started", 5000);
-      getModemState();
-      getRemote();
-      loadAudioDevices();
-      loadSerialDevices();
-      getFreedataMessages();
-      processRadioStatus();
+      loadAllData();
       return;
 
     case "stopped":
@@ -108,12 +120,7 @@ export function eventDispatcher(data) {
 
     case "restarted":
       displayToast("secondary", "bi-bootstrap-reboot", "Modem restarted", 5000);
-      getModemState();
-      getRemote();
-      loadAudioDevices();
-      loadSerialDevices();
-      getFreedataMessages();
-      processRadioStatus();
+      loadAllData();
       return;
 
     case "failed":
@@ -135,13 +142,7 @@ export function eventDispatcher(data) {
       stateStore.modem_connection = "connected";
 
 
-      getModemState();
-      getOverallHealth();
-      loadAudioDevices();
-      loadSerialDevices();
-      getFreedataMessages();
-      processFreedataMessages();
-      processRadioStatus();
+      loadAllData();
 
       return;
 
diff --git a/gui/src/main.ts b/gui/src/main.ts
index 6cb419bd..a666053f 100644
--- a/gui/src/main.ts
+++ b/gui/src/main.ts
@@ -32,12 +32,9 @@ const tooltipList = [...tooltipTriggerList].map(
 import { getRemote } from "./store/settingsStore";
 import { initConnections } from "./js/event_sock.js";
 import { getModemState } from "./js/api";
-import { loadAudioDevices, loadSerialDevices } from "./js/deviceFormHelper";
 
 
 getRemote().then(() => {
   initConnections();
-  loadAudioDevices();
-  loadSerialDevices();
   getModemState();
 });
diff --git a/gui/src/store/audioStore.js b/gui/src/store/audioStore.js
new file mode 100644
index 00000000..67612e4f
--- /dev/null
+++ b/gui/src/store/audioStore.js
@@ -0,0 +1,37 @@
+import { defineStore } from "pinia";
+import { getAudioDevices } from "../js/api";
+import { ref } from "vue";
+
+
+// Define skel fallback data
+const skel = [{
+  "api": "ERR",
+  "id": "0000",
+  "name": "No devices received from modem",
+  "native_index": 0
+}];
+
+export const useAudioStore = defineStore("audioStore", () => {
+  const audioInputs = ref([]);
+  const audioOutputs = ref([]);
+
+  const loadAudioDevices = async () => {
+    try {
+      const devices = await getAudioDevices();
+      // Check if devices are valid and have entries, otherwise use skel
+      audioInputs.value = devices && devices.in.length > 0 ? devices.in : skel;
+      audioOutputs.value = devices && devices.out.length > 0 ? devices.out : skel;
+    } catch (error) {
+      console.error("Failed to load audio devices:", error);
+      // Use skel as fallback in case of error
+      audioInputs.value = skel;
+      audioOutputs.value = skel;
+    }
+  };
+
+  return {
+    audioInputs,
+    audioOutputs,
+    loadAudioDevices,
+  };
+});
\ No newline at end of file
diff --git a/gui/src/store/serialStore.js b/gui/src/store/serialStore.js
new file mode 100644
index 00000000..eb603927
--- /dev/null
+++ b/gui/src/store/serialStore.js
@@ -0,0 +1,35 @@
+import { defineStore } from "pinia";
+import { getSerialDevices } from "../js/api"; // Make sure this points to the correct file
+import { ref } from "vue";
+
+// Define "skel" fallback data for serial devices
+const skelSerial = [{
+  "description": "No devices received from modem",
+  "port": "ignore" // Using "ignore" as a placeholder value
+}];
+
+export const useSerialStore = defineStore("serialStore", () => {
+  const serialDevices = ref([]);
+
+  const loadSerialDevices = async () => {
+    try {
+      const devices = await getSerialDevices();
+      // Check if devices are valid and have entries, otherwise use skelSerial
+      serialDevices.value = devices && devices.length > 0 ? devices : skelSerial;
+    } catch (error) {
+      console.error("Failed to load serial devices:", error);
+      // Use skelSerial as fallback in case of error
+      serialDevices.value = skelSerial;
+    }
+
+    // Ensure the "-- ignore --" option is always available
+    if (!serialDevices.value.some(device => device.port === "ignore")) {
+      serialDevices.value.push({ description: "-- ignore --", port: "ignore" });
+    }
+  };
+
+  return {
+    serialDevices,
+    loadSerialDevices,
+  };
+});