feat: custom date format support #340

src/actions/Torrents.js

@@ -15,7 +15,7 @@ export class Torrents {
     }
 
     // update torrents
-    store.state.torrents = data.map(t => new Torrent(t))
+    store.state.torrents = data.map(t => new Torrent(t, store.state.webuiSettings.dateFormat))
 
     // load fake torrents if enabled
     if (isProduction()) return

src/components/Settings/Tabs/VueTorrent/VGeneral.vue

@@ -6,56 +6,98 @@
     <v-list-item>
       <v-row dense>
         <v-col>
-          <v-switch v-model="showCurrentSpeed" class="v-input--reverse pa-0 ma-0" hide-details inset :label="$t('modals.settings.pageVueTorrent.pageGeneral.currentSpeed')" />
+          <v-switch
+            v-model="webuiSettings.showCurrentSpeed"
+            class="v-input--reverse pa-0 ma-0"
+            hide-details
+            inset
+            :label="$t('modals.settings.pageVueTorrent.pageGeneral.currentSpeed')"
+          />
         </v-col>
       </v-row>
     </v-list-item>
     <v-list-item>
       <v-row dense>
         <v-col>
-          <v-switch v-model="showSpeedGraph" class="v-input--reverse pa-0 ma-0" hide-details inset :label="$t('modals.settings.pageVueTorrent.pageGeneral.speedGraph')" />
+          <v-switch
+            v-model="webuiSettings.showSpeedGraph"
+            class="v-input--reverse pa-0 ma-0"
+            hide-details
+            inset
+            :label="$t('modals.settings.pageVueTorrent.pageGeneral.speedGraph')"
+          />
         </v-col>
       </v-row>
     </v-list-item>
     <v-list-item>
       <v-row dense>
         <v-col>
-          <v-switch v-model="showSessionStat" class="v-input--reverse pa-0 ma-0" hide-details inset :label="$t('modals.settings.pageVueTorrent.pageGeneral.sessionStats')" />
+          <v-switch
+            v-model="webuiSettings.showSessionStat"
+            class="v-input--reverse pa-0 ma-0"
+            hide-details
+            inset
+            :label="$t('modals.settings.pageVueTorrent.pageGeneral.sessionStats')"
+          />
         </v-col>
       </v-row>
     </v-list-item>
     <v-list-item>
       <v-row dense>
         <v-col>
-          <v-switch v-model="showAlltimeStat" class="v-input--reverse pa-0 ma-0" hide-details inset :label="$t('modals.settings.pageVueTorrent.pageGeneral.allTimeStats')" />
+          <v-switch
+            v-model="webuiSettings.showAlltimeStat"
+            class="v-input--reverse pa-0 ma-0"
+            hide-details
+            inset
+            :label="$t('modals.settings.pageVueTorrent.pageGeneral.allTimeStats')"
+          />
         </v-col>
       </v-row>
     </v-list-item>
     <v-list-item>
       <v-row dense>
         <v-col>
-          <v-switch v-model="freeSpace" class="v-input--reverse pa-0 ma-0" hide-details inset :label="$t('modals.settings.pageVueTorrent.pageGeneral.freeSpace')" />
+          <v-switch v-model="webuiSettings.freeSpace" class="v-input--reverse pa-0 ma-0" hide-details inset :label="$t('modals.settings.pageVueTorrent.pageGeneral.freeSpace')" />
         </v-col>
       </v-row>
     </v-list-item>
     <v-list-item>
       <v-row dense>
         <v-col>
-          <v-switch v-model="showTrackerFilter" class="v-input--reverse pa-0 ma-0" hide-details inset :label="$t('modals.settings.pageVueTorrent.pageGeneral.trackerFilter')" />
+          <v-switch
+            v-model="webuiSettings.showTrackerFilter"
+            class="v-input--reverse pa-0 ma-0"
+            hide-details
+            inset
+            :label="$t('modals.settings.pageVueTorrent.pageGeneral.trackerFilter')"
+          />
         </v-col>
       </v-row>
     </v-list-item>
     <v-list-item>
       <v-row dense>
         <v-col>
-          <v-switch v-model="rightDrawer" class="v-input--reverse pa-0 ma-0" hide-details inset :label="$t('modals.settings.pageVueTorrent.pageGeneral.rightDrawer')" />
+          <v-switch
+            v-model="webuiSettings.rightDrawer"
+            class="v-input--reverse pa-0 ma-0"
+            hide-details
+            inset
+            :label="$t('modals.settings.pageVueTorrent.pageGeneral.rightDrawer')"
+          />
         </v-col>
       </v-row>
     </v-list-item>
     <v-list-item>
       <v-row dense>
         <v-col>
-          <v-switch v-model="topPagination" class="v-input--reverse pa-0 ma-0" hide-details inset :label="$t('modals.settings.pageVueTorrent.pageGeneral.topPagination')" />
+          <v-switch
+            v-model="webuiSettings.topPagination"
+            class="v-input--reverse pa-0 ma-0"
+            hide-details
+            inset
+            :label="$t('modals.settings.pageVueTorrent.pageGeneral.topPagination')"
+          />
         </v-col>
       </v-row>
     </v-list-item>
@@ -67,7 +109,7 @@
           </p>
         </v-col>
         <v-col cols="4" sm="4" md="2">
-          <v-select v-model="lang" flat solo dense hide-details background-color="background" class="rounded-xl" :items="languages" />
+          <v-select v-model="webuiSettings.lang" flat solo dense hide-details background-color="background" class="rounded-xl" :items="languages" />
         </v-col>
       </v-row>
     </v-list-item>
@@ -79,7 +121,7 @@
           </p>
         </v-col>
         <v-col cols="4" sm="4" md="2">
-          <v-select v-model="paginationSize" flat solo dense hide-details background-color="background" class="rounded-xl" :items="paginationSizes" />
+          <v-select v-model="webuiSettings.paginationSize" flat solo dense hide-details background-color="background" class="rounded-xl" :items="paginationSizes" />
         </v-col>
       </v-row>
     </v-list-item>
@@ -91,7 +133,28 @@
           </p>
         </v-col>
         <v-col cols="4" sm="4" md="2">
-          <v-select v-model="title" flat solo dense hide-details background-color="background" class="rounded-xl" :items="titleOptions" />
+          <v-select v-model="webuiSettings.title" flat solo dense hide-details background-color="background" class="rounded-xl" :items="titleOptions" />
+        </v-col>
+      </v-row>
+    </v-list-item>
+    <v-list-item>
+      <v-row dense>
+        <v-col sm="6" md="9">
+          <p class="subtitle-1 mt-2">
+            {{ $t('modals.settings.pageVueTorrent.pageGeneral.dateFormat') }}
+          </p>
+        </v-col>
+        <v-col sm="6" md="3">
+          <v-text-field
+            v-model="webuiSettings.dateFormat"
+            class="mb-2"
+            outlined
+            dense
+            hide-details
+            :aria-label="$t('modals.settings.pageVueTorrent.pageGeneral.dateFormat')"
+            placeholder="DD/MM/YYYY, HH:mm:ss"
+            label="using Dayjs"
+          />
         </v-col>
       </v-row>
     </v-list-item>
@@ -146,94 +209,6 @@ export default {
   computed: {
     ...mapState(['webuiSettings']),
     ...mapGetters(['getAppVersion']),
-    freeSpace: {
-      get() {
-        return this.webuiSettings.showFreeSpace
-      },
-      set(val) {
-        this.webuiSettings.showFreeSpace = val
-      }
-    },
-    showCurrentSpeed: {
-      get() {
-        return this.webuiSettings.showCurrentSpeed
-      },
-      set(val) {
-        this.webuiSettings.showCurrentSpeed = val
-      }
-    },
-    showSpeedGraph: {
-      get() {
-        return this.webuiSettings.showSpeedGraph
-      },
-      set(val) {
-        this.webuiSettings.showSpeedGraph = val
-      }
-    },
-    showSessionStat: {
-      get() {
-        return this.webuiSettings.showSessionStat
-      },
-      set(val) {
-        this.webuiSettings.showSessionStat = val
-      }
-    },
-    showAlltimeStat: {
-      get() {
-        return this.webuiSettings.showAlltimeStat
-      },
-      set(val) {
-        this.webuiSettings.showAlltimeStat = val
-      }
-    },
-    showTrackerFilter: {
-      get() {
-        return this.webuiSettings.showTrackerFilter
-      },
-      set(val) {
-        this.webuiSettings.showTrackerFilter = val
-      }
-    },
-    rightDrawer: {
-      get() {
-        return this.webuiSettings.rightDrawer
-      },
-      set(val) {
-        this.webuiSettings.rightDrawer = val
-      }
-    },
-    topPagination: {
-      get() {
-        return this.webuiSettings.topPagination
-      },
-      set(val) {
-        this.webuiSettings.topPagination = val
-      }
-    },
-    paginationSize: {
-      get() {
-        return this.webuiSettings.paginationSize
-      },
-      set(val) {
-        this.webuiSettings.paginationSize = val
-      }
-    },
-    title: {
-      get() {
-        return this.webuiSettings.title
-      },
-      set(val) {
-        this.webuiSettings.title = val
-      }
-    },
-    lang: {
-      get() {
-        return this.webuiSettings.lang
-      },
-      set(val) {
-        this.webuiSettings.lang = val
-      }
-    },
     version() {
       return this.getAppVersion()
     }

src/filters.js

@@ -1,4 +1,3 @@
-import dayjs from 'dayjs'
 import Vue from 'vue'
 
 /* eslint-disable no-param-reassign */
@@ -34,18 +33,6 @@ export function formatSize(value) {
 Vue.filter('formatSize', formatSize)
 Vue.filter('size', formatSize)
 
-export function formatTimestamp(timestamp) {
-  if (timestamp == null || timestamp === -1) {
-    return ''
-  }
-
-  const m = dayjs.unix(timestamp)
-
-  return m.format('YYYY-MM-DD HH:mm:ss')
-}
-
-Vue.filter('formatTimestamp', formatTimestamp)
-
 export function formatProgress(progress) {
   progress *= 100
 

src/lang/en.js

@@ -141,10 +141,11 @@ const locale = {
           freeSpace: 'Show Free Space',
           trackerFilter: 'Show Tracker Filter',
           rightDrawer: 'Right Drawer',
-          topPagination: 'Place the pagination at the top of the screen',
+          topPagination: 'Top Pagination',
           language: 'Language:',
           paginationSize: 'Pagination size:',
           vueTorrentTitle: 'VueTorrent title:',
+          dateFormat: 'Date Format',
           currentVersion: 'Current Version:',
           qbittorrentVersion: 'QBittorrent Version:'
         },

src/models/Torrent.js

@@ -5,11 +5,13 @@ import relativeTime from 'dayjs/plugin/relativeTime'
 dayjs.extend(duration)
 dayjs.extend(relativeTime)
 
+const durationFormat = 'D[d] H[h] m[m] s[s]'
+
 export default class Torrent {
-  constructor(data) {
+  constructor(data, format = 'DD/MM/YYYY, HH:mm:ss') {
     this.name = data.name
     this.size = data.size
-    this.added_on = new Date(data.added_on * 1000).toLocaleString()
+    this.added_on = dayjs(data.added_on * 1000).format(format)
     this.dlspeed = data.dlspeed
     this.dloaded = data.completed
     this.upspeed = data.upspeed
@@ -39,8 +41,8 @@ export default class Torrent {
     this.availability = Math.round(data.availability * 100) / 100
     this.forced = data.state.includes('forced')
     this.magnet = data.magnet_uri
-    this.time_active = dayjs.duration(data.time_active, 'seconds').format('D[d] H[h] m[m] s[s]')
-    this.seeding_time = data.seeding_time > 0 ? dayjs.duration(data.seeding_time, 'seconds').format('D[d] H[h] m[m] s[s]') : null
+    this.time_active = dayjs.duration(data.time_active, 'seconds').format(durationFormat)
+    this.seeding_time = data.seeding_time > 0 ? dayjs.duration(data.seeding_time, 'seconds').format(durationFormat) : null
     this.last_activity = dayjs(data.last_activity * 1000).fromNow()
 
     Object.freeze(this)

src/store/index.js

@@ -68,6 +68,7 @@ export default new Vuex.Store({
       rightDrawer: false,
       topPagination: false,
       paginationSize: 15,
+      dateFormat: 'DD/MM/YYYY, HH:mm:ss',
       busyTorrentProperties: [
         { name: 'Size', active: true },
         { name: 'Progress', active: true },
@@ -85,7 +86,7 @@ export default new Vuex.Store({
         { name: 'Tags', active: true },
         { name: 'AddedOn', active: true },
         { name: 'Availability', active: true },
-        { name: 'LastActivity', active: false },
+        { name: 'LastActivity', active: false }
       ],
       doneTorrentProperties: [
         { name: 'Size', active: true },