FreeDATA/gui/src/components/chat_messages.vue

91 lines
2.7 KiB
Vue
Raw Normal View History

2023-09-12 15:52:16 +00:00
<script setup lang="ts">
2023-10-03 13:15:17 +00:00
import { setActivePinia } from "pinia";
import pinia from "../store/index";
2023-09-12 15:52:16 +00:00
setActivePinia(pinia);
2023-10-03 13:15:17 +00:00
import { useChatStore } from "../store/chatStore.js";
2023-09-12 15:52:16 +00:00
const chat = useChatStore(pinia);
2023-10-03 13:15:17 +00:00
import SentMessage from "./chat_messages_sent.vue"; // Import the chat_messages_sent component
import ReceivedMessage from "./chat_messages_received.vue"; // Import the chat_messages_sent component
import ReceivedBroadcastMessage from "./chat_messages_broadcast_received.vue"; // Import the chat_messages_sent component for broadcasts
import SentBroadcastMessage from "./chat_messages_broadcast_sent.vue"; // Import the chat_messages_sent component for broadcasts
2023-09-13 21:28:20 +00:00
2023-09-14 19:17:05 +00:00
//helper function for saving the last messages day for disaplying the day based divider
2023-10-03 13:15:17 +00:00
var prevChatMessageDay = "";
function getDateTime(timestampRaw) {
2024-01-28 08:50:20 +00:00
let date = new Date(timestampRaw);
2024-02-03 12:55:30 +00:00
let year = date.getFullYear();
let month = (date.getMonth() + 1).toString().padStart(2, "0"); // Months are zero-indexed
let day = date.getDate().toString().padStart(2, "0");
return `${year}-${month}-${day}`;
2023-09-14 19:17:05 +00:00
}
2023-09-12 15:52:16 +00:00
</script>
<template>
2024-03-07 13:50:47 +00:00
<div class="tab-content p-3" id="nav-tabContent-chat-messages">
2024-02-03 12:55:30 +00:00
<template
v-for="(details, callsign, key) in chat.callsign_list"
:key="callsign"
>
2023-10-03 13:15:17 +00:00
<div
class="tab-pane fade show"
:class="{ active: key == 0 }"
:id="`list-${callsign}-messages`"
role="tabpanel"
:aria-labelledby="`list-chat-list-${callsign}`"
>
2024-02-03 12:55:30 +00:00
<template v-for="item in chat.sorted_chat_list[callsign]">
2023-09-14 19:17:05 +00:00
<div v-if="prevChatMessageDay !== getDateTime(item.timestamp)">
2023-10-03 13:15:17 +00:00
<div class="separator my-2">
{{ (prevChatMessageDay = getDateTime(item.timestamp)) }}
</div>
2023-10-03 13:15:17 +00:00
</div>
2024-01-28 08:50:20 +00:00
<div v-if="item.direction === 'transmit'">
2024-01-28 08:46:04 +00:00
<sent-message :message="item" />
2023-10-03 13:15:17 +00:00
</div>
<div v-else-if="item.direction === 'receive'">
2024-01-28 08:46:04 +00:00
<received-message :message="item" />
2023-09-14 19:17:05 +00:00
</div>
<!--
2023-10-03 13:15:17 +00:00
<div v-if="item.type === 'broadcast_transmit'">
<sent-broadcast-message :message="item" />
</div>
<div v-else-if="item.type === 'broadcast_received'">
<received-broadcast-message :message="item" />
</div>
-->
2023-10-03 13:15:17 +00:00
</template>
</div>
2023-09-14 19:17:05 +00:00
</template>
</div>
</template>
2023-09-14 19:17:05 +00:00
<style>
/* https://stackoverflow.com/a/26634224 */
.separator {
display: flex;
align-items: center;
text-align: center;
2023-10-19 14:54:24 +00:00
color: #6c757d;
2023-09-14 19:17:05 +00:00
}
2023-09-14 19:17:05 +00:00
.separator::before,
.separator::after {
2023-10-03 13:15:17 +00:00
content: "";
2023-09-14 19:17:05 +00:00
flex: 1;
2023-10-19 14:54:24 +00:00
border-bottom: 1px solid #adb5bd;
2023-09-14 19:17:05 +00:00
}
2023-09-12 15:52:16 +00:00
2023-09-14 19:17:05 +00:00
.separator:not(:empty)::before {
2023-10-03 13:15:17 +00:00
margin-right: 0.25em;
2023-09-14 19:17:05 +00:00
}
.separator:not(:empty)::after {
2023-10-03 13:15:17 +00:00
margin-left: 0.25em;
2023-09-14 19:17:05 +00:00
}
2023-10-03 13:15:17 +00:00
</style>