Clicking a heard station populates ping textboxs

gui/src/components/grid/grid_active_broadcasts.vue

@@ -21,6 +21,14 @@ function startStopBeacon() {
   }
 }
 var dxcallPing = ref("");
+window.addEventListener(
+      "stationSelected",
+      function (eventdata) {
+        let evt = <CustomEvent>eventdata;
+        dxcallPing.value = evt.detail;
+      },
+      false,
+    );
 </script>
 <template>
   <div class="card h-100">

gui/src/components/grid/grid_active_broadcasts_vert.vue

@@ -21,6 +21,14 @@ function startStopBeacon() {
   }
 }
 var dxcallPing = ref("");
+window.addEventListener(
+      "stationSelected",
+      function (eventdata) {
+        let evt = <CustomEvent>eventdata;
+        dxcallPing.value = evt.detail;
+      },
+      false,
+    );
 </script>
 <template>
   <div class="card h-100">

gui/src/components/grid/grid_active_heard_stations.vue

@@ -34,6 +34,10 @@ function getMaidenheadDistance(dxGrid) {
     //
   }
 }
+function pushToPing(origin)
+{
+   window.dispatchEvent(new CustomEvent("stationSelected", {bubbles:true, detail: origin }));
+}
 </script>
 <template>
   <div class="card h-100">
@@ -61,7 +65,7 @@ function getMaidenheadDistance(dxGrid) {
           </thead>
           <tbody id="gridHeardStations">
             <!--https://vuejs.org/guide/essentials/list.html-->
-            <tr v-for="item in state.heard_stations" :key="item.origin">
+            <tr v-for="item in state.heard_stations" :key="item.origin" @click="pushToPing(item.origin)">
               <td>
                 {{ getDateTime(item.timestamp) }}
               </td>

gui/src/components/grid/grid_active_heard_stations_mini.vue

@@ -34,6 +34,10 @@ function getMaidenheadDistance(dxGrid) {
     //
   }
 }
+function pushToPing(origin)
+{
+   window.dispatchEvent(new CustomEvent("stationSelected", {bubbles:true, detail: origin }));
+}
 </script>
 <template>
   <div class="card h-100">
@@ -54,7 +58,7 @@ function getMaidenheadDistance(dxGrid) {
           </thead>
           <tbody id="miniHeardStations">
             <!--https://vuejs.org/guide/essentials/list.html-->
-            <tr v-for="item in state.heard_stations" :key="item.origin">
+            <tr v-for="item in state.heard_stations" :key="item.origin"  @click="pushToPing(item.origin)">
               <td>
                 <span class="fs-6">{{ getDateTime(item.timestamp) }}</span>
               </td>

gui/src/components/grid/grid_ping.vue

@@ -12,6 +12,15 @@ function transmitPing() {
   sendModemPing(dxcallPing.value.toUpperCase());
 }
 var dxcallPing = ref("");
+
+window.addEventListener(
+      "stationSelected",
+      function (eventdata) {
+        let evt = <CustomEvent>eventdata;
+        dxcallPing.value = evt.detail;
+      },
+      false,
+    );
 </script>
 <template>
   <div class="input-group" style="width: calc(100% - 24px)">