FreeDATA/gui/src/components/chat_messages_received.vue

142 lines
4.2 KiB
Vue
Raw Normal View History

2023-09-14 19:17:05 +00:00
<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>
2023-09-21 21:04:12 +00:00
</div>
2023-09-14 19:17:05 +00:00
<div class="card-body">
<p class="card-text">{{ message.body }}</p>
2023-09-14 19:17:05 +00:00
</div>
2023-09-22 21:21:44 +00:00
2023-09-14 19:17:05 +00:00
<div class="card-footer p-0 bg-light border-top-0">
2023-10-03 13:15:17 +00:00
<p class="text-muted p-0 m-0 me-1 text-end">{{ getDateTime }}</p>
<!-- Display formatted timestamp in card-footer -->
2023-09-14 19:17:05 +00:00
</div>
</div>
</div>
2023-09-22 21:21:44 +00:00
<!-- Delete button outside of the card -->
2023-09-27 12:30:47 +00:00
<div class="col-auto">
2023-10-22 08:12:00 +00:00
<button
2024-02-03 12:55:30 +00:00
disabled
2023-10-16 15:26:28 +00:00
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>
2024-01-28 11:32:16 +00:00
<button class="btn btn-outline-secondary border-0" @click="deleteMessage">
2023-10-03 13:15:17 +00:00
<i class="bi bi-trash"></i>
</button>
2023-09-22 21:21:44 +00:00
</div>
2023-09-14 19:17:05 +00:00
</div>
</template>
2023-09-13 21:28:20 +00:00
<script>
2023-10-22 08:12:00 +00:00
import {
deleteMessageFromDB,
requestMessageInfo,
getMessageAttachment,
2024-01-28 08:46:04 +00:00
} from "../js/messagesHandler";
2023-10-22 08:12:00 +00:00
import { atob_FD } from "../js/freedata";
2023-10-18 19:19:18 +00:00
// pinia store setup
import { setActivePinia } from "pinia";
import pinia from "../store/index";
setActivePinia(pinia);
import { useChatStore } from "../store/chatStore.js";
const chat = useChatStore(pinia);
2023-09-13 21:28:20 +00:00
export default {
props: {
2023-09-14 19:17:05 +00:00
message: Object,
2023-10-18 19:19:18 +00:00
},
methods: {
2023-10-22 12:51:07 +00:00
showMessageInfo() {
requestMessageInfo(this.message.id);
2023-10-22 12:49:33 +00:00
//let infoModal = Modal.getOrCreateInstance(document.getElementById('messageInfoModal'))
//console.log(this.infoModal)
//this.infoModal.show()
},
deleteMessage() {
deleteMessageFromDB(this.message.id);
2023-10-22 12:49:33 +00:00
},
async downloadAttachment(hash_sha512, fileName) {
2023-10-18 19:19:18 +00:00
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);
2023-10-18 19:19:18 +00:00
} catch (error) {
console.error("Failed to download the attachment:", error);
2023-10-18 19:19:18 +00:00
}
},
2023-09-13 21:28:20 +00:00
},
2023-09-14 19:17:05 +00:00
computed: {
messageWidthClass() {
// Calculate a Bootstrap grid class based on message length
// Adjust the logic as needed to fit your requirements
2024-01-28 08:46:04 +00:00
if (this.message.body.length <= 50) {
2023-10-03 13:15:17 +00:00
return "col-4";
2024-01-28 08:46:04 +00:00
} else if (this.message.body.length <= 100) {
2023-10-03 13:15:17 +00:00
return "col-6";
2023-09-14 19:17:05 +00:00
} else {
2023-10-03 13:15:17 +00:00
return "col-9";
2023-09-14 19:17:05 +00:00
}
},
2023-10-22 12:49:33 +00:00
2023-09-14 19:17:05 +00:00
getDateTime() {
2024-02-03 12:55:30 +00:00
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}`;
2023-09-14 19:17:05 +00:00
},
},
};
2023-09-13 21:28:20 +00:00
</script>