diff --git a/public/index.html b/public/index.html index 7c908fd..cc7739a 100644 --- a/public/index.html +++ b/public/index.html @@ -106,7 +106,7 @@

No Albums found

{{ release.ALB_TITLE }}

-

{{ release.ART_NAME+' - '+release.NUMBER_TRACK+' tracks' }}

+

{{ 'by '+release.ART_NAME }}

diff --git a/public/js/frontend.js b/public/js/frontend.js index ae7bfa4..f2be48b 100644 --- a/public/js/frontend.js +++ b/public/js/frontend.js @@ -1,5 +1,7 @@ // Initialization doAjax("/init", "POST"); +search_selected = "" +main_selected="" // Functions to connect to the Flask server function getHttpRequestObject(){ @@ -64,7 +66,49 @@ function changeTab(evt, section, tabName) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(tabName).style.display = "block"; + window[section+"_selected"] = tabName evt.currentTarget.className += " active"; + if (document.getElementById("content").offsetHeight >= document.getElementById("content").scrollHeight && main_selected == "search_tab" && ["track_search", "album_search", "artist_search", "playlist_search"].indexOf(search_selected) != -1){ + scrolledSearch(window[search_selected.split("_")[0]+"Search"]) + } +} + +$('#content').on('scroll', function() { + if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) { + if (main_selected == "search_tab" && ["track_search", "album_search", "artist_search", "playlist_search"].indexOf(search_selected) != -1){ + scrolledSearch(window[search_selected.split("_")[0]+"Search"]) + } + } +}) + +function scrolledSearch(vueTab){ + query = vueTab.query + if (vueTab.results.next < vueTab.results.total){ + doAjax("/search", "POST", searchUpadate, {term: vueTab.query, type: vueTab.type, start: vueTab.results.next, nb: vueTab.nb}); + } +} + +function searchUpadate(result){ + console.log(result) + vueTab = null; + switch (result.type) { + case "TRACK": + vueTab = trackSearch; + break; + case "ALBUM": + vueTab = albumSearch; + break; + case "ARTIST": + vueTab = artistSearch; + break; + case "PLAYLIST": + vueTab = playlistSearch; + break; + } + if (vueTab && vueTab.results.next != result.next){ + vueTab.results.next = result.next + vueTab.results.data = vueTab.results.data.concat(result.data) + } } function clickElement(button){ @@ -82,6 +126,7 @@ var mainSearch = new Vue({ "PLAYLIST": "Playlists" }, results: { + QUERY: "", ORDER: [], ALBUM: {}, ARTIST: {}, @@ -101,8 +146,13 @@ var mainSearch = new Vue({ var trackSearch = new Vue({ el: '#track_search', data: { + type: "TRACK", + nb: 40, + query: "", results: { - data: [] + data: [], + next: 0, + total: 0 } } }) @@ -110,8 +160,13 @@ var trackSearch = new Vue({ var albumSearch = new Vue({ el: '#album_search', data: { + type: "ALBUM", + nb: 20, + query: "", results: { - data: [] + data: [], + next: 0, + total: 0 } } }) @@ -119,8 +174,13 @@ var albumSearch = new Vue({ var artistSearch = new Vue({ el: '#artist_search', data: { + type: "ARTIST", + nb: 20, + query: "", results: { - data: [] + data: [], + next: 0, + total: 0 } } }) @@ -128,8 +188,13 @@ var artistSearch = new Vue({ var playlistSearch = new Vue({ el: '#playlist_search', data: { + type: "PLAYLIST", + nb: 20, + query: "", results: { - data: [] + data: [], + next: 0, + total: 0 } } }) @@ -143,7 +208,7 @@ $("#searchbar").keyup(function(e){ doAjax("/download", "POST", null, {url: term}); else{ document.getElementById("search_tab_content").style.display = "none"; - doAjax("/search", "POST", searchHandler, {term: term}); + doAjax("/mainsearch", "POST", searchHandler, {term: term}); } } }) @@ -155,6 +220,10 @@ function searchHandler(result){ albumSearch.results = result.ALBUM artistSearch.results = result.ARTIST playlistSearch.results = result.PLAYLIST + trackSearch.query = result.QUERY + albumSearch.query = result.QUERY + artistSearch.query = result.QUERY + playlistSearch.query = result.QUERY document.getElementById("search_defaultopen").click(); document.getElementById("search_tab_content").style.display = "block"; document.getElementById("show_searchtab").click();