Merge pull request #31 from GGrandma/main
add recentlyadded view & update sorting function
This commit is contained in:
cryptofyre
GitHub
commit
20c5cc630a
4 changed files with 110 additions and 87 deletions
|
|
@ -177,8 +177,8 @@ const app = new Vue({
|
|||
"releaseDate": "Release Date"
|
||||
},
|
||||
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: "",
|
||||
|
|
@ -778,54 +778,37 @@ const app = new Vue({
|
|||
let self = this
|
||||
|
||||
function sortSongs() {
|
||||
if (self.library.songs.sortOrder == "asc") {
|
||||
// sort this.library.songs.displayListing by song.attributes[self.library.songs.sorting] in ascending order based on alphabetical order and numeric order
|
||||
// check if song.attributes[self.library.songs.sorting] is a number and if so, sort by number if not, sort by alphabetical order ignoring case
|
||||
self.library.songs.displayListing.sort((a, b) => {
|
||||
let aa = null;
|
||||
let bb = null;
|
||||
if (self.library.songs.sorting == "genre") {
|
||||
aa = a.attributes.genreNames[0]
|
||||
bb = b.attributes.genreNames[0]
|
||||
}
|
||||
aa = a.attributes[self.library.songs.sorting]
|
||||
bb = b.attributes[self.library.songs.sorting]
|
||||
if (aa == null) {
|
||||
aa = ""
|
||||
}
|
||||
if (bb == null) {
|
||||
bb = ""
|
||||
}
|
||||
// sort this.library.songs.displayListing by song.attributes[self.library.songs.sorting] in descending or ascending order based on alphabetical order and numeric order
|
||||
// check if song.attributes[self.library.songs.sorting] is a number and if so, sort by number if not, sort by alphabetical order ignoring case
|
||||
self.library.songs.displayListing.sort((a, b) => {
|
||||
let aa = null;
|
||||
let bb = null;
|
||||
if (self.library.songs.sorting == "genre") {
|
||||
aa = a.attributes.genreNames[0]
|
||||
bb = b.attributes.genreNames[0]
|
||||
}
|
||||
aa = a.attributes[self.library.songs.sorting]
|
||||
bb = b.attributes[self.library.songs.sorting]
|
||||
if (aa == null) {
|
||||
aa = ""
|
||||
}
|
||||
if (bb == null) {
|
||||
bb = ""
|
||||
}
|
||||
if (self.library.songs.sortOrder == "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.songs.sortOrder == "desc") {
|
||||
// sort this.library.songs.displayListing by song.attributes[self.library.songs.sorting] in descending order based on alphabetical order and numeric order
|
||||
// check if song.attributes[self.library.songs.sorting] is a number and if so, sort by number if not, sort by alphabetical order ignoring case
|
||||
self.library.songs.displayListing.sort((a, b) => {
|
||||
if (self.library.songs.sorting == "genre") {
|
||||
aa = a.attributes.genreNames[0]
|
||||
bb = b.attributes.genreNames[0]
|
||||
}
|
||||
let aa = a.attributes[self.library.songs.sorting]
|
||||
let bb = b.attributes[self.library.songs.sorting]
|
||||
if (aa == null) {
|
||||
aa = ""
|
||||
}
|
||||
if (bb == null) {
|
||||
bb = ""
|
||||
}
|
||||
} else if (self.library.songs.sortOrder == "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.songs.search == "") {
|
||||
|
|
@ -858,58 +841,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 == "") {
|
||||
|
|
@ -1053,7 +1023,7 @@ const app = new Vue({
|
|||
downloadChunk()
|
||||
},
|
||||
// copy the getLibrarySongsFull function except change Songs to Albums
|
||||
async getLibraryAlbumsFull(force = false) {
|
||||
async getLibraryAlbumsFull(force = false, index) {
|
||||
let self = this
|
||||
let library = []
|
||||
let downloaded = null;
|
||||
|
|
@ -1062,7 +1032,7 @@ const app = new Vue({
|
|||
}
|
||||
if (localStorage.getItem("libraryAlbums") != null) {
|
||||
this.library.albums.listing = JSON.parse(localStorage.getItem("libraryAlbums"))
|
||||
this.searchLibraryAlbums()
|
||||
this.searchLibraryAlbums(index)
|
||||
}
|
||||
if (this.songstest) {
|
||||
return
|
||||
|
|
@ -1101,7 +1071,7 @@ const app = new Vue({
|
|||
self.library.albums.downloadState = 2
|
||||
self.library.downloadNotification.show = false
|
||||
localStorage.setItem("libraryAlbums", JSON.stringify(library))
|
||||
self.searchLibraryAlbums()
|
||||
self.searchLibraryAlbums(index)
|
||||
}
|
||||
if (downloaded.meta.total > library.length || typeof downloaded.meta.next != "undefined") {
|
||||
console.log(`downloading next chunk - ${library.length
|
||||
|
|
@ -1112,7 +1082,7 @@ const app = new Vue({
|
|||
self.library.albums.downloadState = 2
|
||||
self.library.downloadNotification.show = false
|
||||
localStorage.setItem("libraryAlbums", JSON.stringify(library))
|
||||
self.searchLibraryAlbums()
|
||||
self.searchLibraryAlbums(index)
|
||||
console.log(library)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -366,12 +366,16 @@
|
|||
<cider-search :search="search"></cider-search>
|
||||
</template>
|
||||
</transition>
|
||||
<!-- Library - Recently Added -->
|
||||
<transition name="wpfade" v-on:enter="getLibraryAlbumsFull(null, 0); 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(null, 1); searchLibraryAlbums(1);">
|
||||
<%- include('pages/library-albums') %>');
|
||||
%>
|
||||
</transition>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<h1 class="header-text">Albums</h1>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<button v-if="library.albums.downloadState == 2" @click="getLibraryAlbumsFull(true)" class="reload-btn"><%- include('../svg/redo.svg') %></button>
|
||||
<button v-if="library.albums.downloadState == 2" @click="getLibraryAlbumsFull(true, 1)" class="reload-btn"><%- include('../svg/redo.svg') %></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
|
|
@ -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, 0)" 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