Merge branch 'develop' into ls-arq

gui/src/components/infoScreen.vue

@@ -5,8 +5,7 @@ import { setActivePinia } from "pinia";
 import pinia from "../store/index";
 setActivePinia(pinia);
 
-import { useStateStore } from "../store/stateStore.js";
-const state = useStateStore(pinia);
+import infoScreen_updater from "./infoScreen_updater.vue";
 
 const version = import.meta.env.PACKAGE_VERSION;
 
@@ -91,13 +90,7 @@ onMounted(shuffleCards);
 </script>
 
 <template>
-  <h3 class="m-2">
-    <span class="badge bg-secondary">FreeDATA: {{ version }}</span>
-    <span class="ms-2 badge bg-secondary"
-      >Modem: {{ state.modem_version }}</span
-    >
-  </h3>
-
+  <infoScreen_updater />
   <div class="container-fluid">
     <div class="row mt-2">
       <hr />

gui/src/components/infoScreen_updater.vue

@@ -5,10 +5,15 @@ setActivePinia(pinia);
 
 import { useSettingsStore } from "../store/settingsStore.js";
 const settings = useSettingsStore(pinia);
+
+import { useStateStore } from "../store/stateStore.js";
+const state = useStateStore(pinia);
+
+
 </script>
 
 <template>
-  <div class="card mb-0">
+  <div class="card m-2">
     <div class="card-header p-1 d-flex">
       <div class="container">
         <div class="row">
@@ -49,13 +54,31 @@ const settings = useSettingsStore(pinia);
       </div>
     </div>
     <div class="card-body p-2 mb-1">
+
+      <button
+        class="btn btn-secondary btn-sm ms-1 me-1"
+        type="button"
+        disabled
+      >
+        GUI version | {{ version }}
+      </button>
+
+      <button
+        class="btn btn-secondary btn-sm ms-1 me-1"
+        type="button"
+        disabled
+      >
+        Modem version | {{ state.modem_version }}
+      </button>
+
+
       <button
         class="btn btn-secondary btn-sm ms-1 me-1"
         id="updater_channel"
         type="button"
         disabled
       >
-        {{ settings.update_channel }}
+        Update channel | {{ settings.update_channel }}
       </button>
       <button
         class="btn btn-secondary btn-sm ms-1"

gui/src/components/main.vue

@@ -5,10 +5,7 @@ setActivePinia(pinia);
 
 import main_modals from "./main_modals.vue";
 import main_top_navbar from "./main_top_navbar.vue";
-import main_audio from "./main_audio.vue";
 import main_rig_control from "./main_rig_control.vue";
-import main_my_station from "./main_my_station.vue";
-import main_updater from "./main_updater.vue";
 import settings_view from "./settings.vue";
 import main_active_rig_control from "./main_active_rig_control.vue";
 import main_footer_navbar from "./main_footer_navbar.vue";
@@ -156,33 +153,10 @@ function stopAllTransmissions() {
               <!-------------------------------- MAIN AREA ---------------->
 
               <!------------------------------------------------------------------------------------------>
-              <div class="container p-3">
-                <div
-                  class="row collapse multi-collapse show mt-4"
-                  id="collapseFirstRow"
-                >
-                  <div class="col">
-                    <main_audio />
-                  </div>
-                  <div class="col">
-                    <main_rig_control />
-                  </div>
-                </div>
-                <div
-                  class="row collapse multi-collapse show mt-4"
-                  id="collapseSecondRow"
-                >
-                  <div class="col">
-                    <main_my_station />
-                  </div>
-                  <div class="col">
-                    <main_updater />
-                  </div>
-                </div>
-              </div>
               <div class="container">
-                <div class="row collapse multi-collapse" id="collapseThirdRow">
+                <div class="row">
                   <main_active_rig_control />
+                  <main_rig_control />
 
                   <div class="col-5">
                     <main_active_audio_level />
@@ -190,11 +164,6 @@ function stopAllTransmissions() {
                   <div class="col">
                     <main_active_broadcasts />
                   </div>
-                </div>
-                <div
-                  class="row collapse multi-collapse mt-3"
-                  id="collapseFourthRow"
-                >
                   <div class="col-5">
                     <main_active_stats />
                   </div>

gui/src/components/main_audio.vue

@@ -1,61 +0,0 @@
-<script setup>
-import { setActivePinia } from "pinia";
-import pinia from "../store/index";
-setActivePinia(pinia);
-
-import { useAudioStore } from "../store/audioStore.js";
-const audio = useAudioStore(pinia);
-</script>
-
-<template>
-  <div class="card mb-0">
-    <div class="card-header p-1">
-      <div class="container">
-        <div class="row">
-          <div class="col-1">
-            <i class="bi bi-volume-up" style="font-size: 1.2rem"></i>
-          </div>
-          <div class="col-10">
-            <strong class="fs-5">Audio devices</strong>
-          </div>
-          <div class="col-1 text-end">
-            <button
-              type="button"
-              id="openHelpModalAudio"
-              data-bs-toggle="modal"
-              data-bs-target="#audioHelpModal"
-              class="btn m-0 p-0 border-0"
-            >
-              <i class="bi bi-question-circle" style="font-size: 1rem"></i>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="card-body p-2" style="height: 100px">
-      <div class="input-group input-group-sm mb-1">
-        <span class="input-group-text">
-          <i class="bi bi-mic-fill" style="font-size: 1rem"></i>
-        </span>
-        <select
-          class="form-select form-select-sm"
-          id="audio_input_selectbox"
-          aria-label=".form-select-sm"
-          v-html="audio.getInputDevices()"
-        ></select>
-      </div>
-      <div class="input-group input-group-sm">
-        <span class="input-group-text">
-          <i class="bi bi-volume-up" style="font-size: 1rem"></i>
-        </span>
-        <select
-          class="form-select form-select-sm"
-          id="audio_output_selectbox"
-          aria-label=".form-select-sm"
-          v-html="audio.getOutputDevices()"
-        ></select>
-      </div>
-    </div>
-  </div>
-</template>

gui/src/components/main_rig_control.vue

@@ -61,8 +61,9 @@ alert("not yet implemented")
 </script>
 
 <template>
-  <div class="card mb-0">
-    <div class="card-header p-1">
+  <div class="mb-3">
+    <div class="card mb-1">
+      <div class="card-header p-1">
       <div class="container">
         <div class="row">
           <div class="col-1">
@@ -151,22 +152,6 @@ alert("not yet implemented")
           aria-labelledby="list-rig-control-rigctld-list"
         >
           <div class="input-group input-group-sm mb-1">
-            <div class="input-group input-group-sm mb-1">
-
-<span class="input-group-text"> Radio port </span>
-
-    <select
-      class="form-select form-select-sm"
-      aria-label=".form-select-sm"
-      id="hamlib_deviceport"
-      style="width: 7rem"
-      v-html="settings.getSerialDevices()"
-    >
-
-    </select>
-
-
-            </div>
 
             <div class="input-group input-group-sm mb-1">
               <span class="input-group-text">Rigctld service</span>
@@ -275,4 +260,5 @@ alert("not yet implemented")
               </div>
               -->
   </div>
+  </div>
 </template>

gui/src/components/settings.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
+import settings_station from "./settings_station.vue";
 import settings_gui from "./settings_gui.vue";
 import settings_chat from "./settings_chat.vue";
+import settings_rigcontrol from "./settings_rigcontrol.vue";
 import settings_hamlib from "./settings_hamlib.vue";
 import settings_modem from "./settings_modem.vue";
 import settings_web from "./settings_web.vue";
@@ -28,6 +30,20 @@ import settings_exp from "./settings_exp.vue";
             <li class="nav-item" role="presentation">
               <button
                 class="nav-link active"
+                id="station-tab"
+                data-bs-toggle="tab"
+                data-bs-target="#station"
+                type="button"
+                role="tab"
+                aria-controls="home"
+                aria-selected="true"
+              >
+                Station
+              </button>
+            </li>
+            <li class="nav-item" role="presentation">
+              <button
+                class="nav-link"
                 id="gui-tab"
                 data-bs-toggle="tab"
                 data-bs-target="#gui"
@@ -53,6 +69,20 @@ import settings_exp from "./settings_exp.vue";
                 Chat
               </button>
             </li>
+            <li class="nav-item" role="presentation">
+              <button
+                class="nav-link"
+                id="rigcontrol-tab"
+                data-bs-toggle="tab"
+                data-bs-target="#rigcontrol"
+                type="button"
+                role="tab"
+                aria-controls="profile"
+                aria-selected="false"
+              >
+                Rig Control
+              </button>
+            </li>
             <li class="nav-item" role="presentation">
               <button
                 class="nav-link"
@@ -113,10 +143,22 @@ import settings_exp from "./settings_exp.vue";
         </div>
         <div class="card-body">
           <!-- SETTINGS Nav Tab panes -->
+
+          <!-- Station tab contents-->
           <div class="tab-content">
-            <!-- GUI tab contents-->
             <div
               class="tab-pane active"
+              id="station"
+              role="tabpanel"
+              aria-labelledby="station-tab"
+              tabindex="0"
+            >
+              <settings_station />
+            </div>
+
+            <!-- GUI tab contents-->
+            <div
+              class="tab-pane"
               id="gui"
               role="tabpanel"
               aria-labelledby="gui-tab"
@@ -135,6 +177,16 @@ import settings_exp from "./settings_exp.vue";
               <settings_chat />
             </div>
 
+            <div
+              class="tab-pane"
+              id="rigcontrol"
+              role="tabpanel"
+              aria-labelledby="rigcontrol-tab"
+              tabindex="0"
+            >
+              <settings_rigcontrol />
+            </div>
+
             <div
               class="tab-pane"
               id="hamlib"

gui/src/components/settings_hamlib.vue

@@ -72,16 +72,13 @@ function saveSettings() {
   <hr class="m-2" />
   <div class="input-group input-group-sm mb-1">
     <span class="input-group-text" style="width: 180px"> Radio model </span>
-    <input
-      class="form-control"
-      list="datalistOptions"
+    <select
+      class="form-select form-select-sm"
+      aria-label=".form-select-sm"
       id="hamlib_deviceid"
-      placeholder="Search radio..."
-      style="width: 7rem"
       @change="saveSettings"
       v-model="settings.hamlib_deviceid"
-    />
-    <datalist id="datalistOptions">
+    >
       <option selected value="-- ignore --">-- ignore --</option>
       <option value="2028">Kenwood TS480</option>
       <option value="1">Hamlib Dummy</option>
@@ -345,7 +342,21 @@ function saveSettings() {
       <option value="32001">Barrett 2050</option>
       <option value="32002">Barrett 950</option>
       <option value="33001">ELAD FDM-DUO</option>
-    </datalist>
+    </select>
+  </div>
+
+  <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="saveSettings"
+      v-html="settings.getSerialDevices()"
+    >
+    </select>
   </div>
 
   <div class="input-group input-group-sm mb-1">

gui/src/components/settings_modem.vue

@@ -8,14 +8,18 @@ setActivePinia(pinia);
 import { useSettingsStore } from "../store/settingsStore.js";
 const settings = useSettingsStore(pinia);
 
+import { useAudioStore } from "../store/audioStore.js";
+const audio = useAudioStore(pinia);
+
 function saveSettings() {
   saveSettingsToFile();
 }
 </script>
 
 <template>
+
   <div class="input-group input-group-sm mb-1">
-    <span class="input-group-text" style="width: 180px">modem port</span>
+    <span class="input-group-text" style="width: 180px">Modem port</span>
     <input
       type="text"
       class="form-control"
@@ -30,7 +34,7 @@ function saveSettings() {
   </div>
 
   <div class="input-group input-group-sm mb-1">
-    <span class="input-group-text" style="width: 180px">modem host</span>
+    <span class="input-group-text" style="width: 180px">Modem host</span>
     <input
       type="text"
       class="form-control"
@@ -41,6 +45,32 @@ function saveSettings() {
     />
   </div>
 
+  <!-- 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"
+          id="audio_input_selectbox"
+          aria-label=".form-select-sm"
+          @change="saveSettings"
+          v-html="audio.getInputDevices()"
+        >  
+    </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>
+    <select
+          class="form-select form-select-sm"
+          id="audio_output_selectbox"
+          aria-label=".form-select-sm"
+          @change="saveSettings"
+          v-html="audio.getOutputDevices()"
+        >  
+    </select>
+  </div>
+
   <div class="input-group input-group-sm mb-1">
     <label class="input-group-text w-50">TX delay in ms</label>
     <select

gui/src/components/settings_rigcontrol.vue

@@ -0,0 +1,57 @@
+<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);
+function saveSettings() {
+  saveSettingsToFile();
+}
+</script>
+
+<template>
+  <div class="input-group input-group-sm mb-1">
+    <span class="input-group-text" style="width: 180px">Rig Control</span>
+
+    <select
+      class="form-select form-select-sm"
+      aria-label=".form-select-sm"
+      id="rigcontrol_radiocontrol"
+      @change="saveSettings"
+      v-model="settings.radiocontrol"
+    >
+      <option selected value="disabled">Disabled / VOX (no rig control - use with VOX)</option>
+      <option selected value="rigctld">Rigctld (Hamlib)</option>
+      <option selected value="tci">TCI</option>
+    </select>
+  </div>
+
+  <hr class="m-2" />
+
+  <div class="input-group input-group-sm mb-1">
+    <span class="input-group-text" style="width: 180px">TCI IP Address</span>
+    <input
+      type="text"
+      class="form-control"
+      placeholder="TCI IP"
+      id="rigcontrol_tci_ip"
+      aria-label="Device IP"
+      v-model="settings.tci_ip"
+    />
+  </div>
+
+  <div class="input-group input-group-sm mb-1">
+    <span class="input-group-text" style="width: 180px">TCI port</span>
+    <input
+      type="text"
+      class="form-control"
+      placeholder="TCI port"
+      id="rigcontrol_tci_port"
+      aria-label="Device Port"
+      v-model="settings.tci_port"
+    />
+  </div>
+</template>

gui/src/components/settings_station.vue

@@ -0,0 +1,76 @@
+<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);
+
+function saveSettings() {
+  saveSettingsToFile();
+}
+</script>
+<template>
+
+  <!-- station callsign -->
+  <div class="input-group input-group-sm mb-1">
+      <span class="input-group-text" style="width: 180px">Your station callsign</span>
+      <input
+        type="text"
+        class="form-control"
+        placeholder="Enter your callsign and save it"
+        id="myCall"
+        aria-label="Station Callsign"
+        aria-describedby="basic-addon1"
+        @change="saveSettings"
+        v-model="settings.mycall"
+      />
+  </div>
+
+  <!-- station ssid -->
+  <div class="input-group input-group-sm mb-1">
+    <span class="input-group-text" style="width: 180px">Call SSID</span>
+    <select
+      class="form-select form-select-sm w-50"
+      id="myCallSSID"
+      @change="saveSettings"
+      v-model="settings.myssid"
+    >
+      <option selected value="0">0</option>
+      <option value="1">1</option>
+      <option value="2">2</option>
+      <option value="3">3</option>
+      <option value="4">4</option>
+      <option value="5">5</option>
+      <option value="6">6</option>
+      <option value="7">7</option>
+      <option value="8">8</option>
+      <option value="9">9</option>
+      <option value="10">10</option>
+      <option value="11">11</option>
+      <option value="12">12</option>
+      <option value="13">13</option>
+      <option value="14">14</option>
+      <option value="15">15</option>
+    </select>
+  </div>
+
+  <!-- station grid locator -->
+  <div class="input-group input-group-sm mb-1">
+      <span class="input-group-text" style="width: 180px">Grid Locator</span>
+      <input
+        type="text"
+        class="form-control"
+        placeholder="Your grid locator"
+        id="myGrid"
+        maxlength="6"
+        aria-label="Station Grid Locator"
+        aria-describedby="basic-addon1"
+        @change="saveSettings"
+        v-model="settings.mygrid"
+      />
+  </div>
+
+</template>

gui/src/store/stateStore.js

@@ -86,55 +86,11 @@ export const useStateStore = defineStore("stateStore", () => {
     modem_connection.value = state;
 
     if (modem_connection.value == "open") {
-      // collapse settings screen
-      var collapseFirstRow = new bootstrap.Collapse(
-        document.getElementById("collapseFirstRow"),
-        { toggle: false },
-      );
-      collapseFirstRow.hide();
-      var collapseSecondRow = new bootstrap.Collapse(
-        document.getElementById("collapseSecondRow"),
-        { toggle: false },
-      );
-      collapseSecondRow.hide();
-      var collapseThirdRow = new bootstrap.Collapse(
-        document.getElementById("collapseThirdRow"),
-        { toggle: false },
-      );
-      collapseThirdRow.show();
-      var collapseFourthRow = new bootstrap.Collapse(
-        document.getElementById("collapseFourthRow"),
-        { toggle: false },
-      );
-      collapseFourthRow.show();
-
       //Set tuning for fancy graphics mode (high/low CPU)
       //set_CPU_mode();
 
       //GUI will auto connect to TNC if already running, if that is the case increment start count if 0
       if (modemStartCount.value == 0) modemStartCount.value++;
-    } else {
-      // collapse settings screen
-      var collapseFirstRow = new bootstrap.Collapse(
-        document.getElementById("collapseFirstRow"),
-        { toggle: false },
-      );
-      collapseFirstRow.show();
-      var collapseSecondRow = new bootstrap.Collapse(
-        document.getElementById("collapseSecondRow"),
-        { toggle: false },
-      );
-      collapseSecondRow.show();
-      var collapseThirdRow = new bootstrap.Collapse(
-        document.getElementById("collapseThirdRow"),
-        { toggle: false },
-      );
-      collapseThirdRow.hide();
-      var collapseFourthRow = new bootstrap.Collapse(
-        document.getElementById("collapseFourthRow"),
-        { toggle: false },
-      );
-      collapseFourthRow.hide();
     }
   }