mirror of
https://github.com/Sebclem/hassio-nextcloud-backup.git
synced 2024-11-04 16:42:58 +01:00
🔨 Add counter to message viewer
This commit is contained in:
parent
11493aa6f5
commit
2aa5331036
@ -1,11 +1,9 @@
|
||||
<template>
|
||||
<v-app>
|
||||
<navbar-component></navbar-component>
|
||||
<v-main>
|
||||
|
||||
<message-bar></message-bar>
|
||||
<webdav-settings-menu></webdav-settings-menu>
|
||||
</v-main>
|
||||
<message-bar></message-bar>
|
||||
<webdav-settings-menu></webdav-settings-menu>
|
||||
<v-main> </v-main>
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
|
@ -67,11 +67,14 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getMessages } from "@/services/messageService";
|
||||
import { MessageType, type Message } from "@/types/messages";
|
||||
import { useMessageStore } from "@/stores/message";
|
||||
import { MessageType } from "@/types/messages";
|
||||
import { DateTime } from "luxon";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { onBeforeUnmount, ref } from "vue";
|
||||
|
||||
const messages = ref<Message[]>([]);
|
||||
const messagesStore = useMessageStore();
|
||||
const { messages } = storeToRefs(messagesStore);
|
||||
|
||||
const interval = setInterval(refreshMessages, 1000);
|
||||
|
||||
|
@ -9,8 +9,10 @@
|
||||
</div>
|
||||
</v-app-bar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn icon id="message-btn">
|
||||
<v-icon>mdi-bell</v-icon>
|
||||
<v-btn icon id="message-btn" >
|
||||
<v-badge color="error" :content="countUnreadMessages">
|
||||
<v-icon :class="{ shake: haveUnreadMessages }">mdi-bell</v-icon>
|
||||
</v-badge>
|
||||
</v-btn>
|
||||
<v-menu width="210px">
|
||||
<template v-slot:activator="{ props }">
|
||||
@ -36,9 +38,13 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useDialogStatusStore } from "@/stores/dialogStatus";
|
||||
import { useMessageStore } from "@/stores/message";
|
||||
import { storeToRefs } from "pinia";
|
||||
import logoUrl from "../assets/logo.svg";
|
||||
|
||||
const dialogStatusStore = useDialogStatusStore();
|
||||
const messagesStore = useMessageStore();
|
||||
const { haveUnreadMessages, countUnreadMessages } = storeToRefs(messagesStore);
|
||||
</script>
|
||||
<style scoped>
|
||||
.shake {
|
||||
|
@ -1,8 +0,0 @@
|
||||
import { ref } from "vue";
|
||||
import { defineStore } from "pinia";
|
||||
import type { Message } from "@/types/messages";
|
||||
|
||||
export const useMessageStore = defineStore("message", () => {
|
||||
const messages = ref<Message[]>([]);
|
||||
return { messages };
|
||||
});
|
23
nextcloud_backup/frontend/src/stores/message.ts
Normal file
23
nextcloud_backup/frontend/src/stores/message.ts
Normal file
@ -0,0 +1,23 @@
|
||||
import { computed, ref } from "vue";
|
||||
import { defineStore } from "pinia";
|
||||
import type { Message } from "@/types/messages";
|
||||
|
||||
export const useMessageStore = defineStore("message", () => {
|
||||
const messages = ref<Message[]>([]);
|
||||
const countUnreadMessages = computed(() => {
|
||||
return messages.value.filter((value) => !value.viewed).length;
|
||||
});
|
||||
|
||||
const haveUnreadMessages = computed(() => {
|
||||
let unread = false;
|
||||
for (const mess of messages.value) {
|
||||
if (!mess.viewed) {
|
||||
unread = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return unread;
|
||||
});
|
||||
|
||||
return { messages, countUnreadMessages, haveUnreadMessages };
|
||||
});
|
Loading…
Reference in New Issue
Block a user