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

This commit is contained in:
Roberto Tonino 2020-08-22 23:34:16 +02:00
parent a53204668b
commit 972d1fe680
10 changed files with 109 additions and 63 deletions

View File

@ -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? ## What's left to do?
- [ ] Use Vue app-wide - [ ] 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 ⚒ - [ ] Implement custom contextmenu ⚒
- [X] Copy and paste functions - [X] Copy and paste functions
- [X] Copy Link where possible - [X] Copy Link where possible

File diff suppressed because one or more lines are too long

View File

@ -68,24 +68,33 @@ socket.on('logged_in', function(data) {
case 1: case 1:
case 3: case 3:
toast(i18n.t('toasts.loggedIn'), 'done', true, 'login-toast') 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) { if (data.arl) {
localStorage.setItem('arl', 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() $('#open_login_prompt').hide()
if (data.user) { if (data.user) {
$('#settings_username').text(data.user.name) $('#settings_username').text(data.user.name)
$('#settings_picture').attr( $('#settings_picture').attr(
'src', 'src',
`https://e-cdns-images.dzcdn.net/images/user/${data.user.picture}/125x125-000000-80-0-0.jpg` `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') document.getElementById('home_not_logged_in').classList.add('hide')
break break
case 2: case 2:
toast(i18n.t('toasts.alreadyLogged'), 'done', true, 'login-toast') toast(i18n.t('toasts.alreadyLogged'), 'done', true, 'login-toast')
if (data.user) { if (data.user) {
$('#settings_username').text(data.user.name) $('#settings_username').text(data.user.name)
$('#settings_picture').attr( $('#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` `https://e-cdns-images.dzcdn.net/images/user/${data.user.picture}/125x125-000000-80-0-0.jpg`
) )
// $('#logged_in_info').show() // $('#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') document.getElementById('home_not_logged_in').classList.add('hide')
break break
@ -102,8 +112,8 @@ socket.on('logged_in', function(data) {
localStorage.removeItem('arl') localStorage.removeItem('arl')
$('#login_input_arl').val('') $('#login_input_arl').val('')
$('#open_login_prompt').show() $('#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_username').text('Not Logged')
$('#settings_picture').attr('src', `https://e-cdns-images.dzcdn.net/images/user/125x125-000000-80-0-0.jpg`) $('#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') document.getElementById('home_not_logged_in').classList.remove('hide')

View File

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

View File

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

View File

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

View File

@ -275,13 +275,17 @@
<div class="input_group"> <div class="input_group">
<p class="input_group_text">{{ $t('settings.covers.localArtworkSize') }}</p> <p class="input_group_text">{{ $t('settings.covers.localArtworkSize') }}</p>
<input type="number" min="100" max="10000" step="100" v-model.number="settings.localArtworkSize" /> <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>
<div class="input_group"> <div class="input_group">
<p class="input_group_text">{{ $t('settings.covers.embeddedArtworkSize') }}</p> <p class="input_group_text">{{ $t('settings.covers.embeddedArtworkSize') }}</p>
<input type="number" min="100" max="10000" step="100" v-model.number="settings.embeddedArtworkSize" /> <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>
<div class="input_group"> <div class="input_group">
@ -297,7 +301,9 @@
<input type="checkbox" v-model="settings.embeddedArtworkPNG" /> <input type="checkbox" v-model="settings.embeddedArtworkPNG" />
<span class="checkbox_text">{{ $t('settings.covers.embeddedArtworkPNG') }}</span> <span class="checkbox_text">{{ $t('settings.covers.embeddedArtworkPNG') }}</span>
</label> </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"> <div class="input_group">
<p class="input_group_text">{{ $t('settings.covers.jpegImageQuality') }}</p> <p class="input_group_text">{{ $t('settings.covers.jpegImageQuality') }}</p>
@ -617,7 +623,9 @@ export default {
flags, flags,
currentLocale: 'en', currentLocale: 'en',
locales: [], locales: [],
settings: { tags: {} }, settings: {
tags: {}
},
lastSettings: {}, lastSettings: {},
spotifyFeatures: {}, spotifyFeatures: {},
lastCredentials: {}, 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: { methods: {
revertSettings() { revertSettings() {
this.settings = { ...this.lastSettings } this.settings = { ...this.lastSettings }

View File

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

View File

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

View File

@ -3,3 +3,13 @@ export const socket = io.connect(window.location.href)
socket.on('connect', () => { socket.on('connect', () => {
document.getElementById('start_app_placeholder').classList.add('loading_placeholder--hidden') 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')))
// })