add recentlyadded view & update sorting function
This commit is contained in:
GGrandma
parent
b8ef4cbb68
commit
be9cbfb9e6
4 changed files with 86 additions and 45 deletions
|
|
@ -172,11 +172,12 @@ const app = new Vue({
|
|||
"artistName": "Artist",
|
||||
"name": "Name",
|
||||
"genre": "Genre",
|
||||
"releaseDate": "Release Date"
|
||||
"releaseDate": "Release Date",
|
||||
"dateAdded": "Date Added"
|
||||
},
|
||||
viewAs: 'covers',
|
||||
sorting: "name",
|
||||
sortOrder: "asc",
|
||||
sorting: ["dateAdded", "name"], // [0] = recentlyadded page, [1] = albums page
|
||||
sortOrder: ["desc", "asc"], // [0] = recentlyadded page, [1] = albums page
|
||||
listing: [],
|
||||
meta: {total: 0, progress: 0},
|
||||
search: "",
|
||||
|
|
@ -847,58 +848,45 @@ const app = new Vue({
|
|||
}
|
||||
},
|
||||
// make a copy of searchLibrarySongs except use Albums instead of Songs
|
||||
searchLibraryAlbums() {
|
||||
searchLibraryAlbums(index) {
|
||||
let self = this
|
||||
|
||||
function sortAlbums() {
|
||||
if (self.library.albums.sortOrder == "asc") {
|
||||
// sort this.library.albums.displayListing by album.attributes[self.library.albums.sorting] in ascending order based on alphabetical order and numeric order
|
||||
// check if album.attributes[self.library.albums.sorting] is a number and if so, sort by number if not, sort by alphabetical order ignoring case
|
||||
self.library.albums.displayListing.sort((a, b) => {
|
||||
let aa = null;
|
||||
let bb = null;
|
||||
if (self.library.albums.sorting == "genre") {
|
||||
aa = a.attributes.genreNames[0]
|
||||
bb = b.attributes.genreNames[0]
|
||||
}
|
||||
aa = a.attributes[self.library.albums.sorting]
|
||||
bb = b.attributes[self.library.albums.sorting]
|
||||
if (aa == null) {
|
||||
aa = ""
|
||||
}
|
||||
if (bb == null) {
|
||||
bb = ""
|
||||
}
|
||||
// sort this.library.albums.displayListing by album.attributes[self.library.albums.sorting[index]] in descending or ascending order based on alphabetical order and numeric order
|
||||
// check if album.attributes[self.library.albums.sorting[index]] is a number and if so, sort by number if not, sort by alphabetical order ignoring case
|
||||
let aa = null;
|
||||
let bb = null;
|
||||
self.library.albums.displayListing.sort((a, b) => {
|
||||
if (self.library.albums.sorting[index] == "genre") {
|
||||
aa = a.attributes.genreNames[0]
|
||||
bb = b.attributes.genreNames[0]
|
||||
}
|
||||
if (self.library.albums.sorting[index] == "dateAdded") {
|
||||
aa = new Date(a.attributes.dateAdded).getTime()
|
||||
bb = new Date(b.attributes.dateAdded).getTime()
|
||||
}
|
||||
aa = a.attributes[self.library.albums.sorting[index]]
|
||||
bb = b.attributes[self.library.albums.sorting[index]]
|
||||
if (aa == null) {
|
||||
aa = ""
|
||||
}
|
||||
if (bb == null) {
|
||||
bb = ""
|
||||
}
|
||||
if (self.library.albums.sortOrder[index] == "asc") {
|
||||
if (aa.toString().match(/^\d+$/) && bb.toString().match(/^\d+$/)) {
|
||||
return aa - bb
|
||||
} else {
|
||||
return aa.toString().toLowerCase().localeCompare(bb.toString().toLowerCase())
|
||||
}
|
||||
})
|
||||
}
|
||||
if (self.library.albums.sortOrder == "desc") {
|
||||
// sort this.library.albums.displayListing by album.attributes[self.library.albums.sorting] in descending order based on alphabetical order and numeric order
|
||||
// check if album.attributes[self.library.albums.sorting] is a number and if so, sort by number if not, sort by alphabetical order ignoring case
|
||||
self.library.albums.displayListing.sort((a, b) => {
|
||||
if (self.library.albums.sorting == "genre") {
|
||||
aa = a.attributes.genreNames[0]
|
||||
bb = b.attributes.genreNames[0]
|
||||
}
|
||||
let aa = a.attributes[self.library.albums.sorting]
|
||||
let bb = b.attributes[self.library.albums.sorting]
|
||||
if (aa == null) {
|
||||
aa = ""
|
||||
}
|
||||
if (bb == null) {
|
||||
bb = ""
|
||||
}
|
||||
} else if (self.library.albums.sortOrder[index] == "desc") {
|
||||
if (aa.toString().match(/^\d+$/) && bb.toString().match(/^\d+$/)) {
|
||||
return bb - aa
|
||||
} else {
|
||||
return bb.toString().toLowerCase().localeCompare(aa.toString().toLowerCase())
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
if (this.library.albums.search == "") {
|
||||
|
|
|
|||
|
|
@ -366,12 +366,16 @@
|
|||
<cider-search :search="search"></cider-search>
|
||||
</template>
|
||||
</transition>
|
||||
<!-- Library - Recently Added -->
|
||||
<transition name="wpfade" v-on:enter="getLibraryAlbumsFull(); searchLibraryAlbums(0);">
|
||||
<%- include('pages/library-recentlyadded') %>');
|
||||
</transition>
|
||||
<!-- Library - Songs -->
|
||||
<transition name="wpfade" v-on:enter="getLibrarySongsFull()">
|
||||
<%- include('pages/library-songs') %>
|
||||
</transition>
|
||||
<!-- Library - Albums -->
|
||||
<transition name="wpfade" v-on:enter="getLibraryAlbumsFull()">
|
||||
<transition name="wpfade" v-on:enter="getLibraryAlbumsFull(); searchLibraryAlbums(1);">
|
||||
<%- include('pages/library-albums') %>');
|
||||
%>
|
||||
</transition>
|
||||
|
|
|
|||
|
|
@ -23,14 +23,14 @@
|
|||
<div class="col-auto flex-center">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<select class="md-select" v-model="library.albums.sorting" @change="searchLibraryAlbums()">
|
||||
<select class="md-select" v-model="library.albums.sorting[1]" @change="searchLibraryAlbums(1)">
|
||||
<optgroup label="Sort By">
|
||||
<option v-for="(sort, index) in library.albums.sortingOptions" :value="index">{{ sort }}</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col">
|
||||
<select class="md-select" v-model="library.albums.sortOrder" @change="searchLibraryAlbums()">
|
||||
<select class="md-select" v-model="library.albums.sortOrder[1]" @change="searchLibraryAlbums(1)">
|
||||
<optgroup label="Sort Order">
|
||||
<option value="asc">Ascending</option>
|
||||
<option value="desc">Descending</option>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,49 @@
|
|||
<template v-if="page == 'library-recentlyadded'">
|
||||
<div class="content-inner">
|
||||
<div class="row">
|
||||
<div class="col" style="padding:0px;">
|
||||
<h1 class="header-text">Recently Added</h1>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<button v-if="library.albums.downloadState == 2" @click="getLibraryAlbumsFull(true)" class="reload-btn"><%- include('../svg/redo.svg') %></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col" style="padding:0px;">
|
||||
<div class="search-input-container" style="width:100%;margin: 16px 0px;">
|
||||
<div class="search-input--icon"></div>
|
||||
<input type="search"
|
||||
style="width:100%;"
|
||||
spellcheck="false"
|
||||
placeholder="Search..."
|
||||
@input="searchLibraryAlbums"
|
||||
v-model="library.albums.search" class="search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto flex-center">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<select class="md-select" v-model="library.albums.sortOrder[0]" @change="searchLibraryAlbums(0)">
|
||||
<optgroup label="Sort Order">
|
||||
<option value="asc">Ascending</option>
|
||||
<option value="desc">Descending</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col">
|
||||
<select class="md-select" v-model="library.albums.viewAs">
|
||||
<optgroup label="View As">
|
||||
<option value="covers">Cover Art</option>
|
||||
<option value="list">List</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<mediaitem-square-large v-if="library.albums.viewAs == 'covers'" :item="item" v-for="item in library.albums.displayListing">
|
||||
</mediaitem-square-large>
|
||||
<mediaitem-list-item v-if="library.albums.viewAs == 'list'" :show-duration="false" :show-meta-data="true" :show-library-status="false" :item="item" v-for="item in library.albums.displayListing">
|
||||
</mediaitem-list-item>
|
||||
</div>
|
||||
</template>
|
||||
Loading…
Add table
Add a link
Reference in a new issue