first attempt of saving data

gui_vue/package.json

@@ -43,6 +43,7 @@
     "electron-updater": "^6.1.4",
     "emoji-picker-element": "^1.18.3",
     "emoji-picker-element-data": "^1.4.0",
+    "file-saver": "^2.0.5",
     "mime": "^3.0.0",
     "pinia": "^2.1.6",
     "pouchdb": "^8.0.1",

gui_vue/src/components/chat_messages_received.vue

@@ -33,6 +33,13 @@
         <i class="bi bi-info-circle"></i>
       </button>
 
+      <button
+        v-if="getFileContent['filesize'] !== 0"
+        class="btn btn-outline-secondary border-0 me-1"
+        @click="downloadAttachment"
+      >
+        <i class="bi bi-download"></i>
+      </button>
 
       <button class="btn btn-outline-secondary border-0" @click="deleteMessage">
         <i class="bi bi-trash"></i>
@@ -42,11 +49,42 @@
 </template>
 
 <script>
-import { deleteMessageFromDB, requestMessageInfo } from "../js/chatHandler";
+import { deleteMessageFromDB, requestMessageInfo, getMessageAttachment } from "../js/chatHandler";
+import {atob_FD} from "../js/freedata.js"
+
+// pinia store setup
+import { setActivePinia } from "pinia";
+import pinia from "../store/index";
+setActivePinia(pinia);
+import { saveAs } from 'file-saver';
+
+import { useChatStore } from "../store/chatStore.js";
+const chat = useChatStore(pinia);
+
+
+
 
 export default {
   props: {
     message: Object,
+  },
+  methods: {
+
+async downloadAttachment() {
+      try {
+        // reset file store
+        chat.downloadFileFromDB = [];
+
+        const attachment = await getMessageAttachment(this.message._id);
+        const blob = new Blob([atob_FD(attachment[2])], { type: `${attachment[1]};charset=utf-8` });
+        window.focus();
+        saveAs(blob, attachment[0]);
+      } catch (error) {
+        console.error("Failed to download attachment:", error);
+      }
+    },
+
+
   },
   computed: {
     getFileContent() {

gui_vue/src/components/chat_messages_sent.vue

@@ -2,6 +2,17 @@
   <div class="row justify-content-end mb-2">
     <!-- control area -->
     <div class="col-auto p-0 m-0">
+
+
+      <button
+        v-if="getFileContent['filesize'] !== 0"
+        class="btn btn-outline-secondary border-0 me-1"
+        @click="downloadAttachment"
+      >
+        <i class="bi bi-download"></i>
+      </button>
+
+
       <button
         class="btn btn-outline-secondary border-0 me-1"
         @click="repeatMessage"
@@ -75,20 +86,50 @@
 
 import { Modal } from "bootstrap";
 import { onMounted, ref } from "vue";
+import {atob_FD} from "../js/freedata.js"
 
 import {
   repeatMessageTransmission,
   deleteMessageFromDB,
   requestMessageInfo,
+  getMessageAttachment,
 } from "../js/chatHandler";
 
+
+// pinia store setup
+import { setActivePinia } from "pinia";
+import pinia from "../store/index";
+setActivePinia(pinia);
+import { saveAs } from 'file-saver';
+
+import { useChatStore } from "../store/chatStore.js";
+const chat = useChatStore(pinia);
+
+
+
 export default {
   props: {
     message: Object,
   },
 
 
+  methods: {
 
+async downloadAttachment() {
+      try {
+        // reset file store
+        chat.downloadFileFromDB = [];
+
+        const attachment = await getMessageAttachment(this.message._id);
+        const blob = new Blob([atob_FD(attachment[2])], { type: `${attachment[1]};charset=utf-8` });
+        saveAs(blob, attachment[0]);
+      } catch (error) {
+        console.error("Failed to download attachment:", error);
+      }
+    },
+
+
+  },
   computed: {
     getFileContent() {
       var filename = Object.keys(this.message._attachments)[0];
@@ -120,6 +161,10 @@ export default {
     repeatMessage() {
       repeatMessageTransmission(this.message._id);
     },
+
+
+
+
     deleteMessage() {
       deleteMessageFromDB(this.message._id);
     },

gui_vue/src/js/chatHandler.js

@@ -238,6 +238,35 @@ function sortChatList() {
   return reorderedData;
 }
 
+
+
+
+export function getMessageAttachment(id) {
+  return new Promise(async (resolve, reject) => {
+    try {
+      const findResult = await db.find({
+        selector: {
+          _id: id,
+        },
+      });
+
+      const getResult = await db.get(findResult.docs[0]._id, {
+        attachments: true,
+      });
+
+      let obj = getResult;
+      let filename = Object.keys(obj._attachments)[0];
+      let filetype = obj._attachments[filename].content_type;
+      let file = obj._attachments[filename].data;
+      resolve([filename, filetype, file]);
+    } catch (err) {
+      console.log(err);
+      reject(false); // Reject the Promise if there's an error
+    }
+  });
+}
+
+
 //repeat a message
 export function repeatMessageTransmission(id) {
   // 1. get message object by ID

gui_vue/src/store/chatStore.js

@@ -62,6 +62,8 @@ export const useChatStore = defineStore("chatStore", () => {
   var beaconDataArray = ref([]);
   var beaconLabelArray = ref([]);
 
+
+
   return {
     selectedCallsign,
     selectedMessageObject,
@@ -81,6 +83,5 @@ export const useChatStore = defineStore("chatStore", () => {
     beaconLabelArray,
     unsorted_beacon_list,
     sorted_beacon_list,
-
   };
 });