mirror of
https://github.com/VueTorrent/VueTorrent.git
synced 2024-10-23 11:16:43 +03:00
feat: custom date format support #340
This commit is contained in:
parent
1d9279a376
commit
e08a4456ee
7 changed files with 86 additions and 120 deletions
|
@ -15,7 +15,7 @@ export class Torrents {
|
||||||
}
|
}
|
||||||
|
|
||||||
// update 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
|
// load fake torrents if enabled
|
||||||
if (isProduction()) return
|
if (isProduction()) return
|
||||||
|
|
|
@ -6,56 +6,98 @@
|
||||||
<v-list-item>
|
<v-list-item>
|
||||||
<v-row dense>
|
<v-row dense>
|
||||||
<v-col>
|
<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-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
</v-list-item>
|
</v-list-item>
|
||||||
<v-list-item>
|
<v-list-item>
|
||||||
<v-row dense>
|
<v-row dense>
|
||||||
<v-col>
|
<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-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
</v-list-item>
|
</v-list-item>
|
||||||
<v-list-item>
|
<v-list-item>
|
||||||
<v-row dense>
|
<v-row dense>
|
||||||
<v-col>
|
<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-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
</v-list-item>
|
</v-list-item>
|
||||||
<v-list-item>
|
<v-list-item>
|
||||||
<v-row dense>
|
<v-row dense>
|
||||||
<v-col>
|
<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-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
</v-list-item>
|
</v-list-item>
|
||||||
<v-list-item>
|
<v-list-item>
|
||||||
<v-row dense>
|
<v-row dense>
|
||||||
<v-col>
|
<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-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
</v-list-item>
|
</v-list-item>
|
||||||
<v-list-item>
|
<v-list-item>
|
||||||
<v-row dense>
|
<v-row dense>
|
||||||
<v-col>
|
<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-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
</v-list-item>
|
</v-list-item>
|
||||||
<v-list-item>
|
<v-list-item>
|
||||||
<v-row dense>
|
<v-row dense>
|
||||||
<v-col>
|
<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-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
</v-list-item>
|
</v-list-item>
|
||||||
<v-list-item>
|
<v-list-item>
|
||||||
<v-row dense>
|
<v-row dense>
|
||||||
<v-col>
|
<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-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
</v-list-item>
|
</v-list-item>
|
||||||
|
@ -67,7 +109,7 @@
|
||||||
</p>
|
</p>
|
||||||
</v-col>
|
</v-col>
|
||||||
<v-col cols="4" sm="4" md="2">
|
<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-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
</v-list-item>
|
</v-list-item>
|
||||||
|
@ -79,7 +121,7 @@
|
||||||
</p>
|
</p>
|
||||||
</v-col>
|
</v-col>
|
||||||
<v-col cols="4" sm="4" md="2">
|
<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-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
</v-list-item>
|
</v-list-item>
|
||||||
|
@ -91,7 +133,28 @@
|
||||||
</p>
|
</p>
|
||||||
</v-col>
|
</v-col>
|
||||||
<v-col cols="4" sm="4" md="2">
|
<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-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
</v-list-item>
|
</v-list-item>
|
||||||
|
@ -146,94 +209,6 @@ export default {
|
||||||
computed: {
|
computed: {
|
||||||
...mapState(['webuiSettings']),
|
...mapState(['webuiSettings']),
|
||||||
...mapGetters(['getAppVersion']),
|
...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() {
|
version() {
|
||||||
return this.getAppVersion()
|
return this.getAppVersion()
|
||||||
}
|
}
|
||||||
|
|
|
@ -11,4 +11,4 @@ export default {
|
||||||
name: 'LastActivity',
|
name: 'LastActivity',
|
||||||
props: ['torrent']
|
props: ['torrent']
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -1,4 +1,3 @@
|
||||||
import dayjs from 'dayjs'
|
|
||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
|
|
||||||
/* eslint-disable no-param-reassign */
|
/* eslint-disable no-param-reassign */
|
||||||
|
@ -34,18 +33,6 @@ export function formatSize(value) {
|
||||||
Vue.filter('formatSize', formatSize)
|
Vue.filter('formatSize', formatSize)
|
||||||
Vue.filter('size', 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) {
|
export function formatProgress(progress) {
|
||||||
progress *= 100
|
progress *= 100
|
||||||
|
|
||||||
|
|
|
@ -141,10 +141,11 @@ const locale = {
|
||||||
freeSpace: 'Show Free Space',
|
freeSpace: 'Show Free Space',
|
||||||
trackerFilter: 'Show Tracker Filter',
|
trackerFilter: 'Show Tracker Filter',
|
||||||
rightDrawer: 'Right Drawer',
|
rightDrawer: 'Right Drawer',
|
||||||
topPagination: 'Place the pagination at the top of the screen',
|
topPagination: 'Top Pagination',
|
||||||
language: 'Language:',
|
language: 'Language:',
|
||||||
paginationSize: 'Pagination size:',
|
paginationSize: 'Pagination size:',
|
||||||
vueTorrentTitle: 'VueTorrent title:',
|
vueTorrentTitle: 'VueTorrent title:',
|
||||||
|
dateFormat: 'Date Format',
|
||||||
currentVersion: 'Current Version:',
|
currentVersion: 'Current Version:',
|
||||||
qbittorrentVersion: 'QBittorrent Version:'
|
qbittorrentVersion: 'QBittorrent Version:'
|
||||||
},
|
},
|
||||||
|
|
|
@ -5,11 +5,13 @@ import relativeTime from 'dayjs/plugin/relativeTime'
|
||||||
dayjs.extend(duration)
|
dayjs.extend(duration)
|
||||||
dayjs.extend(relativeTime)
|
dayjs.extend(relativeTime)
|
||||||
|
|
||||||
|
const durationFormat = 'D[d] H[h] m[m] s[s]'
|
||||||
|
|
||||||
export default class Torrent {
|
export default class Torrent {
|
||||||
constructor(data) {
|
constructor(data, format = 'DD/MM/YYYY, HH:mm:ss') {
|
||||||
this.name = data.name
|
this.name = data.name
|
||||||
this.size = data.size
|
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.dlspeed = data.dlspeed
|
||||||
this.dloaded = data.completed
|
this.dloaded = data.completed
|
||||||
this.upspeed = data.upspeed
|
this.upspeed = data.upspeed
|
||||||
|
@ -39,8 +41,8 @@ export default class Torrent {
|
||||||
this.availability = Math.round(data.availability * 100) / 100
|
this.availability = Math.round(data.availability * 100) / 100
|
||||||
this.forced = data.state.includes('forced')
|
this.forced = data.state.includes('forced')
|
||||||
this.magnet = data.magnet_uri
|
this.magnet = data.magnet_uri
|
||||||
this.time_active = dayjs.duration(data.time_active, 'seconds').format('D[d] H[h] m[m] s[s]')
|
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('D[d] H[h] m[m] s[s]') : null
|
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()
|
this.last_activity = dayjs(data.last_activity * 1000).fromNow()
|
||||||
|
|
||||||
Object.freeze(this)
|
Object.freeze(this)
|
||||||
|
|
|
@ -68,6 +68,7 @@ export default new Vuex.Store({
|
||||||
rightDrawer: false,
|
rightDrawer: false,
|
||||||
topPagination: false,
|
topPagination: false,
|
||||||
paginationSize: 15,
|
paginationSize: 15,
|
||||||
|
dateFormat: 'DD/MM/YYYY, HH:mm:ss',
|
||||||
busyTorrentProperties: [
|
busyTorrentProperties: [
|
||||||
{ name: 'Size', active: true },
|
{ name: 'Size', active: true },
|
||||||
{ name: 'Progress', active: true },
|
{ name: 'Progress', active: true },
|
||||||
|
@ -85,7 +86,7 @@ export default new Vuex.Store({
|
||||||
{ name: 'Tags', active: true },
|
{ name: 'Tags', active: true },
|
||||||
{ name: 'AddedOn', active: true },
|
{ name: 'AddedOn', active: true },
|
||||||
{ name: 'Availability', active: true },
|
{ name: 'Availability', active: true },
|
||||||
{ name: 'LastActivity', active: false },
|
{ name: 'LastActivity', active: false }
|
||||||
],
|
],
|
||||||
doneTorrentProperties: [
|
doneTorrentProperties: [
|
||||||
{ name: 'Size', active: true },
|
{ name: 'Size', active: true },
|
||||||
|
|
Loading…
Reference in a new issue