attempt making unread message counter working

gui_vue/src/components/chat.vue

@@ -31,7 +31,7 @@ updateAllChat();
     <chat_navbar />
 
     <div class="row h-100 ms-0 mt-0 me-1">
-      <div class="col-3 m-0 p-0 bg-light">
+      <div class="col-3 m-0 p-0 vh-100 overflow-scroll bg-light">
         <!------Chats area ---------------------------------------------------------------------->
         <div class="container-fluid m-0 p-0">
           <chat_conversations />

gui_vue/src/components/chat_conversations.vue

@@ -14,6 +14,8 @@ const state = useStateStore(pinia);
 import { useChatStore } from "../store/chatStore.js";
 const chat = useChatStore(pinia);
 
+import {getNewMessagesByDXCallsign, resetIsNewMessage} from '../js/chatHandler'
+
 
 import chat_conversations_entry from "./chat_conversations_entry.vue";
 
@@ -21,6 +23,7 @@ import chat_conversations_entry from "./chat_conversations_entry.vue";
 function chatSelected(callsign) {
   chat.selectedCallsign = callsign.toUpperCase();
 
+
   // scroll message container to bottom
   var messageBody = document.getElementById("message-container");
   if (messageBody != null ) {
@@ -28,6 +31,13 @@ function chatSelected(callsign) {
     messageBody.scrollTop = messageBody.scrollHeight - messageBody.clientHeight;
   }
 
+  if (getNewMessagesByDXCallsign(callsign)[1] > 0){
+        let messageArray = getNewMessagesByDXCallsign(callsign)[2]
+        for (const key in messageArray){
+                resetIsNewMessage(messageArray[key].uuid, false)
+            }
+  }
+
   try {
     chat.beaconLabelArray = Object.values(
       chat.sorted_beacon_list[chat.selectedCallsign].timestamp,
@@ -47,7 +57,7 @@ function chatSelected(callsign) {
     <template v-for="(item, key) in chat.callsign_list" :key="item.dxcallsign">
       <a
         class="list-group-item list-group-item-action border-0 border-bottom rounded-0"
-        :class="{ active: key == 0 }"
+        :class="{ active: key == 0}"
         :id="`list-chat-list-${item}`"
         data-bs-toggle="list"
         :href="`#list-${item}-messages`"
@@ -55,8 +65,17 @@ function chatSelected(callsign) {
         aria-controls="list-{{item}}-messages"
         @click="chatSelected(item)"
       >
+
+
+
         <div class="row">
-          <div class="col-9">{{ item }}</div>
+          <div class="col-9">{{ item }}
+
+            <span class="badge rounded-pill bg-danger" v-if="getNewMessagesByDXCallsign(item)[1] > 0">
+               {{getNewMessagesByDXCallsign(item)[1]}} new messages
+            </span>
+
+          </div>
           <div class="col-3">
             <button
               class="btn btn-sm btn-outline-secondary ms-2 border-0"

gui_vue/src/components/main_modals.vue

@@ -10,7 +10,8 @@ const state = useStateStore(pinia);
 import { useChatStore } from "../store/chatStore.js";
 const chat = useChatStore(pinia);
 
-import { deleteChatByCallsign } from "../js/chatHandler";
+import { deleteChatByCallsign, getNewMessagesByDXCallsign } from "../js/chatHandler";
+
 
 import { sendTestFrame, setTxAudioLevel } from "../js/sock.js";
 
@@ -66,6 +67,20 @@ ChartJS.register(
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body">
+
+
+
+    <div class="input-group mb-3">
+            <span class="input-group-text" id="basic-addon1">Total Messages</span>
+            <span class="input-group-text" id="basic-addon1">{{getNewMessagesByDXCallsign(chat.selectedCallsign)[0]}}</span>
+        </div>
+
+    <div class="input-group mb-3">
+            <span class="input-group-text" id="basic-addon1">New Messages</span>
+            <span class="input-group-text" id="basic-addon1">{{getNewMessagesByDXCallsign(chat.selectedCallsign)[1]}}</span>
+        </div>
+
+
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>

gui_vue/src/js/chatHandler.js

@@ -304,6 +304,8 @@ async function dbClean() {
     { type: "beacon" },
     { type: "ping-ack" },
     { type: "ping" },
+    { type: "request" },
+    { type: "response" },
   ];
 
   await db
@@ -387,10 +389,35 @@ function getFromUnsortedChatListByUUID(uuid){
             return entry;
         }
     }
-
     return false;
 }
 
+export function getNewMessagesByDXCallsign(dxcallsign){
+let new_counter = 0
+let total_counter = 0
+let item_array = []
+if (typeof dxcallsign !== 'undefined'){
+    for (const key in chat.sorted_chat_list[dxcallsign]){
+        //console.log(chat.sorted_chat_list[dxcallsign][key])
+        //item_array.push(chat.sorted_chat_list[dxcallsign][key])
+      if(chat.sorted_chat_list[dxcallsign][key].is_new){
+            item_array.push(chat.sorted_chat_list[dxcallsign][key])
+            new_counter += 1
+      }
+      total_counter += 1
+    }
+}
+
+    return [total_counter, new_counter, item_array];
+}
+
+
+export function resetIsNewMessage(uuid, value){
+    databaseUpsert(uuid, "is_new", value)
+    updateUnsortedChatListEntry(uuid, "is_new", value);
+}
+
+
 
 export function databaseUpsert(id, object, value) {
   db.upsert(id, function (doc) {

gui_vue/src/js/sock.js

@@ -167,7 +167,7 @@ client.on("data", function (socketdata) {
           continue;
         }
       }
-        console.log(data)
+       // console.log(data)
       if (data["command"] == "tnc_state") {
         //console.log(data)
         // set length of RX Buffer to global variable