🔨 Show cloud backups list

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/App.vue

@@ -3,7 +3,13 @@
     <navbar-component></navbar-component>
     <message-bar></message-bar>
     <webdav-settings-menu></webdav-settings-menu>
-    <v-main> </v-main>
+    <v-main class="mx-12"> 
+      <v-row>
+        <v-col cols="6" offset="6">
+          <cloud-list></cloud-list>
+        </v-col>
+      </v-row>
+    </v-main>
   </v-app>
 </template>
 
@@ -11,6 +17,7 @@
 import NavbarComponent from "./components/NavbarComponent.vue";
 import MessageBar from "./components/MessageBar.vue";
 import WebdavSettingsMenu from "./components/settings/WebdavConfigMenu.vue";
+import CloudList from "./components/cloud/CloudList.vue";
 </script>
 
 <style scoped></style>

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

@@ -10,9 +10,14 @@
     </v-app-bar-title>
     <v-spacer></v-spacer>
     <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/components/cloud/CloudList.vue

@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <v-card elevation="10" class="mt-10" border>
+      <v-card-title class="text-center"> Cloud </v-card-title>
+      <v-divider></v-divider>
+      <v-card-text>
+        <v-row>
+          <v-col>
+            <v-card variant="outlined" elevation="5" color="grey-darken-2">
+              <v-card-title class="text-center text-white">Auto</v-card-title>
+              <v-divider color="grey-darken-3"></v-divider>
+              <v-card-text class="pa-0">
+                <v-list variant="tonal" class="pa-0">
+                  <v-list-item
+                    v-if="autoBackups.length == 0"
+                    class="text-center text-subtitle-2 text-disabled"
+                    >Folder is empty</v-list-item
+                  >
+                  <template v-for="(item, index) in autoBackups" :key="item.id">
+                    <v-divider
+                      v-if="index != 0"
+                      color="grey-darken-3"
+                    ></v-divider>
+                    <v-list-item>
+                      <v-list-item-title>{{ item.name }}</v-list-item-title>
+                      <template v-slot:append>
+                        <v-btn variant="text" icon color="secondary">
+                          <v-icon>mdi-information</v-icon>
+                        </v-btn>
+                        <v-btn variant="text" icon color="red">
+                          <v-icon>mdi-trash-can</v-icon>
+                        </v-btn>
+                      </template>
+                    </v-list-item>
+                  </template>
+                </v-list>
+              </v-card-text>
+            </v-card>
+          </v-col>
+        </v-row>
+        <v-row>
+          <v-col>
+            <v-card variant="outlined" elevation="5" color="grey-darken-2">
+              <v-card-title class="text-center text-white">Manual</v-card-title>
+              <v-divider color="grey-darken-3"></v-divider>
+              <v-card-text class="pa-0">
+                <v-list variant="tonal" class="pa-0">
+                  <v-list-item
+                    v-if="manualBackups.length == 0"
+                    class="text-center text-subtitle-2 text-disabled"
+                    >Folder is empty</v-list-item
+                  >
+                  <template
+                    v-for="(item, index) in manualBackups"
+                    :key="item.id"
+                  >
+                    <v-divider
+                      v-if="index != 0"
+                      color="grey-darken-3"
+                    ></v-divider>
+                    <v-list-item>
+                      <v-list-item-title>{{ item.name }}</v-list-item-title>
+                      <template v-slot:append>
+                        <v-btn variant="text" icon color="secondary">
+                          <v-icon>mdi-information</v-icon>
+                        </v-btn>
+                        <v-btn variant="text" icon color="red">
+                          <v-icon>mdi-trash-can</v-icon>
+                        </v-btn>
+                      </template>
+                    </v-list-item>
+                  </template>
+                </v-list>
+              </v-card-text>
+            </v-card>
+          </v-col>
+        </v-row>
+      </v-card-text>
+    </v-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import type { WebdavBackup } from "@/types/webdav";
+import {
+  getAutoBackupList,
+  getManualBackupList,
+} from "@/services/webdavService";
+
+const autoBackups = ref<WebdavBackup[]>([]);
+const manualBackups = ref<WebdavBackup[]>([]);
+function refreshBackup() {
+  getAutoBackupList().then((value) => {
+    autoBackups.value = value;
+  });
+  getManualBackupList().then((value) => {
+    manualBackups.value = value;
+  });
+}
+
+refreshBackup();
+</script>

nextcloud_backup/frontend/src/plugins/vuetify.ts

@@ -8,7 +8,8 @@ import { createVuetify } from "vuetify";
 const darkTheme = {
   dark: true,
   colors: {
-    primary: "#0091ea",
+    primary: "#0091ea", //light-blue accent-4
+    accent: "#FF6F00", //amber darken-4
   },
 };
 

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[]>();
+}

nextcloud_backup/frontend/src/services/webdavService.ts

@@ -0,0 +1,10 @@
+import type { WebdavBackup } from "@/types/webdav";
+import kyClient from "./kyClient";
+
+export function getAutoBackupList() {
+  return kyClient.get("webdav/backup/auto").json<WebdavBackup[]>();
+}
+
+export function getManualBackupList() {
+  return kyClient.get("webdav/backup/manual").json<WebdavBackup[]>();
+}

nextcloud_backup/frontend/src/types/webdav.ts

@@ -0,0 +1,8 @@
+import type { DateTime } from "luxon";
+
+export interface WebdavBackup {
+  id: string;
+  name: string;
+  size: number;
+  lastEdit: DateTime;
+}