From c1852a4d5fb440d06a80c36cffbb5b2b79b0c928 Mon Sep 17 00:00:00 2001
From: Mashintime <awh@brainless.us>
Date: Sun, 3 Dec 2023 13:01:46 -0500
Subject: [PATCH] Grid HSL updates/testing

---
 .../components/grid_active_heard_stations.vue | 20 ++++++++---------
 .../grid_active_heard_stations_mini.vue       | 22 ++++++++-----------
 2 files changed, 19 insertions(+), 23 deletions(-)

diff --git a/gui/src/components/grid_active_heard_stations.vue b/gui/src/components/grid_active_heard_stations.vue
index 7d523a64..191ff332 100644
--- a/gui/src/components/grid_active_heard_stations.vue
+++ b/gui/src/components/grid_active_heard_stations.vue
@@ -29,7 +29,7 @@ function getDateTime(timestampRaw) {
 
 function getMaidenheadDistance(dxGrid) {
   try {
-    return parseInt(distance(settings.mygrid, dxGrid));
+    return parseInt(distance(settings.remote.STATION.mygrid, dxGrid));
   } catch (e) {
     //
   }
@@ -43,7 +43,7 @@ function getMaidenheadDistance(dxGrid) {
       <strong>Heard stations</strong>
     </div>
 
-    <div class="card-body">
+    <div class="card-body overflow-auto">
       <div class="table-responsive">
         <!-- START OF TABLE FOR HEARD STATIONS -->
         <table class="table table-sm" id="tblHeardStationList">
@@ -61,33 +61,33 @@ function getMaidenheadDistance(dxGrid) {
           </thead>
           <tbody id="gridHeardStations">
             <!--https://vuejs.org/guide/essentials/list.html-->
-            <tr v-for="item in state.heard_stations" :key="item.timestamp">
+            <tr v-for="item in state.activities" :key="item[0]">
               <td>
                 <span class="badge bg-secondary">{{
-                  getDateTime(item.timestamp)
+                  getDateTime(item[1].timestamp)
                 }}</span>
               </td>
               <td>
                 <span class="badge bg-secondary"
-                  >{{ item.frequency / 1000 }} kHz</span
+                  >{{ item[1].frequency / 1000 }} kHz</span
                 >
               </td>
               <td>
-                <span class="badge bg-secondary">{{ item.dxcallsign }}</span>
+                <span class="badge bg-secondary">{{ item[1].origin }}</span>
               </td>
               <td>
-                <span class="badge bg-secondary">{{ item.dxgrid }}</span>
+                <span class="badge bg-secondary">{{ item[1].gridsquare }}</span>
               </td>
               <td>
                 <span class="badge bg-secondary"
-                  >{{ getMaidenheadDistance(item.dxgrid) }} km</span
+                  >{{ getMaidenheadDistance(item[1].gridsquare) }} km</span
                 >
               </td>
               <td>
-                <span class="badge bg-secondary">{{ item.datatype }}</span>
+                <span class="badge bg-secondary">{{ item[1].activity_type }}</span>
               </td>
               <td>
-                <span class="badge bg-secondary">{{ item.snr }}</span>
+                <span class="badge bg-secondary">{{ item[1].snr }}</span>
               </td>
             </tr>
           </tbody>
diff --git a/gui/src/components/grid_active_heard_stations_mini.vue b/gui/src/components/grid_active_heard_stations_mini.vue
index 7392efe1..07b3f624 100644
--- a/gui/src/components/grid_active_heard_stations_mini.vue
+++ b/gui/src/components/grid_active_heard_stations_mini.vue
@@ -16,7 +16,7 @@ function getDateTime(timestampRaw) {
     navigator.language,
     {
       hourCycle: "h23",
-      year: "numeric",
+     
       month: "2-digit",
       day: "2-digit",
       hour: "2-digit",
@@ -29,7 +29,7 @@ function getDateTime(timestampRaw) {
 
 function getMaidenheadDistance(dxGrid) {
   try {
-    return parseInt(distance(settings.mygrid, dxGrid));
+    return parseInt(distance(settings.remote.STATION.mygrid, dxGrid));
   } catch (e) {
     //
   }
@@ -43,7 +43,7 @@ function getMaidenheadDistance(dxGrid) {
       <strong>Heard stations</strong>
     </div>
 
-    <div class="card-body">
+    <div class="card-body overflow-auto">
       <div class="table-responsive">
         <!-- START OF TABLE FOR HEARD STATIONS -->
         <table class="table table-sm" id="tblHeardStationList">
@@ -51,29 +51,25 @@ function getMaidenheadDistance(dxGrid) {
             <tr>
               <th scope="col" id="thTime">Time</th>
               <th scope="col" id="thDxcall">DXCall</th>
-              <th scope="col" id="thDxgrid">Grid</th>
+ 
               <th scope="col" id="thSnr">SNR</th>
               <!--<th scope="col">Off</th>-->
             </tr>
           </thead>
           <tbody id="miniHeardStations">
             <!--https://vuejs.org/guide/essentials/list.html-->
-            <tr v-for="item in state.heard_stations" :key="item.timestamp">
+            <tr v-for="item in state.activities" :key="item[0]">
               <td>
-                <span class="badge bg-secondary">{{
-                  getDateTime(item.timestamp)
+                <span class="fs-6">{{
+                  getDateTime(item[1].timestamp)
                 }}</span>
               </td>
 
               <td>
-                <span class="badge bg-secondary">{{ item.dxcallsign }}</span>
+                <span >{{ item[1].origin }}</span>
               </td>
               <td>
-                <span class="badge bg-secondary">{{ item.dxgrid }}</span>
-              </td>
-              >
-              <td>
-                <span class="badge bg-secondary">{{ item.snr }}</span>
+                <span>{{ item[1].snr }}</span>
               </td>
               <!--<td>{{ item.offset }}</td>-->
             </tr>