fix: general routing not wokring; fix: settings tab not showing up
This commit is contained in:
Roberto Tonino
parent
a53204668b
commit
972d1fe680
|
|
@ -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
|
||||
- [ ] Second step: Implement routing for the whole app using Vue Router ⚒
|
||||
- [ ] Third step: Remove jQuery
|
||||
- [X] Rewrite the app in Single File Components way
|
||||
- [ ] Implement routing for the whole app using Vue Router ⚒
|
||||
- [ ] 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
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
22
src/app.js
22
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()
|
||||
document.getElementById('logged_in_info').classList.remove('hide')
|
||||
$('#logged_in_info').removeClass('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').hide()
|
||||
$('#logged_in_info').addClass('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')
|
||||
|
|
|
|||
|
|
@ -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') || ''
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
this.locales = this.$i18n.availableLocales
|
||||
// mounted() {
|
||||
// this.locales = this.$i18n.availableLocales
|
||||
|
||||
EventBus.$on('settingsTab:revertSettings', this.revertSettings)
|
||||
EventBus.$on('settingsTab:revertCredentials', this.revertCredentials)
|
||||
// EventBus.$on('settingsTab:revertSettings', this.revertSettings)
|
||||
// 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) {
|
||||
this.$i18n.locale = storedLocale
|
||||
this.currentLocale = storedLocale
|
||||
}
|
||||
// if (storedLocale) {
|
||||
// this.$i18n.locale = storedLocale
|
||||
// this.currentLocale = storedLocale
|
||||
// }
|
||||
|
||||
let storedArl = localStorage.getItem('arl')
|
||||
// let storedArl = localStorage.getItem('arl')
|
||||
|
||||
if (storedArl) {
|
||||
this.$refs.loginInput.value = storedArl.trim()
|
||||
}
|
||||
// if (storedArl) {
|
||||
// this.$refs.loginInput.value = storedArl.trim()
|
||||
// }
|
||||
|
||||
let storedAccountNum = localStorage.getItem('accountNum')
|
||||
// let storedAccountNum = localStorage.getItem('accountNum')
|
||||
|
||||
if (storedAccountNum) {
|
||||
this.accountNum = storedAccountNum
|
||||
}
|
||||
// if (storedAccountNum) {
|
||||
// this.accountNum = storedAccountNum
|
||||
// }
|
||||
|
||||
let spotifyUser = localStorage.getItem('spotifyUser')
|
||||
// let spotifyUser = localStorage.getItem('spotifyUser')
|
||||
|
||||
if (spotifyUser) {
|
||||
this.lastUser = spotifyUser
|
||||
this.spotifyUser = spotifyUser
|
||||
socket.emit('update_userSpotifyPlaylists', spotifyUser)
|
||||
}
|
||||
// if (spotifyUser) {
|
||||
// this.lastUser = spotifyUser
|
||||
// this.spotifyUser = spotifyUser
|
||||
// socket.emit('update_userSpotifyPlaylists', spotifyUser)
|
||||
// }
|
||||
|
||||
this.changeSlimDownloads = 'true' === localStorage.getItem('slimDownloads')
|
||||
// this.changeSlimDownloads = 'true' === localStorage.getItem('slimDownloads')
|
||||
|
||||
let volume = parseInt(localStorage.getItem('previewVolume'))
|
||||
if (isNaN(volume)) {
|
||||
volume = 80
|
||||
localStorage.setItem('previewVolume', volume)
|
||||
}
|
||||
window.vol.preview_max_volume = volume
|
||||
// let volume = parseInt(localStorage.getItem('previewVolume'))
|
||||
// if (isNaN(volume)) {
|
||||
// volume = 80
|
||||
// localStorage.setItem('previewVolume', volume)
|
||||
// }
|
||||
// window.vol.preview_max_volume = volume
|
||||
|
||||
socket.on('init_settings', this.initSettings)
|
||||
socket.on('updateSettings', this.updateSettings)
|
||||
socket.on('accountChanged', this.accountChanged)
|
||||
socket.on('familyAccounts', this.initAccounts)
|
||||
socket.on('downloadFolderSelected', this.downloadFolderSelected)
|
||||
socket.on('applogin_arl', this.setArl)
|
||||
},
|
||||
// socket.on('init_settings', this.initSettings)
|
||||
// socket.on('updateSettings', this.updateSettings)
|
||||
// socket.on('accountChanged', this.accountChanged)
|
||||
// socket.on('familyAccounts', this.initAccounts)
|
||||
// socket.on('downloadFolderSelected', this.downloadFolderSelected)
|
||||
// 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
|
||||
},
|
||||
|
|
|
|||
|
|
@ -237,6 +237,7 @@ export default {
|
|||
showPlaylist(data) {
|
||||
this.reset()
|
||||
console.log(data)
|
||||
console.log('mandi')
|
||||
|
||||
const {
|
||||
id: playlistID,
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
|
|
|
|||
|
|
@ -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')))
|
||||
// })
|
||||
|
|
|
|||
Loading…
Reference in New Issue