fix: general routing not wokring; fix: settings tab not showing up

README.md

@@ -5,9 +5,11 @@ This is just the WebUI for deemix, it should be used with deemix-pyweb or someth
 ## What's left to do?
 
 - [ ] Use Vue app-wide
-  - [X] First step: rewrite the app in Single File Components way
+  - [X] Rewrite the app in Single File Components way
-  - [ ] Second step: Implement routing for the whole app using Vue Router ⚒
+  - [ ] Implement routing for the whole app using Vue Router ⚒
-  - [ ] Third step: Remove jQuery
+  - [ ] Implement Vuex store for FE caching
+  - [ ] Remove jQuery
+- [ ] Improve artist/tracklist tabs displaying
 - [ ] Implement custom contextmenu ⚒
   - [X] Copy and paste functions
   - [X] Copy Link where possible

src/app.js

@@ -68,24 +68,33 @@ socket.on('logged_in', function(data) {
 		case 1:
 		case 3:
 			toast(i18n.t('toasts.loggedIn'), 'done', true, 'login-toast')
+
+			// Idea: set this whole object in the localStorage to read it in the future
+			// Other idea would be using vuex
+
 			if (data.arl) {
 				localStorage.setItem('arl', data.arl)
-				$('#login_input_arl').val(data.arl)
+				// $('#login_input_arl').val(data.arl)
 			}
+
+			// ? What's this?
 			$('#open_login_prompt').hide()
+
 			if (data.user) {
 				$('#settings_username').text(data.user.name)
 				$('#settings_picture').attr(
 					'src',
 					`https://e-cdns-images.dzcdn.net/images/user/${data.user.picture}/125x125-000000-80-0-0.jpg`
 				)
-				// $('#logged_in_info').show()
+				$('#logged_in_info').removeClass('hide')
-				document.getElementById('logged_in_info').classList.remove('hide')
+				// document.getElementById('logged_in_info').classList.remove('hide')
 			}
+			// $('#home_not_logged_in').addClass('hide')
 			document.getElementById('home_not_logged_in').classList.add('hide')
 			break
 		case 2:
 			toast(i18n.t('toasts.alreadyLogged'), 'done', true, 'login-toast')
+
 			if (data.user) {
 				$('#settings_username').text(data.user.name)
 				$('#settings_picture').attr(
@@ -93,7 +102,8 @@ socket.on('logged_in', function(data) {
 					`https://e-cdns-images.dzcdn.net/images/user/${data.user.picture}/125x125-000000-80-0-0.jpg`
 				)
 				// $('#logged_in_info').show()
-				document.getElementById('logged_in_info').classList.remove('hide')
+				// document.getElementById('logged_in_info').classList.remove('hide')
+				$('#logged_in_info').removeClass('hide')
 			}
 			document.getElementById('home_not_logged_in').classList.add('hide')
 			break
@@ -102,8 +112,8 @@ socket.on('logged_in', function(data) {
 			localStorage.removeItem('arl')
 			$('#login_input_arl').val('')
 			$('#open_login_prompt').show()
-			document.getElementById('logged_in_info').classList.add('hide')
+			$('#logged_in_info').addClass('hide')
-			// $('#logged_in_info').hide()
+			// document.getElementById('logged_in_info').classList.add('hide')
 			$('#settings_username').text('Not Logged')
 			$('#settings_picture').attr('src', `https://e-cdns-images.dzcdn.net/images/user/125x125-000000-80-0-0.jpg`)
 			document.getElementById('home_not_logged_in').classList.remove('hide')

src/components/TheChartsTab.vue

@@ -157,6 +157,7 @@ export default {
 			socket.emit('getChartTracks', this.id)
 		},
 		setTracklist(data) {
+			console.log('settracklist')
 			this.chart = data
 		},
 		changeCountry() {
@@ -164,6 +165,7 @@ export default {
 			this.id = 0
 		},
 		initCharts(data) {
+			console.log('init charts')
 			this.countries = data
 			this.country = localStorage.getItem('chart') || ''
 

src/components/TheContent.vue

@@ -1,8 +1,10 @@
 <template>
 	<section id="content" @scroll="handleContentScroll" ref="content">
 		<div id="container">
+			<!-- HomeTab and MainSearchTab -->
 			<router-view></router-view>
 
+			<TheMainSearch :scrolled-search-type="newScrolled" />
 			<!-- <ArtistTab /> -->
 			<!-- <TracklistTab /> -->
 			<!-- <TheHomeTab /> -->
@@ -12,7 +14,6 @@
 			<TheLinkAnalyzerTab />
 			<TheAboutTab />
 			<TheSettingsTab /> -->
-			<TheMainSearch :scrolled-search-type="newScrolled" />
 		</div>
 	</section>
 </template>

src/components/TheMainSearch.vue

@@ -494,7 +494,7 @@ export default {
 		}
 	},
 	mounted() {
-		// console.log('main search mounted')
+		console.log('main search mounted')
 		// this.$refs.root.style.display = 'block'
 		EventBus.$on('mainSearch:checkLoadMoreContent', this.checkLoadMoreContent)
 
@@ -503,7 +503,7 @@ export default {
 		socket.on('search', this.handleSearch)
 	},
 	beforeDestroy() {
-		// console.log('main search bef dest')
+		console.log('main search bef dest')
 		// this.$refs.root.style.display = 'none'
 	},
 	methods: {

src/components/TheSettingsTab.vue

@@ -275,13 +275,17 @@
 			<div class="input_group">
 				<p class="input_group_text">{{ $t('settings.covers.localArtworkSize') }}</p>
 				<input type="number" min="100" max="10000" step="100" v-model.number="settings.localArtworkSize" />
-				<p v-if="settings.localArtworkSize > 1200" class="input_group_text" style="opacity: 0.75; color: #ffcc22;">⚠️ {{ $t('settings.covers.imageSizeWarning') }}</p>
+				<p v-if="settings.localArtworkSize > 1200" class="input_group_text" style="opacity: 0.75; color: #ffcc22;">
+					⚠️ {{ $t('settings.covers.imageSizeWarning') }}
+				</p>
 			</div>
 
 			<div class="input_group">
 				<p class="input_group_text">{{ $t('settings.covers.embeddedArtworkSize') }}</p>
 				<input type="number" min="100" max="10000" step="100" v-model.number="settings.embeddedArtworkSize" />
-				<p v-if="settings.embeddedArtworkSize > 1200" class="input_group_text" style="opacity: 0.75; color: #ffcc22;">⚠️ {{ $t('settings.covers.imageSizeWarning') }}</p>
+				<p v-if="settings.embeddedArtworkSize > 1200" class="input_group_text" style="opacity: 0.75; color: #ffcc22;">
+					⚠️ {{ $t('settings.covers.imageSizeWarning') }}
+				</p>
 			</div>
 
 			<div class="input_group">
@@ -297,7 +301,9 @@
 				<input type="checkbox" v-model="settings.embeddedArtworkPNG" />
 				<span class="checkbox_text">{{ $t('settings.covers.embeddedArtworkPNG') }}</span>
 			</label>
-			<p v-if="settings.embeddedArtworkPNG" style="opacity: 0.75; color: #ffcc22;">⚠️ {{ $t('settings.covers.embeddedPNGWarning') }}</p>
+			<p v-if="settings.embeddedArtworkPNG" style="opacity: 0.75; color: #ffcc22;">
+				⚠️ {{ $t('settings.covers.embeddedPNGWarning') }}
+			</p>
 
 			<div class="input_group">
 				<p class="input_group_text">{{ $t('settings.covers.jpegImageQuality') }}</p>
@@ -617,7 +623,9 @@ export default {
 		flags,
 		currentLocale: 'en',
 		locales: [],
-		settings: { tags: {} },
+		settings: {
+			tags: {}
+		},
 		lastSettings: {},
 		spotifyFeatures: {},
 		lastCredentials: {},
@@ -697,57 +705,57 @@ export default {
 			}
 		}
 	},
-	mounted() {
+	// mounted() {
-		this.locales = this.$i18n.availableLocales
+	// 	this.locales = this.$i18n.availableLocales
 
-		EventBus.$on('settingsTab:revertSettings', this.revertSettings)
+	// 	EventBus.$on('settingsTab:revertSettings', this.revertSettings)
-		EventBus.$on('settingsTab:revertCredentials', this.revertCredentials)
+	// 	EventBus.$on('settingsTab:revertCredentials', this.revertCredentials)
 
-		this.$refs.loggedInInfo.classList.add('hide')
+	// 	this.$refs.loggedInInfo.classList.add('hide')
 
-		let storedLocale = localStorage.getItem('locale')
+	// 	let storedLocale = localStorage.getItem('locale')
 
-		if (storedLocale) {
+	// 	if (storedLocale) {
-			this.$i18n.locale = storedLocale
+	// 		this.$i18n.locale = storedLocale
-			this.currentLocale = storedLocale
+	// 		this.currentLocale = storedLocale
-		}
+	// 	}
 
-		let storedArl = localStorage.getItem('arl')
+	// 	let storedArl = localStorage.getItem('arl')
 
-		if (storedArl) {
+	// 	if (storedArl) {
-			this.$refs.loginInput.value = storedArl.trim()
+	// 		this.$refs.loginInput.value = storedArl.trim()
-		}
+	// 	}
 
-		let storedAccountNum = localStorage.getItem('accountNum')
+	// 	let storedAccountNum = localStorage.getItem('accountNum')
 
-		if (storedAccountNum) {
+	// 	if (storedAccountNum) {
-			this.accountNum = storedAccountNum
+	// 		this.accountNum = storedAccountNum
-		}
+	// 	}
 
-		let spotifyUser = localStorage.getItem('spotifyUser')
+	// 	let spotifyUser = localStorage.getItem('spotifyUser')
 
-		if (spotifyUser) {
+	// 	if (spotifyUser) {
-			this.lastUser = spotifyUser
+	// 		this.lastUser = spotifyUser
-			this.spotifyUser = spotifyUser
+	// 		this.spotifyUser = spotifyUser
-			socket.emit('update_userSpotifyPlaylists', spotifyUser)
+	// 		socket.emit('update_userSpotifyPlaylists', spotifyUser)
-		}
+	// 	}
 
-		this.changeSlimDownloads = 'true' === localStorage.getItem('slimDownloads')
+	// 	this.changeSlimDownloads = 'true' === localStorage.getItem('slimDownloads')
 
-		let volume = parseInt(localStorage.getItem('previewVolume'))
+	// 	let volume = parseInt(localStorage.getItem('previewVolume'))
-		if (isNaN(volume)) {
+	// 	if (isNaN(volume)) {
-			volume = 80
+	// 		volume = 80
-			localStorage.setItem('previewVolume', volume)
+	// 		localStorage.setItem('previewVolume', volume)
-		}
+	// 	}
-		window.vol.preview_max_volume = volume
+	// 	window.vol.preview_max_volume = volume
 
-		socket.on('init_settings', this.initSettings)
+	// 	socket.on('init_settings', this.initSettings)
-		socket.on('updateSettings', this.updateSettings)
+	// 	socket.on('updateSettings', this.updateSettings)
-		socket.on('accountChanged', this.accountChanged)
+	// 	socket.on('accountChanged', this.accountChanged)
-		socket.on('familyAccounts', this.initAccounts)
+	// 	socket.on('familyAccounts', this.initAccounts)
-		socket.on('downloadFolderSelected', this.downloadFolderSelected)
+	// 	socket.on('downloadFolderSelected', this.downloadFolderSelected)
-		socket.on('applogin_arl', this.setArl)
+	// 	socket.on('applogin_arl', this.setArl)
-	},
+	// },
 	methods: {
 		revertSettings() {
 			this.settings = { ...this.lastSettings }
@@ -791,7 +799,7 @@ export default {
 		selectDownloadFolder() {
 			if (window.clientMode) socket.emit('selectDownloadFolder')
 		},
-		downloadFolderSelected(folder){
+		downloadFolderSelected(folder) {
 			console.log(folder)
 			this.settings.downloadLocation = folder
 		},

src/components/TracklistTab.vue

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

src/plugins/router.js

@@ -20,6 +20,7 @@ Vue.use(VueRouter)
 const routes = [
 	{
 		path: '/',
+		name: 'Home',
 		component: TheHomeTab
 	},
 	{
@@ -70,7 +71,7 @@ const routes = [
 	// 404 client side
 	{
 		path: '*',
-		component: TracklistTab
+		component: TheHomeTab
 	}
 ]
 
@@ -85,25 +86,36 @@ const router = new VueRouter({
 
 router.beforeEach((to, from, next) => {
 	console.log('before route change', to)
+	let getTracklistParams = null
 
 	switch (to.name) {
 		case 'Artist':
-			socket.emit('getTracklist', {
+			getTracklistParams = {
 				type: 'artist',
 				id: to.params.id
-			})
+			}
 			break
 		case 'Tracklist':
-			socket.emit('getTracklist', {
+			getTracklistParams = {
 				type: to.params.type,
 				id: to.params.id
-			})
+			}
+			break
+		case 'Home':
+			socket.emit('get_home_data')
+			break
+		case 'Charts':
+			socket.emit('get_charts_data')
 			break
 
 		default:
 			break
 	}
 
+	if (getTracklistParams) {
+		socket.emit('getTracklist', getTracklistParams)
+	}
+
 	EventBus.$emit('trackPreview:stopStackedTabsPreview')
 
 	next()

src/utils/socket.js

@@ -3,3 +3,13 @@ export const socket = io.connect(window.location.href)
 socket.on('connect', () => {
 	document.getElementById('start_app_placeholder').classList.add('loading_placeholder--hidden')
 })
+
+// socket.on('init_charts', data => {
+// 	console.log(data)
+// })
+
+// socket.on('init_home', data => {
+// 	console.log(data)
+// 	localStorage.setItem('test_DELETE', JSON.stringify(data))
+// 	console.log(JSON.parse(localStorage.getItem('test_DELETE')))
+// })