2023-09-14 19:17:05 +00:00
|
|
|
<template>
|
|
|
|
<div class="row justify-content-end mb-2">
|
2023-09-22 21:21:44 +00:00
|
|
|
<!-- control area -->
|
|
|
|
<div class="col-2 p-0 m-0">
|
|
|
|
<button class="btn btn-outline-secondary me-1" @click="repeatMessage"><i class="bi bi-arrow-repeat"></i></button>
|
|
|
|
<button class="btn btn-outline-secondary" @click="deleteMessage"><i class="bi bi-trash"></i></button>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- message area -->
|
2023-09-14 19:17:05 +00:00
|
|
|
<div :class="messageWidthClass">
|
|
|
|
<div class="card bg-primary text-white">
|
2023-09-21 21:04:12 +00:00
|
|
|
|
|
|
|
<div class="card-header" v-if="getFileContent['filesize'] !== 0">
|
|
|
|
<p class="card-text">{{ getFileContent["filename"] }} | {{ getFileContent["filesize"] }} Bytes | {{ getFileContent["filetype"] }}</p>
|
|
|
|
</div>
|
|
|
|
|
2023-09-14 19:17:05 +00:00
|
|
|
<div class="card-body">
|
|
|
|
<p class="card-text">{{ message.msg }}</p>
|
|
|
|
</div>
|
2023-09-13 21:28:20 +00:00
|
|
|
|
2023-09-14 19:17:05 +00:00
|
|
|
<div class="card-footer p-0 bg-primary border-top-0">
|
2023-09-22 21:21:44 +00:00
|
|
|
<p class="text 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>
|
2023-09-13 21:28:20 +00:00
|
|
|
|
2023-09-14 19:17:05 +00:00
|
|
|
<div class="card-footer p-0 border-top-0" v-if="message.percent < 100">
|
2023-09-22 21:21:44 +00:00
|
|
|
<div class="progress bg-secondary" :style="{ height: '10px' }">
|
2023-09-14 19:17:05 +00:00
|
|
|
<div
|
|
|
|
class="progress-bar progress-bar-striped overflow-visible"
|
|
|
|
role="progressbar"
|
2023-09-22 21:21:44 +00:00
|
|
|
:style="{ width: message.percent + '%', height: '10px' }"
|
2023-09-14 19:17:05 +00:00
|
|
|
:aria-valuenow="message.percent"
|
|
|
|
aria-valuemin="0"
|
|
|
|
aria-valuemax="100"
|
|
|
|
>
|
2023-09-22 21:21:44 +00:00
|
|
|
{{ message.percent }} % with {{ message.bytesperminute }} bpm
|
2023-09-14 19:17:05 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2023-09-13 21:28:20 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
2023-09-22 21:21:44 +00:00
|
|
|
|
2023-09-14 19:17:05 +00:00
|
|
|
<script>
|
2023-09-22 21:21:44 +00:00
|
|
|
|
|
|
|
import {repeatMessageTransmission, deleteMessageFromDB} from '../js/chatHandler'
|
|
|
|
|
|
|
|
|
|
|
|
|
2023-09-14 19:17:05 +00:00
|
|
|
export default {
|
|
|
|
props: {
|
|
|
|
message: Object,
|
|
|
|
},
|
|
|
|
computed: {
|
2023-09-21 21:04:12 +00:00
|
|
|
getFileContent(){
|
2023-09-22 21:21:44 +00:00
|
|
|
|
2023-09-21 21:04:12 +00:00
|
|
|
var filename = Object.keys(this.message._attachments)[0]
|
|
|
|
var filesize = this.message._attachments[filename]["length"]
|
|
|
|
var filetype = filename.split(".")[1]
|
|
|
|
|
2023-09-22 21:21:44 +00:00
|
|
|
// ensure filesize is 0 for hiding message header if no data is available
|
|
|
|
if (typeof filename === 'undefined' || filename === '' || filename === '-'){
|
|
|
|
filesize = 0
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
2023-09-21 21:04:12 +00:00
|
|
|
return {filename: filename, filesize: filesize, filetype: filetype}
|
|
|
|
},
|
2023-09-14 19:17:05 +00:00
|
|
|
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';
|
|
|
|
}
|
|
|
|
},
|
2023-09-22 21:21:44 +00:00
|
|
|
repeatMessage(){
|
|
|
|
repeatMessageTransmission(this.message._id)
|
|
|
|
|
|
|
|
},
|
|
|
|
deleteMessage(){
|
|
|
|
deleteMessageFromDB(this.message._id)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
2023-09-14 19:17:05 +00:00
|
|
|
getDateTime() {
|
|
|
|
var datetime = new Date(this.message.timestamp * 1000).toLocaleString(
|
|
|
|
navigator.language,
|
|
|
|
{
|
2023-09-13 21:28:20 +00:00
|
|
|
|
2023-09-14 19:17:05 +00:00
|
|
|
hour: '2-digit',
|
|
|
|
minute: '2-digit',
|
|
|
|
}
|
|
|
|
);
|
|
|
|
return datetime;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|