sebclem/hassio-nextcloud-backup
1
0
Fork 0
mirror of https://github.com/Sebclem/hassio-nextcloud-backup.git synced 2024-11-22 09:12:58 +01:00
Code Issues Projects Releases Wiki Activity

🔨 Add counter to message viewer

Browse Source
This commit is contained in:
SebClem 2022-10-26 12:06:29 +02:00
parent d35fc1a6e0
commit 2cd2725fb7
Signed by: sebclem
GPG Key ID: 5A4308F6A359EA50
5 changed files with 39 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
nextcloud_backup/frontend/src/App.vue
View File

@ -1,11 +1,9 @@
<template> <template>
<v-app> <v-app>
<navbar-component></navbar-component> <navbar-component></navbar-component>
<v-main> <message-bar></message-bar>
<webdav-settings-menu></webdav-settings-menu>
<message-bar></message-bar> <v-main> </v-main>
<webdav-settings-menu></webdav-settings-menu>
</v-main>
</v-app> </v-app>
</template> </template>

7
nextcloud_backup/frontend/src/components/MessageBar.vue
View File

@ -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
nextcloud_backup/frontend/src/components/NavbarComponent.vue
View File

@ -9,8 +9,10 @@
</div> </div>
</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 {

8
nextcloud_backup/frontend/src/stores/counter.ts
View File

@ -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
View 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 };
});