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] 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 }} -