Add:Set schedule for automatic backups #822

client/components/modals/BackupScheduleModal.vue

@@ -0,0 +1,91 @@
+<template>
+  <modals-modal v-model="show" name="backup-scheduler" :width="700" :height="'unset'" :processing="processing">
+    <template #outer>
+      <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
+        <p class="font-book text-3xl text-white truncate">Set Backup Schedule</p>
+      </div>
+    </template>
+    <div v-if="show && newCronExpression" class="p-4 w-full text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-hidden" style="min-height: 400px; max-height: 80vh">
+      <widgets-cron-expression-builder ref="expressionBuilder" v-model="newCronExpression" @input="expressionUpdated" />
+
+      <div class="flex items-center justify-end">
+        <ui-btn :disabled="!isUpdated" @click="submit">{{ isUpdated ? 'Save Backup Schedule' : 'No update necessary' }}</ui-btn>
+      </div>
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean,
+    cronExpression: {
+      type: String,
+      default: '* * * * *'
+    }
+  },
+  data() {
+    return {
+      processing: false,
+      newCronExpression: null,
+      isUpdated: false
+    }
+  },
+  watch: {
+    show: {
+      handler(newVal) {
+        if (newVal) {
+          this.init()
+        }
+      }
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  },
+  methods: {
+    expressionUpdated() {
+      this.isUpdated = this.newCronExpression !== this.cronExpression
+    },
+    init() {
+      this.newCronExpression = this.cronExpression
+      this.isUpdated = false
+    },
+    submit() {
+      // If custom expression input is focused then unfocus it instead of submitting
+      if (this.$refs.expressionBuilder && this.$refs.expressionBuilder.checkBlurExpressionInput) {
+        if (this.$refs.expressionBuilder.checkBlurExpressionInput()) {
+          return
+        }
+      }
+
+      this.processing = true
+
+      var updatePayload = {
+        backupSchedule: this.newCronExpression
+      }
+      this.$store
+        .dispatch('updateServerSettings', updatePayload)
+        .then((success) => {
+          console.log('Updated Server Settings', success)
+          this.processing = false
+          this.show = false
+          this.$emit('update:cronExpression', this.newCronExpression)
+        })
+        .catch((error) => {
+          console.error('Failed to update server settings', error)
+          this.processing = false
+        })
+    }
+  },
+  mounted() {},
+  beforeDestroy() {}
+}
+</script>

client/components/ui/Tooltip.vue

@@ -41,13 +41,6 @@ export default {
         this.setTooltipPosition(this.tooltip)
       }
     },
-    getTextWidth() {
-      var styles = {
-        'font-size': '0.75rem'
-      }
-      var size = this.$calculateTextSize(this.text, styles)
-      return size.width
-    },
     createTooltip() {
       if (!this.$refs.box) return
       var tooltip = document.createElement('div')

client/components/widgets/CronExpressionBuilder.vue

@@ -231,11 +231,6 @@ export default {
         this.isValid = false
         return
       }
-      // if (this.customCronExpression.split(' ')[0] === '*') {
-      //   this.customCronError = 'Cannot use * in minutes position'
-      //   this.isValid = false
-      //   return
-      // }
 
       if (this.customCronExpression !== this.cronExpression) {
         this.selectedWeekdays = []
@@ -306,7 +301,6 @@ export default {
           this.selectedMinute = pieces[0]
         }
       }
-
       this.cronExpression = this.value
       this.customCronExpression = this.value
     }

client/nuxt.config.js

@@ -48,7 +48,8 @@ module.exports = {
     '@/plugins/constants.js',
     '@/plugins/init.client.js',
     '@/plugins/axios.js',
-    '@/plugins/toast.js'
+    '@/plugins/toast.js',
+    '@/plugins/utils.js'
   ],
 
   // Auto import components: https://go.nuxtjs.dev/config-components

client/pages/config/backups.vue

@@ -8,17 +8,19 @@
       <p class="text-base mb-4 text-gray-300">Backups include users, user progress, book details, server settings and covers stored in <span class="font-mono text-gray-100">/metadata/items</span>. <br />Backups <strong>do not</strong> include any files stored in your library folders.</p>
 
       <div class="flex items-center py-2">
-        <ui-toggle-switch v-model="dailyBackups" small :disabled="updatingServerSettings" @input="updateBackupsSettings" />
-        <ui-tooltip :text="dailyBackupsTooltip">
-          <p class="pl-4 text-lg">Run daily backups <span class="material-icons icon-text">info_outlined</span></p>
+        <ui-toggle-switch v-model="enableBackups" small :disabled="updatingServerSettings" @input="updateBackupsSettings" />
+        <ui-tooltip :text="backupsTooltip">
+          <p class="pl-4 text-lg">Enable automatic backups <span class="material-icons icon-text">info_outlined</span></p>
         </ui-tooltip>
       </div>
 
-      <!-- <div class="flex items-center py-2">
-        <ui-text-input v-model="cronExpression" :disabled="updatingServerSettings" class="w-32" @change="changedCronExpression" />
-
-        <p class="pl-4 text-lg">Cron expression</p>
-      </div> -->
+      <div v-if="enableBackups" class="mb-6">
+        <div class="flex items-center pl-6">
+          <span class="material-icons-outlined text-black-50">schedule</span>
+          <p class="text-gray-100 px-2">{{ scheduleDescription }}</p>
+          <span class="material-icons text-lg text-black-50 hover:text-yellow-500 cursor-pointer" @click="showCronBuilder = !showCronBuilder">edit</span>
+        </div>
+      </div>
 
       <div class="flex items-center py-2">
         <ui-text-input type="number" v-model="backupsToKeep" no-spinner :disabled="updatingServerSettings" :padding-x="1" text-center class="w-10" @change="updateBackupsSettings" />
@@ -36,6 +38,8 @@
 
       <tables-backups-table />
     </div>
+
+    <modals-backup-schedule-modal v-model="showCronBuilder" :cron-expression.sync="cronExpression" />
   </div>
 </template>
 
@@ -44,11 +48,12 @@ export default {
   data() {
     return {
       updatingServerSettings: false,
-      dailyBackups: true,
+      enableBackups: true,
       backupsToKeep: 2,
       maxBackupSize: 1,
-      // cronExpression: '',
-      newServerSettings: {}
+      cronExpression: '',
+      newServerSettings: {},
+      showCronBuilder: false
     }
   },
   watch: {
@@ -60,29 +65,22 @@ export default {
     }
   },
   computed: {
-    dailyBackupsTooltip() {
-      return 'Runs at 1:30am every day (your server time). Saved in /metadata/backups.'
+    backupsTooltip() {
+      return 'Backups saved in /metadata/backups'
     },
     maxBackupSizeTooltip() {
       return 'As a safeguard against misconfiguration, backups will fail if they exceed the configured size.'
     },
     serverSettings() {
       return this.$store.state.serverSettings
+    },
+    scheduleDescription() {
+      if (!this.cronExpression) return ''
+      const parsed = this.$parseCronExpression(this.cronExpression)
+      return parsed ? parsed.description : 'Custom cron expression ' + this.cronExpression
     }
   },
   methods: {
-    // changedCronExpression() {
-    //   this.$axios
-    //     .$post('/api/validate-cron', { expression: this.cronExpression })
-    //     .then(() => {
-    //       console.log('Cron is valid')
-    //     })
-    //     .catch((error) => {
-    //       console.error('Cron validation failed', error)
-    //       const msg = (error.response ? error.response.data : null) || 'Unknown cron validation error'
-    //       this.$toast.error(msg)
-    //     })
-    // },
     updateBackupsSettings() {
       if (isNaN(this.maxBackupSize) || this.maxBackupSize <= 0) {
         this.$toast.error('Invalid maximum backup size')
@@ -93,7 +91,7 @@ export default {
         return
       }
       var updatePayload = {
-        backupSchedule: this.dailyBackups ? '30 1 * * *' : false,
+        backupSchedule: this.enableBackups ? this.cronExpression : false,
         backupsToKeep: Number(this.backupsToKeep),
         maxBackupSize: Number(this.maxBackupSize)
       }
@@ -116,9 +114,9 @@ export default {
       this.newServerSettings = this.serverSettings ? { ...this.serverSettings } : {}
 
       this.backupsToKeep = this.newServerSettings.backupsToKeep || 2
-      this.dailyBackups = !!this.newServerSettings.backupSchedule
+      this.enableBackups = !!this.newServerSettings.backupSchedule
       this.maxBackupSize = this.newServerSettings.maxBackupSize || 1
-      // this.cronExpression = '30 1 * * *'
+      this.cronExpression = this.newServerSettings.backupSchedule || '30 1 * * *'
     }
   },
   mounted() {

client/plugins/init.client.js

@@ -30,92 +30,6 @@ Vue.prototype.$addDaysToDate = (jsdate, daysToAdd) => {
   return date
 }
 
-Vue.prototype.$bytesPretty = (bytes, decimals = 2) => {
-  if (isNaN(bytes) || bytes == 0) {
-    return '0 Bytes'
-  }
-  const k = 1024
-  const dm = decimals < 0 ? 0 : decimals
-  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
-  const i = Math.floor(Math.log(bytes) / Math.log(k))
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
-}
-
-Vue.prototype.$elapsedPretty = (seconds, useFullNames = false) => {
-  if (seconds < 60) {
-    return `${Math.floor(seconds)} sec${useFullNames ? 'onds' : ''}`
-  }
-  var minutes = Math.floor(seconds / 60)
-  if (minutes < 70) {
-    return `${minutes} min${useFullNames ? `ute${minutes === 1 ? '' : 's'}` : ''}`
-  }
-  var hours = Math.floor(minutes / 60)
-  minutes -= hours * 60
-  if (!minutes) {
-    return `${hours} ${useFullNames ? 'hours' : 'hr'}`
-  }
-  return `${hours} ${useFullNames ? `hour${hours === 1 ? '' : 's'}` : 'hr'} ${minutes} ${useFullNames ? `minute${minutes === 1 ? '' : 's'}` : 'min'}`
-}
-
-Vue.prototype.$secondsToTimestamp = (seconds) => {
-  if (!seconds) return '0:00'
-  var _seconds = seconds
-  var _minutes = Math.floor(seconds / 60)
-  _seconds -= _minutes * 60
-  var _hours = Math.floor(_minutes / 60)
-  _minutes -= _hours * 60
-  _seconds = Math.floor(_seconds)
-  if (!_hours) {
-    return `${_minutes}:${_seconds.toString().padStart(2, '0')}`
-  }
-  return `${_hours}:${_minutes.toString().padStart(2, '0')}:${_seconds.toString().padStart(2, '0')}`
-}
-
-Vue.prototype.$elapsedPrettyExtended = (seconds, useDays = true) => {
-  if (isNaN(seconds) || seconds === null) return ''
-  seconds = Math.round(seconds)
-
-  var minutes = Math.floor(seconds / 60)
-  seconds -= minutes * 60
-  var hours = Math.floor(minutes / 60)
-  minutes -= hours * 60
-
-  var days = 0
-  if (useDays || Math.floor(hours / 24) >= 100) {
-    days = Math.floor(hours / 24)
-    hours -= days * 24
-  }
-
-  var strs = []
-  if (days) strs.push(`${days}d`)
-  if (hours) strs.push(`${hours}h`)
-  if (minutes) strs.push(`${minutes}m`)
-  if (seconds) strs.push(`${seconds}s`)
-  return strs.join(' ')
-}
-
-Vue.prototype.$calculateTextSize = (text, styles = {}) => {
-  const el = document.createElement('p')
-
-  let attr = 'margin:0px;opacity:1;position:absolute;top:100px;left:100px;z-index:99;'
-  for (const key in styles) {
-    if (styles[key] && String(styles[key]).length > 0) {
-      attr += `${key}:${styles[key]};`
-    }
-  }
-
-  el.setAttribute('style', attr)
-  el.innerText = text
-
-  document.body.appendChild(el)
-  const boundingBox = el.getBoundingClientRect()
-  el.remove()
-  return {
-    height: boundingBox.height,
-    width: boundingBox.width
-  }
-}
-
 Vue.prototype.$sanitizeFilename = (input, colonReplacement = ' - ') => {
   if (typeof input !== 'string') {
     return false

client/plugins/utils.js

@@ -0,0 +1,128 @@
+import Vue from 'vue'
+
+Vue.prototype.$bytesPretty = (bytes, decimals = 2) => {
+  if (isNaN(bytes) || bytes == 0) {
+    return '0 Bytes'
+  }
+  const k = 1024
+  const dm = decimals < 0 ? 0 : decimals
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
+}
+
+Vue.prototype.$elapsedPretty = (seconds, useFullNames = false) => {
+  if (seconds < 60) {
+    return `${Math.floor(seconds)} sec${useFullNames ? 'onds' : ''}`
+  }
+  var minutes = Math.floor(seconds / 60)
+  if (minutes < 70) {
+    return `${minutes} min${useFullNames ? `ute${minutes === 1 ? '' : 's'}` : ''}`
+  }
+  var hours = Math.floor(minutes / 60)
+  minutes -= hours * 60
+  if (!minutes) {
+    return `${hours} ${useFullNames ? 'hours' : 'hr'}`
+  }
+  return `${hours} ${useFullNames ? `hour${hours === 1 ? '' : 's'}` : 'hr'} ${minutes} ${useFullNames ? `minute${minutes === 1 ? '' : 's'}` : 'min'}`
+}
+
+Vue.prototype.$secondsToTimestamp = (seconds) => {
+  if (!seconds) return '0:00'
+  var _seconds = seconds
+  var _minutes = Math.floor(seconds / 60)
+  _seconds -= _minutes * 60
+  var _hours = Math.floor(_minutes / 60)
+  _minutes -= _hours * 60
+  _seconds = Math.floor(_seconds)
+  if (!_hours) {
+    return `${_minutes}:${_seconds.toString().padStart(2, '0')}`
+  }
+  return `${_hours}:${_minutes.toString().padStart(2, '0')}:${_seconds.toString().padStart(2, '0')}`
+}
+
+Vue.prototype.$elapsedPrettyExtended = (seconds, useDays = true) => {
+  if (isNaN(seconds) || seconds === null) return ''
+  seconds = Math.round(seconds)
+
+  var minutes = Math.floor(seconds / 60)
+  seconds -= minutes * 60
+  var hours = Math.floor(minutes / 60)
+  minutes -= hours * 60
+
+  var days = 0
+  if (useDays || Math.floor(hours / 24) >= 100) {
+    days = Math.floor(hours / 24)
+    hours -= days * 24
+  }
+
+  var strs = []
+  if (days) strs.push(`${days}d`)
+  if (hours) strs.push(`${hours}h`)
+  if (minutes) strs.push(`${minutes}m`)
+  if (seconds) strs.push(`${seconds}s`)
+  return strs.join(' ')
+}
+
+Vue.prototype.$parseCronExpression = (expression) => {
+  if (!expression) return null
+  const pieces = expression.split(' ')
+  if (pieces.length !== 5) {
+    return null
+  }
+
+  const commonPatterns = [
+    {
+      text: 'Every 12 hours',
+      value: '0 */12 * * *'
+    },
+    {
+      text: 'Every 6 hours',
+      value: '0 */6 * * *'
+    },
+    {
+      text: 'Every 2 hours',
+      value: '0 */2 * * *'
+    },
+    {
+      text: 'Every hour',
+      value: '0 * * * *'
+    },
+    {
+      text: 'Every 30 minutes',
+      value: '*/30 * * * *'
+    },
+    {
+      text: 'Every 15 minutes',
+      value: '*/15 * * * *'
+    },
+    {
+      text: 'Every minute',
+      value: '* * * * *'
+    }
+  ]
+  const patternMatch = commonPatterns.find(p => p.value === expression)
+  if (patternMatch) {
+    return {
+      description: patternMatch.text
+    }
+  }
+
+  if (isNaN(pieces[0]) || isNaN(pieces[1])) {
+    return null
+  }
+  if (pieces[2] !== '*' || pieces[3] !== '*') {
+    return null
+  }
+  if (pieces[4] !== '*' && pieces[4].split(',').some(p => isNaN(p))) {
+    return null
+  }
+
+  const weekdays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
+  var weekdayText = 'day'
+  if (pieces[4] !== '*') weekdayText = pieces[4].split(',').map(p => weekdays[p]).join(', ')
+
+  return {
+    description: `Run every ${weekdayText} at ${pieces[1]}:${pieces[0].padStart(2, '0')}`
+  }
+}