Merge remote-tracking branch 'origin/develop' into develop

gui/src/components/grid/grid_active_audio.vue

@@ -14,7 +14,7 @@ function startStopRecordAudio() {
 </script>
 <template>
   <div class="card w-100 h-100">
-    <div class="card-header">
+    <div class="card-header p-0">
       <div class="dropdown">
         <button
           class="btn btn-sm btn-outline-secondary dropdown-toggle"
@@ -42,7 +42,7 @@ function startStopRecordAudio() {
         </ul>
       </div>
     </div>
-    <div class="card-body">
+    <div class="card-body pt-0 pb-0">
       <div class="container-wide">
         <div class="row">
           <div class="col-lg-6">

gui/src/components/grid/grid_active_broadcasts.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-
+import { ref } from "vue";
 import { setActivePinia } from "pinia";
 import pinia from "../../store/index";
 setActivePinia(pinia);
 
-import { settingsStore as settings} from "../../store/settingsStore.js";
+import { settingsStore as settings } from "../../store/settingsStore.js";
 
 import { useStateStore } from "../../store/stateStore.js";
 const state = useStateStore(pinia);
@@ -12,21 +12,21 @@ const state = useStateStore(pinia);
 import { sendModemCQ, sendModemPing, setModemBeacon } from "../../js/api.js";
 
 function transmitPing() {
-  sendModemPing((<HTMLInputElement>document.getElementById("dxCall")).value);
+  sendModemPing(dxcallPing.value.toUpperCase());
 }
 
 function startStopBeacon() {
   if (state.beacon_state === true) {
     setModemBeacon(false);
-  }
+  } else {
-  else {
     setModemBeacon(true);
   }
 }
+var dxcallPing = ref("");
 </script>
 <template>
   <div class="card h-100">
-    <div class="card-header">
+    <div class="card-header p-0">
       <div>
         <div>
           <i class="bi bi-broadcast" style="font-size: 1.2rem"></i>&nbsp;
@@ -34,9 +34,9 @@ function startStopBeacon() {
         </div>
       </div>
     </div>
-    <div class="card-body overflow-auto">
+    <div class="card-body overflow-auto p-0">
+      <div>
         <div>
-        <div >
           <div class="input-group input-group-sm mb-0">
             <input
               type="text"
@@ -44,10 +44,10 @@ function startStopBeacon() {
               style="max-width: 6rem; text-transform: uppercase"
               placeholder="DXcall"
               pattern="[A-Z]*"
-              id="dxCall"
               maxlength="11"
               aria-label="Input group"
               aria-describedby="btnGroupAddon"
+              v-model="dxcallPing"
             />
             <button
               class="btn btn-sm btn-outline-secondary ms-1"

gui/src/components/grid/grid_active_heard_stations.vue

@@ -38,12 +38,12 @@ function getMaidenheadDistance(dxGrid) {
 <template>
   <div class="card h-100">
     <!--325px-->
-    <div class="card-header">
+    <div class="card-header p-0">
-      <i class="bi bi-list-columns-reverse" style="font-size: 1rem"></i>&nbsp;
+      <i class="bi bi-list-columns-reverse" style="font-size: 1.2rem"></i>&nbsp;
       <strong>Heard stations</strong>
     </div>
 
-    <div class="card-body overflow-auto">
+    <div class="card-body overflow-auto p-0">
       <div class="table-responsive">
         <!-- START OF TABLE FOR HEARD STATIONS -->
         <table class="table table-sm table-striped" id="tblHeardStationList">

gui/src/components/grid/grid_active_heard_stations_mini.vue

@@ -37,13 +37,12 @@ function getMaidenheadDistance(dxGrid) {
 </script>
 <template>
   <div class="card h-100">
-    <!--325px-->
+    <div class="card-header p-0">
-    <div class="card-header">
+      <i class="bi bi-list-columns-reverse" style="font-size: 1.2rem"></i>&nbsp;
-      <i class="bi bi-list-columns-reverse" style="font-size: 1rem"></i>&nbsp;
       <strong>Heard stations</strong>
     </div>
 
-    <div class="card-body overflow-auto">
+    <div class="card-body overflow-auto p-0">
       <div class="table-responsive">
         <!-- START OF TABLE FOR HEARD STATIONS -->
         <table class="table table-sm table-striped" id="tblHeardStationList">

gui/src/components/grid/grid_active_rig_control.vue

@@ -26,12 +26,12 @@ function set_hamlib_rf_level() {
 
 <template>
   <div class="card h-100">
-    <div class="card-header">
+    <div class="card-header p-0">
       <i class="bi bi-house-door" style="font-size: 1.2rem"></i>&nbsp;
       <strong>Radio control</strong>
     </div>
 
-    <div class="card-body overflow-auto">
+    <div class="card-body overflow-auto p-0">
       <div class="input-group input-group-sm bottom-0 m-0">
         <div class="me-2">
           <div class="input-group input-group-sm">

gui/src/components/grid/grid_active_stats.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 // @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 { initWaterfall } from "../../js/waterfallHandler.js";
+import { ref, computed, onMounted } from "vue";
+import { initWaterfall, setColormap } from "../../js/waterfallHandler.js";
 import { setActivePinia } from "pinia";
 import pinia from "../../store/index";
 setActivePinia(pinia);
@@ -22,21 +23,21 @@ import {
   Legend,
 } from "chart.js";
 import { Line, Scatter } from "vue-chartjs";
-import { computed, onMounted } from "vue";
 
-function selectStatsControl(obj) {
+const localSpectrumView = ref("waterfall");
-  switch (obj.delegateTarget.id) {
+function selectStatsControl(item) {
-    case "list-waterfall-list":
+  switch (item) {
-      settings.local.spectrum = "waterfall";
+    case "wf":
+      localSpectrumView.value = "waterfall";
       break;
-    case "list-scatter-list":
+    case "scatter":
-      settings.local.spectrum = "scatter";
+      localSpectrumView.value = "scatter";
       break;
-    case "list-chart-list":
+    case "chart":
-      settings.local.spectrum = "chart";
+      localSpectrumView.value = "chart";
       break;
     default:
-      settings.local.spectrum = "waterfall";
+      localSpectrumView.value = "waterfall";
   }
   //saveSettingsToFile();
 }
@@ -181,12 +182,13 @@ onMounted(() => {
     },
     false,
   );
+  setColormap(settings.local.wf_theme.valueOf);
 });
 </script>
 
 <template>
   <div class="card h-100">
-    <div class="card-header">
+    <div class="card-header p-1">
       <div class="btn-group" role="group">
         <div
           class="list-group bg-body-tertiary list-group-horizontal"
@@ -195,39 +197,33 @@ onMounted(() => {
         >
           <a
             class="py-0 list-group-item list-group-item-dark list-group-item-action"
-            id="list-waterfall-list"
             data-bs-toggle="list"
-            href="#list-waterfall"
             role="tab"
             aria-controls="list-waterfall"
             v-bind:class="{
-              active: settings.local.spectrum === 'waterfall',
+              active: localSpectrumView == 'waterfall',
             }"
-            @click="selectStatsControl($event)"
+            @click="selectStatsControl('wf')"
             ><strong><i class="bi bi-water"></i></strong
           ></a>
           <a
             class="py-0 list-group-item list-group-item-dark list-group-item-action"
-            id="list-scatter-list"
             data-bs-toggle="list"
-            href="#list-scatter"
             role="tab"
             aria-controls="list-scatter"
             v-bind:class="{
-              active: settings.local.spectrum === 'scatter',
+              active: localSpectrumView == 'scatter',
             }"
-            @click="selectStatsControl($event)"
+            @click="selectStatsControl('scatter')"
             ><strong><i class="bi bi-border-outer"></i></strong
           ></a>
           <a
             class="py-0 list-group-item list-group-item-dark list-group-item-action"
-            id="list-chart-list"
             data-bs-toggle="list"
-            href="#list-chart"
             role="tab"
             aria-controls="list-chart"
-            v-bind:class="{ active: settings.local.spectrum === 'chart' }"
+            v-bind:class="{ active: localSpectrumView == 'chart' }"
-            @click="selectStatsControl($event)"
+            @click="selectStatsControl('chart')"
             ><strong><i class="bi bi-graph-up-arrow"></i></strong
           ></a>
         </div>
@@ -330,34 +326,31 @@ onMounted(() => {
         </button>
       </div>
     </div>
-    <div class="card-body w-100 h-100 overflow-auto">
+    <div class="card-body w-100 h-100 overflow-auto p-2">
       <div class="tab-content h-100 w-100" id="nav-stats-tabContent">
         <div
           class="tab-pane fade h-100 w-100"
           v-bind:class="{
-            'show active': settings.local.spectrum === 'waterfall',
+            'show active': localSpectrumView == 'waterfall',
           }"
-          id="list-waterfall"
           role="stats_tabpanel"
           aria-labelledby="list-waterfall-list"
         >
           <canvas id="waterfall-grid" class="force-gpu"></canvas>
         </div>
         <div
-          class="tab-pane fade"
+          class="tab-pane fade h-100 w-100"
           v-bind:class="{
-            'show active': settings.local.spectrum === 'scatter',
+            'show active': localSpectrumView == 'scatter',
           }"
-          id="list-scatter"
           role="tabpanel"
           aria-labelledby="list-scatter-list"
         >
           <Scatter :data="scatterChartData" :options="scatterChartOptions" />
         </div>
         <div
-          class="tab-pane fade"
+          class="tab-pane fade h-100 w-100"
-          v-bind:class="{ 'show active': settings.local.spectrum === 'chart' }"
+          v-bind:class="{ 'show active': localSpectrumView == 'chart' }"
-          id="list-chart"
           role="tabpanel"
           aria-labelledby="list-chart-list"
         >

gui/src/components/grid/grid_activities.vue

@@ -24,10 +24,11 @@ function getDateTime(timestampRaw) {
 </script>
 <template>
   <div class="card h-100">
-    <div class="card-header">
+    <div class="card-header p-0">
+      <i class="bi bi-card-list" style="font-size: 1.2rem"></i>&nbsp;
       <strong>Activity</strong>
     </div>
-    <div class="card-body overflow-auto" style="align-items: start">
+    <div class="card-body overflow-auto m-0 p-0" style="align-items: start">
       <div v-for="item in state.activities" :key="item[0]">
         <h6 style="text-align: start" class="mb-0">
           {{ item[1].origin }} -

gui/src/js/api.js

@@ -1,4 +1,8 @@
 import { settingsStore as settings } from "../store/settingsStore.js";
+import {
+  validateCallsignWithSSID,
+  validateCallsignWithoutSSID,
+} from "./freedata";
 
 function buildURL(params, endpoint) {
   const url = "http://" + params.host + ":" + params.port + endpoint;
@@ -72,6 +76,15 @@ export function sendModemCQ() {
 }
 
 export function sendModemPing(dxcall) {
+  if (
+    validateCallsignWithSSID(dxcall) === false &&
+    validateCallsignWithoutSSID(dxcall) === true
+  ) {
+    dxcall = String(dxcall).toUpperCase().trim();
+    dxcall = dxcall + "-0";
+  }
+  dxcall = String(dxcall).toUpperCase().trim();
+  if (validateCallsignWithSSID(dxcall))
     return apiPost("/modem/ping_ping", { dxcall: dxcall });
 }
 

gui/src/js/freedata.ts

@@ -54,3 +54,46 @@ export function sortByPropertyDesc(property) {
     return 0;
   };
 }
+
+/**
+ * Validate a call sign with ssid
+ * @param {string} callsign callsign to check
+ * @returns true or false if callsign appears to be valid with an SSID
+ */
+export function validateCallsignWithSSID(callsign: string) {
+  var patt = new RegExp("^[A-Z,a-z]+[0-9][A-Z,a-z]*-(1[0-5]|[0-9])$");
+
+  if (
+    callsign === undefined ||
+    callsign === "" ||
+    patt.test(callsign) === false
+  ) {
+    console.error(
+      "Call sign given is not in correct format or missing; callsign passed is:  " +
+        callsign,
+    );
+    return false;
+  }
+  return true;
+}
+/**
+ * Validate/check if a call sign has an SSID
+ * @param {string} callsign callsign to check
+ * @returns true or false if callsign appears to be valid without an SSID
+ */
+export function validateCallsignWithoutSSID(callsign: string) {
+  var patt = new RegExp("^[A-Za-z]+[0-9][A-Za-z]+$");
+
+  if (
+    callsign === undefined ||
+    callsign === "" ||
+    patt.test(callsign) === false
+  ) {
+    console.error(
+      "Call sign given is not in correct format or missing; callsign passed is:  " +
+        callsign,
+    );
+    return false;
+  }
+  return true;
+}