mirror of
https://github.com/DJ2LS/FreeDATA
synced 2024-05-14 08:04:33 +00:00
187 lines
5.5 KiB
Vue
187 lines
5.5 KiB
Vue
<template>
|
|
<div class="row justify-content-end mb-2">
|
|
<!-- control area -->
|
|
<div class="col-auto p-0 m-0">
|
|
<button
|
|
class="btn btn-outline-secondary border-0 me-1"
|
|
@click="repeatMessage"
|
|
>
|
|
<i class="bi bi-arrow-repeat"></i>
|
|
</button>
|
|
|
|
<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>
|
|
<!-- message area -->
|
|
<div :class="messageWidthClass">
|
|
<div class="card bg-secondary text-white">
|
|
<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-secondary border-top-0">
|
|
<p class="text p-0 m-0 me-1 text-end">
|
|
{{ message.status }} | {{ 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"
|
|
hidden
|
|
: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/messagesHandler";
|
|
|
|
// 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: {
|
|
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(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>
|