option backup restore #238

frontend/src/components/Main.vue

@@ -1,9 +1,6 @@
 <template>
-  <LogVue
-  v-model="logModal.visible"
-  :visible="logModal.visible"
-  @close="closeLogs"
-  />
+  <LogVue v-model="logModal.visible" :control="logModal" :visible="logModal.visible" />
+  <Backup v-model="backupModal.visible" :control="backupModal" :visible="backupModal.visible" />
   <v-container class="fill-height" :loading="loading">
     <v-responsive :class="reloadItems.length>0 ? 'fill-height text-center' : 'align-center'" >
       <v-row class="d-flex align-center justify-center">
@@ -46,6 +43,8 @@
               </v-row>
             </v-card>
           </v-dialog>
+          <v-btn variant="tonal" hide-details style="margin-inline-start: 10px;" @click="backupModal.visible = true">{{ $t('main.backup.title') }} <v-icon icon="mdi-backup-restore" /></v-btn>
+          <v-btn variant="tonal" hide-details style="margin-inline-start: 10px;" @click="logModal.visible = true">{{ $t('basic.log.title') }} <v-icon icon="mdi-list-box-outline" /></v-btn>
         </v-col>
       </v-row>
       <v-row>
@@ -86,18 +85,8 @@
                   <v-col cols="3">S-UI</v-col>
                   <v-col cols="9">
                     <v-chip density="compact" color="blue">
-                      <v-tooltip activator="parent" location="top">
-                        {{ $t('main.info.threads') }}: {{ tilesData.sys?.appThreads }}<br />
-                        {{ $t('main.info.memory') }}: {{ HumanReadable.sizeFormat(tilesData.sys?.appMem) }}
-                      </v-tooltip>
                       v{{ tilesData.sys?.appVersion }}
                     </v-chip>
-                    <v-chip density="compact" color="transparent" style="cursor: pointer;" @click="openLogs()">
-                      <v-tooltip activator="parent" location="top">
-                        {{ $t('basic.log.title') + " - S-UI" }}
-                      </v-tooltip>
-                      <v-icon icon="mdi-list-box-outline" color="blue" />
-                    </v-chip>
                   </v-col>
                   <v-col cols="3">{{ $t('main.info.uptime') }}</v-col>
                   <v-col cols="9">{{ HumanReadable.formatSecond(tilesData.uptime) }}</v-col>
@@ -166,6 +155,7 @@ import History from '@/components/tiles/History.vue'
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import { i18n } from '@/locales'
 import LogVue from '@/layouts/modals/Logs.vue'
+import Backup from '@/layouts/modals/Backup.vue'
 
 const loading = ref(false)
 const menu = ref(false)
@@ -235,17 +225,9 @@ onBeforeUnmount(() => {
   stopTimer()
 })
 
-const logModal = ref({
-  visible: false,
-})
+const logModal = ref({ visible: false })
 
-const openLogs = () => {
-  logModal.value.visible = true
-}
-
-const closeLogs = () => {
-  logModal.value.visible = false
-}
+const backupModal = ref({ visible: false })
 
 const restartSingbox = async () => {
   loading.value = true

frontend/src/layouts/modals/Backup.vue

@@ -0,0 +1,91 @@
+<template>
+  <v-dialog transition="dialog-bottom-transition" width="90%" max-width="500">
+    <v-card class="rounded-lg">
+      <v-card-title>
+        <v-row>
+          <v-col>{{ $t('main.backup.title') }}</v-col>
+          <v-spacer></v-spacer>
+          <v-col cols="auto">
+            <v-icon icon="mdi-close" @click="control.visible = false" />
+          </v-col>
+        </v-row>
+      </v-card-title>
+      <v-divider></v-divider>
+      <v-card-text>
+        <v-row>
+          <v-col cols="auto">
+            <v-checkbox v-model="exclude" :label="$t('main.backup.exclStats')" value="stats" hide-details></v-checkbox>
+          </v-col>
+          <v-col cols="auto">
+            <v-checkbox v-model="exclude" :label="$t('main.backup.exclChanges')" value="changes" hide-details></v-checkbox>
+          </v-col>
+          <v-spacer></v-spacer>
+          <v-col cols="auto" align-self="center">
+            <v-btn color="primary" @click="backup()" hide-details>{{ $t('main.backup.backup') }}</v-btn>
+          </v-col>
+        </v-row>
+        <v-row>
+          <v-spacer></v-spacer>
+          <v-col cols="auto" align-self="center">
+            <v-btn color="primary" @click="restore()" hide-details>{{ $t('main.backup.restore') }}</v-btn>
+          </v-col>
+        </v-row>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script lang="ts">
+import HttpUtils from '@/plugins/httputil'
+export default {
+  props: ['control', 'visible'],
+  data() {
+    return {
+      exclude: ["stats", "changes"],
+    }
+  },
+  methods: {
+    backup() {
+      const excludeOption = this.exclude.length>0 ? '?exclude=' +this.exclude.join(',') : ''
+      window.location.href = 'api/getdb' + excludeOption
+    },
+    restore() {
+      const fileInput = document.createElement('input')
+      fileInput.type = 'file'
+      fileInput.accept = '.db'
+
+      fileInput.addEventListener('change', async (event: Event) => {
+        const inputElement = event.target as HTMLInputElement
+        const dbFile = inputElement.files ? inputElement.files[0] : null
+
+        if (dbFile) {
+          const formData = new FormData()
+          formData.append('db', dbFile)
+
+          this.control.visible = false
+
+          const uploadMsg = await HttpUtils.post('api/importdb', formData, {
+              headers: {
+                  'Content-Type': 'multipart/form-data',
+              },
+          })
+
+          if (uploadMsg.success) {
+            await new Promise(resolve => setTimeout(resolve, 1000))
+            location.reload()
+          }
+        }
+    })
+
+    fileInput.click()
+    }
+  },
+  watch: {
+    visible(v) {
+      if (v) {
+        this.exclude = ["stats", "changes"]
+      }
+    },
+  },
+}
+</script>

frontend/src/layouts/modals/Logs.vue

@@ -6,7 +6,7 @@
           <v-col>{{ $t('basic.log.title') }}</v-col>
           <v-spacer></v-spacer>
           <v-col cols="auto">
-            <v-icon icon="mdi-close" @click="$emit('close')" />
+            <v-icon icon="mdi-close" @click="control.visible = false" />
           </v-col>
         </v-row>
       </v-card-title>
@@ -48,10 +48,10 @@
 </template>
 
 <script lang="ts">
-import HttpUtils from '@/plugins/httputil';
+import HttpUtils from '@/plugins/httputil'
 
 export default {
-  props: ['visible'],
+  props: ['control', 'visible'],
   data() {
     return {
       loading: false,
@@ -77,11 +77,11 @@ export default {
     }
   },
   watch: {
-    visible(newValue) {
+    visible(v) {
       this.lines = []
       this.logLevel = 'info'
       this.logCount = 10
-      if (newValue) {
+      if (v) {
         this.loadData()
       }
     },

frontend/src/locales/en.ts

@@ -72,6 +72,13 @@ export default {
       threads: "Threads",
       memory: "Memory",
       running: "Running"
+    },
+    backup: {
+      title: "Backup & Restore",
+      backup: "Download Backup",
+      restore: "Restore",
+      exclStats: "Exclude graphs",
+      exclChanges: "Exclude changes",
     }
   },
   objects: {

frontend/src/locales/fa.ts

@@ -72,7 +72,14 @@ export default {
       threads: "نخ‌ها",
       memory: "حافظه",
       running: "اجرا"
-    }
+    },
+    backup: {
+      title: "پشتیبان‌گیری و بازیابی",
+      backup: "دریافت پشتیبان",
+      restore: "بازیابی",
+      exclStats: "بدون گراف‌ها",
+      exclChanges: "بدون تغییرات",
+    },
   },
   objects: {
     inbound: "ورودی‌",

frontend/src/locales/ru.ts

@@ -72,6 +72,13 @@ export default {
       threads: "Потоки",
       memory: "Память",
       running: "Работает"
+    },
+    backup: {
+      title: "Резервное копирование и восстановление",
+      backup: "Скачать резервную копию",
+      restore: "Восстановить",
+      exclStats: "Исключить графики",
+      exclChanges: "Исключить изменения",
     }
   },
   objects: {

frontend/src/locales/vi.ts

@@ -1,3 +1,5 @@
+import { title } from "process";
+
 export default {
   message: "Chào mừng OHB",
   success: "Thành công",
@@ -70,6 +72,13 @@ export default {
       threads: "Luồng",
       memory: "Bộ nhớ",
       running: "Đang chạy"
+    },
+    backup: {
+      title: "Sao lưu và khôi phục",
+      backup: "Tải xuống bản sao lưu",
+      restore: "Khôi phục",
+      exclStats: "Loại trừ các biểu đồ",
+      exclChanges: "Loại trừ các thay đổi",
     }
   },
   objects: {

frontend/src/locales/zhcn.ts

@@ -70,7 +70,14 @@ export default {
       threads: "线程",
       memory: "内存",
       running: "运行状态"
-    }
+    },
+    backup: {
+      title: "备份与恢复",
+      backup: "下载备份",
+      restore: "恢复",
+      exclStats: "排除图表数据",
+      exclChanges: "排除变更数据",
+    },
   },
   objects: {
     inbound: "入站",

frontend/src/locales/zhtw.ts

@@ -71,7 +71,14 @@ export default {
       threads: "線程",
       memory: "內存",
       running: "運行狀態"
-    }
+    },
+    backup: {
+      title: "備份與恢復",
+      backup: "下載備份",
+      restore: "恢復",
+      exclStats: "排除圖表記錄",
+      exclChanges: "排除更改記錄",
+    },
   },
   objects: {
     inbound: "入站",