🔨 Add counter to message viewer

nextcloud_backup/backend/src/tools/messageManager.ts

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

nextcloud_backup/backend/src/types/message.ts

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

nextcloud_backup/frontend/package.json

@@ -19,7 +19,7 @@
     "pinia": "^2.0.23",
     "roboto-fontface": "*",
     "vue": "^3.2.40",
-    "vuetify": "3.0.0-beta.14",
+    "vuetify": "3.0.0-beta.15",
     "webfontloader": "^1.0.0"
   },
   "devDependencies": {

nextcloud_backup/frontend/pnpm-lock.yaml

@@ -24,7 +24,7 @@ specifiers:
   vite-plugin-vuetify: ^1.0.0-alpha.12
   vue: ^3.2.40
   vue-tsc: 1.0.7
-  vuetify: 3.0.0-beta.14
+  vuetify: 3.0.0-beta.15
   webfontloader: ^1.0.0
 
 dependencies:
@@ -36,7 +36,7 @@ dependencies:
   pinia: 2.0.23_rg374xhldfcyvjtaj3qktyfz5y
   roboto-fontface: 0.10.0
   vue: 3.2.40
-  vuetify: 3.0.0-beta.14_vdkwhj2kz5kpysy3rwb432nm3y
+  vuetify: 3.0.0-beta.15_vdkwhj2kz5kpysy3rwb432nm3y
   webfontloader: 1.6.28
 
 devDependencies:
@@ -53,7 +53,7 @@ devDependencies:
   prettier: 2.7.1
   typescript: 4.7.4
   vite: 3.1.7
-  vite-plugin-vuetify: 1.0.0-alpha.17_jvcjrjiyr77axku57qj2zhmwla
+  vite-plugin-vuetify: 1.0.0-alpha.17_g64smqxqrz57uhsly7clskj5fy
   vue-tsc: 1.0.7_typescript@4.7.4
 
 packages:
@@ -482,7 +482,7 @@ packages:
       '@types/node': 16.11.65
     dev: true
 
-  /@vuetify/loader-shared/1.6.0_ufv4csfzemzfiqpf5bhlrg5qhm:
+  /@vuetify/loader-shared/1.6.0_l2xw63bflzffxrhpro723k3mhy:
     resolution: {integrity: sha512-mRvswe5SIecagmKkL1c0UQx5V9ACKLyEGegOOe5vC3ccFH8rMbyI4AVZaAKm/EnGXKirWJ1umL8RQFcGd+C0tw==}
     peerDependencies:
       vue: ^3.0.0
@@ -491,7 +491,7 @@ packages:
       find-cache-dir: 3.3.2
       upath: 2.0.1
       vue: 3.2.40
-      vuetify: 3.0.0-beta.14_vdkwhj2kz5kpysy3rwb432nm3y
+      vuetify: 3.0.0-beta.15_vdkwhj2kz5kpysy3rwb432nm3y
 
   /acorn-jsx/5.3.2_acorn@8.8.0:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
@@ -2150,18 +2150,18 @@ packages:
       spdx-expression-parse: 3.0.1
     dev: true
 
-  /vite-plugin-vuetify/1.0.0-alpha.17_jvcjrjiyr77axku57qj2zhmwla:
+  /vite-plugin-vuetify/1.0.0-alpha.17_g64smqxqrz57uhsly7clskj5fy:
     resolution: {integrity: sha512-lP4vG+Z3LnIEjI8nSE8/MJwDRQK5OnS2i4zHDu36yyD4E7wmPKyIkWJdkfBIsx/O+PU7dGc/3MeLARgr+RErEQ==}
     engines: {node: '>=12'}
     peerDependencies:
       vite: ^2.7.0 || ^3.0.0
       vuetify: ^3.0.0-beta.4
     dependencies:
-      '@vuetify/loader-shared': 1.6.0_ufv4csfzemzfiqpf5bhlrg5qhm
+      '@vuetify/loader-shared': 1.6.0_l2xw63bflzffxrhpro723k3mhy
       debug: 4.3.4
       upath: 2.0.1
       vite: 3.1.7
-      vuetify: 3.0.0-beta.14_vdkwhj2kz5kpysy3rwb432nm3y
+      vuetify: 3.0.0-beta.15_vdkwhj2kz5kpysy3rwb432nm3y
     transitivePeerDependencies:
       - supports-color
       - vue
@@ -2252,8 +2252,8 @@ packages:
       '@vue/server-renderer': 3.2.40_vue@3.2.40
       '@vue/shared': 3.2.40
 
-  /vuetify/3.0.0-beta.14_vdkwhj2kz5kpysy3rwb432nm3y:
-    resolution: {integrity: sha512-7UX2rAcMPGdJ0SGAK+wUvlJTHR0KasYILhg7dV9hLyv9SfaTX4tbOQnSQVf4mXzdFB+5jDyaTs+bOYMVeoqXYg==}
+  /vuetify/3.0.0-beta.15_vdkwhj2kz5kpysy3rwb432nm3y:
+    resolution: {integrity: sha512-Tw4StO4JJxwzN7RIAJ+nBVTaftlk3TqfqCtMLwJY/SO/ciVru+sHtahOpXIbp8B43d/DIRql3mfnrz1ooTSXtQ==}
     engines: {node: ^12.20 || >=14.13}
     peerDependencies:
       vite-plugin-vuetify: ^1.0.0-alpha.12
@@ -2268,7 +2268,7 @@ packages:
       webpack-plugin-vuetify:
         optional: true
     dependencies:
-      vite-plugin-vuetify: 1.0.0-alpha.17_jvcjrjiyr77axku57qj2zhmwla
+      vite-plugin-vuetify: 1.0.0-alpha.17_g64smqxqrz57uhsly7clskj5fy
       vue: 3.2.40
 
   /webfontloader/1.6.28:

nextcloud_backup/frontend/src/App.vue

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

nextcloud_backup/frontend/src/components/MessageBar.vue

@@ -9,7 +9,7 @@
       <v-divider></v-divider>
       <v-responsive max-height="350px" class="overflow-y-auto">
         <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-list-item :class="{ 'bg-brown-darken-4': !item.viewed }">
               <v-list-item-title>
@@ -67,15 +67,22 @@
 
 <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 { ref } from "vue";
+import { storeToRefs } from "pinia";
+import { onBeforeUnmount, ref } from "vue";
 
-const messages = ref<Message[]>([]);
+const messagesStore = useMessageStore();
+const { messages } = storeToRefs(messagesStore);
 
-getMessages().then((values) => {
+const interval = setInterval(refreshMessages, 1000);
+
+function refreshMessages() {
+  getMessages().then((values) => {
     messages.value = values;
-});
+  });
+}
 
 function getMessageColor(messageType: MessageType) {
   switch (messageType) {
@@ -132,6 +139,10 @@ function getTimeDelta(time: string) {
     } as any);
   }
 }
-
 const show = ref<boolean[]>([]);
+refreshMessages();
+
+onBeforeUnmount(() => {
+  clearInterval(interval);
+});
 </script>

nextcloud_backup/frontend/src/components/NavbarComponent.vue

@@ -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 {

nextcloud_backup/frontend/src/components/settings/WebdavConfigForm.vue

@@ -11,6 +11,8 @@
           hide-details="auto"
           v-model="data.url"
           :error-messages="errors.url"
+          :loading="loading"
+          color="orange"
         ></v-text-field>
       </v-col>
     </v-row>
@@ -24,6 +26,8 @@
           hide-details="auto"
           v-model="data.webdavEndpoint.type"
           :error-messages="errors.type"
+          :loading="loading"
+          color="orange"
         >
         </v-select>
       </v-col>
@@ -39,19 +43,22 @@
           hide-details="auto"
           v-model="data.webdavEndpoint.customEndpoint"
           :error-messages="errors.customEndpoint"
+          :loading="loading"
+          color="orange"
         ></v-text-field>
       </v-col>
     </v-row>
     <v-row>
       <v-col class="d-flex align-content-end">
         <v-switch
-          color="warning"
           label="Allow Self Signed Certificate"
           v-model="data.allowSelfSignedCerts"
           hide-details="auto"
           density="compact"
           inset
           :error-messages="errors.allowSelfSignedCerts"
+          :loading="loading"
+          color="orange"
         ></v-switch>
       </v-col>
     </v-row>
@@ -83,6 +90,8 @@
           hide-details="auto"
           v-model="data.username"
           :error-messages="errors.username"
+          :loading="loading"
+          color="orange"
         >
         </v-text-field>
       </v-col>
@@ -97,6 +106,8 @@
           hide-details="auto"
           v-model="data.password"
           :error-messages="errors.password"
+          :loading="loading"
+          color="orange"
         ></v-text-field>
       </v-col>
     </v-row>
@@ -114,6 +125,8 @@
           hide-details="auto"
           v-model="data.backupDir"
           :error-messages="errors.backupDir"
+          :loading="loading"
+          color="orange"
         ></v-text-field>
       </v-col>
     </v-row>
@@ -131,6 +144,8 @@ import {
 import { ref } from "vue";
 import { HTTPError } from "ky";
 
+const loading = ref(true);
+
 const items = [
   {
     title: "Nextcloud",
@@ -167,13 +182,16 @@ const emit = defineEmits<{
   (e: "success"): void;
   (e: "fail"): void;
   (e: "loaded"): void;
+  (e: "loading"): void;
 }>();
 
 function save() {
+  loading.value = true;
   clearErrors();
   saveWebdavConfig(data.value)
     .then(() => {
       emit("success");
+      loading.value = false;
     })
     .catch(async (reason) => {
       if (reason instanceof HTTPError) {
@@ -186,6 +204,7 @@ function save() {
         }
       }
       emit("fail");
+      loading.value = false;
     });
 }
 
@@ -196,10 +215,11 @@ function clearErrors() {
 }
 
 function loadData() {
-  console.log("ok");
+  emit("loading");
   getWebdavConfig().then((value) => {
     data.value = value;
     emit("loaded");
+    loading.value = false;
   });
 }
 

nextcloud_backup/frontend/src/components/settings/WebdavConfigMenu.vue

@@ -15,6 +15,7 @@
           @fail="saving = false"
           @success="dialogStatusStore.webdav = false"
           @loaded="loading = false"
+          @loading="loading = true"
         ></webdav-settings-form>
       </v-card-text>
       <v-divider></v-divider>

nextcloud_backup/frontend/src/stores/counter.ts

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

nextcloud_backup/frontend/src/stores/message.ts

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

nextcloud_backup/frontend/src/types/messages.ts

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