Improve dates, times and schedule backup info

2024-12-20 19:06:06 +01:00 · 2023-02-27 18:04:26 +00:00 · 2023-02-27 18:04:26 +00:00 · 071444a9e7
commit 071444a9e7
parent 97b5cf04f5
28 changed files with 295 additions and 53 deletions
--- a/client/components/cards/LazyBookCard.vue
+++ b/client/components/cards/LazyBookCard.vue
@ -740,7 +740,7 @@ export default {
          episodeId: this.recentEpisode.id,
          title: this.recentEpisode.title,
          subtitle: this.mediaMetadata.title,
-          caption: this.recentEpisode.publishedAt ? `Published ${this.$formatDate(this.recentEpisode.publishedAt, 'MMM do, yyyy')}` : 'Unknown publish date',
+          caption: this.recentEpisode.publishedAt ? `Published ${this.$formatDate(this.recentEpisode.publishedAt, this.dateFormat)}` : 'Unknown publish date',
          duration: this.recentEpisode.audioFile.duration || null,
          coverPath: this.media.coverPath || null
        }
@ -864,7 +864,7 @@ export default {
                  episodeId: episode.id,
                  title: episode.title,
                  subtitle: this.mediaMetadata.title,
-                  caption: episode.publishedAt ? `Published ${this.$formatDate(episode.publishedAt, 'MMM do, yyyy')}` : 'Unknown publish date',
+                  caption: episode.publishedAt ? `Published ${this.$formatDate(episode.publishedAt, this.dateFormat)}` : 'Unknown publish date',
                  duration: episode.audioFile.duration || null,
                  coverPath: this.media.coverPath || null
                })
--- a/client/components/modals/BookmarksModal.vue
+++ b/client/components/modals/BookmarksModal.vue
@ -73,6 +73,12 @@ export default {
    },
    canCreateBookmark() {
      return !this.bookmarks.find((bm) => bm.time === this.currentTime)
+    },
+    dateFormat() {
+      return this.$store.state.serverSettings.dateFormat
+    },
+    timeFormat() {
+      return this.$store.state.serverSettings.timeFormat
    }
  },
  methods: {
@ -111,7 +117,7 @@ export default {
    },
    submitCreateBookmark() {
      if (!this.newBookmarkTitle) {
-        this.newBookmarkTitle = this.$formatDate(Date.now(), 'MMM dd, yyyy HH:mm')
+        this.newBookmarkTitle = this.$formatDatetime(Date.now(), this.dateFormat, this.timeFormat)
      }
      var bookmark = {
        title: this.newBookmarkTitle,
@ -134,4 +140,4 @@ export default {
    }
  }
 }
-</script>
+</script>
--- a/client/components/modals/ListeningSessionModal.vue
+++ b/client/components/modals/ListeningSessionModal.vue
@ -19,13 +19,13 @@
          <div class="flex items-center -mx-1 mb-1">
            <div class="w-40 px-1 text-gray-200">{{ $strings.LabelStartedAt }}</div>
            <div class="px-1">
-              {{ $formatDate(_session.startedAt, 'MMMM do, yyyy HH:mm') }}
+              {{ $formatDatetime(_session.startedAt, dateFormat, timeFormat) }}
            </div>
          </div>
          <div class="flex items-center -mx-1 mb-1">
            <div class="w-40 px-1 text-gray-200">{{ $strings.LabelUpdatedAt }}</div>
            <div class="px-1">
-              {{ $formatDate(_session.updatedAt, 'MMMM do, yyyy HH:mm') }}
+              {{ $formatDatetime(_session.updatedAt, dateFormat, timeFormat) }}
            </div>
          </div>
          <div class="flex items-center -mx-1 mb-1">
@ -151,6 +151,12 @@ export default {
      else if (playMethod === this.$constants.PlayMethod.DIRECTSTREAM) return 'Direct Stream'
      else if (playMethod === this.$constants.PlayMethod.LOCAL) return 'Local'
      return 'Unknown'
+    },
+    dateFormat() {
+      return this.$store.state.serverSettings.dateFormat
+    },
+    timeFormat() {
+      return this.$store.state.serverSettings.timeFormat
    }
  },
  methods: {
@ -186,4 +192,4 @@ export default {
  },
  mounted() {}
 }
-</script>
+</script>
--- a/client/components/tables/BackupsTable.vue
+++ b/client/components/tables/BackupsTable.vue
@ -17,7 +17,7 @@
          <td>
            <p class="truncate text-xs sm:text-sm md:text-base">/{{ backup.path.replace(/\\/g, '/') }}</p>
          </td>
-          <td class="hidden sm:table-cell font-sans text-sm">{{ backup.datePretty }}</td>
+          <td class="hidden sm:table-cell font-sans text-sm">{{ $formatDatetime(backup.createdAt, dateFormat, timeFormat) }}</td>
          <td class="hidden sm:table-cell font-mono md:text-sm text-xs">{{ $bytesPretty(backup.fileSize) }}</td>
          <td>
            <div class="w-full flex flex-row items-center justify-center">
@ -46,7 +46,7 @@
        <p class="text-error text-lg font-semibold">{{ $strings.MessageImportantNotice }}</p>
        <p class="text-base py-1" v-html="$strings.MessageRestoreBackupWarning" />

-        <p class="text-lg text-center my-8">{{ $strings.MessageRestoreBackupConfirm }} {{ selectedBackup.datePretty }}?</p>
+        <p class="text-lg text-center my-8">{{ $strings.MessageRestoreBackupConfirm }} {{ $formatDatetime(selectedBackup.createdAt, dateFormat, timeFormat) }}?</p>
        <div class="flex px-1 items-center">
          <ui-btn color="primary" @click="showConfirmApply = false">{{ $strings.ButtonNevermind }}</ui-btn>
          <div class="flex-grow" />
@ -71,6 +71,12 @@ export default {
  computed: {
    userToken() {
      return this.$store.getters['user/getToken']
+    },
+    dateFormat() {
+      return this.$store.state.serverSettings.dateFormat
+    },
+    timeFormat() {
+      return this.$store.state.serverSettings.timeFormat
    }
  },
  methods: {
@ -90,7 +96,7 @@ export default {
        })
    },
    deleteBackupClick(backup) {
-      if (confirm(this.$getString('MessageConfirmDeleteBackup', [backup.datePretty]))) {
+      if (confirm(this.$getString('MessageConfirmDeleteBackup', [this.$formatDatetime(backup.createdAt, this.dateFormat, this.timeFormat)]))) {
        this.processing = true
        this.$axios
          .$delete(`/api/backups/${backup.id}`)
@ -208,4 +214,4 @@ export default {
  padding-bottom: 5px;
  background-color: #333;
 }
-</style>
+</style>
--- a/client/components/tables/UsersTable.vue
+++ b/client/components/tables/UsersTable.vue
@ -25,13 +25,13 @@
            </div>
          </td>
          <td class="text-xs font-mono hidden sm:table-cell">
-            <ui-tooltip v-if="user.lastSeen" direction="top" :text="$formatDate(user.lastSeen, 'MMMM do, yyyy HH:mm')">
+            <ui-tooltip v-if="user.lastSeen" direction="top" :text="$formatDatetime(user.lastSeen, dateFormat, timeFormat)">
              {{ $dateDistanceFromNow(user.lastSeen) }}
            </ui-tooltip>
          </td>
          <td class="text-xs font-mono hidden sm:table-cell">
-            <ui-tooltip direction="top" :text="$formatDate(user.createdAt, 'MMMM do, yyyy HH:mm')">
-              {{ $formatDate(user.createdAt, 'MMM d, yyyy') }}
+            <ui-tooltip direction="top" :text="$formatDatetime(user.createdAt, dateFormat, timeFormat)">
+              {{ $formatDate(user.createdAt, dateFormat) }}
            </ui-tooltip>
          </td>
          <td class="py-0">
@ -74,6 +74,12 @@ export default {
      var usermap = {}
      this.$store.state.users.usersOnline.forEach((u) => (usermap[u.id] = u))
      return usermap
+    },
+    dateFormat() {
+      return this.$store.state.serverSettings.dateFormat
+    },
+    timeFormat() {
+      return this.$store.state.serverSettings.timeFormat
    }
  },
  methods: {
@ -201,4 +207,4 @@ export default {
  padding-bottom: 5px;
  background-color: #272727;
 }
-</style>
+</style>
--- a/client/components/tables/podcast/EpisodeTableRow.vue
+++ b/client/components/tables/podcast/EpisodeTableRow.vue
@ -11,7 +11,7 @@
        <div class="flex justify-between pt-2 max-w-xl">
          <p v-if="episode.season" class="text-sm text-gray-300">Season #{{ episode.season }}</p>
          <p v-if="episode.episode" class="text-sm text-gray-300">Episode #{{ episode.episode }}</p>
-          <p v-if="publishedAt" class="text-sm text-gray-300">Published {{ $formatDate(publishedAt, 'MMM do, yyyy') }}</p>
+          <p v-if="publishedAt" class="text-sm text-gray-300">Published {{ $formatDate(publishedAt, dateFormat) }}</p>
        </div>

        <div class="flex items-center pt-2">
@ -128,6 +128,9 @@ export default {
    },
    publishedAt() {
      return this.episode.publishedAt
+    },
+    dateFormat() {
+      return this.$store.state.serverSettings.dateFormat
    }
  },
  methods: {
@ -205,4 +208,4 @@ export default {
    }
  }
 }
-</script>
+</script>
--- a/client/components/tables/podcast/EpisodesTable.vue
+++ b/client/components/tables/podcast/EpisodesTable.vue
@ -143,6 +143,12 @@ export default {
        var itemProgress = this.$store.getters['user/getUserMediaProgress'](this.libraryItem.id, episode.id)
        return !itemProgress || !itemProgress.isFinished
      })
+    },
+    dateFormat() {
+      return this.$store.state.serverSettings.dateFormat
+    },
+    timeFormat() {
+      return this.$store.state.serverSettings.timeFormat
    }
  },
  methods: {
@ -195,7 +201,7 @@ export default {
        episodeId: episode.id,
        title: episode.title,
        subtitle: this.mediaMetadata.title,
-        caption: episode.publishedAt ? `Published ${this.$formatDate(episode.publishedAt, 'MMM do, yyyy')}` : 'Unknown publish date',
+        caption: episode.publishedAt ? `Published ${this.$formatDate(episode.publishedAt, this.dateFormat)}` : 'Unknown publish date',
        duration: episode.audioFile.duration || null,
        coverPath: this.media.coverPath || null
      }
@ -263,7 +269,7 @@ export default {
            episodeId: episode.id,
            title: episode.title,
            subtitle: this.mediaMetadata.title,
-            caption: episode.publishedAt ? `Published ${this.$formatDate(episode.publishedAt, 'MMM do, yyyy')}` : 'Unknown publish date',
+            caption: episode.publishedAt ? `Published ${this.$formatDate(episode.publishedAt, this.dateFormat)}` : 'Unknown publish date',
            duration: episode.audioFile.duration || null,
            coverPath: this.media.coverPath || null
          })
@ -314,4 +320,4 @@ export default {
 .episode-leave-active {
  position: absolute;
 }
-</style>
+</style>
--- a/client/components/widgets/CronExpressionBuilder.vue
+++ b/client/components/widgets/CronExpressionBuilder.vue
@ -36,6 +36,10 @@
          <p v-else class="text-success text-base md:text-lg text-center">{{ $strings.MessageValidCronExpression }}</p>
        </div>
      </template>
+      <div v-if="cronExpression && isValid" class="flex items-center justify-center text-yellow-400 mt-2">
+        <span class="material-icons-outlined mr-2 text-xl">event</span>
+        <p>{{ $strings.LabelNextScheduledRun }}: {{ nextRun }}</p>
+      </div>
    </div>
  </div>
 </template>
@ -78,6 +82,11 @@ export default {
    hourIsValid() {
      return !(isNaN(this.selectedHour) || this.selectedHour === '' || this.selectedHour < 0 || this.selectedHour > 23)
    },
+    nextRun() {
+      if (!this.cronExpression) return ''
+      const parsed = this.$getNextScheduledDate(this.cronExpression)
+      return this.$formatJsDatetime(parsed, this.$store.state.serverSettings.dateFormat, this.$store.state.serverSettings.timeFormat) || ''
+    },
    description() {
      if ((this.selectedInterval !== 'custom' || !this.selectedWeekdays.length) && this.selectedInterval !== 'daily') return ''

--- a/client/pages/config/backups.vue
+++ b/client/pages/config/backups.vue
@ -9,10 +9,17 @@
      </div>

      <div v-if="enableBackups" class="mb-6">
-        <div class="flex items-center pl-6">
-          <span class="material-icons-outlined text-2xl 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 class="flex items-center pl-6 mb-2">
+          <span class="material-icons-outlined text-2xl text-black-50 mr-2">schedule</span>
+          <div class="w-48"><span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.HeaderSchedule }}:</span></div>
+          <div class="text-gray-100">{{ scheduleDescription }}</div>
+          <span class="material-icons text-lg text-black-50 hover:text-yellow-500 cursor-pointer ml-2" @click="showCronBuilder = !showCronBuilder">edit</span>
+        </div>
+
+        <div v-if="nextBackupDate" class="flex items-center pl-6 py-0.5 px-2">
+          <span class="material-icons-outlined text-2xl text-black-50 mr-2">event</span>
+          <div class="w-48"><span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelNextBackupDate }}:</span></div>
+          <div class="text-gray-100">{{ nextBackupDate }}</div>
        </div>
      </div>

@ -64,10 +71,21 @@ export default {
    serverSettings() {
      return this.$store.state.serverSettings
    },
+    dateFormat() {
+      return this.serverSettings.dateFormat
+    },
+    timeFormat() {
+      return this.serverSettings.timeFormat
+    },
    scheduleDescription() {
      if (!this.cronExpression) return ''
      const parsed = this.$parseCronExpression(this.cronExpression)
-      return parsed ? parsed.description : 'Custom cron expression ' + this.cronExpression
+      return parsed ? parsed.description : `${this.$strings.LabelCustomCronExpression} ${this.cronExpression}`
+    },
+    nextBackupDate() {
+      if (!this.cronExpression) return ''
+      const parsed = this.$getNextScheduledDate(this.cronExpression)
+      return this.$formatJsDatetime(parsed, this.dateFormat, this.timeFormat) || ''
    }
  },
  methods: {
@ -90,15 +108,15 @@ export default {
    updateServerSettings(payload) {
      this.updatingServerSettings = true
      this.$store
-        .dispatch('updateServerSettings', payload)
-        .then((success) => {
-          console.log('Updated Server Settings', success)
-          this.updatingServerSettings = false
-        })
-        .catch((error) => {
-          console.error('Failed to update server settings', error)
-          this.updatingServerSettings = false
-        })
+          .dispatch('updateServerSettings', payload)
+          .then((success) => {
+            console.log('Updated Server Settings', success)
+            this.updatingServerSettings = false
+          })
+          .catch((error) => {
+            console.error('Failed to update server settings', error)
+            this.updatingServerSettings = false
+          })
    },
    initServerSettings() {
      this.newServerSettings = this.serverSettings ? { ...this.serverSettings } : {}
@ -113,4 +131,4 @@ export default {
    this.initServerSettings()
  }
 }
-</script>
+</script>
--- a/client/pages/config/index.vue
+++ b/client/pages/config/index.vue
@ -68,8 +68,14 @@
            </ui-tooltip>
          </div>

-          <div class="py-2">
+          <div class="flex items-end py-2">
            <ui-dropdown :label="$strings.LabelSettingsDateFormat" v-model="newServerSettings.dateFormat" :items="dateFormats" small class="max-w-52" @input="(val) => updateSettingsKey('dateFormat', val)" />
+            <span class="ml-2 text-yellow-400">{{ dateExample }}</span>
+          </div>
+
+          <div class="flex items-end py-2">
+            <ui-dropdown :label="$strings.LabelSettingsTimeFormat" v-model="newServerSettings.timeFormat" :items="timeFormats" small class="max-w-52" @input="(val) => updateSettingsKey('timeFormat', val)" />
+            <span class="ml-2 text-yellow-400">{{ timeExample }}</span>
          </div>

          <div class="py-2">
@ -293,7 +299,18 @@ export default {
    },
    dateFormats() {
      return this.$store.state.globals.dateFormats
-    }
+    },
+    timeFormats() {
+      return this.$store.state.globals.timeFormats
+    },
+    dateExample() {
+      const date = new Date(2014, 2, 25);
+      return this.$formatJsDate(date, this.newServerSettings.dateFormat)
+    },
+    timeExample() {
+      const date = new Date(2014, 2, 25, 17, 30, 0);
+      return this.$formatJsTime(date, this.newServerSettings.timeFormat)
+    },
  },
  methods: {
    updateSortingPrefixes(val) {
@ -420,4 +437,4 @@ export default {
    this.initServerSettings()
  }
 }
-</script>
+</script>
--- a/client/pages/config/sessions.vue
+++ b/client/pages/config/sessions.vue
@ -39,7 +39,7 @@
              <p class="text-xs font-mono">{{ $secondsToTimestamp(session.currentTime) }}</p>
            </td>
            <td class="text-center hidden sm:table-cell">
-              <ui-tooltip v-if="session.updatedAt" direction="top" :text="$formatDate(session.updatedAt, 'MMMM do, yyyy HH:mm')">
+              <ui-tooltip v-if="session.updatedAt" direction="top" :text="$formatDatetime(session.updatedAt, dateFormat, timeFormat)">
                <p class="text-xs text-gray-200">{{ $dateDistanceFromNow(session.updatedAt) }}</p>
              </ui-tooltip>
            </td>
@ -105,6 +105,12 @@ export default {
      if (!this.userFilter) return null
      var user = this.users.find((u) => u.id === this.userFilter)
      return user ? user.username : null
+    },
+    dateFormat() {
+      return this.$store.state.serverSettings.dateFormat
+    },
+    timeFormat() {
+      return this.$store.state.serverSettings.timeFormat
    }
  },
  methods: {
@ -149,7 +155,7 @@ export default {
          episodeId: episode.id,
          title: episode.title,
          subtitle: libraryItem.media.metadata.title,
-          caption: episode.publishedAt ? `Published ${this.$formatDate(episode.publishedAt, 'MMM do, yyyy')}` : 'Unknown publish date',
+          caption: episode.publishedAt ? `Published ${this.$formatDate(episode.publishedAt, this.dateFormat)}` : 'Unknown publish date',
          duration: episode.audioFile.duration || null,
          coverPath: libraryItem.media.coverPath || null
        }
@ -266,4 +272,4 @@ export default {
  padding: 4px 8px;
  font-size: 0.75rem;
 }
-</style>
+</style>
--- a/client/pages/config/users/_id/index.vue
+++ b/client/pages/config/users/_id/index.vue
@ -79,12 +79,12 @@
              <p class="text-sm">{{ Math.floor(item.progress * 100) }}%</p>
            </td>
            <td class="text-center hidden sm:table-cell">
-              <ui-tooltip v-if="item.startedAt" direction="top" :text="$formatDate(item.startedAt, 'MMMM do, yyyy HH:mm')">
+              <ui-tooltip v-if="item.startedAt" direction="top" :text="$formatDatetime(item.startedAt, dateFormat, timeFormat)">
                <p class="text-sm">{{ $dateDistanceFromNow(item.startedAt) }}</p>
              </ui-tooltip>
            </td>
            <td class="text-center hidden sm:table-cell">
-              <ui-tooltip v-if="item.lastUpdate" direction="top" :text="$formatDate(item.lastUpdate, 'MMMM do, yyyy HH:mm')">
+              <ui-tooltip v-if="item.lastUpdate" direction="top" :text="$formatDatetime(item.lastUpdate, dateFormat, timeFormat)">
                <p class="text-sm">{{ $dateDistanceFromNow(item.lastUpdate) }}</p>
              </ui-tooltip>
            </td>
@ -149,6 +149,12 @@ export default {
    latestSession() {
      if (!this.listeningSessions.sessions || !this.listeningSessions.sessions.length) return null
      return this.listeningSessions.sessions[0]
+    },
+    dateFormat() {
+      return this.$store.state.serverSettings.dateFormat
+    },
+    timeFormat() {
+      return this.$store.state.serverSettings.timeFormat
    }
  },
  methods: {
--- a/client/pages/config/users/_id/sessions.vue
+++ b/client/pages/config/users/_id/sessions.vue
@ -46,7 +46,7 @@
                <p class="text-xs font-mono">{{ $secondsToTimestamp(session.currentTime) }}</p>
              </td>
              <td class="text-center hidden sm:table-cell">
-                <ui-tooltip v-if="session.updatedAt" direction="top" :text="$formatDate(session.updatedAt, 'MMMM do, yyyy HH:mm')">
+                <ui-tooltip v-if="session.updatedAt" direction="top" :text="$formatDatetime(session.updatedAt, dateFormat, timeFormat)">
                  <p class="text-xs text-gray-200">{{ $dateDistanceFromNow(session.updatedAt) }}</p>
                </ui-tooltip>
              </td>
@ -96,6 +96,12 @@ export default {
    },
    userOnline() {
      return this.$store.getters['users/getIsUserOnline'](this.user.id)
+    },
+    dateFormat() {
+      return this.$store.state.serverSettings.dateFormat
+    },
+    timeFormat() {
+      return this.$store.state.serverSettings.timeFormat
    }
  },
  methods: {
@ -140,7 +146,7 @@ export default {
          episodeId: episode.id,
          title: episode.title,
          subtitle: libraryItem.media.metadata.title,
-          caption: episode.publishedAt ? `Published ${this.$formatDate(episode.publishedAt, 'MMM do, yyyy')}` : 'Unknown publish date',
+          caption: episode.publishedAt ? `Published ${this.$formatDate(episode.publishedAt, this.dateFormat)}` : 'Unknown publish date',
          duration: episode.audioFile.duration || null,
          coverPath: libraryItem.media.coverPath || null
        }
@ -252,4 +258,4 @@ export default {
  padding: 4px 8px;
  font-size: 0.75rem;
 }
-</style>
+</style>
--- a/client/pages/item/_id/index.vue
+++ b/client/pages/item/_id/index.vue
@ -638,7 +638,7 @@ export default {
              episodeId: episode.id,
              title: episode.title,
              subtitle: this.title,
-              caption: episode.publishedAt ? `Published ${this.$formatDate(episode.publishedAt, 'MMM do, yyyy')}` : 'Unknown publish date',
+              caption: episode.publishedAt ? `Published ${this.$formatDate(episode.publishedAt, this.dateFormat)}` : 'Unknown publish date',
              duration: episode.audioFile.duration || null,
              coverPath: this.libraryItem.media.coverPath || null
            })
--- a/client/pages/library/_library/podcast/latest.vue
+++ b/client/pages/library/_library/podcast/latest.vue
@ -117,6 +117,9 @@ export default {
        if (i.episodeId) episodeIds[i.episodeId] = true
      })
      return episodeIds
+    },
+    dateFormat() {
+      return this.$store.state.serverSettings.dateFormat
    }
  },
  methods: {
@ -160,7 +163,7 @@ export default {
            episodeId: episode.id,
            title: episode.title,
            subtitle: episode.podcast.metadata.title,
-            caption: episode.publishedAt ? `Published ${this.$formatDate(episode.publishedAt, 'MMM do, yyyy')}` : 'Unknown publish date',
+            caption: episode.publishedAt ? `Published ${this.$formatDate(episode.publishedAt, this.dateFormat)}` : 'Unknown publish date',
            duration: episode.duration || null,
            coverPath: episode.podcast.coverPath || null
          })
@ -198,7 +201,7 @@ export default {
          episodeId: episode.id,
          title: episode.title,
          subtitle: episode.podcast.metadata.title,
-          caption: episode.publishedAt ? `Published ${this.$formatDate(episode.publishedAt, 'MMM do, yyyy')}` : 'Unknown publish date',
+          caption: episode.publishedAt ? `Published ${this.$formatDate(episode.publishedAt, this.dateFormat)}` : 'Unknown publish date',
          duration: episode.duration || null,
          coverPath: episode.podcast.coverPath || null
        }
--- a/client/plugins/init.client.js
+++ b/client/plugins/init.client.js
@ -23,6 +23,22 @@ Vue.prototype.$formatJsDate = (jsdate, fnsFormat = 'MM/dd/yyyy HH:mm') => {
  if (!jsdate || !isDate(jsdate)) return ''
  return format(jsdate, fnsFormat)
 }
+Vue.prototype.$formatTime = (unixms, fnsFormat = 'HH:mm') => {
+    if (!unixms) return ''
+    return format(unixms, fnsFormat)
+}
+Vue.prototype.$formatJsTime = (jsdate, fnsFormat = 'HH:mm') => {
+    if (!jsdate || !isDate(jsdate)) return ''
+    return format(jsdate, fnsFormat)
+}
+Vue.prototype.$formatDatetime = (unixms, fnsDateFormart = 'MM/dd/yyyy', fnsTimeFormat = 'HH:mm') => {
+    if (!unixms) return ''
+    return format(unixms, `${fnsDateFormart} ${fnsTimeFormat}`)
+}
+Vue.prototype.$formatJsDatetime = (jsdate, fnsDateFormart = 'MM/dd/yyyy', fnsTimeFormat = 'HH:mm') => {
+    if (!jsdate || !isDate(jsdate)) return ''
+    return format(jsdate, `${fnsDateFormart} ${fnsTimeFormat}`)
+}
 Vue.prototype.$addDaysToToday = (daysToAdd) => {
  var date = addDays(new Date(), daysToAdd)
  if (!date || !isDate(date)) return null
@ -167,4 +183,4 @@ export default ({ app, store }, inject) => {
  inject('isDev', process.env.NODE_ENV !== 'production')

  store.commit('setRouterBasePath', app.$config.routerBasePath)
-}
+}
--- a/client/plugins/utils.js
+++ b/client/plugins/utils.js
@ -136,6 +136,47 @@ Vue.prototype.$parseCronExpression = (expression) => {
  }
 }

+Vue.prototype.$getNextScheduledDate = (expression) => {
+  const cronFields = expression.split(' ');
+  const currentDate = new Date();
+  const nextDate = new Date();
+
+  // Calculate next minute
+  const minute = cronFields[0];
+  const currentMinute = currentDate.getMinutes();
+  const nextMinute = getNextValue(minute, currentMinute, 59);
+  nextDate.setMinutes(nextMinute);
+
+  // Calculate next hour
+  const hour = cronFields[1];
+  const currentHour = currentDate.getHours();
+  const nextHour = getNextValue(hour, currentHour, 23);
+  nextDate.setHours(nextHour);
+
+  // Calculate next day of month
+  const dayOfMonth = cronFields[2];
+  const currentDayOfMonth = currentDate.getDate();
+  const lastDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0).getDate();
+  const nextDayOfMonth = getNextValue(dayOfMonth, currentDayOfMonth, lastDayOfMonth);
+  nextDate.setDate(nextDayOfMonth);
+
+  // Calculate next month
+  const month = cronFields[3];
+  const currentMonth = currentDate.getMonth() + 1;
+  const nextMonth = getNextValue(month, currentMonth, 12);
+  nextDate.setMonth(nextMonth - 1);
+
+  // Calculate next day of week
+  const dayOfWeek = cronFields[4];
+  const currentDayOfWeek = currentDate.getDay();
+  const nextDayOfWeek = getNextValue(dayOfWeek, currentDayOfWeek, 6);
+  const daysUntilNextDayOfWeek = getNextDaysUntilDayOfWeek(currentDate, nextDayOfWeek);
+  nextDate.setDate(currentDate.getDate() + daysUntilNextDayOfWeek);
+
+  // Return the next scheduled date
+  return nextDate;
+}
+
 export function supplant(str, subs) {
  // source: http://crockford.com/javascript/remedial.html
  return str.replace(/{([^{}]*)}/g,
@ -144,4 +185,26 @@ export function supplant(str, subs) {
      return typeof r === 'string' || typeof r === 'number' ? r : a
    }
  )
-}
+}
+
+function getNextValue(cronField, currentValue, maxValue) {
+  if (cronField === '*') {
+    return currentValue + 1 <= maxValue ? currentValue + 1 : 0;
+  }
+  const values = cronField.split(',');
+  const len = values.length;
+  let nextValue = parseInt(values[0]);
+  for (let i = 0; i < len; i++) {
+    const value = parseInt(values[i]);
+    if (value > currentValue) {
+      nextValue = value;
+      break;
+    }
+  }
+  return nextValue <= maxValue ? nextValue : parseInt(values[0]);
+}
+
+function getNextDaysUntilDayOfWeek(currentDate, nextDayOfWeek) {
+  const daysUntilNextDayOfWeek = (nextDayOfWeek + 7 - currentDate.getDay()) % 7;
+  return daysUntilNextDayOfWeek === 0 ? 7 : daysUntilNextDayOfWeek;
+}
--- a/client/store/globals.js
+++ b/client/store/globals.js
@ -35,6 +35,32 @@ export const state = () => ({
    {
      text: 'YYYY-MM-DD',
      value: 'yyyy-MM-dd'
+    },
+    {
+      text: 'MMM do, yyyy',
+      value: 'MMM do, yyyy'
+    },
+    {
+      text: 'MMMM do, yyyy',
+      value: 'MMMM do, yyyy'
+    },
+    {
+      text: 'dd MMM yyyy',
+      value: 'dd MMM yyyy'
+    },
+    {
+      text: 'dd MMMM yyyy',
+      value: 'dd MMMM yyyy'
+    }
+  ],
+  timeFormats: [
+    {
+      text: 'h:mma (am/pm)',
+      value: 'h:mma'
+    },
+    {
+      text: 'HH:mm (24-hour)',
+      value: 'HH:mm'
    }
  ],
  podcastTypes: [
--- a/client/strings/de.json
+++ b/client/strings/de.json
@ -195,6 +195,7 @@
  "LabelCronExpression": "Cron Ausdruck",
  "LabelCurrent": "Aktuell",
  "LabelCurrently": "Aktuell:",
+  "LabelCustomCronExpression": "Custom Cron Expression:",
  "LabelDatetime": "Datum & Uhrzeit",
  "LabelDescription": "Beschreibung",
  "LabelDeselectAll": "Alles abwählen",
@ -273,6 +274,8 @@
  "LabelNewestAuthors": "Neuste Autoren",
  "LabelNewestEpisodes": "Neueste Episoden",
  "LabelNewPassword": "Neues Passwort",
+  "LabelNextBackupDate": "Next backup date",
+  "LabelNextScheduledRun": "Next scheduled run",
  "LabelNotes": "Hinweise",
  "LabelNotFinished": "nicht beendet",
  "LabelNotificationAppriseURL": "Apprise URL(s)",
@ -365,6 +368,7 @@
  "LabelSettingsStoreCoversWithItemHelp": "Standardmäßig werden die Titelbilder in /metadata/items gespeichert. Wenn diese Option aktiviert ist, werden die Titelbilder als jpg Datei in dem gleichen Ordner gespeichert in welchem sich auch das Medium befindet. Es wird immer nur eine Datei mit dem Namen \"cover.jpg\" gespeichert.",
  "LabelSettingsStoreMetadataWithItem": "Metadaten als OPF-Datei im Medienordner speichern",
  "LabelSettingsStoreMetadataWithItemHelp": "Standardmäßig werden die Metadaten in /metadata/items gespeichert. Wenn diese Option aktiviert ist, werden die Metadaten als OPF-Datei (Textdatei) in dem gleichen Ordner gespeichert in welchem sich auch das Medium befindet. Es wird immer nur eine Datei mit dem Namen \"matadata.abs\" gespeichert.",
+  "LabelSettingsTimeFormat": "Time Format",
  "LabelShowAll": "Alles anzeigen",
  "LabelSize": "Größe",
  "LabelSleepTimer": "Einschlaf-Timer",
@ -623,4 +627,4 @@
  "ToastSocketFailedToConnect": "Verbindung zum WebSocket fehlgeschlagen",
  "ToastUserDeleteFailed": "Benutzer konnte nicht gelöscht werden",
  "ToastUserDeleteSuccess": "Benutzer gelöscht"
-}
+}
--- a/client/strings/en-us.json
+++ b/client/strings/en-us.json
@ -195,6 +195,7 @@
  "LabelCronExpression": "Cron Expression",
  "LabelCurrent": "Current",
  "LabelCurrently": "Currently:",
+  "LabelCustomCronExpression": "Custom Cron Expression:",
  "LabelDatetime": "Datetime",
  "LabelDescription": "Description",
  "LabelDeselectAll": "Deselect All",
@ -273,6 +274,8 @@
  "LabelNewestAuthors": "Newest Authors",
  "LabelNewestEpisodes": "Newest Episodes",
  "LabelNewPassword": "New Password",
+  "LabelNextBackupDate": "Next backup date",
+  "LabelNextScheduledRun": "Next scheduled run",
  "LabelNotes": "Notes",
  "LabelNotFinished": "Not Finished",
  "LabelNotificationAppriseURL": "Apprise URL(s)",
@ -365,6 +368,7 @@
  "LabelSettingsStoreCoversWithItemHelp": "By default covers are stored in /metadata/items, enabling this setting will store covers in your library item folder. Only one file named \"cover\" will be kept",
  "LabelSettingsStoreMetadataWithItem": "Store metadata with item",
  "LabelSettingsStoreMetadataWithItemHelp": "By default metadata files are stored in /metadata/items, enabling this setting will store metadata files in your library item folders. Uses .abs file extension",
+  "LabelSettingsTimeFormat": "Time Format",
  "LabelShowAll": "Show All",
  "LabelSize": "Size",
  "LabelSleepTimer": "Sleep timer",
--- a/client/strings/es.json
+++ b/client/strings/es.json
@ -195,6 +195,7 @@
  "LabelCronExpression": "Cron Expression",
  "LabelCurrent": "Current",
  "LabelCurrently": "Currently:",
+  "LabelCustomCronExpression": "Custom Cron Expression:",
  "LabelDatetime": "Datetime",
  "LabelDescription": "Description",
  "LabelDeselectAll": "Deselect All",
@ -273,6 +274,8 @@
  "LabelNewestAuthors": "Newest Authors",
  "LabelNewestEpisodes": "Newest Episodes",
  "LabelNewPassword": "New Password",
+  "LabelNextBackupDate": "Next backup date",
+  "LabelNextScheduledRun": "Next scheduled run",
  "LabelNotes": "Notes",
  "LabelNotFinished": "Not Finished",
  "LabelNotificationAppriseURL": "Apprise URL(s)",
@ -365,6 +368,7 @@
  "LabelSettingsStoreCoversWithItemHelp": "By default covers are stored in /metadata/items, enabling this setting will store covers in your library item folder. Only one file named \"cover\" will be kept",
  "LabelSettingsStoreMetadataWithItem": "Store metadata with item",
  "LabelSettingsStoreMetadataWithItemHelp": "By default metadata files are stored in /metadata/items, enabling this setting will store metadata files in your library item folders. Uses .abs file extension",
+  "LabelSettingsTimeFormat": "Time Format",
  "LabelShowAll": "Show All",
  "LabelSize": "Size",
  "LabelSleepTimer": "Sleep timer",
--- a/client/strings/fr.json
+++ b/client/strings/fr.json
@ -195,6 +195,7 @@
  "LabelCronExpression": "Expression Cron",
  "LabelCurrent": "Courrant",
  "LabelCurrently": "En ce moment :",
+  "LabelCustomCronExpression": "Custom Cron Expression:",
  "LabelDatetime": "Datetime",
  "LabelDescription": "Description",
  "LabelDeselectAll": "Tout déselectionner",
@ -273,6 +274,8 @@
  "LabelNewestAuthors": "Nouveaux auteurs",
  "LabelNewestEpisodes": "Derniers épisodes",
  "LabelNewPassword": "Nouveau mot de passe",
+  "LabelNextBackupDate": "Next backup date",
+  "LabelNextScheduledRun": "Next scheduled run",
  "LabelNotes": "Notes",
  "LabelNotFinished": "Non terminé(e)",
  "LabelNotificationAppriseURL": "URL(s) d'apprise",
@ -365,6 +368,7 @@
  "LabelSettingsStoreCoversWithItemHelp": "Par défaut, les couvertures sont enregistrées dans /metadata/items. Activer ce paramètre enregistrera les couvertures dans le dossier avec les fichiersde l'article. Seul un fichier nommé \"cover\" sera gardé.",
  "LabelSettingsStoreMetadataWithItem": "Enregistrer les Métadonnées avec les articles",
  "LabelSettingsStoreMetadataWithItemHelp": "Par défaut, les métadonnées sont enregistrées dans /metadata/items. Activer ce paramètre enregistrera les métadonnées dans le dossier de l'article avec une extension \".abs\".",
+  "LabelSettingsTimeFormat": "Time Format",
  "LabelShowAll": "Afficher Tout",
  "LabelSize": "Taille",
  "LabelSleepTimer": "Minuterie",
--- a/client/strings/hr.json
+++ b/client/strings/hr.json
@ -195,6 +195,7 @@
  "LabelCronExpression": "Cron Expression",
  "LabelCurrent": "Trenutan",
  "LabelCurrently": "Trenutno:",
+  "LabelCustomCronExpression": "Custom Cron Expression:",
  "LabelDatetime": "Datetime",
  "LabelDescription": "Opis",
  "LabelDeselectAll": "Odznači sve",
@ -273,6 +274,8 @@
  "LabelNewestAuthors": "Najnoviji autori",
  "LabelNewestEpisodes": "Najnovije epizode",
  "LabelNewPassword": "Nova lozinka",
+  "LabelNextBackupDate": "Next backup date",
+  "LabelNextScheduledRun": "Next scheduled run",
  "LabelNotes": "Bilješke",
  "LabelNotFinished": "Nedovršeno",
  "LabelNotificationAppriseURL": "Apprise URL(s)",
@ -365,6 +368,7 @@
  "LabelSettingsStoreCoversWithItemHelp": "By default covers are stored in /metadata/items, enabling this setting will store covers in your library item folder. Only one file named \"cover\" will be kept",
  "LabelSettingsStoreMetadataWithItem": "Spremi metapodatke uz stavku",
  "LabelSettingsStoreMetadataWithItemHelp": "Po defaultu metapodatci su spremljeni u /metadata/items, uključujućite li ovu postavku, metapodatci će biti spremljeni u folderima od biblioteke. Koristi .abs ekstenziju.",
+  "LabelSettingsTimeFormat": "Time Format",
  "LabelShowAll": "Prikaži sve",
  "LabelSize": "Veličina",
  "LabelSleepTimer": "Sleep timer",
--- a/client/strings/it.json
+++ b/client/strings/it.json
@ -195,6 +195,7 @@
  "LabelCronExpression": "Espressione Cron",
  "LabelCurrent": "Attuale",
  "LabelCurrently": "Attualmente:",
+  "LabelCustomCronExpression": "Custom Cron Expression:",
  "LabelDatetime": "Data & Ora",
  "LabelDescription": "Descrizione",
  "LabelDeselectAll": "Deseleziona Tutto",
@ -273,6 +274,8 @@
  "LabelNewestAuthors": "Autori Recenti",
  "LabelNewestEpisodes": "Episodi Recenti",
  "LabelNewPassword": "Nuova Password",
+  "LabelNextBackupDate": "Next backup date",
+  "LabelNextScheduledRun": "Next scheduled run",
  "LabelNotes": "Note",
  "LabelNotFinished": "Da Completare",
  "LabelNotificationAppriseURL": "Apprendi URL(s)",
@ -365,6 +368,7 @@
  "LabelSettingsStoreCoversWithItemHelp": "Di default, le immagini di copertina sono salvate dentro /metadata/items, abilitando questa opzione le copertine saranno archiviate nella cartella della libreria corrispondente. Verrà conservato solo un file denominato \"cover\"",
  "LabelSettingsStoreMetadataWithItem": "Archivia i metadata con il file",
  "LabelSettingsStoreMetadataWithItemHelp": "Di default, i metadati sono salvati dentro /metadata/items, abilitando questa opzione si memorizzeranno i metadata nella cartella della libreria. I file avranno estensione .abs",
+  "LabelSettingsTimeFormat": "Time Format",
  "LabelShowAll": "Mostra Tutto",
  "LabelSize": "Dimensione",
  "LabelSleepTimer": "Sleep timer",
--- a/client/strings/pl.json
+++ b/client/strings/pl.json
@ -195,6 +195,7 @@
  "LabelCronExpression": "Wyrażenie CRON",
  "LabelCurrent": "Aktualny",
  "LabelCurrently": "Obecnie:",
+  "LabelCustomCronExpression": "Custom Cron Expression:",
  "LabelDatetime": "Data i godzina",
  "LabelDescription": "Opis",
  "LabelDeselectAll": "Odznacz wszystko",
@ -273,6 +274,8 @@
  "LabelNewestAuthors": "Najnowsi autorzy",
  "LabelNewestEpisodes": "Najnowsze odcinki",
  "LabelNewPassword": "Nowe hasło",
+  "LabelNextBackupDate": "Next backup date",
+  "LabelNextScheduledRun": "Next scheduled run",
  "LabelNotes": "Uwagi",
  "LabelNotFinished": "Nieukończone",
  "LabelNotificationAppriseURL": "URLe Apprise",
@ -365,6 +368,7 @@
  "LabelSettingsStoreCoversWithItemHelp": "Domyślnie okładki są przechowywane w folderze /metadata/items, włączenie tej opcji spowoduje, że okładka będzie przechowywana w folderze ksiązki. Tylko jedna okładka o nazwie pliku \"cover\" będzie przechowywana.",
  "LabelSettingsStoreMetadataWithItem": "Przechowuj metadane w folderze książki",
  "LabelSettingsStoreMetadataWithItemHelp": "Domyślnie metadane są przechowywane w folderze /metadata/items, włączenie tej opcji spowoduje, że okładka będzie przechowywana w folderze ksiązki. Tylko jedna okładka o nazwie pliku \"cover\" będzie przechowywana. Rozszerzenie pliku metadanych: .abs",
+  "LabelSettingsTimeFormat": "Time Format",
  "LabelShowAll": "Pokaż wszystko",
  "LabelSize": "Rozmiar",
  "LabelSleepTimer": "Wyłącznik czasowy",
--- a/client/strings/ru.json
+++ b/client/strings/ru.json
@ -195,6 +195,7 @@
  "LabelCronExpression": "Выражение Cron",
  "LabelCurrent": "Текущий",
  "LabelCurrently": "Текущее:",
+  "LabelCustomCronExpression": "Custom Cron Expression:",
  "LabelDatetime": "Дата и время",
  "LabelDescription": "Описание",
  "LabelDeselectAll": "Снять Выделение",
@ -273,6 +274,8 @@
  "LabelNewestAuthors": "Новые Авторы",
  "LabelNewestEpisodes": "Новые Эпизоды",
  "LabelNewPassword": "Новый Пароль",
+  "LabelNextBackupDate": "Next backup date",
+  "LabelNextScheduledRun": "Next scheduled run",
  "LabelNotes": "Заметки",
  "LabelNotFinished": "Не Завершено",
  "LabelNotificationAppriseURL": "URL(ы) для извещений",
@ -365,6 +368,7 @@
  "LabelSettingsStoreCoversWithItemHelp": "По умолчанию обложки сохраняются в папке /metadata/items, при включении этой настройки обложка будет храниться в папке элемента. Будет сохраняться только один файл с именем \"cover\"",
  "LabelSettingsStoreMetadataWithItem": "Хранить метаинформацию с элементом",
  "LabelSettingsStoreMetadataWithItemHelp": "По умолчанию метаинформация сохраняется в папке /metadata/items, при включении этой настройки метаинформация будет храниться в папке элемента. Используется расширение файла .abs",
+  "LabelSettingsTimeFormat": "Time Format",
  "LabelShowAll": "Показать Все",
  "LabelSize": "Размер",
  "LabelSleepTimer": "Таймер сна",
--- a/client/strings/zh-cn.json
+++ b/client/strings/zh-cn.json
@ -195,6 +195,7 @@
  "LabelCronExpression": "计划任务表达式",
  "LabelCurrent": "当前",
  "LabelCurrently": "当前:",
+  "LabelCustomCronExpression": "Custom Cron Expression:",
  "LabelDatetime": "日期时间",
  "LabelDescription": "描述",
  "LabelDeselectAll": "全部取消选择",
@ -273,6 +274,8 @@
  "LabelNewestAuthors": "最新作者",
  "LabelNewestEpisodes": "最新剧集",
  "LabelNewPassword": "新密码",
+  "LabelNextBackupDate": "Next backup date",
+  "LabelNextScheduledRun": "Next scheduled run",
  "LabelNotes": "注释",
  "LabelNotFinished": "未听完",
  "LabelNotificationAppriseURL": "通知 URL(s)",
@ -365,6 +368,7 @@
  "LabelSettingsStoreCoversWithItemHelp": "默认情况下封面存储在/metadata/items文件夹中, 启用此设置将存储封面在你媒体项目文件夹中. 只保留一个名为 \"cover\" 的文件",
  "LabelSettingsStoreMetadataWithItem": "存储项目元数据",
  "LabelSettingsStoreMetadataWithItemHelp": "默认情况下元数据文件存储在/metadata/items文件夹中, 启用此设置将存储元数据在你媒体项目文件夹中. 使 .abs 文件护展名",
+  "LabelSettingsTimeFormat": "Time Format",
  "LabelShowAll": "全部显示",
  "LabelSize": "文件大小",
  "LabelSleepTimer": "睡眠定时",
--- a/server/objects/settings/ServerSettings.js
+++ b/server/objects/settings/ServerSettings.js
@ -51,6 +51,7 @@ class ServerSettings {
    this.chromecastEnabled = false
    this.enableEReader = false
    this.dateFormat = 'MM/dd/yyyy'
+    this.timeFormat = 'HH:mm'
    this.language = 'en-us'

    this.logLevel = Logger.logLevel
@ -96,6 +97,7 @@ class ServerSettings {
    this.chromecastEnabled = !!settings.chromecastEnabled
    this.enableEReader = !!settings.enableEReader
    this.dateFormat = settings.dateFormat || 'MM/dd/yyyy'
+    this.timeFormat = settings.timeFormat || 'HH:mm'
    this.language = settings.language || 'en-us'
    this.logLevel = settings.logLevel || Logger.logLevel
    this.version = settings.version || null
@ -146,6 +148,7 @@ class ServerSettings {
      chromecastEnabled: this.chromecastEnabled,
      enableEReader: this.enableEReader,
      dateFormat: this.dateFormat,
+      timeFormat: this.timeFormat,
      language: this.language,
      logLevel: this.logLevel,
      version: this.version
@ -178,4 +181,4 @@ class ServerSettings {
    return hasUpdates
  }
 }
-module.exports = ServerSettings
+module.exports = ServerSettings