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

src/components/TheAboutTab.vue

@@ -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>

src/components/TheChartsTab.vue

@@ -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.indexOf(track.title_version) == -1 ? ' ' + track.title_version : '')
-										? ' ' + 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>

src/components/TheContent.vue

@@ -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 TheChartsTab from '@components/TheChartsTab.vue'
-import TheFavoritesTab from '@components/TheFavoritesTab.vue'
+// import TheFavoritesTab from '@components/TheFavoritesTab.vue'
-import TheErrorsTab from '@components/TheErrorsTab.vue'
+// import TheErrorsTab from '@components/TheErrorsTab.vue'
 // import TheHomeTab from '@components/TheHomeTab.vue'
-import TheLinkAnalyzerTab from '@components/TheLinkAnalyzerTab.vue'
+// import TheLinkAnalyzerTab from '@components/TheLinkAnalyzerTab.vue'
-import TheAboutTab from '@components/TheAboutTab.vue'
+// import TheAboutTab from '@components/TheAboutTab.vue'
-import TheSettingsTab from '@components/TheSettingsTab.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,
+		// TheChartsTab,
-		TheFavoritesTab,
+		// TheFavoritesTab,
-		TheErrorsTab,
+		// TheErrorsTab,
 		// TheHomeTab,
-		TheLinkAnalyzerTab,
+		// TheLinkAnalyzerTab,
-		TheAboutTab,
+		// TheAboutTab,
-		TheSettingsTab,
+		// TheSettingsTab,
 		TheMainSearch
 	},
 	data: () => ({

src/components/TheErrorsTab.vue

@@ -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>

src/components/TheFavoritesTab.vue

@@ -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>

src/components/TheLinkAnalyzerTab.vue

@@ -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>

src/components/TheMainSearch.vue

@@ -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_artist_tab">
-				<li class="section-tabs__tab search_tablinks" id="search_playlist_tab">{{ $tc('globals.listTabs.playlist', 2) }}</li>
+					{{ $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">{{
+									<span class="tag">{{ $tc(`globals.listTabs.${results.allTab.TOP_RESULT[0].type}`, 1) }}</span>
-										$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'),

src/components/TheSettingsTab.vue

@@ -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)

src/components/TheSidebar.vue

@@ -34,7 +34,7 @@
 				<div
 					v-for="theme of themes"
 					:key="theme"
-					class="theme_toggler "
+					class="theme_toggler"
 					:class="[{ 'theme_toggler--active': activeTheme === theme }, `theme_toggler--${theme}`]"
 					@click="changeTheme(theme)"
 				></div>
@@ -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:

src/components/TracklistTab.vue

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

src/js/tabs.js

@@ -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

src/plugins/router.js

@@ -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: '*',