From 474d1d0bac78fe9269b72a297102cdddff8a7413 Mon Sep 17 00:00:00 2001
From: Mashintime <awh@brainless.us>
Date: Sun, 10 Dec 2023 02:05:12 -0500
Subject: [PATCH 1/4] Fix ping in grid broadcasts

---
 gui/src/components/grid/grid_active_broadcasts.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/gui/src/components/grid/grid_active_broadcasts.vue b/gui/src/components/grid/grid_active_broadcasts.vue
index 4e84454d..fa1f1ddc 100644
--- a/gui/src/components/grid/grid_active_broadcasts.vue
+++ b/gui/src/components/grid/grid_active_broadcasts.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-
+import {ref} from "vue";
 import { setActivePinia } from "pinia";
 import pinia from "../../store/index";
 setActivePinia(pinia);
@@ -12,7 +12,7 @@ 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() {
@@ -23,6 +23,7 @@ function startStopBeacon() {
     setModemBeacon(true);
   }
 }
+var dxcallPing = ref("");
 </script>
 <template>
   <div class="card h-100">
@@ -44,10 +45,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"

From 63cdd7759e06e57113e4e650d49318cffcb4264d Mon Sep 17 00:00:00 2001
From: Mashintime <awh@brainless.us>
Date: Sun, 10 Dec 2023 02:05:48 -0500
Subject: [PATCH 2/4] Validate callsign in ping api

---
 gui/src/js/api.js      | 11 ++++++++++-
 gui/src/js/freedata.ts | 33 ++++++++++++++++++++++++++++++++-
 2 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/gui/src/js/api.js b/gui/src/js/api.js
index 6d51a343..5d2a3671 100644
--- a/gui/src/js/api.js
+++ b/gui/src/js/api.js
@@ -1,4 +1,5 @@
 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,7 +73,15 @@ export function sendModemCQ() {
 }
 
 export function sendModemPing(dxcall) {
-  return apiPost("/modem/ping_ping", { dxcall: 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 });
+  
 }
 
 export function sendModemARQRaw(mycall, dxcall, data, uuid) {
diff --git a/gui/src/js/freedata.ts b/gui/src/js/freedata.ts
index 01bf11a5..007150e8 100644
--- a/gui/src/js/freedata.ts
+++ b/gui/src/js/freedata.ts
@@ -53,4 +53,35 @@ export function sortByPropertyDesc(property) {
 
     return 0;
   };
-}
\ No newline at end of file
+}
+
+/**
+ * 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;
+};
\ No newline at end of file

From 4f98929446963f748cc63777faeb1307203a1871 Mon Sep 17 00:00:00 2001
From: Mashintime <awh@brainless.us>
Date: Sun, 10 Dec 2023 03:00:39 -0500
Subject: [PATCH 3/4] More grid work

---
 gui/src/components/grid/grid_active_audio.vue |  4 +-
 .../grid/grid_active_broadcasts.vue           |  4 +-
 .../grid/grid_active_heard_stations.vue       |  6 +-
 .../grid/grid_active_heard_stations_mini.vue  |  7 +--
 .../grid/grid_active_rig_control.vue          |  4 +-
 gui/src/components/grid/grid_active_stats.vue | 59 ++++++++-----------
 gui/src/components/grid/grid_activities.vue   |  5 +-
 7 files changed, 41 insertions(+), 48 deletions(-)

diff --git a/gui/src/components/grid/grid_active_audio.vue b/gui/src/components/grid/grid_active_audio.vue
index 11491c12..5fe0bddc 100644
--- a/gui/src/components/grid/grid_active_audio.vue
+++ b/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">
diff --git a/gui/src/components/grid/grid_active_broadcasts.vue b/gui/src/components/grid/grid_active_broadcasts.vue
index fa1f1ddc..63d367dc 100644
--- a/gui/src/components/grid/grid_active_broadcasts.vue
+++ b/gui/src/components/grid/grid_active_broadcasts.vue
@@ -27,7 +27,7 @@ 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;
@@ -35,7 +35,7 @@ var dxcallPing = ref("");
         </div>
       </div>
     </div>
-    <div class="card-body overflow-auto">
+    <div class="card-body overflow-auto p-0">
       <div>
         <div >
           <div class="input-group input-group-sm mb-0">
diff --git a/gui/src/components/grid/grid_active_heard_stations.vue b/gui/src/components/grid/grid_active_heard_stations.vue
index 0c1d6d80..682b4d38 100644
--- a/gui/src/components/grid/grid_active_heard_stations.vue
+++ b/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">
-      <i class="bi bi-list-columns-reverse" style="font-size: 1rem"></i>&nbsp;
+    <div class="card-header p-0">
+      <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">
diff --git a/gui/src/components/grid/grid_active_heard_stations_mini.vue b/gui/src/components/grid/grid_active_heard_stations_mini.vue
index b7d6587d..068de91e 100644
--- a/gui/src/components/grid/grid_active_heard_stations_mini.vue
+++ b/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">
-      <i class="bi bi-list-columns-reverse" style="font-size: 1rem"></i>&nbsp;
+    <div class="card-header p-0">
+      <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">
diff --git a/gui/src/components/grid/grid_active_rig_control.vue b/gui/src/components/grid/grid_active_rig_control.vue
index 6c67f6b9..83217790 100644
--- a/gui/src/components/grid/grid_active_rig_control.vue
+++ b/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">
diff --git a/gui/src/components/grid/grid_active_stats.vue b/gui/src/components/grid/grid_active_stats.vue
index b9d4c2a2..bf771f2a 100644
--- a/gui/src/components/grid/grid_active_stats.vue
+++ b/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) {
-  switch (obj.delegateTarget.id) {
-    case "list-waterfall-list":
-      settings.local.spectrum = "waterfall";
+const localSpectrumView = ref("waterfall");
+function selectStatsControl(item) {
+  switch (item) {
+    case "wf":
+      localSpectrumView.value = "waterfall";
       break;
-    case "list-scatter-list":
-      settings.local.spectrum = "scatter";
+    case "scatter":
+      localSpectrumView.value = "scatter";
       break;
-    case "list-chart-list":
-      settings.local.spectrum = "chart";
+    case "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' }"
-            @click="selectStatsControl($event)"
+            v-bind:class="{ active: localSpectrumView == 'chart' }"
+            @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"
-          v-bind:class="{ 'show active': settings.local.spectrum === 'chart' }"
-          id="list-chart"
+          class="tab-pane fade h-100 w-100"
+          v-bind:class="{ 'show active': localSpectrumView == 'chart' }"
           role="tabpanel"
           aria-labelledby="list-chart-list"
         >
diff --git a/gui/src/components/grid/grid_activities.vue b/gui/src/components/grid/grid_activities.vue
index f27f7c87..0109d8fc 100644
--- a/gui/src/components/grid/grid_activities.vue
+++ b/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 }} -

From ac9c46680dfee2426a5e351bd80769f4021aa940 Mon Sep 17 00:00:00 2001
From: codefactor-io <support@codefactor.io>
Date: Sun, 10 Dec 2023 08:01:20 +0000
Subject: [PATCH 4/4] [CodeFactor] Apply fixes

---
 gui/src/components/grid/grid_active_audio.vue |  2 +-
 .../grid/grid_active_broadcasts.vue           | 13 +++---
 gui/src/components/grid/grid_active_stats.vue |  4 +-
 gui/src/js/api.js                             | 18 +++++----
 gui/src/js/freedata.ts                        | 40 ++++++++++++-------
 5 files changed, 46 insertions(+), 31 deletions(-)

diff --git a/gui/src/components/grid/grid_active_audio.vue b/gui/src/components/grid/grid_active_audio.vue
index 5fe0bddc..54878796 100644
--- a/gui/src/components/grid/grid_active_audio.vue
+++ b/gui/src/components/grid/grid_active_audio.vue
@@ -42,7 +42,7 @@ function startStopRecordAudio() {
         </ul>
       </div>
     </div>
-    <div class="card-body pt-0 pb-0 ">
+    <div class="card-body pt-0 pb-0">
       <div class="container-wide">
         <div class="row">
           <div class="col-lg-6">
diff --git a/gui/src/components/grid/grid_active_broadcasts.vue b/gui/src/components/grid/grid_active_broadcasts.vue
index 63d367dc..cb17f503 100644
--- a/gui/src/components/grid/grid_active_broadcasts.vue
+++ b/gui/src/components/grid/grid_active_broadcasts.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import {ref} from "vue";
+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);
@@ -18,8 +18,7 @@ function transmitPing() {
 function startStopBeacon() {
   if (state.beacon_state === true) {
     setModemBeacon(false);
-  }
-  else {
+  } else {
     setModemBeacon(true);
   }
 }
@@ -30,14 +29,14 @@ var dxcallPing = ref("");
     <div class="card-header p-0">
       <div>
         <div>
-            <i class="bi bi-broadcast" style="font-size: 1.2rem"></i>&nbsp;
-            <strong>Broadcasts</strong>
+          <i class="bi bi-broadcast" style="font-size: 1.2rem"></i>&nbsp;
+          <strong>Broadcasts</strong>
         </div>
       </div>
     </div>
     <div class="card-body overflow-auto p-0">
       <div>
-        <div >
+        <div>
           <div class="input-group input-group-sm mb-0">
             <input
               type="text"
diff --git a/gui/src/components/grid/grid_active_stats.vue b/gui/src/components/grid/grid_active_stats.vue
index bf771f2a..db9f49ad 100644
--- a/gui/src/components/grid/grid_active_stats.vue
+++ b/gui/src/components/grid/grid_active_stats.vue
@@ -1,8 +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 {ref, computed, onMounted } from "vue";
-import { initWaterfall,setColormap } 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);
diff --git a/gui/src/js/api.js b/gui/src/js/api.js
index 5d2a3671..27e9901e 100644
--- a/gui/src/js/api.js
+++ b/gui/src/js/api.js
@@ -1,5 +1,8 @@
 import { settingsStore as settings } from "../store/settingsStore.js";
-import { validateCallsignWithSSID,validateCallsignWithoutSSID } from "./freedata";
+import {
+  validateCallsignWithSSID,
+  validateCallsignWithoutSSID,
+} from "./freedata";
 
 function buildURL(params, endpoint) {
   const url = "http://" + params.host + ":" + params.port + endpoint;
@@ -73,15 +76,16 @@ export function sendModemCQ() {
 }
 
 export function sendModemPing(dxcall) {
-  if (validateCallsignWithSSID(dxcall) === false && validateCallsignWithoutSSID(dxcall) === true) {
-    dxcall=String(dxcall).toUpperCase().trim();
-    dxcall=dxcall+"-0";
-    
+  if (
+    validateCallsignWithSSID(dxcall) === false &&
+    validateCallsignWithoutSSID(dxcall) === true
+  ) {
+    dxcall = String(dxcall).toUpperCase().trim();
+    dxcall = dxcall + "-0";
   }
-  dxcall=String(dxcall).toUpperCase().trim();
+  dxcall = String(dxcall).toUpperCase().trim();
   if (validateCallsignWithSSID(dxcall))
     return apiPost("/modem/ping_ping", { dxcall: dxcall });
-  
 }
 
 export function sendModemARQRaw(mycall, dxcall, data, uuid) {
diff --git a/gui/src/js/freedata.ts b/gui/src/js/freedata.ts
index 007150e8..18e31f1a 100644
--- a/gui/src/js/freedata.ts
+++ b/gui/src/js/freedata.ts
@@ -60,28 +60,40 @@ export function sortByPropertyDesc(property) {
  * @param {string} callsign callsign to check
  * @returns true or false if callsign appears to be valid with an SSID
  */
-export function validateCallsignWithSSID(callsign :string) {
+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);
+
+  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) {
+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);
+
+  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;
-};
\ No newline at end of file
+}