first deleting of messages

gui_vue/src/components/chat_messages_received.vue

@@ -10,15 +10,28 @@
         <div class="card-body">
           <p class="card-text">{{ message.msg }}</p>
         </div>
+
         <div class="card-footer p-0 bg-light border-top-0">
           <p class="text-muted p-0 m-0 me-1 text-end">{{ getDateTime }}</p> <!-- Display formatted timestamp in card-footer -->
         </div>
       </div>
     </div>
+
+    <!-- Delete button outside of the card -->
+    <div class="col-2">
+      <button class="btn btn-outline-secondary" @click="deleteMessage"><i class="bi bi-trash"></i></button>
+    </div>
   </div>
 </template>
 
+
+
 <script>
+
+import {deleteMessageFromDB} from '../js/chatHandler'
+
+
+
 export default {
   props: {
     message: Object,
@@ -48,6 +61,10 @@ export default {
         return 'col-9';
       }
     },
+    deleteMessage(){
+            deleteMessageFromDB(this.message._id)
+
+    },
     getDateTime() {
       var datetime = new Date(this.message.timestamp * 1000).toLocaleString(
         navigator.language,

gui_vue/src/components/chat_messages_sent.vue

@@ -1,5 +1,13 @@
 <template>
   <div class="row justify-content-end mb-2">
+    <!-- control area -->
+    <div class="col-2 p-0 m-0">
+      <button class="btn btn-outline-secondary me-1" @click="repeatMessage"><i class="bi bi-arrow-repeat"></i></button>
+      <button class="btn btn-outline-secondary" @click="deleteMessage"><i class="bi bi-trash"></i></button>
+    </div>
+
+
+    <!-- message area -->
     <div :class="messageWidthClass">
       <div class="card bg-primary text-white">
 
@@ -7,7 +15,6 @@
           <p class="card-text">{{ getFileContent["filename"] }} | {{ getFileContent["filesize"] }} Bytes | {{ getFileContent["filetype"] }}</p>
         </div>
 
-
         <div class="card-body">
           <p class="card-text">{{ message.msg }}</p>
         </div>
@@ -16,15 +23,12 @@
           <p class="text p-0 m-0 me-1 text-end">{{ getDateTime }}</p> <!-- Display formatted timestamp in card-footer -->
         </div>
 
-
-
-
         <div class="card-footer p-0 border-top-0" v-if="message.percent < 100">
-          <div class="progress  bg-secondary  "  :style="{height: 10 + 'px'}">
+          <div class="progress bg-secondary" :style="{ height: '10px' }">
             <div
               class="progress-bar progress-bar-striped overflow-visible"
               role="progressbar"
-              :style="{ width: message.percent + '%', height: 10 + 'px'}"
+              :style="{ width: message.percent + '%', height: '10px' }"
               :aria-valuenow="message.percent"
               aria-valuemin="0"
               aria-valuemax="100"
@@ -38,17 +42,31 @@
   </div>
 </template>
 
+
 <script>
+
+import {repeatMessageTransmission, deleteMessageFromDB} from '../js/chatHandler'
+
+
+
 export default {
   props: {
     message: Object,
   },
   computed: {
     getFileContent(){
+
         var filename = Object.keys(this.message._attachments)[0]
         var filesize = this.message._attachments[filename]["length"]
         var filetype = filename.split(".")[1]
 
+        // ensure filesize is 0 for hiding message header if no data is available
+        if (typeof filename === 'undefined' || filename === '' || filename === '-'){
+            filesize = 0
+
+        }
+
+
         return {filename: filename, filesize: filesize, filetype: filetype}
     },
     messageWidthClass() {
@@ -62,6 +80,17 @@ export default {
         return 'col-9';
       }
     },
+    repeatMessage(){
+        repeatMessageTransmission(this.message._id)
+
+    },
+    deleteMessage(){
+        deleteMessageFromDB(this.message._id)
+
+
+
+    },
+
     getDateTime() {
       var datetime = new Date(this.message.timestamp * 1000).toLocaleString(
         navigator.language,

gui_vue/src/js/chatHandler.js

@@ -67,17 +67,24 @@ export function newMessage(dxcallsign, chatmessage, chatFile, chatFileName, chat
     var mode = ''
     var frames = ''
     var data = ''
+    if (typeof chatFile !== "undefined"){
         var file = chatFile;
+        var filetype = chatFileType
+        var filename = chatFileName
+    } else {
+        var file = '';
+        var filetype = 'text'
+        var filename = ''
+    }
     var file_checksum = ''//crc32(file).toString(16).toUpperCase();
     var checksum = ''
     var message_type = 'transmit'
     var command = ''
-    var filetype = chatFileType
+
-    var filename = chatFileName
     var timestamp = Math.floor(Date.now() / 1000)
     var uuid = uuidv4();
+    // TODO: Not sure what this uuid part is needed for ...
     let uuidlast = uuid.lastIndexOf("-");
-    console.log(uuidlast)
     uuidlast += 1;
     if (uuidlast > 0) {
         uuid = uuid.substring(uuidlast);
@@ -86,6 +93,8 @@ export function newMessage(dxcallsign, chatmessage, chatFile, chatFileName, chat
     uuid = uuid.slice(-8);
 
 
+
+
     var data_with_attachment =
         timestamp +
         split_char +
@@ -157,6 +166,27 @@ function sortChatList(){
     return reorderedData
 }
 
+//repeat a message
+export function repeatMessageTransmission(id){
+ console.log(id)
+
+}
+
+// delete a message from databse and gui
+export function deleteMessageFromDB(id){
+ console.log("deleting: " + id)
+   db.get(id).then(function (doc) {
+        db.remove(doc)
+   })
+
+   // overwrote unsorted chat list  by filtering if not ID
+   chat.unsorted_chat_list = chat.unsorted_chat_list.filter(entry => entry.uuid !== id);
+
+   // and finally generate our sorted chat list, which is the key store for chat gui rendering
+   // the removed entry should be removed now from gui
+   chat.sorted_chat_list = sortChatList()
+
+}
 
 // function for fetching all messages from chat / updating chat
 export async function updateAllChat() {