🔨 Message can be readed

nextcloud_backup/backend/src/routes/messages.ts

@@ -5,6 +5,14 @@ const messageRouter = express.Router();
 
 messageRouter.get('/', (req, res, next)=>{
   res.json(messageManager.get())
-})
+});
+
+messageRouter.patch('/:messageId/readed', (req, res, next)=>{
+  if(messageManager.markReaded(req.params.messageId)){
+    res.json(messageManager.get());
+  }else{
+    res.status(404).send();
+  }
+});
 
 export default messageRouter;

nextcloud_backup/backend/src/tools/messageManager.ts

@@ -40,6 +40,19 @@ class MessageManager {
   public get(){
     return this.messages;
   }
+
+  public getById(id: string){
+    return this.messages.find(value=>value.id == id);
+  } 
+
+  public markReaded(id: string){
+    const index = this.messages.findIndex(value=>value.id == id);
+    if(index == -1){
+      return false;
+    }
+    this.messages[index].viewed = true;
+    return true;
+  }
 }
 
 

nextcloud_backup/frontend/src/components/MessageBar.vue

@@ -36,7 +36,7 @@
                 <v-btn
                   color="success"
                   variant="text"
-                  @click.stop
+                  @click="markReaded(item.id)"
                   icon
                   v-if="!item.viewed"
                   size="small"
@@ -66,7 +66,7 @@
 </template>
 
 <script setup lang="ts">
-import { getMessages } from "@/services/messageService";
+import * as messageService from "@/services/messageService";
 import { useMessageStore } from "@/stores/message";
 import { MessageType } from "@/types/messages";
 import { DateTime } from "luxon";
@@ -76,10 +76,10 @@ import { onBeforeUnmount, ref } from "vue";
 const messagesStore = useMessageStore();
 const { messages } = storeToRefs(messagesStore);
 
-const interval = setInterval(refreshMessages, 1000);
+const interval = setInterval(refreshMessages, 2000);
 
 function refreshMessages() {
-  getMessages().then((values) => {
+  messageService.getMessages().then((values) => {
     messages.value = values;
   });
 }
@@ -142,6 +142,12 @@ function getTimeDelta(time: string) {
 const show = ref<boolean[]>([]);
 refreshMessages();
 
+function markReaded(id: string) {
+  messageService.markRead(id).then((values) => {
+    messages.value = values;
+  });
+}
+
 onBeforeUnmount(() => {
   clearInterval(interval);
 });

nextcloud_backup/frontend/src/components/NavbarComponent.vue

@@ -9,10 +9,15 @@
       </div>
     </v-app-bar-title>
     <v-spacer></v-spacer>
-    <v-btn icon id="message-btn" >
+    <v-btn icon id="message-btn">
-      <v-badge color="error" :content="countUnreadMessages">
+      <v-badge
-        <v-icon :class="{ shake: haveUnreadMessages }">mdi-bell</v-icon>
+        color="error"
+        :content="countUnreadMessages"
+        v-if="haveUnreadMessages"
+      >
+        <v-icon class="shake">mdi-bell</v-icon>
       </v-badge>
+      <v-icon v-else>mdi-bell</v-icon>
     </v-btn>
     <v-menu width="210px">
       <template v-slot:activator="{ props }">

nextcloud_backup/frontend/src/services/messageService.ts

@@ -4,3 +4,7 @@ import kyClient from "./kyClient";
 export function getMessages() {
   return kyClient.get("messages").json<Message[]>();
 }
+
+export function markRead(id: string) {
+  return kyClient.patch(`messages/${encodeURI(id)}/readed`).json<Message[]>();
+}