From bdc9ddf50bc22664acced9f0636d30cc29f64d31 Mon Sep 17 00:00:00 2001
From: DJ2LS <dj2ls@proton.me>
Date: Sat, 14 Oct 2023 15:32:30 +0200
Subject: [PATCH] show message info

---
 gui_vue/package.json                          |  2 +-
 gui_vue/src/components/chat_conversations.vue |  2 -
 gui_vue/src/components/chat_messages_sent.vue | 31 ++++++++
 gui_vue/src/components/main_modals.vue        | 70 +++++++++++++++++++
 gui_vue/src/js/chatHandler.js                 | 42 +++++++++++
 gui_vue/src/js/waterfallHandler.js            |  2 +-
 gui_vue/src/store/chatStore.js                | 27 +++++++
 7 files changed, 172 insertions(+), 4 deletions(-)

diff --git a/gui_vue/package.json b/gui_vue/package.json
index db33307a..8c7ce070 100644
--- a/gui_vue/package.json
+++ b/gui_vue/package.json
@@ -59,7 +59,7 @@
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^6.7.4",
     "@vitejs/plugin-vue": "^4.4.0",
-    "electron": "^26.0.0",
+    "electron": "^27.0.0",
     "electron-builder": "^24.6.3",
     "eslint": "^8.50.0",
     "eslint-config-prettier": "^9.0.0",
diff --git a/gui_vue/src/components/chat_conversations.vue b/gui_vue/src/components/chat_conversations.vue
index 6fff4759..382844a0 100644
--- a/gui_vue/src/components/chat_conversations.vue
+++ b/gui_vue/src/components/chat_conversations.vue
@@ -44,8 +44,6 @@ function chatSelected(callsign) {
     chat.beaconLabelArray = [];
     chat.beaconDataArray = [];
   }
-
-  console.log(chat.beaconDataArray);
 }
 </script>
 <template>
diff --git a/gui_vue/src/components/chat_messages_sent.vue b/gui_vue/src/components/chat_messages_sent.vue
index f663ef2f..844e178d 100644
--- a/gui_vue/src/components/chat_messages_sent.vue
+++ b/gui_vue/src/components/chat_messages_sent.vue
@@ -8,6 +8,16 @@
       >
         <i class="bi bi-arrow-repeat"></i>
       </button>
+
+      <button
+        class="btn btn-outline-secondary border-0 me-1"
+        @click="showMessageInfo"
+        data-bs-target="#messageInfoModal"
+        data-bs-toggle="modal"
+      >
+        <i class="bi bi-info-circle"></i>
+      </button>
+
       <button class="btn btn-outline-secondary border-0" @click="deleteMessage">
         <i class="bi bi-trash"></i>
       </button>
@@ -53,18 +63,32 @@
       </div>
     </div>
   </div>
+
+
+
+
+
 </template>
 
+
 <script>
+
+import { Modal } from "bootstrap";
+import { onMounted, ref } from "vue";
+
 import {
   repeatMessageTransmission,
   deleteMessageFromDB,
+  requestMessageInfo,
 } from "../js/chatHandler";
 
 export default {
   props: {
     message: Object,
   },
+
+
+
   computed: {
     getFileContent() {
       var filename = Object.keys(this.message._attachments)[0];
@@ -99,6 +123,13 @@ export default {
     deleteMessage() {
       deleteMessageFromDB(this.message._id);
     },
+    showMessageInfo() {
+    requestMessageInfo(this.message._id);
+    //let infoModal = Modal.getOrCreateInstance(document.getElementById('messageInfoModal'))
+    //console.log(this.infoModal)
+    //this.infoModal.show()
+    },
+
 
     getDateTime() {
       var datetime = new Date(this.message.timestamp * 1000).toLocaleString(
diff --git a/gui_vue/src/components/main_modals.vue b/gui_vue/src/components/main_modals.vue
index 0fcc99b3..ff052998 100644
--- a/gui_vue/src/components/main_modals.vue
+++ b/gui_vue/src/components/main_modals.vue
@@ -7,6 +7,10 @@ setActivePinia(pinia);
 import { useStateStore } from "../store/stateStore.js";
 const state = useStateStore(pinia);
 
+import { useChatStore } from "../store/chatStore.js";
+const chat = useChatStore(pinia);
+
+
 import { sendTestFrame, setTxAudioLevel } from "../js/sock.js";
 
 function tuneAudio() {
@@ -16,9 +20,75 @@ function tuneAudio() {
 function set_audio_level() {
   setTxAudioLevel(state.audio_level);
 }
+
+
+
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend
+} from 'chart.js'
+import { Line } from "vue-chartjs";
+import { ref, computed } from "vue";
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend
+)
+
+
 </script>
 
 <template>
+
+
+<!-- Message Info Modal -->
+<div class="modal fade" ref="modalEle" id="messageInfoModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h1 class="modal-title fs-5" id="messageInfoModalLabel">{{chat.selectedMessageObject["uuid"]}}</h1>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+
+{{chat.selectedMessageObject}}
+
+        <div class="input-group mb-3">
+            <span class="input-group-text" id="basic-addon1">Status</span>
+            <span class="input-group-text" id="basic-addon1">{{chat.selectedMessageObject["status"]}}</span>
+        </div>
+
+        <div class="input-group mb-3">
+            <span class="input-group-text" id="basic-addon1">Attempts</span>
+            <span class="input-group-text" id="basic-addon1">{{chat.selectedMessageObject["attempt"]}}</span>
+        </div>
+
+        <div class="input-group mb-3">
+            <span class="input-group-text" id="basic-addon1">Bytes per Minute</span>
+            <span class="input-group-text" id="basic-addon1">{{chat.selectedMessageObject["bytesperminute"]}}</span>
+        </div>
+
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-primary">Save changes</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+
   <!-- HELP MODALS AUDIO -->
   <div
     class="modal fade"
diff --git a/gui_vue/src/js/chatHandler.js b/gui_vue/src/js/chatHandler.js
index b6fd28a5..b0f41f42 100644
--- a/gui_vue/src/js/chatHandler.js
+++ b/gui_vue/src/js/chatHandler.js
@@ -259,6 +259,9 @@ function sortChatList() {
 //repeat a message
 export function repeatMessageTransmission(id) {
   console.log(id);
+  // 1. get message object by ID
+  // 2. Upsert Attempts
+  // 3. send message
 }
 
 // delete a message from databse and gui
@@ -285,13 +288,26 @@ export function updateTransmissionStatus(obj) {
   databaseUpsert(obj.uuid, "bytesperminute", obj.bytesperminute);
   databaseUpsert(obj.uuid, "status", obj.status);
 
+
   // update screen rendering / messages
   updateUnsortedChatListEntry(obj.uuid, "percent", obj.percent);
   updateUnsortedChatListEntry(obj.uuid, "bytesperminute", obj.bytesperminute);
   updateUnsortedChatListEntry(obj.uuid, "status", obj.status);
+
 }
 
 export function updateUnsortedChatListEntry(uuid, object, value) {
+
+  var data = getFromUnsortedChatListByUUID(uuid)
+  if(data){
+    data[object] = value;
+    console.log("Entry updated:", data[object]);
+    chat.sorted_chat_list = sortChatList();
+    return data;
+
+  }
+
+  /*
   for (const entry of chat.unsorted_chat_list) {
     if (entry.uuid === uuid) {
       entry[object] = value;
@@ -300,11 +316,23 @@ export function updateUnsortedChatListEntry(uuid, object, value) {
       return entry;
     }
   }
+  */
 
   console.log("Entry not updated:", object);
   return null; // Return null if not found
 }
 
+function getFromUnsortedChatListByUUID(uuid){
+    for (const entry of chat.unsorted_chat_list) {
+        if (entry.uuid === uuid) {
+            return entry;
+        }
+    }
+
+    return false;
+}
+
+
 export function databaseUpsert(id, object, value) {
   db.upsert(id, function (doc) {
     if (!doc[object]) {
@@ -708,6 +736,20 @@ export function setStateSuccess() {
   state.arq_seconds_until_timeout_percent = 100;
 }
 
+export function requestMessageInfo(id){
+
+console.log(id)
+// id and uuid are the same
+var data = getFromUnsortedChatListByUUID(id)
+console.log(data)
+    chat.selectedMessageObject = data
+
+
+}
+
+
+
+
 // CRC CHECKSUMS
 // https://stackoverflow.com/a/50579690
 // crc32 calculation
diff --git a/gui_vue/src/js/waterfallHandler.js b/gui_vue/src/js/waterfallHandler.js
index aaaafd0b..f4d8bf92 100644
--- a/gui_vue/src/js/waterfallHandler.js
+++ b/gui_vue/src/js/waterfallHandler.js
@@ -28,7 +28,7 @@ export function addDataToWaterfall(data){
     try {
           spectrum.addData(data);
         } catch (e) {
-          console.log(e);
+          //console.log(e);
         }
 
 }
\ No newline at end of file
diff --git a/gui_vue/src/store/chatStore.js b/gui_vue/src/store/chatStore.js
index a33dc73e..d28d2fc3 100644
--- a/gui_vue/src/store/chatStore.js
+++ b/gui_vue/src/store/chatStore.js
@@ -14,6 +14,32 @@ export const useChatStore = defineStore("chatStore", () => {
   ]);
 
   var selectedCallsign = ref();
+  // we need a default value in our ref because of our message info modal
+  var selectedMessageObject = ref({
+    "command": "msg",
+    "hmac_signed": false,
+    "percent": 0,
+    "is_new": false,
+    "_id": "2ead6698",
+    "timestamp": 1697289795,
+    "dxcallsign": "DJ2LS-0",
+    "dxgrid": "null",
+    "msg": "test",
+    "checksum": "",
+    "type": "transmit",
+    "status": "transmitting",
+    "attempt": 1,
+    "uuid": "2ead6698",
+    "duration": 0,
+    "nacks": 0,
+    "speed_list": "null",
+    "_attachments": {
+        "": {
+            "content_type": "text",
+            "data": ""
+        }
+    }
+});
   var inputText = ref();
   var inputFile = ref();
   var inputFileName = ref();
@@ -38,6 +64,7 @@ export const useChatStore = defineStore("chatStore", () => {
 
   return {
     selectedCallsign,
+    selectedMessageObject,
     inputText,
     chat_filter,
     callsign_list,