From 092d4038b8a5261a726f0bbeada59dfcd8200f27 Mon Sep 17 00:00:00 2001
From: PiotrTopa <piotr.topa@gmail.com>
Date: Mon, 18 Jul 2022 23:22:46 +0200
Subject: [PATCH] Callsign / frequency selection events.

---
 webapp/chat-message.mjs         |  5 +++--
 webapp/chat-rx-header-icons.mjs |  9 +++++----
 webapp/chat-rx-message.mjs      |  4 +++-
 webapp/chat-rx-packet.mjs       |  3 ++-
 webapp/chat-window.mjs          | 10 ++++++++--
 webapp/chat.mjs                 |  5 +++--
 webapp/style.css                | 10 ++++++++++
 7 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/webapp/chat-message.mjs b/webapp/chat-message.mjs
index bc5113b..73b7a39 100644
--- a/webapp/chat-message.mjs
+++ b/webapp/chat-message.mjs
@@ -3,6 +3,7 @@ import ChatRxMessage from './chat-rx-message.mjs'
 
 export default {
     props: ['message', 'showRawPackets'],
+    emits: ['callsignSelected', 'frequencySelected'],
     components: {
         ChatRxPacket,
         ChatRxMessage,
@@ -10,7 +11,7 @@ export default {
     methods: {
     },
     template: `
-        <ChatRxPacket v-if="showRawPackets && message.Type === 'RX.ACTIVITY'" :message=message />
-        <ChatRxMessage v-if="message.Type === 'RX.DIRECTED'" :message=message />
+        <ChatRxPacket v-if="showRawPackets && message.Type === 'RX.ACTIVITY'" :message=message @frequencySelected="e => $emit('frequencySelected', e)" />
+        <ChatRxMessage @callsignSelected="e => $emit('callsignSelected', e)" @frequencySelected="e => $emit('frequencySelected', e)" v-if="message.Type === 'RX.DIRECTED'" :message=message />
     `
 }
\ No newline at end of file
diff --git a/webapp/chat-rx-header-icons.mjs b/webapp/chat-rx-header-icons.mjs
index bad7b39..d9e15c4 100644
--- a/webapp/chat-rx-header-icons.mjs
+++ b/webapp/chat-rx-header-icons.mjs
@@ -10,6 +10,7 @@ var SNR_COLOR_3 = {
 
 export default {
     props: ['message'],
+    emits: ['frequencySelected'],
     components: {
     },
     methods: {
@@ -41,10 +42,10 @@ export default {
     },
     template: `
         <span class="gauges">
-            <span class="gauge snr"><i class="bi bi-speedometer2"></i><span :style="'color: ' + snrColor(message.Snr)">{{ message.Snr > 0 ? '+' : '' }}{{ message.Snr }}</span></span>
-            <span class="gauge freq"><i class="bi bi-broadcast-pin"></i>{{ message.Offset }}Hz</span>
-            <span class="gauge speed"><i class="bi bi-skip-end"></i><span :class="message.Speed">{{ message.Speed[0].toUpperCase() }}</span></span>
-            <span class="gauge timedritft"><i class="bi bi-stopwatch"></i>{{ message.TimeDrift > 0 ? '+' : '' }}{{ message.TimeDrift }}ms</span>
+            <span class="gauge freq"><a class="btn btn-light btn-sm" href="#" @click="$emit('frequencySelected', message.Freq)"><i class="bi bi-broadcast-pin"></i> {{ message.Offset }}Hz</a></span>
+            <span class="gauge snr"><i class="bi bi-speedometer2"></i><span :style="'color: ' + snrColor(message.Snr)">{{ message.Snr > 0 ? '+' : '' }} {{ message.Snr }}</span></span>
+            <span class="gauge speed"><i class="bi bi-skip-end"></i><span :class="message.Speed"> {{ message.Speed[0].toUpperCase() }}</span></span>
+            <span class="gauge timedritft"><i class="bi bi-stopwatch"></i> {{ message.TimeDrift > 0 ? '+' : '' }}{{ message.TimeDrift }}ms</span>
         </span>
     `
 }
diff --git a/webapp/chat-rx-message.mjs b/webapp/chat-rx-message.mjs
index 8d0cb71..1331d91 100644
--- a/webapp/chat-rx-message.mjs
+++ b/webapp/chat-rx-message.mjs
@@ -2,6 +2,7 @@ import ChatRxHeaderIcons from './chat-rx-header-icons.mjs'
 
 export default {
     props: ['message'],
+    emits: ['callsignSelected', 'frequencySelected'],
     components: {
         ChatRxHeaderIcons
     },
@@ -19,10 +20,11 @@ export default {
         <li class="clearfix message my-message">
             <div class="header">
                 <span class="time">{{ new Date(message.Timestamp).toLocaleString() }}</span>
-                <ChatRxHeaderIcons :message=message />
+                <ChatRxHeaderIcons :message=message @frequencySelected="e => $emit('frequencySelected', e)" />
                 <br />
 
                 <span class="from">{{ message.From }}</span>
+                <a class="btn btn-light btn-sm" @click="$emit('callsignSelected', message.From)"><i class="bi bi-search"></i></a>
                 <span class="grid" v-if=message.Grid><i class="bi bi-globe"></i>{{ message.Grid }}</span>
             </div>
             <div class="content">{{ getMessageText(message) }}</div>
diff --git a/webapp/chat-rx-packet.mjs b/webapp/chat-rx-packet.mjs
index 1118e03..97576b6 100644
--- a/webapp/chat-rx-packet.mjs
+++ b/webapp/chat-rx-packet.mjs
@@ -2,6 +2,7 @@ import ChatRxHeaderIcons from './chat-rx-header-icons.mjs'
 
 export default {
     props: ['message'],
+    emits: ['frequencySelected'],
     components: {
         ChatRxHeaderIcons
     },
@@ -11,7 +12,7 @@ export default {
         <li class="clearfix packet">
             <div class="header">
                 <span class="time">{{ new Date(message.Timestamp).toLocaleTimeString() }}</span>
-                <ChatRxHeaderIcons :message=message />
+                <ChatRxHeaderIcons :message=message @frequencySelected="e => $emit('frequencySelected', e)" />
             </div>
             <br />
             <div class="content">{{ message.Text }}</div>
diff --git a/webapp/chat-window.mjs b/webapp/chat-window.mjs
index d971b51..fbff8b4 100644
--- a/webapp/chat-window.mjs
+++ b/webapp/chat-window.mjs
@@ -30,7 +30,7 @@ export default {
             uid: uidGenerator(),
             settingsShowRawPackets: true,
         }
-        
+
     },
     methods: {
         activateTab(selected) {
@@ -39,6 +39,12 @@ export default {
         closeTab(id) {
             this.chats = this.chats.filter(e => e.id != id)
         },
+        callsignSelected(callsign) {
+            console.log('callsign-select', callsign)
+        },
+        frequencySelected(frequency) {
+            console.log('frequency-selected', frequency)
+        },
     },
     template: `
     <ul class="nav nav-tabs">
@@ -55,7 +61,7 @@ export default {
         </li>
     </ul>
     <template v-for="chat in chats">
-        <Chat v-show="activeTab == chat.id" :filter="chat.filter" :showRawPackets="this.settingsShowRawPackets" />
+        <Chat v-show="activeTab == chat.id" :filter="chat.filter" :showRawPackets="this.settingsShowRawPackets" @callsignSelected="this.callsignSelected" @frequencySelected="this.frequencySelected" />
     </template>
     <div v-show="activeTab == 'settings'">
         <div class="row">
diff --git a/webapp/chat.mjs b/webapp/chat.mjs
index fd0f45d..78cfcb3 100644
--- a/webapp/chat.mjs
+++ b/webapp/chat.mjs
@@ -4,11 +4,12 @@ const EXPECTED_MESSAGES_COUNT = 100
 
 export default {
     props: ['filter', 'showRawPackets'],
+    emits: ['callsignSelected', 'frequencySelected'],
     components: {
         ChatMessage,
     },
     created() {
-        this.fetchNewestMessages().then(messages => {
+        this.fetchNewestMessages().then(messages => {   
             this.messages = messages
             this.atBottom = true;
             this.$nextTick(_ => {
@@ -130,7 +131,7 @@ export default {
             <div class="history-top" v-if="atTop">(No more messages)</div>
             <div class="loader" v-if="loadingBefore">LOADING</div>
             <ul class="m-b-0">
-                <ChatMessage v-for="message in messages" :key=message.Id :message=message :showRawPackets=showRawPackets />
+                <ChatMessage v-for="message in messages" :key=message.Id :message=message :showRawPackets=showRawPackets @callsignSelected="e => $emit('callsignSelected', e)" @frequencySelected="e => $emit('frequencySelected', e)" />
             </ul>
             <div class="loader" v-if="loadingAfter">LOADING</div>
             <div class="history-bottom" v-if="atBottom"><i class="bi bi-broadcast"></i> receiving <i class="bi bi-broadcast"></i></div>
diff --git a/webapp/style.css b/webapp/style.css
index 0d93904..dcf32d1 100644
--- a/webapp/style.css
+++ b/webapp/style.css
@@ -97,6 +97,16 @@
     margin-left: 0.5em;
 }
 
+.chat .chat-history .packet .header .gauges .gauge .btn {
+    font-size: 1em!important;
+    color: #434651;
+}
+
+.chat .chat-history .message .header .gauges .gauge .btn {
+    font-size: 1em!important;
+    color: #434651;
+}
+
 .chat .chat-history .message {
     clear: both;
 }