adjusted message scrolling

This commit is contained in:
DJ2LS 2024-03-07 14:48:13 +01:00
parent e65e3a984c
commit 184caf57ab
6 changed files with 47 additions and 9 deletions

View file

@ -2,6 +2,7 @@
// @ts-nocheck
// disable typescript check beacuse of error with beacon histogram options
import chat_conversations from "./chat_conversations.vue";
import chat_messages from "./chat_messages.vue";
import chat_new_message from "./chat_new_message.vue";
@ -13,6 +14,8 @@ setActivePinia(pinia);
import { useChatStore } from "../store/chatStore.js";
const chat = useChatStore(pinia);
import {
Chart as ChartJS,
CategoryScale,
@ -25,7 +28,7 @@ import {
} from "chart.js";
import { Bar } from "vue-chartjs";
import { ref, computed } from "vue";
import { watch, nextTick, ref, computed } from "vue";
import annotationPlugin from "chartjs-plugin-annotation";
ChartJS.register(
@ -101,6 +104,18 @@ const beaconHistogramData = computed(() => ({
},
],
}));
const messagesContainer = ref(null);
watch(() => chat.scrollTrigger, (newVal, oldVal) => {
//console.log("Trigger changed from", oldVal, "to", newVal); // Debugging line
nextTick(() => {
if (messagesContainer.value) {
messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;
}
});
});
</script>
<template>
@ -143,7 +158,7 @@ const beaconHistogramData = computed(() => ({
</nav>
<!-- Chat Messages Area -->
<div class="flex-grow-1 overflow-auto">
<div class="flex-grow-1 overflow-auto" ref="messagesContainer">
<chat_messages />
</div>

View file

@ -13,11 +13,7 @@ const chat = useChatStore(pinia);
function chatSelected(callsign) {
chat.selectedCallsign = callsign.toUpperCase();
// scroll message container to bottom
var messageBody = document.getElementById("message-container");
if (messageBody != null) {
// needs sensible defaults
messageBody.scrollTop = messageBody.scrollHeight - messageBody.clientHeight;
}
chat.triggerScrollToBottom();
processBeaconData(callsign);
}

View file

@ -1,4 +1,6 @@
<script setup lang="ts">
import { setActivePinia } from "pinia";
import pinia from "../store/index";
setActivePinia(pinia);
@ -24,7 +26,10 @@ function getDateTime(timestampRaw) {
</script>
<template>
<div class="tab-content p-3" id="nav-tabContent-chat-messages">
<div class="tab-content p-3" id="nav-tabContent-chat-messages"
>
<template
v-for="(details, callsign, key) in chat.callsign_list"
:key="callsign"

View file

@ -30,7 +30,7 @@ import {
Legend
} from 'chart.js'
import { Line } from 'vue-chartjs'
import { ref, computed } from 'vue';
import { ref, computed, nextTick } from 'vue';
import { VuemojiPicker, EmojiClickEventDetail } from 'vuemoji-picker'
@ -90,6 +90,8 @@ function transmitNewMessage() {
chat.selectedCallsign = Object.keys(chat.callsign_list)[0];
}
chat.inputText = chat.inputText.trim();
// Proceed only if there is text or files selected
@ -101,6 +103,7 @@ function transmitNewMessage() {
type: file.type,
data: file.content
};
});
if (chat.selectedCallsign.startsWith("BC-")) {
@ -120,6 +123,7 @@ function transmitNewMessage() {
chat.inputText = '';
chatModuleMessage.value = "";
resetFile()
}
function resetFile(event){

View file

@ -83,6 +83,10 @@ function createSortedMessagesList(data: {
export function newMessage(dxcall, body, attachments) {
sendFreedataMessage(dxcall, body, attachments);
chatStore.triggerScrollToBottom();
}
/* ------ TEMPORARY DUMMY FUNCTIONS --- */

View file

@ -2,11 +2,23 @@ import { defineStore } from "pinia";
import { ref } from "vue";
export const useChatStore = defineStore("chatStore", () => {
var callsign_list = ref();
var sorted_chat_list = ref();
var newChatCallsign = ref();
var newChatMessage = ref();
/* ------------------------------------------------ */
// Scroll to bottom functions
const scrollTrigger = ref(0);
function triggerScrollToBottom() {
scrollTrigger.value++;
}
/* ------------------------------------------------ */
var chat_filter = ref([
@ -92,5 +104,7 @@ export const useChatStore = defineStore("chatStore", () => {
arq_speed_list_bpm,
arq_speed_list_snr,
arq_speed_list_timestamp,
scrollTrigger,
triggerScrollToBottom,
};
});