Improve station settings handling

gui/src/components/settings_station.vue

@@ -1,12 +1,6 @@
 <script setup lang="ts">
-import { setConfig } from "../js/api";
+import { settingsStore as settings } from "../store/settingsStore.js";
-
+import { handleFieldValueChange } from "../js/settingsHandler.js";
-import { setActivePinia } from "pinia";
-import pinia from "../store/index";
-setActivePinia(pinia);
-
-import { settingsStore as settings} from "../store/settingsStore.js";
-
 </script>
 <template>
   <!-- station callsign -->
@@ -21,8 +15,10 @@ import { settingsStore as settings} from "../store/settingsStore.js";
       id="myCall"
       aria-label="Station Callsign"
       aria-describedby="basic-addon1"
-      @change="setConfig"
+      @change="handleFieldValueChange"
-      v-model="settings.mycall"
+      data-section="STATION"
+      data-setting="mycall"
+      v-model="settings.remote.STATION.mycall"
     />
   </div>
 
@@ -32,8 +28,10 @@ import { settingsStore as settings} from "../store/settingsStore.js";
     <select
       class="form-select form-select-sm w-50"
       id="myCallSSID"
-      @change="setConfig"
+      @change="handleFieldValueChange"
-      v-model.number="settings.myssid"
+      data-section="STATION"
+      data-setting="myssid"
+      v-model.number="settings.remote.STATION.myssid"
     >
       <option selected value="0">0</option>
       <option value="1">1</option>
@@ -65,8 +63,10 @@ import { settingsStore as settings} from "../store/settingsStore.js";
       maxlength="6"
       aria-label="Station Grid Locator"
       aria-describedby="basic-addon1"
-      @change="setConfig"
+      @change="handleFieldValueChange"
-      v-model="settings.mygrid"
+      data-section="STATION"
+      data-setting="mygrid"
+      v-model="settings.remote.STATION.mygrid"
     />
   </div>
 </template>

gui/src/js/settingsHandler.ts

@@ -6,7 +6,7 @@ import { setActivePinia } from "pinia";
 import pinia from "../store/index";
 setActivePinia(pinia);
 
-import { settingsStore as settings } from "../store/settingsStore.js";
+import { settingsStore as settings, onChange } from "../store/settingsStore.js";
 
 import { useAudioStore } from "../store/audioStore.js";
 const audioStore = useAudioStore(pinia);
@@ -14,8 +14,6 @@ const audioStore = useAudioStore(pinia);
 import { useStateStore } from "../store/stateStore";
 const stateStore = useStateStore(pinia);
 
-import { postToServer, getFromServer } from "./rest.js";
-
 // ---------------------------------
 
 console.log(process.env);
@@ -145,54 +143,9 @@ export function processModemConfig(data) {
   }
 }
 
-export function getModemConfigAsJSON() {
+export function handleFieldValueChange(event) {
-  // create json output from settings
+  const element = event.target;
-  // TODO Can we make this more dynamic? Maybe using a settings object?
+  const newValue = element.value;
-  // For now its a hardcoded structure until we found a better way
+  settings.remote[element.dataset.section][element.dataset.setting] = newValue;
-
+  onChange();
-  const configData = {
-    AUDIO: {
-      enable_auto_tune: settings.auto_tune,
-      input_device: settings.input_device,
-      rx_audio_level: settings.rx_audio_level,
-      output_device: settings.output_device,
-      tx_audio_level: settings.tx_audio_level,
-      //enable_auto_tune: settings.tx_audio_level,
-    },
-    MESH: {
-      enable_protocol: settings.enable_mesh_features,
-    },
-    MODEM: {
-      enable_fft: settings.enable_fft,
-      tuning_range_fmax: settings.tuning_range_fmax,
-      tuning_range_fmin: settings.tuning_range_fmin,
-      enable_fsk: settings.enable_fsk,
-      enable_low_bandwidth_mode: settings.enable_low_bandwidth_mode,
-      respond_to_cq: settings.respond_to_cq,
-      rx_buffer_size: settings.rx_buffer_size,
-      enable_scatter: settings.enable_scatter,
-      tx_delay: settings.tx_delay,
-    },
-    NETWORK: {
-      modemport: settings.modem_port,
-    },
-    RADIO: {
-      radiocontrol: settings.radiocontrol,
-      rigctld_ip: settings.hamlib_rigctld_ip,
-      rigctld_port: settings.hamlib_rigctld_port,
-    },
-    STATION: {
-      mycall: settings.mycall + "-" + settings.myssid,
-      mygrid: settings.mygrid,
-      ssid_list: [],
-      enable_explorer: settings.enable_explorer,
-      enable_stats: settings.explorer_stats,
-    },
-    TCI: {
-      tci_ip: settings.tci_ip,
-      tci_port: settings.tci_port,
-    },
-  };
-
-  return configData;
 }

gui/src/store/settingsStore.js

@@ -1,21 +1,69 @@
 import { reactive } from "vue";
 
-import { getConfig } from "../js/api";
+import { getConfig, setConfig } from "../js/api";
 
 export const settingsStore = reactive({
   local: {
     host: "127.0.0.1",
     port: "5000",
   },
-  remote: {},
+  remote: {
+    AUDIO: {
+      enable_auto_tune: false,
+      input_device: "",
+      output_device: "",
+      rx_audio_level: 0,
+      tx_audio_level: 0,
+    },
+    MESH: {
+      enable_protocol: false,
+    },
+    MODEM: {
+      enable_fft: false,
+      enable_fsk: false,
+      enable_low_bandwidth_mode: false,
+      enable_scatter: false,
+      respond_to_cq: false,
+      rx_buffer_size: 0,
+      tuning_range_fmax: 0,
+      tuning_range_fmin: 0,
+      tx_delay: 0,
+    },
+    NETWORK: {
+      modemport: 0,
+    },
+    RADIO: {
+      radiocontrol: "disabled",
+      radioport: "None",
+      rigctld_ip: "127.0.0.1",
+      rigctld_port: 0,
+    },
+    STATION: {
+      enable_explorer: false,
+      enable_stats: false,
+      mycall: "",
+      mygrid: "",
+      ssid_list: [],
+    },
+    TCI: {
+      tci_ip: "127.0.0.1",
+      tci_port: 0,
+    },
+  },
 });
 
+export function onChange() {
+  setConfig(settingsStore.remote).then((conf) => {
+    settingsStore.remote = conf;
+  });
+}
+
 export function getRemote() {
   getConfig().then((conf) => {
     settingsStore.remote = conf;
   });
 }
 
-if (settingsStore.remote["STATION"] === undefined) {
+if (settingsStore.remote.STATION.mycall === "") {
   getRemote();
 }