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",
|
"artistName": "Artist",
|
||||||
"name": "Name",
|
"name": "Name",
|
||||||
"genre": "Genre",
|
"genre": "Genre",
|
||||||
"releaseDate": "Release Date"
|
"releaseDate": "Release Date",
|
||||||
|
"dateAdded": "Date Added"
|
||||||
},
|
},
|
||||||
viewAs: 'covers',
|
viewAs: 'covers',
|
||||||
sorting: "name",
|
sorting: ["dateAdded", "name"], // [0] = recentlyadded page, [1] = albums page
|
||||||
sortOrder: "asc",
|
sortOrder: ["desc", "asc"], // [0] = recentlyadded page, [1] = albums page
|
||||||
listing: [],
|
listing: [],
|
||||||
meta: {total: 0, progress: 0},
|
meta: {total: 0, progress: 0},
|
||||||
search: "",
|
search: "",
|
||||||
|
|
@ -847,58 +848,45 @@ const app = new Vue({
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// make a copy of searchLibrarySongs except use Albums instead of Songs
|
// make a copy of searchLibrarySongs except use Albums instead of Songs
|
||||||
searchLibraryAlbums() {
|
searchLibraryAlbums(index) {
|
||||||
let self = this
|
let self = this
|
||||||
|
|
||||||
function sortAlbums() {
|
function sortAlbums() {
|
||||||
if (self.library.albums.sortOrder == "asc") {
|
// 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
|
||||||
// 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[index]] is a number and if so, sort by number if not, sort by alphabetical order ignoring case
|
||||||
// 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
|
let aa = null;
|
||||||
self.library.albums.displayListing.sort((a, b) => {
|
let bb = null;
|
||||||
let aa = null;
|
self.library.albums.displayListing.sort((a, b) => {
|
||||||
let bb = null;
|
if (self.library.albums.sorting[index] == "genre") {
|
||||||
if (self.library.albums.sorting == "genre") {
|
aa = a.attributes.genreNames[0]
|
||||||
aa = a.attributes.genreNames[0]
|
bb = b.attributes.genreNames[0]
|
||||||
bb = b.attributes.genreNames[0]
|
}
|
||||||
}
|
if (self.library.albums.sorting[index] == "dateAdded") {
|
||||||
aa = a.attributes[self.library.albums.sorting]
|
aa = new Date(a.attributes.dateAdded).getTime()
|
||||||
bb = b.attributes[self.library.albums.sorting]
|
bb = new Date(b.attributes.dateAdded).getTime()
|
||||||
if (aa == null) {
|
}
|
||||||
aa = ""
|
aa = a.attributes[self.library.albums.sorting[index]]
|
||||||
}
|
bb = b.attributes[self.library.albums.sorting[index]]
|
||||||
if (bb == null) {
|
if (aa == null) {
|
||||||
bb = ""
|
aa = ""
|
||||||
}
|
}
|
||||||
|
if (bb == null) {
|
||||||
|
bb = ""
|
||||||
|
}
|
||||||
|
if (self.library.albums.sortOrder[index] == "asc") {
|
||||||
if (aa.toString().match(/^\d+$/) && bb.toString().match(/^\d+$/)) {
|
if (aa.toString().match(/^\d+$/) && bb.toString().match(/^\d+$/)) {
|
||||||
return aa - bb
|
return aa - bb
|
||||||
} else {
|
} else {
|
||||||
return aa.toString().toLowerCase().localeCompare(bb.toString().toLowerCase())
|
return aa.toString().toLowerCase().localeCompare(bb.toString().toLowerCase())
|
||||||
}
|
}
|
||||||
})
|
} else if (self.library.albums.sortOrder[index] == "desc") {
|
||||||
}
|
|
||||||
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 = ""
|
|
||||||
}
|
|
||||||
if (aa.toString().match(/^\d+$/) && bb.toString().match(/^\d+$/)) {
|
if (aa.toString().match(/^\d+$/) && bb.toString().match(/^\d+$/)) {
|
||||||
return bb - aa
|
return bb - aa
|
||||||
} else {
|
} else {
|
||||||
return bb.toString().toLowerCase().localeCompare(aa.toString().toLowerCase())
|
return bb.toString().toLowerCase().localeCompare(aa.toString().toLowerCase())
|
||||||
}
|
}
|
||||||
})
|
}
|
||||||
}
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.library.albums.search == "") {
|
if (this.library.albums.search == "") {
|
||||||
|
|
|
||||||
|
|
@ -366,12 +366,16 @@
|
||||||
<cider-search :search="search"></cider-search>
|
<cider-search :search="search"></cider-search>
|
||||||
</template>
|
</template>
|
||||||
</transition>
|
</transition>
|
||||||
|
<!-- Library - Recently Added -->
|
||||||
|
<transition name="wpfade" v-on:enter="getLibraryAlbumsFull(); searchLibraryAlbums(0);">
|
||||||
|
<%- include('pages/library-recentlyadded') %>');
|
||||||
|
</transition>
|
||||||
<!-- Library - Songs -->
|
<!-- Library - Songs -->
|
||||||
<transition name="wpfade" v-on:enter="getLibrarySongsFull()">
|
<transition name="wpfade" v-on:enter="getLibrarySongsFull()">
|
||||||
<%- include('pages/library-songs') %>
|
<%- include('pages/library-songs') %>
|
||||||
</transition>
|
</transition>
|
||||||
<!-- Library - Albums -->
|
<!-- Library - Albums -->
|
||||||
<transition name="wpfade" v-on:enter="getLibraryAlbumsFull()">
|
<transition name="wpfade" v-on:enter="getLibraryAlbumsFull(); searchLibraryAlbums(1);">
|
||||||
<%- include('pages/library-albums') %>');
|
<%- include('pages/library-albums') %>');
|
||||||
%>
|
%>
|
||||||
</transition>
|
</transition>
|
||||||
|
|
|
||||||
|
|
@ -23,14 +23,14 @@
|
||||||
<div class="col-auto flex-center">
|
<div class="col-auto flex-center">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col">
|
<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">
|
<optgroup label="Sort By">
|
||||||
<option v-for="(sort, index) in library.albums.sortingOptions" :value="index">{{ sort }}</option>
|
<option v-for="(sort, index) in library.albums.sortingOptions" :value="index">{{ sort }}</option>
|
||||||
</optgroup>
|
</optgroup>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div class="col">
|
<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">
|
<optgroup label="Sort Order">
|
||||||
<option value="asc">Ascending</option>
|
<option value="asc">Ascending</option>
|
||||||
<option value="desc">Descending</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