Started porting artist tab

public/js/app/app.js

@@ -1,8 +1,5 @@
 // Initialization
 const socket = io.connect(window.location.href)
-// tabs stuff
-search_selected = ''
-main_selected = ''
 var localStorage = window.localStorage
 // toasts stuff
 var toastsWithId = {}
@@ -194,36 +191,6 @@ function saveSettings(){
 	socket.emit("saveSettings", lastSettings, lastCredentials)
 }
 
-// tabs stuff
-function changeTab(evt, section, tabName) {
-	console.log( {evt, section, tabName} );
-
-	var i, tabcontent, tablinks
-	tabcontent = document.getElementsByClassName(section + '_tabcontent')
-	for (i = 0; i < tabcontent.length; i++) {
-		tabcontent[i].style.display = 'none'
-	}
-	tablinks = document.getElementsByClassName(section + '_tablinks')
-	for (i = 0; i < tablinks.length; i++) {
-		tablinks[i].className = tablinks[i].className.replace(' active', '')
-	}
-	if (tabName == 'settings_tab' && main_selected != 'settings_tab') {
-		settingsTab.settings = { ...lastSettings }
-	}
-	document.getElementById(tabName).style.display = 'block'
-	window[section + '_selected'] = tabName
-	console.log(section + '_selected', window[section + '_selected'])
-	evt.currentTarget.className += ' active'
-	// Check if you need to load more content in the search tab
-	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'])
-	}
-}
-
 // quality modal stuff
 var modalQuality = document.getElementById('modal_quality');
 modalQuality.open = false

public/js/app/search.js

@@ -22,16 +22,6 @@ function scrolledSearch(vueTab) {
 	}
 }
 
-function artistView(){
-	console.log("ARTIST")
-}
-function albumView(){
-	console.log("ALBUM")
-}
-function playlistView(){
-	console.log("PLAYLIST")
-}
-
 function searchUpadate(result) {
 	console.log(result)
 	vueTab = null

public/js/app/stackedTabs.js

@@ -0,0 +1,138 @@
+var artistTab = new Vue({
+	el: '#artist_tab',
+	data: {
+		currentTab: '',
+		sortKey: 'release_date',
+		sortOrder: 'desc',
+		title: "",
+		image: "",
+		type: "",
+		link: "",
+		head: null,
+		body: null
+	},
+	methods: {
+		addToQueue: function(e){e.stopPropagation(); sendAddToQueue(e.currentTarget.dataset.link)},
+		openQualityModal: function(e){e.preventDefault(); openQualityModal(e.currentTarget.dataset.link)},
+		moreInfo: function(url, e){
+			if (e) e.preventDefault();
+			showTrackListSelective(url, true)
+		},
+		sortBy: function(key) {
+      if (key == this.sortKey) {
+				this.sortOrder = (this.sortOrder == 'asc') ? 'desc' : 'asc';
+      } else {
+				this.sortKey = key;
+				this.sortOrder = 'asc';
+      }
+		},
+		changeTab: function(tab){
+			this.currentTab = tab
+		},
+		checkNewRelease: function(date){
+			var g1 = new Date();
+    	var g2 = new Date(date);
+			g2.setDate(g2.getDate()+3)
+			g1.setHours(0,0,0,0)
+			if (g1.getTime() <= g2.getTime()){
+				return true;
+			}else {
+				return false;
+			}
+		}
+	},
+	computed: {
+		showTable() {
+			if (this.body)
+				return _.orderBy(this.body[this.currentTab], this.sortKey, this.sortOrder)
+			else
+				return []
+		}
+	}
+})
+
+var tracklistTab = new Vue({
+	el: '#tracklist_tab',
+	data: {
+		title: "",
+		metadata : "",
+		release_date: "",
+		label: "",
+		explicit: false,
+		image: "",
+		type: "",
+		link: "",
+		head: null,
+		body: []
+	},
+	methods: {
+		addToQueue: function(e){e.stopPropagation(); sendAddToQueue(e.currentTarget.dataset.link)},
+		openQualityModal: function(e){e.preventDefault(); openQualityModal(e.currentTarget.dataset.link)}
+	}
+})
+
+function artistView(ev){
+	console.log("ARTIST")
+	let id = ev.currentTarget.dataset.id
+	artistTab.title = "Loading..."
+	artistTab.image = ""
+	artistTab.type = ""
+	artistTab.currentTab = ''
+	artistTab.sortKey = 'release_date'
+	artistTab.sortOrder = 'desc'
+	artistTab.link = 'https://deezer.com/artist/'+id
+	artistTab.head = []
+	artistTab.body = null
+	socket.emit('getTracklist', {type: 'artist', id: id})
+	showTab('artist', id)
+}
+function albumView(ev){
+	console.log("ALBUM")
+	tracklistTab.title = "Loading..."
+	tracklistTab.image = ""
+	tracklistTab.metadata = ""
+	tracklistTab.label = ""
+	tracklistTab.release_date = ""
+	tracklistTab.explicit = false
+	tracklistTab.type = ""
+	tracklistTab.head = []
+	tracklistTab.body = []
+	let id = ev.currentTarget.dataset.id
+	socket.emit('getTracklist', {type: 'album', id: id})
+	showTab('album', id)
+}
+function playlistView(ev){
+	console.log("PLAYLIST")
+	tracklistTab.title = "Loading..."
+	tracklistTab.image = ""
+	tracklistTab.metadata = ""
+	tracklistTab.label = ""
+	tracklistTab.release_date = ""
+	tracklistTab.explicit = false
+	tracklistTab.type = ""
+	tracklistTab.head = []
+	tracklistTab.body = []
+	let id = ev.currentTarget.dataset.id
+	socket.emit('getTracklist', {type: 'playlist', id: id})
+	showTab('playlist', id)
+}
+
+socket.on('show_artist', function(data){
+	artistTab.title = data.name
+	artistTab.image = data.picture_xl
+	artistTab.type = "Artist"
+	artistTab.link = `https://www.deezer.com/artist/${data.id}`
+	artistTab.currentTab = Object.keys(data.data)[0]
+	artistTab.sortKey = 'release_date'
+	artistTab.sortOrder = 'desc'
+	artistTab.head = [
+		{title: 'Title', sortKey: "title"},
+		{title: 'Release Date', sortKey: "release_date"},
+		{title: '', width: "56px"}
+	]
+	if (_.isEmpty(data.data)){
+		artistTab.body = null
+	}else{
+		artistTab.body = data.data
+	}
+})

public/js/app/tabs.js

@@ -0,0 +1,59 @@
+var search_selected = ''
+var main_selected = ''
+var windows_stack = []
+var currentStack = {}
+
+function changeTab(evt, section, tabName) {
+	console.log( {evt, section, tabName} );
+	windows_stack = []
+	currentStack = {}
+	var i, tabcontent, tablinks
+	tabcontent = document.getElementsByClassName(section + '_tabcontent')
+	for (i = 0; i < tabcontent.length; i++) {
+		tabcontent[i].style.display = 'none'
+	}
+	tablinks = document.getElementsByClassName(section + '_tablinks')
+	for (i = 0; i < tablinks.length; i++) {
+		tablinks[i].className = tablinks[i].className.replace(' active', '')
+	}
+	if (tabName == 'settings_tab' && main_selected != 'settings_tab') {
+		settingsTab.settings = { ...lastSettings }
+	}
+	document.getElementById(tabName).style.display = 'block'
+	window[section + '_selected'] = tabName
+	evt.currentTarget.className += ' active'
+	// Check if you need to load more content in the search tab
+	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'])
+	}
+}
+
+function showTab(type, id){
+	if (windows_stack.length == 0)
+		windows_stack.push({tab: main_selected})
+	else
+		windows_stack.push(currentStack)
+	if (type == 'artist')
+		tab = 'artist_tab'
+	else
+		tab = 'tracklist_tab'
+	currentStack = {type: type, id: id}
+	let tabcontent = document.getElementsByClassName('main_tabcontent')
+	for (let i = 0; i < tabcontent.length; i++) {
+		tabcontent[i].style.display = 'none'
+	}
+	document.getElementById(tab).style.display = 'block'
+}
+
+function backTab(){
+	if (windows_stack.length == 1){
+		clickElement("main_"+main_selected+"link")
+	}else{
+		let tabObj = windows_stack.pop()
+		showTab(tabObj.type, tabObj.id)
+	}
+}