MyFavMirrors
/
owntone-server
mirror of https://github.com/owntone/owntone-server.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[web-src] Refactor "recently added" - group in JS instead of doing 3 queries against the back end

This commit is contained in:
chme 2021-01-10 11:36:31 +01:00
parent cdc7d7a1da
commit 1a6c76d990
4 changed files with 46 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web-src/src/components/SettingsIntfield.vue
View File

@ -10,7 +10,11 @@
}"> {{ info }}</i>
</label>
<div class="control">
<input class="input" type="number" min="0" :placeholder="placeholder"
<input class="input"
type="number"
min="0"
style="width: 10em;"
:placeholder="placeholder"
:value="value"
@input="set_update_timer"
ref="settings_number">

21
web-src/src/lib/Albums.js
View File

@ -19,6 +19,8 @@ export default class Albums {
getAlbumIndex (album) {
if (this.options.sort === 'Recently added') {
return album.time_added.substring(0, 4)
} else if (this.options.sort === 'Recently added (browse)') {
return this.getRecentlyAddedBrowseIndex(album.time_added)
} else if (this.options.sort === 'Recently released') {
return album.date_released ? album.date_released.substring(0, 4) : '0000'
} else if (this.options.sort === 'Release date') {
@ -27,6 +29,23 @@ export default class Albums {
return album.name_sort.charAt(0).toUpperCase()
}
getRecentlyAddedBrowseIndex (recentlyAdded) {
if (!recentlyAdded) {
return '0000'
}
const diff = new Date().getTime() - new Date(recentlyAdded).getTime()
if (diff < 86400000) { // 24h
return 'Today'
} else if (diff < 604800000) { // 7 days
return 'Last week'
} else if (diff < 2592000000) { // 30 days
return 'Last month'
}
return recentlyAdded.substring(0, 4)
}
isAlbumVisible (album) {
if (this.options.hideSingles && album.track_count <= 2) {
return false
@ -47,7 +66,7 @@ export default class Albums {
if (this.options.hideSingles || this.options.hideSpotify || this.options.hideOther) {
albumsSorted = albumsSorted.filter(album => this.isAlbumVisible(album))
}
if (this.options.sort === 'Recently added') {
if (this.options.sort === 'Recently added' || this.options.sort === 'Recently added (browse)') {
albumsSorted = [...albumsSorted].sort((a, b) => b.time_added.localeCompare(a.time_added))
} else if (this.options.sort === 'Recently released') {
albumsSorted = [...albumsSorted].sort((a, b) => {

149
web-src/src/pages/PageBrowseRecentlyAdded.vue
View File

@ -5,79 +5,10 @@
<content-with-heading>
<template slot="heading-left">
<p class="title is-4">Recently added</p>
<p class="heading">{{ recently_added }} albums</p>
</template>
</content-with-heading>
<content-with-heading v-if="show_recent_today && recently_added_today.items.length">
<template slot="heading-left">
<p class="title is-6">Today</p>
<p class="heading">{{ recently_added_today.items.length }} albums</p>
</template>
<template slot="heading-right">
<div class="buttons is-centered">
<a class="button is-small is-light is-rounded" @click="show_modal_today = true">
<span class="icon"><i class="mdi mdi-dots-horizontal mdi-18px"></i></span>
</a>
</div>
<p class="heading">albums</p>
</template>
<template slot="content">
<list-albums :albums="recently_added_today.items"></list-albums>
<modal-dialog-albums :show="show_modal_today" title='Recently Added - Today' :albums="recently_added_today" @close="show_modal_today = false" />
</template>
</content-with-heading>
<content-with-heading v-if="show_recent_week && recently_added_week.items.length">
<template slot="heading-left">
<p class="title is-6">This Week</p>
<p class="heading">{{ recently_added_week.items.length }} albums</p>
</template>
<template slot="heading-right">
<div class="buttons is-centered">
<a class="button is-small is-light is-rounded" @click="show_modal_week = true">
<span class="icon"><i class="mdi mdi-dots-horizontal mdi-18px"></i></span>
</a>
</div>
</template>
<template slot="content">
<list-albums :albums="recently_added_week.items"></list-albums>
<modal-dialog-albums :show="show_modal_week" title='Recently Added - Past Week' :albums="recently_added_week" @close="show_modal_week = false" />
</template>
</content-with-heading>
<content-with-heading v-if="show_recent_month && recently_added_month.items.length">
<template slot="heading-left">
<p class="title is-6">This Month </p>
<p class="heading">{{ recently_added_month.items.length }} albums</p>
</template>
<template slot="heading-right">
<div class="buttons is-centered">
<a class="button is-small is-light is-rounded" @click="show_modal_month = true">
<span class="icon"><i class="mdi mdi-dots-horizontal mdi-18px"></i></span>
</a>
</div>
</template>
<template slot="content">
<list-albums :albums="recently_added_month.items"></list-albums>
<modal-dialog-albums :show="show_modal_month" title='Recently Added - Past Month' :albums="recently_added_month" @close="show_modal_month = false" />
</template>
</content-with-heading>
<content-with-heading v-if="show_recent_older && recently_added_older.items.length">
<template slot="heading-left">
<p class="title is-6">Older</p>
<p class="heading">{{ recently_added_older.items.length }} albums</p>
</template>
<template slot="heading-right">
<div class="buttons is-centered">
<a class="button is-small is-light is-rounded" @click="show_modal_older = true">
<span class="icon"><i class="mdi mdi-dots-horizontal mdi-18px"></i></span>
</a>
</div>
</template>
<template slot="content">
<list-albums :albums="recently_added_older.items"></list-albums>
<modal-dialog-albums :show="show_modal_older" title='Recently Added - Older than Month' :albums="recently_added_older" @close="show_modal_older = false" />
<list-albums :albums="albums_list"></list-albums>
</template>
</content-with-heading>
</div>
@ -88,86 +19,44 @@ import { LoadDataBeforeEnterMixin } from './mixin'
import ContentWithHeading from '@/templates/ContentWithHeading'
import TabsMusic from '@/components/TabsMusic'
import ListAlbums from '@/components/ListAlbums'
import ModalDialogAlbums from '@/components/ModalDialogAlbums'
import webapi from '@/webapi'
import store from '@/store'
import Albums from '@/lib/Albums'
const browseData = {
load: function (to) {
const recentlyAddedLimit = store.getters.settings_option_recently_added_limit
return Promise.all([
webapi.search({
type: 'album',
expression: 'time_added after today and media_kind is music order by time_added desc',
limit: recentlyAddedLimit
}),
webapi.search({
type: 'album',
expression: 'time_added after this week and media_kind is music order by time_added desc',
limit: recentlyAddedLimit
}),
webapi.search({
type: 'album',
expression: 'time_added after last month and media_kind is music order by time_added desc',
limit: recentlyAddedLimit
})
])
const limit = store.getters.settings_option_recently_added_limit
return webapi.search({
type: 'album',
expression: 'media_kind is music having track_count > 3 order by time_added desc',
limit: limit
})
},
set: function (vm, response) {
vm.recently_added_today = response[0].data.albums
vm.recently_added_week = response[1].data.albums
vm.recently_added_month = response[2].data.albums
vm.recently_added = response.data.albums
}
}
export default {
name: 'PageBrowseType',
mixins: [LoadDataBeforeEnterMixin(browseData)],
components: { ContentWithHeading, TabsMusic, ListAlbums, ModalDialogAlbums },
components: { ContentWithHeading, TabsMusic, ListAlbums },
data () {
return {
recently_added_today: { items: [] },
recently_added_week: { items: [] },
recently_added_month: { items: [] },
recently_added_older: { items: [] },
show_modal_today: false,
show_modal_week: false,
show_modal_month: false,
show_modal_older: false
}
},
mounted () {
const more = store.getters.settings_option_recently_added_limit - this.recently_added_month.items.length
if (more) {
webapi.search({
type: 'album',
expression: 'time_added before last month and media_kind is music order by time_added desc',
limit: more
}).then(({ data }) => {
this.recently_added_older = data.albums
})
recently_added: { items: [] }
}
},
computed: {
show_recent_today () {
return this.recently_added_today.items.length > 0
},
show_recent_week () {
return this.recently_added_week.items.length > 0
},
show_recent_month () {
return this.recently_added_month.items.length > 0
},
show_recent_older () {
return this.recently_added_older.items.length > 0
},
recently_added () {
return this.recently_added_older.items.length + this.recently_added_month.items.length
albums_list () {
return new Albums(this.recently_added.items, {
hideSingles: false,
hideSpotify: false,
sort: 'Recently added (browse)',
group: true
})
}
}
}

4
web-src/src/pages/SettingsPageWebinterface.vue
View File

@ -83,12 +83,12 @@
<content-with-heading>
<template slot="heading-left">
<div class="title is-4">Recently Added</div>
<div class="title is-4">Recently added page</div>
</template>
<template slot="content">
<settings-intfield category_name="webinterface" option_name="recently_added_limit">
<template slot="label"> Limit on number of albums to show on 'Recently Added' page</template>
<template slot="label">Limit the number of albums shown on the "Recently Added" page</template>
</settings-intfield>
</template>
</content-with-heading>