From f1b3e2937de6b75b92e27d7104e76fe8d843322b Mon Sep 17 00:00:00 2001
From: DJ2LS <dj2ls@proton.me>
Date: Tue, 12 Sep 2023 14:10:19 +0200
Subject: [PATCH] fixed heard stations

---
 .../components/main_active_heard_stations.vue | 35 +++++++++++++++++--
 1 file changed, 33 insertions(+), 2 deletions(-)

diff --git a/gui_vue/src/components/main_active_heard_stations.vue b/gui_vue/src/components/main_active_heard_stations.vue
index 2b2bf4f0..832efd8e 100644
--- a/gui_vue/src/components/main_active_heard_stations.vue
+++ b/gui_vue/src/components/main_active_heard_stations.vue
@@ -1,5 +1,14 @@
 <script setup lang="ts">
 
+const {
+  locatorToLatLng,
+  distance,
+  bearingDistance,
+  latLngToLocator,
+} = require("qth-locator");
+
+
+
 import {saveSettingsToFile} from '../js/settingsHandler'
 
 import { setActivePinia } from 'pinia';
@@ -12,6 +21,28 @@ const settings = useSettingsStore(pinia);
 import { useStateStore } from '../store/stateStore.js';
 const state = useStateStore(pinia);
 
+
+function getDateTime(timestampRaw){
+    var datetime = new Date(timestampRaw * 1000).toLocaleString(
+          navigator.language,
+          {
+            hourCycle: "h23",
+            year: "numeric",
+            month: "2-digit",
+            day: "2-digit",
+            hour: "2-digit",
+            minute: "2-digit",
+            second: "2-digit",
+          },
+        );
+return datetime
+}
+
+function getMaidenheadDistance(dxGrid){
+    return parseInt(distance(settings.mygrid, dxGrid));
+}
+
+
 </script>
 <template>
 
@@ -68,12 +99,12 @@ const state = useStateStore(pinia);
                     <tbody id="heardstations">
                     <!--https://vuejs.org/guide/essentials/list.html-->
                      <tr v-for="item in state.heard_stations" :key="item.timestamp">
-                        <td>{{ item.timestamp }}</td>
+                        <td>{{ getDateTime(item.timestamp) }}</td>
                         <td>{{ item.frequency }}</td>
                         <td>&nbsp;</td>
                         <td>{{ item.dxcallsign }}</td>
                         <td>{{ item.dxgrid }}</td>
-                        <td>{{ item.distance }}</td>
+                        <td>{{ getMaidenheadDistance(item.dxgrid)}} km</td>
                         <td>{{ item.datatype }}</td>
                         <td>{{ item.snr }}</td>
                         <!--<td>{{ item.offset }}</td>-->