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

View File

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

View File

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

View File

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