mirror of
https://github.com/DJ2LS/FreeDATA
synced 2024-05-14 08:04:33 +00:00
adjusted message scrolling
This commit is contained in:
parent
e65e3a984c
commit
184caf57ab
6 changed files with 47 additions and 9 deletions
|
@ -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>
|
||||
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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){
|
||||
|
|
|
@ -83,6 +83,10 @@ function createSortedMessagesList(data: {
|
|||
|
||||
export function newMessage(dxcall, body, attachments) {
|
||||
sendFreedataMessage(dxcall, body, attachments);
|
||||
chatStore.triggerScrollToBottom();
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
/* ------ TEMPORARY DUMMY FUNCTIONS --- */
|
||||
|
|
|
@ -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,
|
||||
};
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue