gorb/frontend
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Merge branch 'main' into dev

Browse source
This commit is contained in:
SauceyRed 2025-05-28 22:45:05 +02:00
commit 751bdcfd9a
Signed by: sauceyred
GPG key ID: 270B096EF6E9A462
2 changed files with 30 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

37
components/MessageArea.vue
View file

@ -1,6 +1,6 @@
<template>
<div id="message-area">
<div id="messages">
<div id="messages" ref="messagesElement">
<Message v-for="message of messages" :username="displayNames[message.user_uuid]" :text="message.message"
:timestamp="uuidToTimestamp(message.uuid)" format="12" />
</div>
@ -29,7 +29,7 @@ if (messagesRes && props.reverse) {
messagesRes.reverse();
}
const messages = ref(messagesRes ?? []);
const messages = ref<MessageResponse[]>([]);
const displayNames = ref<Record<string, string>>({});
@ -37,6 +37,18 @@ const route = useRoute();
const messageInput = ref<string>();
const messagesElement = ref<HTMLDivElement>();
if (messagesRes) messages.value = messagesRes;
const displayNamesArr: Record<string, string> = {};
for (const message of messages.value) {
if (!displayNamesArr[message.user_uuid]) {
const displayName = await getDisplayName(message.user_uuid);
displayNamesArr[message.user_uuid] = displayName;
}
}
displayNames.value = displayNamesArr;
const accessToken = useCookie("access_token").value;
const apiBase = useCookie("api_base").value;
const { refresh } = useAuth();
@ -88,14 +100,7 @@ function sendMessage(e: Event) {
}
onMounted(async () => {
const displayNamesArr: Record<string, string> = {};
for (const message of messages.value) {
if (!displayNamesArr[message.user_uuid]) {
const displayName = await getDisplayName(message.user_uuid);
displayNamesArr[message.user_uuid] = displayName;
}
}
displayNames.value = displayNamesArr;
messagesElement.value?.scrollTo({ top: messagesElement.value.scrollHeight });
});
</script>
@ -117,17 +122,9 @@ onMounted(async () => {
#message-box {
border: 1px solid rgb(70, 70, 70);
padding-bottom: 1dvh;
padding-top: 1dvh;
margin-bottom: 1dvh;
height: 7%;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
#message-form {
height: 50%;
width: 100%;
}
#message-input {