Merge pull request #736 from cassieesposito/dateFormat

Date format
2025-01-22 00:07:52 +01:00 · 2022-06-18 10:34:32 -05:00 · 2022-06-18 10:34:32 -05:00 · 91e30a6e84
commit 91e30a6e84
parent 578bb03404 8ab0f164a6
7 changed files with 69 additions and 35 deletions
--- a/client/components/cards/LazyBookCard.vue
+++ b/client/components/cards/LazyBookCard.vue
@ -144,6 +144,9 @@ export default {
    }
  },
  computed: {
+    dateFormat() {
+      return this.store.state.serverSettings.dateFormat
+    },
    showExperimentalFeatures() {
      return this.store.state.showExperimentalFeatures
    },
@ -259,9 +262,9 @@ export default {
      return this.author
    },
    displaySortLine() {
-      if (this.orderBy === 'mtimeMs') return 'Modified ' + this.$formatDate(this._libraryItem.mtimeMs)
-      if (this.orderBy === 'birthtimeMs') return 'Born ' + this.$formatDate(this._libraryItem.birthtimeMs)
-      if (this.orderBy === 'addedAt') return 'Added ' + this.$formatDate(this._libraryItem.addedAt)
+      if (this.orderBy === 'mtimeMs') return 'Modified ' + this.$formatDate(this._libraryItem.mtimeMs, this.dateFormat)
+      if (this.orderBy === 'birthtimeMs') return 'Born ' + this.$formatDate(this._libraryItem.birthtimeMs, this.dateFormat)
+      if (this.orderBy === 'addedAt') return 'Added ' + this.$formatDate(this._libraryItem.addedAt, this.dateFormat)
      if (this.orderBy === 'media.duration') return 'Duration: ' + this.$elapsedPrettyExtended(this.media.duration, false)
      if (this.orderBy === 'size') return 'Size: ' + this.$bytesPretty(this._libraryItem.size)
      if (this.orderBy === 'media.numTracks') return `${this.numEpisodes} Episodes`
--- a/client/pages/config/index.vue
+++ b/client/pages/config/index.vue
@ -4,7 +4,7 @@

    <div class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-4 mb-8">
      <div class="flex items-center mb-2">
-        <h1 class="text-xl">Settings</h1>
+        <h1 class="text-xl font-semibold">Settings</h1>
      </div>

      <div class="flex items-center py-2">
@ -27,26 +27,6 @@
        </ui-tooltip>
      </div>

-      <div class="flex items-center py-2">
-        <ui-toggle-switch v-model="useSquareBookCovers" :disabled="updatingServerSettings" @input="updateBookCoverAspectRatio" />
-        <ui-tooltip :text="tooltips.coverAspectRatio">
-          <p class="pl-4 text-lg">
-            Use square book covers
-            <span class="material-icons icon-text">info_outlined</span>
-          </p>
-        </ui-tooltip>
-      </div>
-
-      <div class="flex items-center py-2">
-        <ui-toggle-switch v-model="useAlternativeBookshelfView" :disabled="updatingServerSettings" @input="updateAlternativeBookshelfView" />
-        <ui-tooltip :text="tooltips.bookshelfView">
-          <p class="pl-4 text-lg">
-            Use alternative bookshelf view
-            <span class="material-icons icon-text">info_outlined</span>
-          </p>
-        </ui-tooltip>
-      </div>
-
      <div class="flex items-center py-2">
        <ui-toggle-switch v-model="newServerSettings.sortingIgnorePrefix" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('sortingIgnorePrefix', val)" />
        <ui-tooltip :text="tooltips.sortingIgnorePrefix">
@ -66,7 +46,36 @@
      </div>

      <div class="flex items-center mb-2 mt-8">
-        <h1 class="text-xl">Scanner Settings</h1>
+        <h1 class="text-xl font-semibold">Display Settings</h1>
+      </div>
+
+      <div class="flex items-center py-2">
+        <ui-toggle-switch v-model="useSquareBookCovers" :disabled="updatingServerSettings" @input="updateBookCoverAspectRatio" />
+        <ui-tooltip :text="tooltips.coverAspectRatio">
+          <p class="pl-4 text-lg">
+            Use square book covers
+            <span class="material-icons icon-text">info_outlined</span>
+          </p>
+        </ui-tooltip>
+      </div>
+
+      <div class="flex items-center py-2">
+        <ui-toggle-switch v-model="useAlternativeBookshelfView" :disabled="updatingServerSettings" @input="updateAlternativeBookshelfView" />
+        <ui-tooltip :text="tooltips.bookshelfView">
+          <p class="pl-4 text-lg">
+            Use alternative bookshelf view
+            <span class="material-icons icon-text">info_outlined</span>
+          </p>
+        </ui-tooltip>
+      </div>
+
+      <div class="flex items-center py-2">
+        <p class="pr-4 text-lg">Date Format</p>
+        <ui-dropdown v-model="newServerSettings.dateFormat" :items="dateFormats" small class="max-w-40" @input="(val) => updateSettingsKey('dateFormat', val)" />
+      </div>
+
+      <div class="flex items-center mb-2 mt-8">
+        <h1 class="text-xl font-semibold">Scanner Settings</h1>
      </div>

      <div class="flex items-center py-2">
@ -144,7 +153,7 @@
      </div>

      <div class="flex items-center mb-2 mt-8">
-        <h1 class="text-xl">Experimental Feature Settings</h1>
+        <h1 class="text-xl font-semibold">Experimental Feature Settings</h1>
      </div>

      <div class="flex items-center py-2">
@ -282,12 +291,12 @@ export default {
      set(val) {
        this.$store.commit('setExperimentalFeatures', val)
      }
+    },
+    dateFormats() {
+      return this.$store.state.globals.dateFormats
    }
  },
  methods: {
-    updateEnableChromecast(val) {
-      this.updateServerSettings({ enableChromecast: val })
-    },
    updateSortingPrefixes(val) {
      if (!val || !val.length) {
        this.$toast.error('Must have at least 1 prefix')
@ -325,10 +334,12 @@ export default {
        .then((success) => {
          console.log('Updated Server Settings', success)
          this.updatingServerSettings = false
+          this.$toast.success('Server settings updated')
        })
        .catch((error) => {
          console.error('Failed to update server settings', error)
          this.updatingServerSettings = false
+          this.$toast.error('Failed to update server settings')
        })
    },
    initServerSettings() {
--- a/client/pages/item/_id/index.vue
+++ b/client/pages/item/_id/index.vue
@ -118,9 +118,9 @@
          <!-- Progress -->
          <div v-if="!isPodcast && progressPercent > 0" class="px-4 py-2 mt-4 bg-primary text-sm font-semibold rounded-md text-gray-100 relative max-w-max mx-auto md:mx-0" :class="resettingProgress ? 'opacity-25' : ''">
            <p v-if="progressPercent < 1" class="leading-6">Your Progress: {{ Math.round(progressPercent * 100) }}%</p>
-            <p v-else class="text-xs">Finished {{ $formatDate(userProgressFinishedAt, 'MM/dd/yyyy') }}</p>
+            <p v-else class="text-xs">Finished {{ $formatDate(userProgressFinishedAt, dateFormat) }}</p>
            <p v-if="progressPercent < 1" class="text-gray-200 text-xs">{{ $elapsedPretty(userTimeRemaining) }} remaining</p>
-            <p class="text-gray-400 text-xs pt-1">Started {{ $formatDate(userProgressStartedAt, 'MM/dd/yyyy') }}</p>
+            <p class="text-gray-400 text-xs pt-1">Started {{ $formatDate(userProgressStartedAt, dateFormat) }}</p>

            <div v-if="!resettingProgress" class="absolute -top-1.5 -right-1.5 p-1 w-5 h-5 rounded-full bg-bg hover:bg-error border border-primary flex items-center justify-center cursor-pointer" @click.stop="clearProgressClick">
              <span class="material-icons text-sm">close</span>
@ -226,6 +226,9 @@ export default {
    }
  },
  computed: {
+    dateFormat() {
+      return this.$store.state.serverSettings.dateFormat
+    },
    showExperimentalFeatures() {
      return this.$store.state.showExperimentalFeatures
    },
--- a/client/plugins/init.client.js
+++ b/client/plugins/init.client.js
@ -169,7 +169,7 @@ Vue.prototype.$sanitizeSlug = (str) => {
    str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i))
  }

-  str = str.replace('.', '-') // replace a dot by a dash 
+  str = str.replace('.', '-') // replace a dot by a dash
    .replace(/[^a-z0-9 -_]/g, '') // remove invalid chars
    .replace(/\s+/g, '-') // collapse whitespace and replace by a dash
    .replace(/-+/g, '-') // collapse dashes
--- a/client/store/globals.js
+++ b/client/store/globals.js
@ -1,4 +1,3 @@
-
 export const state = () => ({
  isMobile: false,
  isMobileLandscape: false,
@ -12,7 +11,21 @@ export const state = () => ({
  selectedCollection: null,
  selectedAuthor: null,
  isCasting: false, // Actively casting
-  isChromecastInitialized: false // Script loaded
+  isChromecastInitialized: false, // Script loaded
+  dateFormats: [
+    {
+      text: 'MM/DD/YYYY',
+      value: 'MM/dd/yyyy'
+    },
+    {
+      text: 'DD/MM/YYYY',
+      value: 'dd/MM/yyyy'
+    },
+    {
+      text: 'YYYY-MM-DD',
+      value: 'yyyy-MM-dd'
+    }
+  ]
 })

 export const getters = {
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@ -31,6 +31,7 @@ module.exports = {
        '20': '5rem',
        '24': '6rem',
        '32': '8rem',
+        '40': '10rem',
        '48': '12rem',
        '64': '16rem',
        '80': '20rem'
--- a/server/objects/settings/ServerSettings.js
+++ b/server/objects/settings/ServerSettings.js
@ -12,7 +12,7 @@ class ServerSettings {
    this.scannerPreferAudioMetadata = false
    this.scannerPreferOpfMetadata = false
    this.scannerPreferMatchedMetadata = false
-    this.scannerDisableWatcher = false 
+    this.scannerDisableWatcher = false
    this.scannerPreferOverdriveMediaMarker = false

    // Metadata - choose to store inside users library item folder
@ -48,6 +48,7 @@ class ServerSettings {
    // Misc Flags
    this.chromecastEnabled = false
    this.enableEReader = false
+    this.dateFormat = 'MM/dd/yyyy'

    this.logLevel = Logger.logLevel

@ -95,6 +96,7 @@ class ServerSettings {
    this.sortingPrefixes = settings.sortingPrefixes || ['the', 'a']
    this.chromecastEnabled = !!settings.chromecastEnabled
    this.enableEReader = !!settings.enableEReader
+    this.dateFormat = settings.dateFormat || 'MM/dd/yyyy'
    this.logLevel = settings.logLevel || Logger.logLevel
    this.version = settings.version || null

@ -130,6 +132,7 @@ class ServerSettings {
      sortingPrefixes: [...this.sortingPrefixes],
      chromecastEnabled: this.chromecastEnabled,
      enableEReader: this.enableEReader,
+      dateFormat: this.dateFormat,
      logLevel: this.logLevel,
      version: this.version
    }