started replicate of search tab with Vue SFCs, removed main search tab top result img mega if
This commit is contained in:
parent
bf6da9a51b
commit
0bf2cef78d
@ -33,7 +33,7 @@
|
|||||||
<div id="middle_section">
|
<div id="middle_section">
|
||||||
<header id="search"><input id="searchbar" type="text" name="searchbar" value="" placeholder="Search..."></header>
|
<header id="search"><input id="searchbar" type="text" name="searchbar" value="" placeholder="Search..."></header>
|
||||||
<section id="content"><div id="container">
|
<section id="content"><div id="container">
|
||||||
|
<!-- <div id="v-app" style="height: 300px;"><app/></div> -->
|
||||||
<div id="search_tab" class="main_tabcontent">
|
<div id="search_tab" class="main_tabcontent">
|
||||||
<div class="tab">
|
<div class="tab">
|
||||||
<button class="search_tablinks" id="search_all_tab" onclick="changeTab(event, 'search', 'main_search')">All</button>
|
<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_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>
|
<button class="search_tablinks" id="search_playlist_tab" onclick="changeTab(event, 'search', 'playlist_search')">Playlist</button>
|
||||||
</div>
|
</div>
|
||||||
<div id="v-app">
|
|
||||||
<app></app>
|
|
||||||
</div>
|
|
||||||
<div id="search_tab_content">
|
<div id="search_tab_content">
|
||||||
<!-- ### Main Search Tab ### -->
|
<!-- ### Main Search Tab ### -->
|
||||||
<div id="main_search" class="search_tabcontent">
|
<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/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/vue.min.js"></script>
|
||||||
<script type="text/javascript" src="/public/js/vendor/toastify.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/app.js"></script>
|
||||||
<script type="text/javascript" src="/public/js/app/utils.js"></script>
|
<script type="text/javascript" src="/public/js/app/utils.js"></script>
|
||||||
<script type="text/javascript" src="/public/js/app/search.js"></script>
|
<script type="text/javascript" src="/public/js/app/search.js"></script>
|
||||||
|
@ -1,17 +1,13 @@
|
|||||||
<template>
|
<template>
|
||||||
<div></div>
|
<the-search-tab />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// const Import = httpVueLoader('./Import.vue')
|
const TheSearchTab = httpVueLoader('./TheSearchTab.vue')
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
data: () => ({
|
components: {
|
||||||
who: 'world'
|
TheSearchTab
|
||||||
}),
|
|
||||||
mounted() {
|
|
||||||
console.log( 'First Vue SFC try' );
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
47
public/js/app/components/TheSearchTab.vue
Normal file
47
public/js/app/components/TheSearchTab.vue
Normal file
@ -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>
|
215
public/js/app/components/search-tab/TheMainSearch.vue
Normal file
215
public/js/app/components/search-tab/TheMainSearch.vue
Normal file
@ -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>
|
@ -192,6 +192,7 @@ function mainSearchHandler(result) {
|
|||||||
document.getElementById('search_tab_content').style.display = 'block'
|
document.getElementById('search_tab_content').style.display = 'block'
|
||||||
document.getElementById('main_search_tablink').click()
|
document.getElementById('main_search_tablink').click()
|
||||||
}
|
}
|
||||||
|
|
||||||
socket.on('mainSearch', function (result) {
|
socket.on('mainSearch', function (result) {
|
||||||
mainSearchHandler(result)
|
mainSearchHandler(result)
|
||||||
})
|
})
|
Loading…
Reference in New Issue
Block a user