evan/deemixer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

started adding routes to the whole app (the app is currently broken)

Browse Source
This commit is contained in:
Roberto Tonino 2020-07-28 22:09:13 +02:00
parent 20460ef9ce
commit 2e05ef3f0a
13 changed files with 194 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
public/js/bundle.js
View File

File diff suppressed because one or more lines are too long

12
src/components/TheAboutTab.vue
View File

@ -1,5 +1,5 @@
<template>
<div id="about_tab" class="main_tabcontent">
<div id="about_tab" class="main_tabcontent" ref="root">
<h2 class="page_heading">{{ $t('sidebar.about') }}</h2>
<ul>
<li v-html="$t('about.usesLibrary')"></li>
@ -208,6 +208,14 @@ export default {
paypal,
ethereum,
bitcoin
})
}),
mounted() {
console.log('about mounted')
this.$refs.root.style.display = 'block'
},
beforeDestroy() {
console.log('about bef dest')
this.$refs.root.style.display = 'none'
}
}
</script>

12
src/components/TheChartsTab.vue
View File

@ -1,5 +1,5 @@
<template>
<div id="charts_tab" class="main_tabcontent">
<div id="charts_tab" class="main_tabcontent" ref="root">
<h2 class="page_heading">{{ $t('charts.title') }}</h2>
<div v-if="country === ''" id="charts_selection">
<div class="release_grid charts_grid">
@ -72,9 +72,7 @@
<td class="table__cell--large breakline">
{{
track.title +
(track.title_version && track.title.indexOf(track.title_version) == -1
? ' ' + track.title_version
: '')
(track.title_version && track.title.indexOf(track.title_version) == -1 ? ' ' + track.title_version : '')
}}
</td>
<td
@ -194,8 +192,14 @@ export default {
}
},
mounted() {
console.log('charts mounted')
this.$refs.root.style.display = 'block'
socket.on('init_charts', this.initCharts)
socket.on('setChartTracks', this.setTracklist)
},
beforeDestroy() {
console.log('charts bef dest')
this.$refs.root.style.display = 'none'
}
}
</script>

28
src/components/TheContent.vue
View File

@ -6,12 +6,12 @@
<!-- <ArtistTab /> -->
<!-- <TracklistTab /> -->
<!-- <TheHomeTab /> -->
<TheChartsTab />
<!-- <TheChartsTab />
<TheFavoritesTab />
<TheErrorsTab />
<TheLinkAnalyzerTab />
<TheAboutTab />
<TheSettingsTab />
<TheSettingsTab /> -->
<TheMainSearch :scrolled-search-type="newScrolled" />
</div>
</section>
@ -21,13 +21,13 @@
// import ArtistTab from '@components/ArtistTab.vue'
// import TracklistTab from '@components/TracklistTab.vue'
import TheChartsTab from '@components/TheChartsTab.vue'
import TheFavoritesTab from '@components/TheFavoritesTab.vue'
import TheErrorsTab from '@components/TheErrorsTab.vue'
// import TheChartsTab from '@components/TheChartsTab.vue'
// import TheFavoritesTab from '@components/TheFavoritesTab.vue'
// import TheErrorsTab from '@components/TheErrorsTab.vue'
// import TheHomeTab from '@components/TheHomeTab.vue'
import TheLinkAnalyzerTab from '@components/TheLinkAnalyzerTab.vue'
import TheAboutTab from '@components/TheAboutTab.vue'
import TheSettingsTab from '@components/TheSettingsTab.vue'
// import TheLinkAnalyzerTab from '@components/TheLinkAnalyzerTab.vue'
// import TheAboutTab from '@components/TheAboutTab.vue'
// import TheSettingsTab from '@components/TheSettingsTab.vue'
import TheMainSearch from '@components/TheMainSearch.vue'
import { debounce } from '@/utils/utils'
@ -37,13 +37,13 @@ export default {
components: {
// ArtistTab,
// TracklistTab
TheChartsTab,
TheFavoritesTab,
TheErrorsTab,
// TheChartsTab,
// TheFavoritesTab,
// TheErrorsTab,
// TheHomeTab,
TheLinkAnalyzerTab,
TheAboutTab,
TheSettingsTab,
// TheLinkAnalyzerTab,
// TheAboutTab,
// TheSettingsTab,
TheMainSearch
},
data: () => ({

8
src/components/TheErrorsTab.vue
View File

@ -1,5 +1,5 @@
<template>
<div id="errors_tab" class="main_tabcontent">
<div id="errors_tab" class="main_tabcontent" ref="root">
<h1>{{ $t('errors.title', [title]) }}</h1>
<table class="table table--tracklist">
<tr>
@ -42,8 +42,14 @@ export default {
}
},
mounted() {
console.log('errors mounted')
this.$refs.root.style.display = 'block'
EventBus.$on('showTabErrors', this.showErrors)
this.$root.$on('showTabErrors', this.showErrors)
},
beforeDestroy() {
console.log('errors bef dest')
this.$refs.root.style.display = 'none'
}
}
</script>

19
src/components/TheFavoritesTab.vue
View File

@ -1,5 +1,5 @@
<template>
<div id="favorites_tab" class="main_tabcontent" @click="handleFavoritesTabClick">
<div id="favorites_tab" class="main_tabcontent" @click="handleFavoritesTabClick" ref="root">
<h2 class="page_heading">
{{ $t('favorites.title') }}
<div
@ -48,9 +48,7 @@
</div>
<p class="primary-text">{{ release.title }}</p>
<p class="secondary-text">
{{
`${$t('globals.by', [release.creator.name])} - ${$tc('globals.listTabs.trackN', release.nb_tracks)}`
}}
{{ `${$t('globals.by', [release.creator.name])} - ${$tc('globals.listTabs.trackN', release.nb_tracks)}` }}
</p>
</div>
<div
@ -74,12 +72,7 @@
</div>
<p class="primary-text">{{ release.title }}</p>
<p class="secondary-text">
{{
`${$t('globals.by', [release.creator.name])} - ${$tc(
'globals.listTabs.trackN',
release.nb_tracks
)}`
}}
{{ `${$t('globals.by', [release.creator.name])} - ${$tc('globals.listTabs.trackN', release.nb_tracks)}` }}
</p>
</div>
</div>
@ -315,6 +308,8 @@ export default {
}
},
mounted() {
console.log('favorites mounted')
this.$refs.root.style.display = 'block'
socket.on('init_favorites', this.initFavorites)
socket.on('updated_userFavorites', this.updated_userFavorites)
socket.on('updated_userSpotifyPlaylists', this.updated_userSpotifyPlaylists)
@ -322,6 +317,10 @@ export default {
socket.on('updated_userAlbums', this.updated_userAlbums)
socket.on('updated_userArtist', this.updated_userArtist)
socket.on('updated_userTracks', this.updated_userTracks)
},
beforeDestroy() {
console.log('favorites bef dest')
this.$refs.root.style.display = 'none'
}
}
</script>

20
src/components/TheLinkAnalyzerTab.vue
View File

@ -1,5 +1,5 @@
<template>
<div id="analyzer_tab" class="main_tabcontent image_header">
<div id="analyzer_tab" class="main_tabcontent image_header" ref="root">
<h2 class="page_heading page_heading--capitalize">{{ $t('sidebar.linkAnalyzer') }}</h2>
<div v-if="link == ''">
<p>
@ -25,16 +25,22 @@
<h1>{{ title }}</h1>
<h2 v-if="type == 'track'">
<i18n path="globals.by" tag="span">
<span place="0" class="clickable" @click="artistView" :data-id="data.artist.id">{{ data.artist.name }}</span>
<span place="0" class="clickable" @click="artistView" :data-id="data.artist.id">{{
data.artist.name
}}</span>
</i18n>
•
<i18n path="globals.in" tag="span">
<span place="0" class="clickable" @click="albumView" :data-id="data.album.id">{{ data.album.title }}</span>
<span place="0" class="clickable" @click="albumView" :data-id="data.album.id">{{
data.album.title
}}</span>
</i18n>
</h2>
<h2 v-else-if="type == 'album'">
<i18n path="globals.by" tag="span">
<span place="0" class="clickable" @click="artistView" :data-id="data.artist.id">{{ data.artist.name }}</span>
<span place="0" class="clickable" @click="artistView" :data-id="data.artist.id">{{
data.artist.name
}}</span>
</i18n>
{{ ` • ${$tc('globals.listTabs.trackN', data.nb_tracks)}` }}
</h2>
@ -181,11 +187,17 @@ export default {
}
},
mounted() {
console.log('link analyzer mounted')
this.$refs.root.style.display = 'block'
EventBus.$on('linkAnalyzerTab:reset', this.reset)
socket.on('analyze_track', this.showTrack)
socket.on('analyze_album', this.showAlbum)
socket.on('analyze_notSupported', this.notSupported)
},
beforeDestroy() {
console.log('link analyzer bef dest')
this.$refs.root.style.display = 'none'
}
}
</script>

34
src/components/TheMainSearch.vue
View File

@ -1,5 +1,5 @@
<template>
<div id="search_tab" class="main_tabcontent" @click="handleSearchTabClick">
<div id="search_tab" class="main_tabcontent" @click="handleSearchTabClick" ref="root">
<div :class="{ hide: results.query != '' }">
<h2>{{ $t('search.startSearching') }}</h2>
<p>{{ $t('search.description') }}</p>
@ -9,8 +9,12 @@
<li class="section-tabs__tab search_tablinks" id="search_all_tab">{{ $t('globals.listTabs.all') }}</li>
<li class="section-tabs__tab search_tablinks" id="search_track_tab">{{ $tc('globals.listTabs.track', 2) }}</li>
<li class="section-tabs__tab search_tablinks" id="search_album_tab">{{ $tc('globals.listTabs.album', 2) }}</li>
<li class="section-tabs__tab search_tablinks" id="search_artist_tab">{{ $tc('globals.listTabs.artist', 2) }}</li>
<li class="section-tabs__tab search_tablinks" id="search_playlist_tab">{{ $tc('globals.listTabs.playlist', 2) }}</li>
<li class="section-tabs__tab search_tablinks" id="search_artist_tab">
{{ $tc('globals.listTabs.artist', 2) }}
</li>
<li class="section-tabs__tab search_tablinks" id="search_playlist_tab">
{{ $tc('globals.listTabs.playlist', 2) }}
</li>
</ul>
<div id="search_tab_content">
<!-- ### Main Search Tab ### -->
@ -65,9 +69,7 @@
$tc('globals.listTabs.trackN', results.allTab.TOP_RESULT[0].nb_song)
}}
</p>
<span class="tag">{{
$tc(`globals.listTabs.${results.allTab.TOP_RESULT[0].type}`, 1)
}}</span>
<span class="tag">{{ $tc(`globals.listTabs.${results.allTab.TOP_RESULT[0].type}`, 1) }}</span>
</div>
</div>
<div v-else-if="section == 'TRACK'">
@ -195,7 +197,9 @@
>
{{ release.ALB_TITLE }}
</p>
<p class="secondary-text">{{ release.ART_NAME + ' - ' + $tc('globals.listTabs.trackN', release.NUMBER_TRACK) }}</p>
<p class="secondary-text">
{{ release.ART_NAME + ' - ' + $tc('globals.listTabs.trackN', release.NUMBER_TRACK) }}
</p>
</div>
</div>
<div v-else-if="section == 'PLAYLIST'" class="release_grid firstrow_only">
@ -361,7 +365,11 @@
<i v-if="release.explicit_lyrics" class="material-icons explicit_icon">explicit</i>
{{ release.title }}
</p>
<p class="secondary-text">{{ $t('globals.by', [release.artist.name]) + ' - ' + $tc('globals.listTabs.trackN', release.nb_tracks) }}</p>
<p class="secondary-text">
{{
$t('globals.by', [release.artist.name]) + ' - ' + $tc('globals.listTabs.trackN', release.nb_tracks)
}}
</p>
</div>
</div>
</div>
@ -424,9 +432,7 @@
</div>
<p class="primary-text">{{ release.title }}</p>
<p class="secondary-text">
{{
`${$t('globals.by', [release.user.name])} - ${$tc('globals.listTabs.trackN', release.nb_tracks)}`
}}
{{ `${$t('globals.by', [release.user.name])} - ${$tc('globals.listTabs.trackN', release.nb_tracks)}` }}
</p>
</div>
</div>
@ -497,12 +503,18 @@ export default {
}
},
mounted() {
// console.log('main search mounted')
// this.$refs.root.style.display = 'block'
EventBus.$on('mainSearch:checkLoadMoreContent', this.checkLoadMoreContent)
this.$root.$on('mainSearch:showNewResults', this.showNewResults)
socket.on('mainSearch', this.handleMainSearch)
socket.on('search', this.handleSearch)
},
beforeDestroy() {
// console.log('main search bef dest')
// this.$refs.root.style.display = 'none'
},
methods: {
artistView: showView.bind(null, 'artist'),
albumView: showView.bind(null, 'album'),

8
src/components/TheSettingsTab.vue
View File

@ -1,5 +1,5 @@
<template>
<div id="settings_tab" class="main_tabcontent fixed_footer">
<div id="settings_tab" class="main_tabcontent fixed_footer" ref="root">
<h2 class="page_heading">{{ $t('settings.title') }}</h2>
<div id="logged_in_info" ref="loggedInInfo">
@ -611,7 +611,13 @@ export default {
accountNum: 0,
accounts: []
}),
beforeDestroy() {
console.log('settings bef dest')
this.$refs.root.style.display = 'none'
},
mounted() {
console.log('settings mounted')
this.$refs.root.style.display = 'block'
this.locales = this.$i18n.availableLocales
EventBus.$on('settingsTab:revertSettings', this.revertSettings)

21
src/components/TheSidebar.vue
View File

@ -142,24 +142,45 @@ export default {
switch (targetID) {
case 'main_search_tablink':
selectedTab = 'search_tab'
this.$router.push({
name: 'Search'
})
break
case 'main_home_tablink':
selectedTab = 'home_tab'
this.$router.push({
name: 'Home'
})
break
case 'main_charts_tablink':
selectedTab = 'charts_tab'
this.$router.push({
name: 'Charts'
})
break
case 'main_favorites_tablink':
selectedTab = 'favorites_tab'
this.$router.push({
name: 'Favorites'
})
break
case 'main_analyzer_tablink':
selectedTab = 'analyzer_tab'
this.$router.push({
name: 'Link Analyzer'
})
break
case 'main_settings_tablink':
selectedTab = 'settings_tab'
this.$router.push({
name: 'Settings'
})
break
case 'main_about_tablink':
selectedTab = 'about_tab'
this.$router.push({
name: 'About'
})
break
default:

1
src/components/TracklistTab.vue
View File

@ -244,6 +244,7 @@ export default {
},
showPlaylist(data) {
this.reset()
console.log(data)
const {
id: playlistID,

10
src/js/tabs.js
View File

@ -25,6 +25,8 @@ export function changeTab(sidebarEl, section, tabName) {
const tabContent = document.getElementsByClassName(`${section}_tabcontent`)
for (let i = 0; i < tabContent.length; i++) {
if (!tabContent[i]) continue
tabContent[i].style.display = 'none'
}
@ -40,17 +42,21 @@ export function changeTab(sidebarEl, section, tabName) {
EventBus.$emit('settingsTab:revertCredentials')
}
// * The tab we want to show
if (document.getElementById(tabName)) {
document.getElementById(tabName).style.display = 'block'
}
if (section === 'main') {
window.main_selected = tabName
} else if ('search' === section) {
} else if (section === 'search') {
window.search_selected = tabName
}
sidebarEl.classList.add('active')
// Check if you need to load more content in the search tab
// * Check if you need to load more content in the search tab
// * Happens when the user changes the tab in the main search
if (
window.main_selected === 'search_tab' &&
['track_search', 'album_search', 'artist_search', 'playlist_search'].indexOf(window.search_selected) !== -1

47
src/plugins/router.js
View File

@ -3,9 +3,17 @@ import VueRouter from 'vue-router'
import { socket } from '@/utils/socket'
import EventBus from '@/utils/EventBus'
import TheHomeTab from '@components/TheHomeTab.vue'
import TracklistTab from '@components/TracklistTab.vue'
import ArtistTab from '@components/ArtistTab.vue'
import TracklistTab from '@components/TracklistTab.vue'
import TheHomeTab from '@components/TheHomeTab.vue'
import TheChartsTab from '@components/TheChartsTab.vue'
import TheFavoritesTab from '@components/TheFavoritesTab.vue'
import TheErrorsTab from '@components/TheErrorsTab.vue'
import TheLinkAnalyzerTab from '@components/TheLinkAnalyzerTab.vue'
import TheAboutTab from '@components/TheAboutTab.vue'
import TheSettingsTab from '@components/TheSettingsTab.vue'
import TheMainSearch from '@components/TheMainSearch.vue'
Vue.use(VueRouter)
@ -24,6 +32,41 @@ const routes = [
name: 'Artist',
component: ArtistTab
},
{
path: '/charts',
name: 'Charts',
component: TheChartsTab
},
{
path: '/favorites',
name: 'Favorites',
component: TheFavoritesTab
},
{
path: '/errors',
name: 'Errors',
component: TheErrorsTab
},
{
path: '/link-analyzer',
name: 'Link Analyzer',
component: TheLinkAnalyzerTab
},
{
path: '/about',
name: 'About',
component: TheAboutTab
},
{
path: '/settings',
name: 'Settings',
component: TheSettingsTab
},
// {
// path: '/search',
// name: 'Search',
// component: TheMainSearch
// },
// 404 client side
{
path: '*',