mirror of
https://github.com/Sebclem/hassio-nextcloud-backup.git
synced 2024-11-09 02:52:58 +01:00
🔨 Add counter to message viewer
This commit is contained in:
parent
11493aa6f5
commit
2aa5331036
@ -1,11 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<v-app>
|
<v-app>
|
||||||
<navbar-component></navbar-component>
|
<navbar-component></navbar-component>
|
||||||
<v-main>
|
|
||||||
|
|
||||||
<message-bar></message-bar>
|
<message-bar></message-bar>
|
||||||
<webdav-settings-menu></webdav-settings-menu>
|
<webdav-settings-menu></webdav-settings-menu>
|
||||||
</v-main>
|
<v-main> </v-main>
|
||||||
</v-app>
|
</v-app>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -67,11 +67,14 @@
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { getMessages } from "@/services/messageService";
|
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 { DateTime } from "luxon";
|
||||||
|
import { storeToRefs } from "pinia";
|
||||||
import { onBeforeUnmount, ref } from "vue";
|
import { onBeforeUnmount, ref } from "vue";
|
||||||
|
|
||||||
const messages = ref<Message[]>([]);
|
const messagesStore = useMessageStore();
|
||||||
|
const { messages } = storeToRefs(messagesStore);
|
||||||
|
|
||||||
const interval = setInterval(refreshMessages, 1000);
|
const interval = setInterval(refreshMessages, 1000);
|
||||||
|
|
||||||
|
@ -10,7 +10,9 @@
|
|||||||
</v-app-bar-title>
|
</v-app-bar-title>
|
||||||
<v-spacer></v-spacer>
|
<v-spacer></v-spacer>
|
||||||
<v-btn icon id="message-btn" >
|
<v-btn icon id="message-btn" >
|
||||||
<v-icon>mdi-bell</v-icon>
|
<v-badge color="error" :content="countUnreadMessages">
|
||||||
|
<v-icon :class="{ shake: haveUnreadMessages }">mdi-bell</v-icon>
|
||||||
|
</v-badge>
|
||||||
</v-btn>
|
</v-btn>
|
||||||
<v-menu width="210px">
|
<v-menu width="210px">
|
||||||
<template v-slot:activator="{ props }">
|
<template v-slot:activator="{ props }">
|
||||||
@ -36,9 +38,13 @@
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { useDialogStatusStore } from "@/stores/dialogStatus";
|
import { useDialogStatusStore } from "@/stores/dialogStatus";
|
||||||
|
import { useMessageStore } from "@/stores/message";
|
||||||
|
import { storeToRefs } from "pinia";
|
||||||
import logoUrl from "../assets/logo.svg";
|
import logoUrl from "../assets/logo.svg";
|
||||||
|
|
||||||
const dialogStatusStore = useDialogStatusStore();
|
const dialogStatusStore = useDialogStatusStore();
|
||||||
|
const messagesStore = useMessageStore();
|
||||||
|
const { haveUnreadMessages, countUnreadMessages } = storeToRefs(messagesStore);
|
||||||
</script>
|
</script>
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.shake {
|
.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