🔨 Add message id + refresh messages

This commit is contained in:
SebClem 2022-10-26 11:41:08 +02:00
parent b9de37d7cb
commit d335277352
Signed by: sebclem
GPG Key ID: 5A4308F6A359EA50
4 changed files with 18 additions and 6 deletions

View File

@ -1,3 +1,4 @@
import { randomUUID } from "crypto";
import { DateTime } from "luxon";
import { Message, MessageType } from "../types/message.js";
@ -8,6 +9,7 @@ class MessageManager {
public addMessage(type: MessageType, message: string, detail?: string, isImportant = false) {
this.messages.push({
id: randomUUID(),
message: message,
type: type,
time: DateTime.now(),

View File

@ -9,6 +9,7 @@ export enum MessageType {
export interface Message {
id: string;
time: DateTime;
type: MessageType;
message: string;

View File

@ -9,7 +9,7 @@
<v-divider></v-divider>
<v-responsive max-height="350px" class="overflow-y-auto">
<v-list class="py-0">
<template v-for="(item, index) in messages" :key="item.message">
<template v-for="(item, index) in messages" :key="item.id">
<v-divider v-if="index != 0"></v-divider>
<v-list-item :class="{ 'bg-brown-darken-4': !item.viewed }">
<v-list-item-title>
@ -69,13 +69,17 @@
import { getMessages } from "@/services/messageService";
import { MessageType, type Message } from "@/types/messages";
import { DateTime } from "luxon";
import { ref } from "vue";
import { onBeforeUnmount, ref } from "vue";
const messages = ref<Message[]>([]);
getMessages().then((values) => {
messages.value = values;
});
const interval = setInterval(refreshMessages, 1000);
function refreshMessages() {
getMessages().then((values) => {
messages.value = values;
});
}
function getMessageColor(messageType: MessageType) {
switch (messageType) {
@ -132,6 +136,10 @@ function getTimeDelta(time: string) {
} as any);
}
}
const show = ref<boolean[]>([]);
refreshMessages();
onBeforeUnmount(() => {
clearInterval(interval);
});
</script>

View File

@ -8,6 +8,7 @@ export enum MessageType {
}
export interface Message {
id: string;
time: string;
type: MessageType;
message: string;