FreeDATA/gui/src/components/chat_messages_received.vue

<template>
  <div class="row justify-content-start mb-2">
    <div :class="messageWidthClass">
      <div class="card bg-light border-0 text-dark">
        <div
          v-for="attachment in message.attachments"
          :key="attachment.id"
          class="card-header"
        >
          <div class="btn-group w-100" role="group">
            <button class="btn btn-light text-truncate" disabled>
              {{ attachment.name }}
            </button>
            <button
              @click="
                downloadAttachment(attachment.hash_sha512, attachment.name)
              "
              class="btn btn-light w-25"
            >
              <i class="bi bi-download strong"></i>
            </button>
          </div>
        </div>

        <div class="card-body">
          <p class="card-text">{{ message.body }}</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-auto">
      <button
        disabled
        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>
    </div>
  </div>
</template>

<script>
import {
  deleteMessageFromDB,
  requestMessageInfo,
  getMessageAttachment,
} from "../js/messagesHandler";
import { atob_FD } from "../js/freedata";

// pinia store setup
import { setActivePinia } from "pinia";
import pinia from "../store/index";
setActivePinia(pinia);

import { useChatStore } from "../store/chatStore.js";
const chat = useChatStore(pinia);

export default {
  props: {
    message: Object,
  },
  methods: {
    showMessageInfo() {
      requestMessageInfo(this.message.id);
      //let infoModal = Modal.getOrCreateInstance(document.getElementById('messageInfoModal'))
      //console.log(this.infoModal)
      //this.infoModal.show()
    },
    deleteMessage() {
      deleteMessageFromDB(this.message.id);
    },
    async downloadAttachment(hash_sha512, fileName) {
      try {
        const jsondata = await getMessageAttachment(hash_sha512);
        const byteCharacters = atob(jsondata.data);
        const byteArrays = [];

        for (let offset = 0; offset < byteCharacters.length; offset += 512) {
          const slice = byteCharacters.slice(offset, offset + 512);
          const byteNumbers = new Array(slice.length);
          for (let i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
          }
          const byteArray = new Uint8Array(byteNumbers);
          byteArrays.push(byteArray);
        }

        const blob = new Blob(byteArrays, { type: jsondata.type });
        const url = URL.createObjectURL(blob);

        // Creating a temporary anchor element to download the file
        const anchor = document.createElement("a");
        anchor.href = url;
        anchor.download = fileName;
        document.body.appendChild(anchor);
        anchor.click();

        // Cleanup
        document.body.removeChild(anchor);
        URL.revokeObjectURL(url);
      } catch (error) {
        console.error("Failed to download the attachment:", error);
      }
    },
  },
  computed: {
    messageWidthClass() {
      // Calculate a Bootstrap grid class based on message length
      // Adjust the logic as needed to fit your requirements
      if (this.message.body.length <= 50) {
        return "col-4";
      } else if (this.message.body.length <= 100) {
        return "col-6";
      } else {
        return "col-9";
      }
    },

    getDateTime() {
      let date = new Date(this.message.timestamp);
      let hours = date.getHours().toString().padStart(2, "0");
      let minutes = date.getMinutes().toString().padStart(2, "0");
      let seconds = date.getSeconds().toString().padStart(2, "0");
      return `${hours}:${minutes}:${seconds}`;
    },
  },
};
</script>