Display the time last backup (#200)

Author: sheepzh

src/app/components/option/components/backup/footer.ts

@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) 2023 Hengyang Zhang
+ * 
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+import { PropType, Ref, watch } from "vue"
+
+import { t } from "@app/locale"
+import { UploadFilled } from "@element-plus/icons-vue"
+import { ElButton, ElLoading, ElMessage, ElText } from "element-plus"
+import { defineComponent, h, ref } from "vue"
+import metaService from "@service/meta-service"
+import processor from "@src/common/backup/processor"
+import { formatTime } from "@util/time"
+
+async function handleBackup(lastTime: Ref<number>) {
+    const loading = ElLoading.service({
+        text: "Doing backup...."
+    })
+    const result = await processor.syncData()
+    loading.close()
+    if (result.success) {
+        ElMessage.success('Successfully!')
+        lastTime.value = result.data || Date.now()
+    } else {
+        ElMessage.error(result.errorMsg || 'Unknown error')
+    }
+}
+
+const TIME_FORMAT = t(msg => msg.calendar.timeFormat)
+
+const _default = defineComponent({
+    props: {
+        type: {
+            type: String as PropType<timer.backup.Type>,
+            required: false,
+        }
+    },
+    setup(props) {
+        const lastTime: Ref<number> = ref(undefined)
+
+        const queryLastTime = async () => {
+            const backInfo = await metaService.getLastBackUp(props.type)
+            lastTime.value = backInfo?.ts
+        }
+
+        queryLastTime()
+        watch(() => props.type, queryLastTime)
+
+        return () => {
+            const children = [
+                h(ElButton, {
+                    type: 'primary',
+                    icon: UploadFilled,
+                    onClick: () => handleBackup(lastTime)
+                }, () => t(msg => msg.option.backup.operation))
+            ]
+            const lastTimeVal = lastTime.value
+            if (lastTimeVal) {
+                const tips = t(msg => msg.option.backup.lastTimeTip, {
+                    lastTime: formatTime(lastTimeVal, TIME_FORMAT)
+                })
+                const tipText = h(ElText, { style: { marginLeft: '20px' } }, () => tips)
+                children.push(tipText)
+            }
+            lastTime.value && children.push()
+            return h('div', {}, children)
+        }
+    }
+})
+
+export default _default

src/app/components/option/components/backup/index.ts

@@ -14,8 +14,8 @@ import { defaultBackup } from "@util/constant/option"
 import { ElInput, ElOption, ElSelect, ElDivider, ElAlert, ElButton, ElMessage, ElLoading } from "element-plus"
 import { defineComponent, ref, h } from "vue"
 import { renderOptionItem, tooltip } from "../../common"
-import { UploadFilled } from "@element-plus/icons-vue"
 import BackUpAutoInput from "./auto-input"
+import Footer from "./footer"
 
 const ALL_TYPES: timer.backup.Type[] = [
     'none',
@@ -114,19 +114,6 @@ const _default = defineComponent({
             }
         }
 
-        async function handleBackup() {
-            const loading = ElLoading.service({
-                text: "Doing backup...."
-            })
-            const result = await processor.syncData()
-            loading.close()
-            if (result.success) {
-                ElMessage.success('Successfully!')
-            } else {
-                ElMessage.error(result.errorMsg || 'Unknown error')
-            }
-        }
-
         ctx.expose({
             async reset() {
                 // Only reset type and auto flag
@@ -151,6 +138,7 @@ const _default = defineComponent({
                     t(msg => msg.option.backup.meta[DEFAULT.backupType].label)
                 )
             ]
+            console.log(type.value)
             type.value !== 'none' && nodes.push(
                 h(ElDivider),
                 renderOptionItem({
@@ -178,11 +166,7 @@ const _default = defineComponent({
                     msg => msg.backup.client
                 ),
                 h(ElDivider),
-                h(ElButton, {
-                    type: 'primary',
-                    icon: UploadFilled,
-                    onClick: handleBackup
-                }, () => t(msg => msg.option.backup.operation)),
+                h(Footer, { type: type.value }),
             )
             return h('div', nodes)
         }

src/common/backup/processor.ts

@@ -145,7 +145,7 @@ class Processor {
         }
     }
 
-    async syncData(): Promise<Result<void>> {
+    async syncData(): Promise<Result<number>> {
         const option = (await optionService.getAllOption()) as timer.option.BackupOption
         const auth = option?.backupAuths?.[option.backupType || 'none']
 
@@ -173,8 +173,9 @@ class Processor {
         clients.push(client)
         await coordinator.updateClients(context, clients)
         // Update time
-        metaService.updateBackUpTime(type, Date.now())
-        return success()
+        const now = Date.now()
+        metaService.updateBackUpTime(type, now)
+        return success(now)
     }
 
     async query(type: timer.backup.Type, auth: string, start: Date, end: Date): Promise<timer.stat.Row[]> {

src/i18n/message/app/option.ts

@@ -73,6 +73,7 @@ export type OptionMessage = {
         alert: string
         test: string
         operation: string
+        lastTimeTip: string
         auto: {
             label: string
             interval: string
@@ -167,6 +168,7 @@ const _default: Messages<OptionMessage> = {
             },
             alert: '这是一项实验性功能，如果有任何问题请联系作者~ (returnzhy1996@outlook.com)',
             test: '测试',
+            lastTimeTip: '上次备份时间: {lastTime}',
             operation: '备份数据',
             auto: {
                 label: '是否开启自动备份',
@@ -253,6 +255,7 @@ const _default: Messages<OptionMessage> = {
             alert: '這是一項實驗性功能，如果有任何問題請聯繫作者 (returnzhy1996@outlook.com) ~',
             test: '測試',
             operation: '備份數據',
+            lastTimeTip: '上次備份時間: {lastTime}',
             auto: {
                 label: '是否開啟自動備份',
                 interval: '每 {input} 分鐘備份一次',
@@ -338,6 +341,7 @@ const _default: Messages<OptionMessage> = {
             alert: 'This is an experimental feature, if you have any questions please contact the author via returnzhy1996@outlook.com~',
             test: 'Test',
             operation: 'Backup',
+            lastTimeTip: 'Last backup time: {lastTime}',
             auto: {
                 label: 'Whether to enable automatic backup',
                 interval: 'and run every {input} minutes',
@@ -423,6 +427,7 @@ const _default: Messages<OptionMessage> = {
             alert: 'これは実験的な機能です。質問がある場合は、作成者に連絡してください (returnzhy1996@outlook.com)',
             test: 'テスト',
             operation: 'バックアップ',
+            lastTimeTip: '前回のバックアップ時間: {lastTime}',
             auto: {
                 label: '自動バックアップを有効にするかどうか',
                 interval: ' {input} 分ごとに実行',

src/i18n/message/common/calendar.ts

@@ -9,28 +9,33 @@ export type CalendarMessage = {
     weekDays: string
     months: string
     dateFormat: string
+    timeFormat: string
 }
 
 const _default: Messages<CalendarMessage> = {
     zh_CN: {
         weekDays: '星期一|星期二|星期三|星期四|星期五|星期六|星期天',
         months: '一月|二月|三月|四月|五月|六月|七月|八月|九月|十月|十一月|十二月',
         dateFormat: '{y}/{m}/{d}',
+        timeFormat: '{y}/{m}/{d} {h}:{i}:{s}',
     },
     zh_TW: {
         weekDays: '禮拜一|禮拜二|禮拜三|禮拜四|禮拜五|禮拜六|禮拜天',
         months: '一月|二月|三月|四月|五月|六月|七月|八月|九月|十月|十一月|十二月',
         dateFormat: '{y}/{m}/{d}',
+        timeFormat: '{y}/{m}/{d} {h}:{i}:{s}',
     },
     en: {
         weekDays: 'Mon|Tue|Wed|Thu|Fri|Sat|Sun',
         months: 'Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Set|Oct|Nov|Dec',
         dateFormat: '{m}/{d}/{y}',
+        timeFormat: '{m}/{d}/{y} {h}:{i}:{s}',
     },
     ja: {
         weekDays: 'Mon|Tue|Wed|Thu|Fri|Sat|Sun',
         months: 'Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Set|Oct|Nov|Dec',
         dateFormat: '{y}/{m}/{d}',
+        timeFormat: '{y}/{m}/{d} {h}:{i}:{s}',
     },
 }