started replicate of search tab with Vue SFCs, removed main search tab top result img mega if

public/index.html

@@ -33,7 +33,7 @@
 			<div id="middle_section">
 				<header id="search"><input id="searchbar" type="text" name="searchbar" value="" placeholder="Search..."></header>
 				<section id="content"><div id="container">
-
+					<!-- <div id="v-app" style="height: 300px;"><app/></div> -->
 					<div id="search_tab" class="main_tabcontent">
 						<div class="tab">
 							<button class="search_tablinks" id="search_all_tab" onclick="changeTab(event, 'search', 'main_search')">All</button>
@@ -42,9 +42,6 @@
 							<button class="search_tablinks" id="search_artist_tab" onclick="changeTab(event, 'search', 'artist_search')">Artist</button>
 							<button class="search_tablinks" id="search_playlist_tab" onclick="changeTab(event, 'search', 'playlist_search')">Playlist</button>
 						</div>
-						<div id="v-app">
-							<app></app>
-						</div>
 						<div id="search_tab_content">
 							<!-- ### Main Search Tab ### -->
 							<div id="main_search" class="search_tabcontent">
@@ -412,7 +409,7 @@ <h1>Settings</h1>
 	<script type="text/javascript" src="/public/js/vendor/jquery-3.3.1.min.js"></script>
 	<script type="text/javascript" src="/public/js/vendor/vue.min.js"></script>
 	<script type="text/javascript" src="/public/js/vendor/toastify.js"></script>
-	<script type="text/javascript" src="/public/js/app/v-app.js"></script>
+	<!-- <script type="text/javascript" src="/public/js/app/v-app.js"></script> -->
 	<script type="text/javascript" src="/public/js/app/app.js"></script>
 	<script type="text/javascript" src="/public/js/app/utils.js"></script>
 	<script type="text/javascript" src="/public/js/app/search.js"></script>

public/js/app/components/App.vue

@@ -1,17 +1,13 @@
 <template>
-	<div></div>
+	<the-search-tab />
 </template>
 
 <script>
-// const Import = httpVueLoader('./Import.vue')
+const TheSearchTab = httpVueLoader('./TheSearchTab.vue')
 
 module.exports = {
-	data: () => ({
+	components: {
-		who: 'world'
+		TheSearchTab
-	}),
-	mounted() {
-		console.log( 'First Vue SFC try' );
-		
 	}
 }
 </script>

public/js/app/components/TheSearchTab.vue

@@ -0,0 +1,47 @@
+<template>
+	<div id="search_tab-2" class="main_tabcontentZZZ">
+		<div class="tab">
+			<button
+				class="search_tablinks"
+				id="search_all_tab-2"
+				onclick="changeTab(event, 'search', 'main_search')"
+			>All</button>
+			<button
+				class="search_tablinks"
+				id="search_track_tab-2"
+				onclick="changeTab(event, 'search', 'track_search')"
+			>Tracks</button>
+			<button
+				class="search_tablinks"
+				id="search_album_tab-2"
+				onclick="changeTab(event, 'search', 'album_search')"
+			>Album</button>
+			<button
+				class="search_tablinks"
+				id="search_artist_tab-2"
+				onclick="changeTab(event, 'search', 'artist_search')"
+			>Artist</button>
+			<button
+				class="search_tablinks"
+				id="search_playlist_tab-2"
+				onclick="changeTab(event, 'search', 'playlist_search')"
+			>Playlist</button>
+		</div>
+		<div id="search_tab_content">
+			<the-main-search />
+		</div>
+	</div>
+</template>
+
+<script>
+const TheMainSearch = httpVueLoader('./search-tab/TheMainSearch.vue')
+
+module.exports = {
+	components: {
+		TheMainSearch
+	}
+}
+</script>
+
+<style>
+</style>

public/js/app/components/search-tab/TheMainSearch.vue

@@ -0,0 +1,215 @@
+<template>
+	<div id="main_search-2" class="search_tabcontentZZZ">
+		<template v-for="(section, index) in results.ORDER">
+			<div
+				class="search_section"
+				v-if="(section !== 'TOP_RESULT' && results[section].data.length > 0) || (results[section].length > 0)"
+				:key="`section-${index}`"
+			>
+				<h1 @click="changeSearchTab(section)">{{ formatNames(section) }}</h1>
+				<div v-if="section == 'TOP_RESULT'" class="top_result">
+					<div class="cover_container">
+						<img
+							:src="topResultURL"
+							:class="(results.TOP_RESULT[0].__TYPE__ == 'artist' ? 'circle' : 'rounded') + ' coverart'"
+						/>
+						<div
+							role="button"
+							aria-label="download"
+							v-on:contextmenu="openQualityModal(event)"
+							v-on:click="addToQueue(event)"
+							v-bind:data-link="'https://deezer.com/'+results.TOP_RESULT[0].__TYPE__+'/'+(results.TOP_RESULT[0].__TYPE__ == 'artist' ? results.TOP_RESULT[0].ART_ID : results.TOP_RESULT[0].__TYPE__ == 'album' ? results.TOP_RESULT[0].ALB_ID : results.TOP_RESULT[0].__TYPE__ == 'playlist' ? results.TOP_RESULT[0].PLAYLIST_ID : '')"
+							class="download_overlay"
+						>
+							<i class="material-icons">get_app</i>
+						</div>
+					</div>
+					<div class="info_box">
+						<p
+							class="primary-text"
+						>{{ results.TOP_RESULT[0].__TYPE__ == 'artist' ? results.TOP_RESULT[0].ART_NAME : results.TOP_RESULT[0].__TYPE__ == 'album' ? results.TOP_RESULT[0].ALB_TITLE : results.TOP_RESULT[0].__TYPE__ == 'playlist' ? results.TOP_RESULT[0].TITLE : '' }}</p>
+						<p
+							class="secondary-text"
+						>{{ results.TOP_RESULT[0].__TYPE__ == 'artist' ? numberWithDots(results.TOP_RESULT[0].NB_FAN) + ' fans' : results.TOP_RESULT[0].__TYPE__ == 'album' ? 'by '+results.TOP_RESULT[0].ART_NAME+' - '+results.TOP_RESULT[0].NUMBER_TRACK+' tracks' : results.TOP_RESULT[0].__TYPE__ == 'playlist' ? 'by '+results.TOP_RESULT[0].PARENT_USERNAME+' - '+results.TOP_RESULT[0].NB_SONG+' tracks' : '' }}</p>
+						<span
+							class="tag"
+						>{{ results.TOP_RESULT[0].__TYPE__.charAt(0).toUpperCase() + results.TOP_RESULT[0].__TYPE__.substring(1)}}</span>
+					</div>
+				</div>
+				<!-- <div v-if="section == 'TRACK'">
+					<table class="tracks_table">
+						<tr v-for="track in results.TRACK.data.slice(0, 6)" class="track_row">
+							<td style="width: 48px; text-align: center;">
+								<img
+									class="rounded coverart"
+									v-bind:src="'https://e-cdns-images.dzcdn.net/images/cover/'+track.ALB_PICTURE+'/32x32-000000-80-0-0.jpg'"
+								/>
+							</td>
+							<td class="breakline">{{track.SNG_TITLE + (track.VERSION ? ' '+track.VERSION : '')}}</td>
+							<td class="breakline">
+								<span v-for="artist in track.ARTISTS">{{artist.ART_NAME}}</span>
+							</td>
+							<td class="breakline">{{track.ALB_TITLE}}</td>
+							<td>{{convertDuration(track.DURATION)}}</td>
+							<td
+								role="button"
+								aria-label="download"
+								v-on:contextmenu="openQualityModal(event)"
+								v-on:click="addToQueue(event)"
+								v-bind:data-link="'https://www.deezer.com/track/'+track.SNG_ID"
+								style="width: 56px; text-align: center;"
+								class="clickable"
+							>
+								<i class="material-icons">get_app</i>
+							</td>
+						</tr>
+					</table>
+				</div>-->
+				<!-- <div v-if="section != 'TRACK' && section != 'TOP_RESULT'" class="release_grid firstrow_only">
+					<div v-for="release in results[section].data.slice(0, 10)" class="release">
+						<div class="cover_container">
+							<img
+								v-bind:class="(section == 'ARTIST' ? 'circle' : 'rounded') + ' coverart'"
+								v-bind:src="(section == 'ARTIST' ? 'https://e-cdns-images.dzcdn.net/images/artist/' + release.ART_PICTURE : section == 'ALBUM' ? 'https://e-cdns-images.dzcdn.net/images/cover/' + release.ALB_PICTURE : section == 'PLAYLIST' ? 'https://e-cdns-images.dzcdn.net/images/'+ release.PICTURE_TYPE +'/' + release.PLAYLIST_PICTURE : 'https://e-cdns-images.dzcdn.net/images/cover/' ) + '/156x156-000000-80-0-0.jpg'"
+							/>
+							<div
+								role="button"
+								aria-label="download"
+								v-on:contextmenu="openQualityModal(event)"
+								v-on:click="addToQueue(event)"
+								v-bind:data-link="'https://deezer.com/'+(section == 'ARTIST' ? 'artist/'+release.ART_ID : section == 'ALBUM' ? 'album/'+release.ALB_ID : section == 'PLAYLIST' ? 'playlist/'+release.PLAYLIST_ID : '')"
+								class="download_overlay"
+							>
+								<i class="material-icons">get_app</i>
+							</div>
+						</div>
+						<p
+							class="primary-text"
+						>{{ section == 'ARTIST' ? release.ART_NAME : section == 'ALBUM' ? release.ALB_TITLE : section == 'PLAYLIST' ? release.TITLE : '' }}</p>
+						<p
+							class="secondary-text"
+						>{{ section == 'ARTIST' ? numberWithDots(release.NB_FAN) + ' fans' : section == 'ALBUM' ? release.ART_NAME+' - '+release.NUMBER_TRACK+' tracks' : section == 'PLAYLIST' ? release.NB_SONG+' tracks' : '' }}</p>
+					</div>
+				</div>-->
+			</div>
+		</template>
+		<div
+			v-if="results.ORDER.every(section => section == 'TOP_RESULT' ? results[section].length == 0 : results[section].data.length == 0)"
+		>
+			<h1>No results</h1>
+		</div>
+	</div>
+</template>
+
+<script>
+module.exports = {
+	data: () => ({
+		results: {
+			QUERY: '',
+			ORDER: [],
+			ALBUM: {},
+			ARTIST: {},
+			TRACK: {},
+			TOP_RESULT: [],
+			PLAYLIST: {}
+		},
+		topResultURL: ''
+	}),
+	methods: {
+		changeSearchTab(section) {
+			if (section != 'TOP_RESULT') clickElement('search_' + section.toLowerCase() + '_tab')
+		},
+		addToQueue: function(e) {
+			sendAddToQueue(e.currentTarget.dataset.link)
+		},
+		openQualityModal: function(e) {
+			e.preventDefault()
+			openQualityModal(e.currentTarget.dataset.link)
+		},
+		handleMainSearch(result) {
+			this.results = result
+		},
+		formatNames(name) {
+			if ('string' !== typeof name) {
+				return
+			}
+
+			name = name.replace('_', ' ')
+
+			// Step 1. Lowercase the string
+			name = name.toLowerCase()
+
+			// Step 2. Split the string into an array of strings
+			name = name.split(' ')
+
+			// Step 3. Create the FOR loop
+			for (var i = 0; i < name.length; i++) {
+				name[i] = name[i].charAt(0).toUpperCase() + name[i].slice(1)
+			}
+
+			name = name.join(' ')
+
+			return name
+		},
+		getTopResultURL(result) {
+			if (result.TOP_RESULT.length === 0) {
+				this.topResultURL = ''
+				return
+			}
+
+			let topResultType = result.TOP_RESULT[0].__TYPE__
+
+			switch (topResultType) {
+				case 'artist':
+					this.topResultURL = 'https://e-cdns-images.dzcdn.net/images/artist/' + result.TOP_RESULT[0].ART_PICTURE
+					break
+				case 'album':
+					this.topResultURL = 'https://e-cdns-images.dzcdn.net/images/cover/' + result.TOP_RESULT[0].ALB_PICTURE
+					break
+				case 'playlist':
+					this.topResultURL =
+						'https://e-cdns-images.dzcdn.net/images/' +
+						result.TOP_RESULT[0].PICTURE_TYPE +
+						'/' +
+						result.TOP_RESULT[0].PLAYLIST_PICTURE
+					break
+				default:
+					this.topResultURL = 'https://e-cdns-images.dzcdn.net/images/cover/'
+					break
+			}
+
+			this.topResultURL += '/156x156-000000-80-0-0.jpg'
+
+			// Testing purposes
+			let idem =
+				(result.TOP_RESULT[0].__TYPE__ == 'artist'
+					? 'https://e-cdns-images.dzcdn.net/images/artist/' + result.TOP_RESULT[0].ART_PICTURE
+					: result.TOP_RESULT[0].__TYPE__ == 'album'
+					? 'https://e-cdns-images.dzcdn.net/images/cover/' + result.TOP_RESULT[0].ALB_PICTURE
+					: result.TOP_RESULT[0].__TYPE__ == 'playlist'
+					? 'https://e-cdns-images.dzcdn.net/images/' +
+					  result.TOP_RESULT[0].PICTURE_TYPE +
+					  '/' +
+					  result.TOP_RESULT[0].PLAYLIST_PICTURE
+					: 'https://e-cdns-images.dzcdn.net/images/cover/') + '/156x156-000000-80-0-0.jpg'
+
+			console.log(this.topResultURL)
+			console.log(idem)
+		}
+	},
+	watch: {
+		results(newRes, oldRes) {
+			console.log('new', newRes)
+			console.log('old', oldRes)
+
+			this.getTopResultURL(newRes)
+		}
+	},
+	mounted() {
+		socket.on('mainSearch', this.handleMainSearch)
+	}
+}
+</script>
+
+<style>
+</style>

public/js/app/search.js

@@ -192,6 +192,7 @@ function mainSearchHandler(result) {
 	document.getElementById('search_tab_content').style.display = 'block'
 	document.getElementById('main_search_tablink').click()
 }
+
 socket.on('mainSearch', function (result) {
 	mainSearchHandler(result)
 })