show received and sent messags

gui/src/components/chat_messages.vue

@@ -51,22 +51,14 @@ function getDateTime(timestampRaw) {
           </div>
         -->
 
-
-
-            {{item}}
-            <hr>
           <div v-if="item.direction === 'transmit'">
-            {{ console.log('Item direction:', item.direction) }}
+            <sent-message :message="item" />
-            <!--<sent-message :message="item" />-->
           </div>
 
 
 
           <div v-else-if="item.direction === 'receive'">
-          {{ console.log('Item direction:', item.direction) }}
+            <received-message :message="item" />
-
-
-            <!--<received-message :message="item" />-->
           </div>
           <!--
           <div v-if="item.type === 'broadcast_transmit'">

gui/src/components/chat_messages_received.vue

@@ -53,7 +53,7 @@ import {
   deleteMessageFromDB,
   requestMessageInfo,
   getMessageAttachment,
-} from "../js/chatHandler";
+} from "../js/messagesHandler";
 import { atob_FD } from "../js/freedata";
 
 // pinia store setup
@@ -97,6 +97,11 @@ export default {
   },
   computed: {
     getFileContent() {
+    
+      if(this.message.attachments.length <= 0){
+        return { filename: '', filesize: 0, filetype: '' };
+      }
+      
       try {
         var filename = Object.keys(this.message._attachments)[0];
         var filesize = this.message._attachments[filename]["length"];
@@ -112,9 +117,9 @@ export default {
     messageWidthClass() {
       // Calculate a Bootstrap grid class based on message length
       // Adjust the logic as needed to fit your requirements
-      if (this.message.msg.length <= 50) {
+      if (this.message.body.length <= 50) {
         return "col-4";
-      } else if (this.message.msg.length <= 100) {
+      } else if (this.message.body.length <= 100) {
         return "col-6";
       } else {
         return "col-9";
@@ -123,15 +128,11 @@ export default {
 
     getDateTime() {
 
-    console.log(this.message.timestamp)
+        let date = new Date(this.message.timestamp);
-      var datetime = new Date(this.message.timestamp * 1000).toLocaleString(
+        let hours = date.getHours().toString().padStart(2, '0');
-        navigator.language,
+        let minutes = date.getMinutes().toString().padStart(2, '0');
-        {
+        let seconds = date.getSeconds().toString().padStart(2, '0');
-          hour: "2-digit",
+        return `${hours}:${minutes}:${seconds}`;
-          minute: "2-digit",
-        },
-      );
-      return datetime;
     },
   },
 };

gui/src/components/chat_messages_sent.vue

@@ -43,7 +43,7 @@
         </div>
 
         <div class="card-body">
-          <p class="card-text">{{ message.msg }}</p>
+          <p class="card-text">{{ message.body }}</p>
         </div>
 
         <div class="card-footer p-0 bg-secondary border-top-0">
@@ -91,7 +91,7 @@ import {
   deleteMessageFromDB,
   requestMessageInfo,
   getMessageAttachment,
-} from "../js/chatHandler";
+} from "../js/messagesHandler";
 
 // pinia store setup
 import { setActivePinia } from "pinia";
@@ -109,15 +109,15 @@ export default {
 
   methods: {
     repeatMessage() {
-      repeatMessageTransmission(this.message._id);
+      repeatMessageTransmission(this.message.id);
     },
 
     deleteMessage() {
-      deleteMessageFromDB(this.message._id);
+      deleteMessageFromDB(this.message.id);
     },
     showMessageInfo() {
       console.log("requesting message info.....");
-      requestMessageInfo(this.message._id);
+      requestMessageInfo(this.message.id);
       //let infoModal = Modal.getOrCreateInstance(document.getElementById('messageInfoModal'))
       //console.log(this.infoModal)
       //this.infoModal.show()
@@ -127,7 +127,7 @@ export default {
         // reset file store
         chat.downloadFileFromDB = [];
 
-        const attachment = await getMessageAttachment(this.message._id);
+        const attachment = await getMessageAttachment(this.message.id);
         const blob = new Blob([atob_FD(attachment[2])], {
           type: `${attachment[1]};charset=utf-8`,
         });
@@ -139,6 +139,11 @@ export default {
   },
   computed: {
     getFileContent() {
+
+      if(this.message.attachments.length <= 0){
+        return { filename: '', filesize: 0, filetype: '' };
+      }
+
       var filename = Object.keys(this.message._attachments)[0];
       var filesize = this.message._attachments[filename]["length"];
       var filetype = filename.split(".")[1];
@@ -157,9 +162,9 @@ export default {
     messageWidthClass() {
       // Calculate a Bootstrap grid class based on message length
       // Adjust the logic as needed to fit your requirements
-      if (this.message.msg.length <= 50) {
+      if (this.message.body.length <= 50) {
         return "col-4";
-      } else if (this.message.msg.length <= 100) {
+      } else if (this.message.body.length <= 100) {
         return "col-6";
       } else {
         return "col-9";
@@ -167,14 +172,12 @@ export default {
     },
 
     getDateTime() {
-      var datetime = new Date(this.message.timestamp * 1000).toLocaleString(
+
-        navigator.language,
+        let date = new Date(this.message.timestamp);
-        {
+        let hours = date.getHours().toString().padStart(2, '0');
-          hour: "2-digit",
+        let minutes = date.getMinutes().toString().padStart(2, '0');
-          minute: "2-digit",
+        let seconds = date.getSeconds().toString().padStart(2, '0');
-        },
+        return `${hours}:${minutes}:${seconds}`;
-      );
-      return datetime;
     },
   },
 };

gui/src/js/messagesHandler.ts

@@ -64,3 +64,21 @@ function createSortedMessagesList(data: { total_messages: number, messages: Mess
 export function newMessage(dxcall, body){
     sendFreedataMessage(dxcall, body)
 }
+
+
+/* ------ TEMPORARY DUMMY FUNCTIONS --- */
+export function repeatMessageTransmission(id){
+    return
+}
+
+export function deleteMessageFromDB(id){
+    return
+}
+
+export function requestMessageInfo(id){
+    return
+}
+
+export function getMessageAttachment(id){
+    return
+}