FreeDATA/gui/src/components/chat_messages_sent.vue
2023-10-28 13:36:29 +00:00

180 lines
5 KiB
Vue

<template>
<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"
>
<i class="bi bi-arrow-repeat"></i>
</button>
<button
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>
<!-- message area -->
<div :class="messageWidthClass">
<div class="card bg-secondary text-white">
<div class="card-header" v-if="getFileContent['filesize'] !== 0">
<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>
<div class="card-footer p-0 bg-secondary border-top-0">
<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 || message.status === 'failed'"
>
<div
class="progress rounded-0 rounded-bottom"
:style="{ height: '10px' }"
v-bind:class="{
'bg-danger': message.status == 'failed',
'bg-primary': message.status == 'transmitting',
'bg-secondary': message.status == 'transmitted',
}"
>
<div
class="progress-bar progress-bar-striped overflow-visible"
role="progressbar"
:style="{ width: message.percent + '%', height: '10px' }"
:aria-valuenow="message.percent"
aria-valuemin="0"
aria-valuemax="100"
>
{{ message.percent }} % with {{ message.bytesperminute }} bpm (
{{ message.status }} )
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { atob_FD } from "../js/freedata";
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: {
repeatMessage() {
repeatMessageTransmission(this.message._id);
},
deleteMessage() {
deleteMessageFromDB(this.message._id);
},
showMessageInfo() {
console.log("requesting message info.....");
requestMessageInfo(this.message._id);
//let infoModal = Modal.getOrCreateInstance(document.getElementById('messageInfoModal'))
//console.log(this.infoModal)
//this.infoModal.show()
},
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];
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() {
// Calculate a Bootstrap grid class based on message length
// Adjust the logic as needed to fit your requirements
if (this.message.msg.length <= 50) {
return "col-4";
} else if (this.message.msg.length <= 100) {
return "col-6";
} else {
return "col-9";
}
},
getDateTime() {
var datetime = new Date(this.message.timestamp * 1000).toLocaleString(
navigator.language,
{
hour: "2-digit",
minute: "2-digit",
},
);
return datetime;
},
},
};
</script>