From 51360b8458dc014d06b114d67bfef0b86d06a646 Mon Sep 17 00:00:00 2001
From: Pedro <ptsmonteiro@gmail.com>
Date: Sat, 18 Nov 2023 16:53:54 +0100
Subject: [PATCH] WIP GUI settings handling

---
 gui/src/components/chat_navbar.vue            |   2 -
 gui/src/components/chat_new_message.vue       |   5 -
 gui/src/components/infoScreen_updater.vue     |   3 -
 gui/src/components/main.vue                   |   6 +-
 .../components/main_active_audio_level.vue    |   2 -
 gui/src/components/main_active_broadcasts.vue |   4 +-
 .../components/main_active_heard_stations.vue |   3 +-
 .../components/main_active_rig_control.vue    |   2 -
 gui/src/components/main_active_stats.vue      |   7 +-
 gui/src/components/main_modals.vue            |   6 +-
 gui/src/components/main_my_station.vue        |   4 +-
 gui/src/components/main_rig_control.vue       |   4 +-
 gui/src/components/main_startup_check.vue     |   5 +-
 gui/src/components/main_top_navbar.vue        |   4 +-
 gui/src/components/settings_chat.vue          |   3 +-
 gui/src/components/settings_exp.vue           |   3 +-
 gui/src/components/settings_gui.vue           |   4 +-
 gui/src/components/settings_hamlib.vue        |   4 +-
 gui/src/components/settings_modem.vue         |   9 +-
 gui/src/components/settings_rigcontrol.vue    |   3 +-
 gui/src/components/settings_station.vue       |   4 +-
 gui/src/components/settings_web.vue           |   4 +-
 gui/src/js/api.js                             |  73 ++++--
 gui/src/js/chatHandler.ts                     |   4 +-
 gui/src/js/deprecated_daemon.ts               |   3 +-
 gui/src/js/eventHandler.js                    |   3 +-
 gui/src/js/event_sock.js                      |   5 +-
 gui/src/js/rest.js                            |  69 -----
 gui/src/js/settingsHandler.ts                 |   3 +-
 gui/src/js/sock.js                            |   3 +-
 gui/src/js/waterfallHandler.js                |   3 +-
 gui/src/main.ts                               |   6 +-
 gui/src/store/audioStore.js                   |   3 +-
 gui/src/store/old_settingsStore.js            | 234 +++++++++++++++++
 gui/src/store/settingsStore.js                | 247 ++----------------
 35 files changed, 337 insertions(+), 410 deletions(-)
 delete mode 100644 gui/src/js/rest.js
 create mode 100644 gui/src/store/old_settingsStore.js

diff --git a/gui/src/components/chat_navbar.vue b/gui/src/components/chat_navbar.vue
index 2e06d129..dace9520 100644
--- a/gui/src/components/chat_navbar.vue
+++ b/gui/src/components/chat_navbar.vue
@@ -11,8 +11,6 @@ const state = useStateStore(pinia);
 import { useChatStore } from "../store/chatStore.js";
 const chat = useChatStore(pinia);
 
-import { getRxBuffer } from "../js/sock.js";
-
 import { startChatWithNewStation } from "../js/chatHandler";
 
 import {
diff --git a/gui/src/components/chat_new_message.vue b/gui/src/components/chat_new_message.vue
index fe997c63..e56190c9 100644
--- a/gui/src/components/chat_new_message.vue
+++ b/gui/src/components/chat_new_message.vue
@@ -1,15 +1,10 @@
 <script setup lang="ts">
 // @ts-nocheck
 
-
-import {saveSettingsToFile} from '../js/settingsHandler';
-
 import { setActivePinia } from 'pinia';
 import pinia from '../store/index';
 setActivePinia(pinia);
 
-import { useSettingsStore } from '../store/settingsStore.js';
-const settings = useSettingsStore(pinia);
 
 import { useStateStore } from '../store/stateStore.js';
 const state = useStateStore(pinia);
diff --git a/gui/src/components/infoScreen_updater.vue b/gui/src/components/infoScreen_updater.vue
index 109c6cab..5d8bd7fb 100644
--- a/gui/src/components/infoScreen_updater.vue
+++ b/gui/src/components/infoScreen_updater.vue
@@ -3,9 +3,6 @@ import { setActivePinia } from "pinia";
 import pinia from "../store/index";
 setActivePinia(pinia);
 
-import { useSettingsStore } from "../store/settingsStore.js";
-const settings = useSettingsStore(pinia);
-
 import { useStateStore } from "../store/stateStore.js";
 const state = useStateStore(pinia);
 </script>
diff --git a/gui/src/components/main.vue b/gui/src/components/main.vue
index 9c829e4b..4fa632cf 100644
--- a/gui/src/components/main.vue
+++ b/gui/src/components/main.vue
@@ -3,6 +3,8 @@ import { setActivePinia } from "pinia";
 import pinia from "../store/index";
 setActivePinia(pinia);
 
+import { getRemote } from "../store/settingsStore";
+
 import main_modals from "./main_modals.vue";
 import main_top_navbar from "./main_top_navbar.vue";
 import main_rig_control from "./main_rig_control.vue";
@@ -18,9 +20,8 @@ import main_active_audio_level from "./main_active_audio_level.vue";
 import chat from "./chat.vue";
 import infoScreen from "./infoScreen.vue";
 
-import { stopTransmission } from "../js/sock.js";
-import { getModemConfig } from "../js/api";
 import main_modem_healthcheck from "./main_modem_healthcheck.vue";
+getRemote();
 
 function stopAllTransmissions() {
   console.log("stopping transmissions");
@@ -116,7 +117,6 @@ function stopAllTransmissions() {
               role="tab"
               aria-controls="list-settings"
               title="Settings"
-              @click="getModemConfig"
               ><i class="bi bi-gear-wide-connected h3"></i
             ></a>
 
diff --git a/gui/src/components/main_active_audio_level.vue b/gui/src/components/main_active_audio_level.vue
index ff7d3cb0..93b559d6 100644
--- a/gui/src/components/main_active_audio_level.vue
+++ b/gui/src/components/main_active_audio_level.vue
@@ -6,8 +6,6 @@ setActivePinia(pinia);
 import { useStateStore } from "../store/stateStore.js";
 const state = useStateStore(pinia);
 
-import { record_audio } from "../js/sock.js";
-
 function startStopRecordAudio() {
   record_audio();
 }
diff --git a/gui/src/components/main_active_broadcasts.vue b/gui/src/components/main_active_broadcasts.vue
index acd2aeff..046af1c4 100644
--- a/gui/src/components/main_active_broadcasts.vue
+++ b/gui/src/components/main_active_broadcasts.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
-import { saveSettingsToFile } from "../js/settingsHandler";
 
 import { setActivePinia } from "pinia";
 import pinia from "../store/index";
 setActivePinia(pinia);
 
-import { useSettingsStore } from "../store/settingsStore.js";
-const settings = useSettingsStore(pinia);
+import { settingsStore as settings} from "../store/settingsStore.js";
 
 import { useStateStore } from "../store/stateStore.js";
 const state = useStateStore(pinia);
diff --git a/gui/src/components/main_active_heard_stations.vue b/gui/src/components/main_active_heard_stations.vue
index 7f8b6012..5afbe352 100644
--- a/gui/src/components/main_active_heard_stations.vue
+++ b/gui/src/components/main_active_heard_stations.vue
@@ -6,8 +6,7 @@ import { setActivePinia } from "pinia";
 import pinia from "../store/index";
 setActivePinia(pinia);
 
-import { useSettingsStore } from "../store/settingsStore.js";
-const settings = useSettingsStore(pinia);
+import { settingsStore as settings} from "../store/settingsStore.js";
 
 import { useStateStore } from "../store/stateStore.js";
 const state = useStateStore(pinia);
diff --git a/gui/src/components/main_active_rig_control.vue b/gui/src/components/main_active_rig_control.vue
index 61dbd37a..c637d843 100644
--- a/gui/src/components/main_active_rig_control.vue
+++ b/gui/src/components/main_active_rig_control.vue
@@ -6,8 +6,6 @@ setActivePinia(pinia);
 import { useStateStore } from "../store/stateStore.js";
 const state = useStateStore(pinia);
 
-import { set_frequency, set_mode, set_rf_level } from "../js/sock.js";
-
 function updateFrequencyAndApply(frequency) {
   state.new_frequency = frequency;
   set_frequency(state.new_frequency);
diff --git a/gui/src/components/main_active_stats.vue b/gui/src/components/main_active_stats.vue
index 1be18111..a9499d79 100644
--- a/gui/src/components/main_active_stats.vue
+++ b/gui/src/components/main_active_stats.vue
@@ -2,14 +2,11 @@
 // @ts-nocheck
 // reason for no check is, that we have some mixing of typescript and chart js which seems to be not to be fixed that easy
 
-import { saveSettingsToFile } from "../js/settingsHandler";
-
 import { setActivePinia } from "pinia";
 import pinia from "../store/index";
 setActivePinia(pinia);
 
-import { useSettingsStore } from "../store/settingsStore.js";
-const settings = useSettingsStore(pinia);
+import { settingsStore as settings } from "../store/settingsStore.js";
 
 import { useStateStore } from "../store/stateStore.js";
 const state = useStateStore(pinia);
@@ -41,7 +38,7 @@ function selectStatsControl(obj) {
     default:
       settings.spectrum = "waterfall";
   }
-  saveSettingsToFile();
+  //saveSettingsToFile();
 }
 
 ChartJS.register(
diff --git a/gui/src/components/main_modals.vue b/gui/src/components/main_modals.vue
index 93af247c..a6afa7cf 100644
--- a/gui/src/components/main_modals.vue
+++ b/gui/src/components/main_modals.vue
@@ -4,21 +4,17 @@
 import { setActivePinia } from "pinia";
 import pinia from "../store/index";
 setActivePinia(pinia);
-import { saveSettingsToFile } from "../js/settingsHandler";
 
 import { useChatStore } from "../store/chatStore.js";
 const chat = useChatStore(pinia);
 
-import { useSettingsStore } from "../store/settingsStore.js";
-const settings = useSettingsStore(pinia);
+import { settingsStore as settings} from "../store/settingsStore.js";
 
 import {
   deleteChatByCallsign,
   getNewMessagesByDXCallsign,
 } from "../js/chatHandler";
 
-import { sendTestFrame, setTxAudioLevel, setRxAudioLevel } from "../js/sock.js";
-
 import main_startup_check from "./main_startup_check.vue";
 
 function tuneAudio() {
diff --git a/gui/src/components/main_my_station.vue b/gui/src/components/main_my_station.vue
index 0b27cfee..61d8fab4 100644
--- a/gui/src/components/main_my_station.vue
+++ b/gui/src/components/main_my_station.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
-import { saveSettingsToFile } from "../js/settingsHandler";
 
 import { setActivePinia } from "pinia";
 import pinia from "../store/index";
 setActivePinia(pinia);
 
-import { useSettingsStore } from "../store/settingsStore.js";
-const settings = useSettingsStore(pinia);
+import { settingsStore as settings} from "../store/settingsStore.js";
 
 function saveSettings() {
   saveSettingsToFile();
diff --git a/gui/src/components/main_rig_control.vue b/gui/src/components/main_rig_control.vue
index 7b577205..d9594bf5 100644
--- a/gui/src/components/main_rig_control.vue
+++ b/gui/src/components/main_rig_control.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { saveSettingsToFile } from "../js/settingsHandler";
 
 import { startRigctld, stopRigctld } from "../js/deprecated_daemon";
 
@@ -8,8 +7,7 @@ import { setActivePinia } from "pinia";
 import pinia from "../store/index";
 setActivePinia(pinia);
 
-import { useSettingsStore } from "../store/settingsStore.js";
-const settings = useSettingsStore(pinia);
+import { settingsStore as settings} from "../store/settingsStore.js";
 
 import { useStateStore } from "../store/stateStore.js";
 const state = useStateStore(pinia);
diff --git a/gui/src/components/main_startup_check.vue b/gui/src/components/main_startup_check.vue
index f57c2aec..3ae3fe06 100644
--- a/gui/src/components/main_startup_check.vue
+++ b/gui/src/components/main_startup_check.vue
@@ -10,8 +10,7 @@ import { setActivePinia } from "pinia";
 import pinia from "../store/index";
 setActivePinia(pinia);
 
-import { useSettingsStore } from "../store/settingsStore.js";
-const settings = useSettingsStore(pinia);
+import { settingsStore as settings} from "../store/settingsStore.js";
 
 import { useAudioStore } from "../store/audioStore.js";
 const audio = useAudioStore(pinia);
@@ -22,7 +21,6 @@ const state = useStateStore(pinia);
 import { startModem, stopModem } from "../js/api";
 import { getModemConfig, getModemCurrentState } from "../js/api";
 
-import { saveSettingsToFile } from "../js/settingsHandler";
 import { startRigctld, stopRigctld } from "../js/deprecated_daemon";
 
 const version = import.meta.env.PACKAGE_VERSION;
@@ -350,7 +348,6 @@ function testHamlib() {
                         id="hamlib_deviceport"
                         style="width: 7rem"
                         @change="saveModemConfig"
-                        v-html="settings.getSerialDevices()"
                       ></select>
                     </div>
                   </div>
diff --git a/gui/src/components/main_top_navbar.vue b/gui/src/components/main_top_navbar.vue
index f8dfca9b..8359f5c1 100644
--- a/gui/src/components/main_top_navbar.vue
+++ b/gui/src/components/main_top_navbar.vue
@@ -6,13 +6,11 @@ setActivePinia(pinia);
 import { useStateStore } from "../store/stateStore.js";
 const state = useStateStore(pinia);
 
-import { useSettingsStore } from "../store/settingsStore.js";
-const settings = useSettingsStore(pinia);
+import { settingsStore as settings} from "../store/settingsStore.js";
 
 import { useAudioStore } from "../store/audioStore.js";
 const audioStore = useAudioStore(pinia);
 
-import { saveSettingsToFile } from "../js/settingsHandler";
 </script>
 
 <template>
diff --git a/gui/src/components/settings_chat.vue b/gui/src/components/settings_chat.vue
index 23af2b77..18999c3c 100644
--- a/gui/src/components/settings_chat.vue
+++ b/gui/src/components/settings_chat.vue
@@ -5,8 +5,7 @@ import { setActivePinia } from "pinia";
 import pinia from "../store/index";
 setActivePinia(pinia);
 
-import { useSettingsStore } from "../store/settingsStore.js";
-const settings = useSettingsStore(pinia);
+import { settingsStore as settings} from "../store/settingsStore.js";
 </script>
 
 <template>
diff --git a/gui/src/components/settings_exp.vue b/gui/src/components/settings_exp.vue
index df6afb70..13ff5faf 100644
--- a/gui/src/components/settings_exp.vue
+++ b/gui/src/components/settings_exp.vue
@@ -5,8 +5,7 @@ import { setActivePinia } from "pinia";
 import pinia from "../store/index";
 setActivePinia(pinia);
 
-import { useSettingsStore } from "../store/settingsStore.js";
-const settings = useSettingsStore(pinia);
+import { settingsStore as settings} from "../store/settingsStore.js";
 </script>
 
 <template>
diff --git a/gui/src/components/settings_gui.vue b/gui/src/components/settings_gui.vue
index 7db7869a..f4d22589 100644
--- a/gui/src/components/settings_gui.vue
+++ b/gui/src/components/settings_gui.vue
@@ -1,13 +1,11 @@
 <script setup lang="ts">
 import { setColormap } from "../js/waterfallHandler";
-import { saveSettingsToFile } from "../js/settingsHandler";
 
 import { setActivePinia } from "pinia";
 import pinia from "../store/index";
 setActivePinia(pinia);
 
-import { useSettingsStore } from "../store/settingsStore.js";
-const settings = useSettingsStore(pinia);
+import { settingsStore as settings} from "../store/settingsStore.js";
 
 function saveSettings() {
   saveSettingsToFile();
diff --git a/gui/src/components/settings_hamlib.vue b/gui/src/components/settings_hamlib.vue
index c02f74df..30cbada6 100644
--- a/gui/src/components/settings_hamlib.vue
+++ b/gui/src/components/settings_hamlib.vue
@@ -5,8 +5,7 @@ import { setActivePinia } from "pinia";
 import pinia from "../store/index";
 setActivePinia(pinia);
 
-import { useSettingsStore } from "../store/settingsStore.js";
-const settings = useSettingsStore(pinia);
+import { settingsStore as settings} from "../store/settingsStore.js";
 </script>
 
 <template>
@@ -351,7 +350,6 @@ const settings = useSettingsStore(pinia);
       id="hamlib_deviceport"
       style="width: 7rem"
       @change="saveModemConfig"
-      v-html="settings.getSerialDevices()"
     ></select>
   </div>
 
diff --git a/gui/src/components/settings_modem.vue b/gui/src/components/settings_modem.vue
index 56900ca7..10de90bd 100644
--- a/gui/src/components/settings_modem.vue
+++ b/gui/src/components/settings_modem.vue
@@ -1,12 +1,9 @@
 <script setup lang="ts">
+import pinia from "../store/index";
+
 import { saveModemConfig } from "../js/api";
 
-import { setActivePinia } from "pinia";
-import pinia from "../store/index";
-setActivePinia(pinia);
-
-import { useSettingsStore } from "../store/settingsStore.js";
-const settings = useSettingsStore(pinia);
+import { settingsStore as settings} from "../store/settingsStore.js";
 
 import { useAudioStore } from "../store/audioStore.js";
 const audio = useAudioStore(pinia);
diff --git a/gui/src/components/settings_rigcontrol.vue b/gui/src/components/settings_rigcontrol.vue
index 71c8a2f9..169a5a21 100644
--- a/gui/src/components/settings_rigcontrol.vue
+++ b/gui/src/components/settings_rigcontrol.vue
@@ -5,8 +5,7 @@ import { setActivePinia } from "pinia";
 import pinia from "../store/index";
 setActivePinia(pinia);
 
-import { useSettingsStore } from "../store/settingsStore.js";
-const settings = useSettingsStore(pinia);
+import { settingsStore as settings} from "../store/settingsStore.js";
 </script>
 
 <template>
diff --git a/gui/src/components/settings_station.vue b/gui/src/components/settings_station.vue
index 958e8858..8bfaa9fd 100644
--- a/gui/src/components/settings_station.vue
+++ b/gui/src/components/settings_station.vue
@@ -5,8 +5,8 @@ import { setActivePinia } from "pinia";
 import pinia from "../store/index";
 setActivePinia(pinia);
 
-import { useSettingsStore } from "../store/settingsStore.js";
-const settings = useSettingsStore(pinia);
+import { settingsStore as settings} from "../store/settingsStore.js";
+
 </script>
 <template>
   <!-- station callsign -->
diff --git a/gui/src/components/settings_web.vue b/gui/src/components/settings_web.vue
index 1c02fc77..45ef1f36 100644
--- a/gui/src/components/settings_web.vue
+++ b/gui/src/components/settings_web.vue
@@ -5,8 +5,8 @@ import { setActivePinia } from "pinia";
 import pinia from "../store/index";
 setActivePinia(pinia);
 
-import { useSettingsStore } from "../store/settingsStore.js";
-const settings = useSettingsStore(pinia);
+import { settingsStore as settings} from "../store/settingsStore.js";
+
 </script>
 
 <template>
diff --git a/gui/src/js/api.js b/gui/src/js/api.js
index c5b94245..d21a2200 100644
--- a/gui/src/js/api.js
+++ b/gui/src/js/api.js
@@ -1,37 +1,68 @@
-import { getModemConfigAsJSON } from "./settingsHandler.ts";
 import { getFromServer, postToServer } from "./rest.js";
-import { useSettingsStore } from "../store/settingsStore.js";
-import { setActivePinia } from "pinia";
-import pinia from "../store/index";
-setActivePinia(pinia);
-const settings = useSettingsStore(pinia);
+import { settingsStore as settings } from "../store/settingsStore.js";
 
-export function getModemConfig() {
-  // fetch Settings
-  getFromServer(settings.modem_host, settings.modem_port, "config");
-  getFromServer(settings.modem_host, settings.modem_port, "devices/audio");
-  getFromServer(settings.modem_host, settings.modem_port, "devices/serial");
+function buildURL(endpoint) {
+  const url =
+    "http://" + settings.local.host + ":" + settings.local.port + endpoint;
+  return url;
 }
 
-export function saveModemConfig() {
-  postToServer(
-    settings.modem_host,
-    settings.modem_port,
-    "config",
-    getModemConfigAsJSON(),
-  );
+async function apiGet(endpoint) {
+  const response = await fetch(buildURL(endpoint));
+  if (!response.ok) {
+    throw new Error(`REST response not ok: ${response.statusText}`);
+  }
+  const data = await response.json();
+  return data;
+}
+
+export async function apiPost(endpoint, payload = {}) {
+  try {
+    const response = await fetch(buildURL(endpoint), {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(payload),
+    });
+
+    if (!response.ok) {
+      throw new Error(`REST response not ok: ${response.statusText}`);
+    }
+
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error("Error posting to REST:", error);
+  }
+}
+
+export function getConfig() {
+  return apiGet("/config");
+}
+
+export function setConfig(config) {
+  return apiPost("/config", config);
+}
+
+export function getAudioDevices() {
+  return apiGet("/devices/audio");
+}
+
+export function getSerialDevices() {
+  return apiGet("/devices/serial");
 }
 
 export function startModem() {
-  postToServer(settings.modem_host, settings.modem_port, "modem/start", null);
+  return apiPost("/modem/start");
 }
 
 export function stopModem() {
-  postToServer(settings.modem_host, settings.modem_port, "modem/stop", null);
+  return apiPost("/modem/stop");
 }
 
 export function getModemVersion() {
-  getFromServer(settings.modem_host, settings.modem_port, "version", null);
+  getFromServer("/version");
 }
 export function getModemCurrentState() {
   getFromServer(settings.modem_host, settings.modem_port, "modem/state", null);
diff --git a/gui/src/js/chatHandler.ts b/gui/src/js/chatHandler.ts
index 416c70d6..400b95f9 100644
--- a/gui/src/js/chatHandler.ts
+++ b/gui/src/js/chatHandler.ts
@@ -13,10 +13,8 @@ const chat = useChatStore(pinia);
 import { useStateStore } from "../store/stateStore.js";
 const state = useStateStore(pinia);
 
-import { useSettingsStore } from "../store/settingsStore.js";
-const settings = useSettingsStore(pinia);
+import { settingsStore as settings} from "../store/settingsStore.js";
 
-import { sendMessage, sendBroadcastChannel } from "./sock.js";
 import { displayToast } from "./popupHandler.js";
 
 //const FD = require("./src/js/freedata.js");
diff --git a/gui/src/js/deprecated_daemon.ts b/gui/src/js/deprecated_daemon.ts
index 52da2497..a7cfffa1 100644
--- a/gui/src/js/deprecated_daemon.ts
+++ b/gui/src/js/deprecated_daemon.ts
@@ -8,8 +8,7 @@ setActivePinia(pinia);
 import { useAudioStore } from "../store/audioStore.js";
 const audioStore = useAudioStore(pinia);
 
-import { useSettingsStore } from "../store/settingsStore.js";
-const settings = useSettingsStore(pinia);
+import { settingsStore as settings} from "../store/settingsStore.js";
 
 import { useStateStore } from "../store/stateStore.js";
 const state = useStateStore(pinia);
diff --git a/gui/src/js/eventHandler.js b/gui/src/js/eventHandler.js
index 1ba55f5f..215ec8b7 100644
--- a/gui/src/js/eventHandler.js
+++ b/gui/src/js/eventHandler.js
@@ -16,8 +16,7 @@ setActivePinia(pinia);
 import { useStateStore } from "../store/stateStore.js";
 const stateStore = useStateStore(pinia);
 
-import { useSettingsStore } from "../store/settingsStore.js";
-const settings = useSettingsStore(pinia);
+import { settingsStore as settings} from "../store/settingsStore.js";
 
 export function connectionFailed(endpoint, event) {
   stateStore.modem_connection = "disconnected";
diff --git a/gui/src/js/event_sock.js b/gui/src/js/event_sock.js
index d5563f09..9bfb3ccc 100644
--- a/gui/src/js/event_sock.js
+++ b/gui/src/js/event_sock.js
@@ -10,12 +10,11 @@ import { setActivePinia } from "pinia";
 import pinia from "../store/index";
 setActivePinia(pinia);
 
-import { useSettingsStore } from "../store/settingsStore.js";
-const settings = useSettingsStore(pinia);
+import { settingsStore as settings } from "../store/settingsStore.js";
 
 function connect(endpoint, dispatcher) {
   let socket = new WebSocket(
-    "ws://" + settings.modem_host + ":" + settings.modem_port + "/" + endpoint,
+    "ws://" + settings.local.host + ":" + settings.local.port + "/" + endpoint,
   );
 
   // handle opening
diff --git a/gui/src/js/rest.js b/gui/src/js/rest.js
deleted file mode 100644
index 5dffe891..00000000
--- a/gui/src/js/rest.js
+++ /dev/null
@@ -1,69 +0,0 @@
-// ----------------- init pinia stores -------------
-import { setActivePinia } from "pinia";
-import pinia from "../store/index";
-setActivePinia(pinia);
-import {
-  processModemConfig,
-  processModemAudioDevices,
-  processModemSerialDevices,
-  getModemConfigAsJSON,
-  processModemVersion,
-} from "../js/settingsHandler.ts";
-
-export async function getFromServer(host, port, endpoint) {
-  // our central function for fetching the modems REST API by a specific endpoint
-  // TODO make this function using the host and port, specified in settings
-
-  const url = `http://${host}:${port}/${endpoint}`;
-  const response = await fetch(url);
-  if (!response.ok) {
-    throw new Error(`REST response not ok: ${response.statusText}`);
-  }
-  const data = await response.json();
-
-  // move received data to our data dispatcher
-  restDataDispatcher(endpoint, data);
-}
-
-export async function postToServer(host, port, endpoint, data) {
-  // our central function for posting to the modems REST API by a specific endpoint
-  // TODO make this function using the host and port, specified in settings
-
-  const url = `http://${host}:${port}/${endpoint}`;
-  try {
-    const response = await fetch(url, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(data),
-    });
-
-    if (!response.ok) {
-      throw new Error(`REST response not ok: ${response.statusText}`);
-    }
-  } catch (error) {
-    console.error("Error posting to REST:", error);
-  }
-}
-
-function restDataDispatcher(endpoint, data) {
-  // dispatch received data by endpoint
-
-  switch (endpoint) {
-    case "config":
-      processModemConfig(data);
-      break;
-    case "devices/audio":
-      processModemAudioDevices(data);
-      break;
-    case "devices/serial":
-      processModemSerialDevices(data);
-      break;
-    case "version":
-      processModemVersion(data);
-      break;
-    default:
-      console.log("Wrong endpoint:" + endpoint);
-  }
-}
diff --git a/gui/src/js/settingsHandler.ts b/gui/src/js/settingsHandler.ts
index a5d68bc5..b39da800 100644
--- a/gui/src/js/settingsHandler.ts
+++ b/gui/src/js/settingsHandler.ts
@@ -6,8 +6,7 @@ import { setActivePinia } from "pinia";
 import pinia from "../store/index";
 setActivePinia(pinia);
 
-import { useSettingsStore } from "../store/settingsStore.js";
-const settings = useSettingsStore(pinia);
+import { settingsStore as settings} from "../store/settingsStore.js";
 
 import { useAudioStore } from "../store/audioStore.js";
 const audioStore = useAudioStore(pinia);
diff --git a/gui/src/js/sock.js b/gui/src/js/sock.js
index 6f236de0..9c4a4a99 100644
--- a/gui/src/js/sock.js
+++ b/gui/src/js/sock.js
@@ -18,8 +18,7 @@ setActivePinia(pinia);
 import { useStateStore } from "../store/stateStore.js";
 const stateStore = useStateStore(pinia);
 
-import { useSettingsStore } from "../store/settingsStore.js";
-const settings = useSettingsStore(pinia);
+import { settingsStore as settings} from "../store/settingsStore.js";
 
 var client = new net.Socket();
 var socketchunk = ""; // Current message, per connection.
diff --git a/gui/src/js/waterfallHandler.js b/gui/src/js/waterfallHandler.js
index 59be0826..7f6cd444 100644
--- a/gui/src/js/waterfallHandler.js
+++ b/gui/src/js/waterfallHandler.js
@@ -4,8 +4,7 @@ import { setActivePinia } from "pinia";
 import pinia from "../store/index";
 setActivePinia(pinia);
 
-import { useSettingsStore } from "../store/settingsStore.js";
-const settings = useSettingsStore(pinia);
+import { settingsStore as settings} from "../store/settingsStore.js";
 
 var spectrum = new Object();
 
diff --git a/gui/src/main.ts b/gui/src/main.ts
index bbb3facc..17473c72 100644
--- a/gui/src/main.ts
+++ b/gui/src/main.ts
@@ -1,6 +1,5 @@
 import { createApp } from "vue";
 import { createPinia } from "pinia";
-import { loadSettings } from "./js/settingsHandler";
 import "./styles.css";
 import { Chart, Filler } from "chart.js";
 // Register the Filler plugin globally
@@ -30,10 +29,9 @@ const tooltipList = [...tooltipTriggerList].map(
   (tooltipTriggerEl) => new bootstrap.Tooltip(tooltipTriggerEl),
 );
 
-loadSettings();
+//loadSettings();
 
-//import './js/settingsHandler.js'
 //import "./js/daemon";
 //import "./js/sock.js";
-//import './js/settingsHandler.js'
+
 import "./js/event_sock.js";
diff --git a/gui/src/store/audioStore.js b/gui/src/store/audioStore.js
index 364a2699..e08e09aa 100644
--- a/gui/src/store/audioStore.js
+++ b/gui/src/store/audioStore.js
@@ -5,8 +5,7 @@ import { setActivePinia } from "pinia";
 import pinia from "../store/index";
 setActivePinia(pinia);
 
-import { useSettingsStore } from "../store/settingsStore.js";
-const settings = useSettingsStore(pinia);
+import { settingsStore as settings} from "../store/settingsStore.js";
 
 export const useAudioStore = defineStore("audioStore", () => {
   var inputDevices = ref([{ id: 0, name: "no input devices" }]);
diff --git a/gui/src/store/old_settingsStore.js b/gui/src/store/old_settingsStore.js
new file mode 100644
index 00000000..216307e0
--- /dev/null
+++ b/gui/src/store/old_settingsStore.js
@@ -0,0 +1,234 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+export const useSettingsStore = defineStore("settingsStore", () => {
+  // audio
+  var output_device = ref("");
+  var input_device = ref("");
+  var tx_audio_level = ref(0);
+  var rx_audio_level = ref(0);
+
+  // network
+  var modem_host = ref("127.0.0.1");
+  var modem_port = ref(5000);
+  var daemon_host = ref(modem_host.value);
+  var daemon_port = ref(modem_port.value + 1);
+
+  // app
+  var screen_height = ref(430);
+  var screen_width = ref(1050);
+  var theme = ref("default");
+  var wftheme = ref(2);
+  var high_graphics = ref("False");
+  var auto_start = ref(0);
+  var enable_sys_notification = ref(1);
+
+  // chat
+  var shared_folder_path = ref(".");
+  var enable_request_profile = ref("True");
+  var enable_request_shared_folder = ref("False");
+  var max_retry_attempts = ref(5);
+  var enable_auto_retry = ref("False");
+
+  // station
+  var mycall = ref("AA0AA-5");
+  var myssid = ref(0);
+  var mygrid = ref("JN20aa");
+
+  // rigctld
+  var hamlib_rigctld_port = ref(4532);
+  var hamlib_rigctld_ip = ref("127.0.0.1");
+  var radiocontrol = ref("disabled");
+  var hamlib_deviceid = ref("RIG_MODEL_DUMMY_NOVFO");
+  var hamlib_deviceport = ref("ignore");
+  var hamlib_stop_bits = ref("ignore");
+  var hamlib_data_bits = ref("ignore");
+  var hamlib_handshake = ref("ignore");
+  var hamlib_serialspeed = ref("ignore");
+  var hamlib_dtrstate = ref("ignore");
+  var hamlib_pttprotocol = ref("ignore");
+  var hamlib_ptt_port = ref("ignore");
+  var hamlib_dcd = ref("ignore");
+  var hamlbib_serialspeed_ptt = ref(9600);
+  var hamlib_rigctld_path = ref("");
+  var hamlib_rigctld_server_port = ref(4532);
+  var hamlib_rigctld_custom_args = ref("");
+
+  // tci
+  var tci_ip = ref("127.0.0.1");
+  var tci_port = ref(50001);
+
+  //modem
+  var spectrum = ref("waterfall");
+  var enable_scatter = ref(false);
+  var enable_fft = ref(false);
+  var enable_fsk = ref(false);
+  var low_bandwidth_mode = ref(false);
+  var update_channel = ref("latest");
+  var beacon_interval = ref(300);
+  var received_files_folder = ref("None");
+  var tuning_range_fmin = ref(-50);
+  var tuning_range_fmax = ref(50);
+  var respond_to_cq = ref(true);
+  var rx_buffer_size = ref(16);
+  var enable_explorer = ref(false);
+  var explorer_stats = ref(false);
+  var auto_tune = ref(false);
+  var enable_is_writing = ref(true);
+  var tx_delay = ref(0);
+  var enable_mesh_features = ref(false);
+  var serial_devices = ref();
+
+  function getSerialDevices() {
+    if (this.hamlib_deviceport == "ignore")
+      var html =
+        '<option value ="ignore" selected>None - (use custom options for hamlib)</option>';
+    else
+      var html =
+        '<option value ="ignore">None - (use custom options for hamlib)</option>';
+    for (var key in serial_devices.value) {
+      let selected = "";
+      if (serial_devices.value[key]["port"] == this.hamlib_deviceport) {
+        selected = "selected";
+      } else {
+        selected = "";
+      }
+
+      html += `<option value="${serial_devices.value[key]["port"]}" ${selected}>${serial_devices.value[key]["port"]} - ${serial_devices.value[key]["description"]}</option>`;
+    }
+    return html;
+  }
+
+  function getJSON() {
+    var config_export = {
+      modem_host: modem_host.value,
+      modem_port: modem_port.value,
+      daemon_host: modem_host.value,
+      daemon_port: (parseInt(modem_port.value) + 1).toString(),
+      mycall: mycall.value,
+      myssid: myssid.value,
+      mygrid: mygrid.value,
+      radiocontrol: radiocontrol.value,
+      hamlib_deviceid: hamlib_deviceid.value,
+      hamlib_deviceport: hamlib_deviceport.value,
+      hamlib_stop_bits: hamlib_stop_bits.value,
+      hamlib_data_bits: hamlib_data_bits.value,
+      hamlib_handshake: hamlib_handshake.value,
+      hamlib_serialspeed: hamlib_serialspeed.value,
+      hamlib_dtrstate: hamlib_dtrstate.value,
+      hamlib_pttprotocol: hamlib_pttprotocol.value,
+      hamlib_ptt_port: hamlib_ptt_port.value,
+      hamlib_dcd: hamlib_dcd.value,
+      hamlbib_serialspeed_ptt: hamlib_serialspeed.value,
+      hamlib_rigctld_port: hamlib_rigctld_port.value,
+      hamlib_rigctld_ip: hamlib_rigctld_ip.value,
+      hamlib_rigctld_path: hamlib_rigctld_path.value,
+      hamlib_rigctld_server_port: hamlib_rigctld_server_port.value,
+      hamlib_rigctld_custom_args: hamlib_rigctld_custom_args.value,
+      tci_port: tci_port.value,
+      tci_ip: tci_ip.value,
+      spectrum: spectrum.value,
+      enable_scatter: enable_scatter.value,
+      enable_fft: enable_fft.value,
+      enable_fsk: enable_fsk.value,
+      low_bandwidth_mode: low_bandwidth_mode.value,
+      theme: theme.value,
+      screen_height: screen_height.value,
+      screen_width: screen_width.value,
+      update_channel: update_channel.value,
+      beacon_interval: beacon_interval.value,
+      received_files_folder: received_files_folder.value,
+      tuning_range_fmin: tuning_range_fmin.value,
+      tuning_range_fmax: tuning_range_fmax.value,
+      respond_to_cq: respond_to_cq.value,
+      rx_buffer_size: rx_buffer_size.value,
+      enable_explorer: enable_explorer.value,
+      wftheme: wftheme.value,
+      high_graphics: high_graphics.value,
+      explorer_stats: explorer_stats.value,
+      auto_tune: auto_tune.value,
+      enable_is_writing: enable_is_writing.value,
+      shared_folder_path: shared_folder_path.value,
+      enable_request_profile: enable_request_profile.value,
+      enable_request_shared_folder: enable_request_shared_folder.value,
+      max_retry_attempts: max_retry_attempts.value,
+      enable_auto_retry: enable_auto_retry.value,
+      tx_delay: tx_delay.value,
+      auto_start: auto_start.value,
+      enable_sys_notification: enable_sys_notification.value,
+      enable_mesh_features: enable_mesh_features.value,
+      tx_audio: tx_audio.value,
+      rx_audio: rx_audio.value,
+      tx_audio_level: tx_audio_level.value,
+      rx_audio_level: rx_audio_level.value,
+    };
+
+    return config_export;
+  }
+
+  return {
+    modem_host,
+    modem_port,
+    daemon_host,
+    daemon_port,
+    screen_height,
+    screen_width,
+    theme,
+    wftheme,
+    high_graphics,
+    auto_start,
+    enable_sys_notification,
+    shared_folder_path,
+    enable_request_profile,
+    enable_request_shared_folder,
+    max_retry_attempts,
+    enable_auto_retry,
+    mycall,
+    myssid,
+    mygrid,
+    hamlib_rigctld_port,
+    hamlib_rigctld_ip,
+    radiocontrol,
+    hamlib_deviceid,
+    hamlib_deviceport,
+    hamlib_stop_bits,
+    hamlib_data_bits,
+    hamlib_handshake,
+    hamlib_serialspeed,
+    hamlib_dtrstate,
+    hamlib_pttprotocol,
+    hamlib_ptt_port,
+    hamlib_dcd,
+    hamlbib_serialspeed_ptt,
+    hamlib_rigctld_path,
+    hamlib_rigctld_server_port,
+    hamlib_rigctld_custom_args,
+    tci_ip,
+    tci_port,
+    spectrum,
+    enable_scatter,
+    enable_fft,
+    enable_fsk,
+    low_bandwidth_mode,
+    update_channel,
+    beacon_interval,
+    received_files_folder,
+    tuning_range_fmin,
+    tuning_range_fmax,
+    respond_to_cq,
+    rx_buffer_size,
+    enable_explorer,
+    explorer_stats,
+    auto_tune,
+    enable_is_writing,
+    tx_delay,
+    enable_mesh_features,
+    getJSON,
+    output_device,
+    input_device,
+    getSerialDevices,
+    serial_devices,
+    tx_audio_level,
+    rx_audio_level,
+  };
+});
diff --git a/gui/src/store/settingsStore.js b/gui/src/store/settingsStore.js
index 216307e0..5f7b67b8 100644
--- a/gui/src/store/settingsStore.js
+++ b/gui/src/store/settingsStore.js
@@ -1,234 +1,19 @@
-import { defineStore } from "pinia";
-import { ref } from "vue";
+import { reactive } from "vue";
 
-export const useSettingsStore = defineStore("settingsStore", () => {
-  // audio
-  var output_device = ref("");
-  var input_device = ref("");
-  var tx_audio_level = ref(0);
-  var rx_audio_level = ref(0);
+import { getConfig } from "../js/api";
 
-  // network
-  var modem_host = ref("127.0.0.1");
-  var modem_port = ref(5000);
-  var daemon_host = ref(modem_host.value);
-  var daemon_port = ref(modem_port.value + 1);
-
-  // app
-  var screen_height = ref(430);
-  var screen_width = ref(1050);
-  var theme = ref("default");
-  var wftheme = ref(2);
-  var high_graphics = ref("False");
-  var auto_start = ref(0);
-  var enable_sys_notification = ref(1);
-
-  // chat
-  var shared_folder_path = ref(".");
-  var enable_request_profile = ref("True");
-  var enable_request_shared_folder = ref("False");
-  var max_retry_attempts = ref(5);
-  var enable_auto_retry = ref("False");
-
-  // station
-  var mycall = ref("AA0AA-5");
-  var myssid = ref(0);
-  var mygrid = ref("JN20aa");
-
-  // rigctld
-  var hamlib_rigctld_port = ref(4532);
-  var hamlib_rigctld_ip = ref("127.0.0.1");
-  var radiocontrol = ref("disabled");
-  var hamlib_deviceid = ref("RIG_MODEL_DUMMY_NOVFO");
-  var hamlib_deviceport = ref("ignore");
-  var hamlib_stop_bits = ref("ignore");
-  var hamlib_data_bits = ref("ignore");
-  var hamlib_handshake = ref("ignore");
-  var hamlib_serialspeed = ref("ignore");
-  var hamlib_dtrstate = ref("ignore");
-  var hamlib_pttprotocol = ref("ignore");
-  var hamlib_ptt_port = ref("ignore");
-  var hamlib_dcd = ref("ignore");
-  var hamlbib_serialspeed_ptt = ref(9600);
-  var hamlib_rigctld_path = ref("");
-  var hamlib_rigctld_server_port = ref(4532);
-  var hamlib_rigctld_custom_args = ref("");
-
-  // tci
-  var tci_ip = ref("127.0.0.1");
-  var tci_port = ref(50001);
-
-  //modem
-  var spectrum = ref("waterfall");
-  var enable_scatter = ref(false);
-  var enable_fft = ref(false);
-  var enable_fsk = ref(false);
-  var low_bandwidth_mode = ref(false);
-  var update_channel = ref("latest");
-  var beacon_interval = ref(300);
-  var received_files_folder = ref("None");
-  var tuning_range_fmin = ref(-50);
-  var tuning_range_fmax = ref(50);
-  var respond_to_cq = ref(true);
-  var rx_buffer_size = ref(16);
-  var enable_explorer = ref(false);
-  var explorer_stats = ref(false);
-  var auto_tune = ref(false);
-  var enable_is_writing = ref(true);
-  var tx_delay = ref(0);
-  var enable_mesh_features = ref(false);
-  var serial_devices = ref();
-
-  function getSerialDevices() {
-    if (this.hamlib_deviceport == "ignore")
-      var html =
-        '<option value ="ignore" selected>None - (use custom options for hamlib)</option>';
-    else
-      var html =
-        '<option value ="ignore">None - (use custom options for hamlib)</option>';
-    for (var key in serial_devices.value) {
-      let selected = "";
-      if (serial_devices.value[key]["port"] == this.hamlib_deviceport) {
-        selected = "selected";
-      } else {
-        selected = "";
-      }
-
-      html += `<option value="${serial_devices.value[key]["port"]}" ${selected}>${serial_devices.value[key]["port"]} - ${serial_devices.value[key]["description"]}</option>`;
-    }
-    return html;
-  }
-
-  function getJSON() {
-    var config_export = {
-      modem_host: modem_host.value,
-      modem_port: modem_port.value,
-      daemon_host: modem_host.value,
-      daemon_port: (parseInt(modem_port.value) + 1).toString(),
-      mycall: mycall.value,
-      myssid: myssid.value,
-      mygrid: mygrid.value,
-      radiocontrol: radiocontrol.value,
-      hamlib_deviceid: hamlib_deviceid.value,
-      hamlib_deviceport: hamlib_deviceport.value,
-      hamlib_stop_bits: hamlib_stop_bits.value,
-      hamlib_data_bits: hamlib_data_bits.value,
-      hamlib_handshake: hamlib_handshake.value,
-      hamlib_serialspeed: hamlib_serialspeed.value,
-      hamlib_dtrstate: hamlib_dtrstate.value,
-      hamlib_pttprotocol: hamlib_pttprotocol.value,
-      hamlib_ptt_port: hamlib_ptt_port.value,
-      hamlib_dcd: hamlib_dcd.value,
-      hamlbib_serialspeed_ptt: hamlib_serialspeed.value,
-      hamlib_rigctld_port: hamlib_rigctld_port.value,
-      hamlib_rigctld_ip: hamlib_rigctld_ip.value,
-      hamlib_rigctld_path: hamlib_rigctld_path.value,
-      hamlib_rigctld_server_port: hamlib_rigctld_server_port.value,
-      hamlib_rigctld_custom_args: hamlib_rigctld_custom_args.value,
-      tci_port: tci_port.value,
-      tci_ip: tci_ip.value,
-      spectrum: spectrum.value,
-      enable_scatter: enable_scatter.value,
-      enable_fft: enable_fft.value,
-      enable_fsk: enable_fsk.value,
-      low_bandwidth_mode: low_bandwidth_mode.value,
-      theme: theme.value,
-      screen_height: screen_height.value,
-      screen_width: screen_width.value,
-      update_channel: update_channel.value,
-      beacon_interval: beacon_interval.value,
-      received_files_folder: received_files_folder.value,
-      tuning_range_fmin: tuning_range_fmin.value,
-      tuning_range_fmax: tuning_range_fmax.value,
-      respond_to_cq: respond_to_cq.value,
-      rx_buffer_size: rx_buffer_size.value,
-      enable_explorer: enable_explorer.value,
-      wftheme: wftheme.value,
-      high_graphics: high_graphics.value,
-      explorer_stats: explorer_stats.value,
-      auto_tune: auto_tune.value,
-      enable_is_writing: enable_is_writing.value,
-      shared_folder_path: shared_folder_path.value,
-      enable_request_profile: enable_request_profile.value,
-      enable_request_shared_folder: enable_request_shared_folder.value,
-      max_retry_attempts: max_retry_attempts.value,
-      enable_auto_retry: enable_auto_retry.value,
-      tx_delay: tx_delay.value,
-      auto_start: auto_start.value,
-      enable_sys_notification: enable_sys_notification.value,
-      enable_mesh_features: enable_mesh_features.value,
-      tx_audio: tx_audio.value,
-      rx_audio: rx_audio.value,
-      tx_audio_level: tx_audio_level.value,
-      rx_audio_level: rx_audio_level.value,
-    };
-
-    return config_export;
-  }
-
-  return {
-    modem_host,
-    modem_port,
-    daemon_host,
-    daemon_port,
-    screen_height,
-    screen_width,
-    theme,
-    wftheme,
-    high_graphics,
-    auto_start,
-    enable_sys_notification,
-    shared_folder_path,
-    enable_request_profile,
-    enable_request_shared_folder,
-    max_retry_attempts,
-    enable_auto_retry,
-    mycall,
-    myssid,
-    mygrid,
-    hamlib_rigctld_port,
-    hamlib_rigctld_ip,
-    radiocontrol,
-    hamlib_deviceid,
-    hamlib_deviceport,
-    hamlib_stop_bits,
-    hamlib_data_bits,
-    hamlib_handshake,
-    hamlib_serialspeed,
-    hamlib_dtrstate,
-    hamlib_pttprotocol,
-    hamlib_ptt_port,
-    hamlib_dcd,
-    hamlbib_serialspeed_ptt,
-    hamlib_rigctld_path,
-    hamlib_rigctld_server_port,
-    hamlib_rigctld_custom_args,
-    tci_ip,
-    tci_port,
-    spectrum,
-    enable_scatter,
-    enable_fft,
-    enable_fsk,
-    low_bandwidth_mode,
-    update_channel,
-    beacon_interval,
-    received_files_folder,
-    tuning_range_fmin,
-    tuning_range_fmax,
-    respond_to_cq,
-    rx_buffer_size,
-    enable_explorer,
-    explorer_stats,
-    auto_tune,
-    enable_is_writing,
-    tx_delay,
-    enable_mesh_features,
-    getJSON,
-    output_device,
-    input_device,
-    getSerialDevices,
-    serial_devices,
-    tx_audio_level,
-    rx_audio_level,
-  };
+export const settingsStore = reactive({
+  local: {
+    host: "127.0.0.1",
+    port: "5000",
+  },
+  remote: {},
 });
+
+export function getRemote() {
+  getConfig().then((conf) => {
+    settingsStore.remote = conf;
+  });
+}
+
+getRemote();