fixed dark mode and slim download checkboxes resetting when saving

This commit is contained in:
Roberto Tonino 2020-05-05 21:24:29 +02:00
parent 3fe3841f62
commit 89da9b2d13
2 changed files with 25 additions and 21 deletions

View File

@ -377,8 +377,7 @@ <h1>Favorites</h1>
<h1>No Playlists found</h1>
</div>
<div class="release_grid" v-if="playlists.length > 0 || spotifyPlaylists > 0">
<div v-for="release in playlists" class="release clickable" @click="playlistView"
:data-id="release.id">
<div v-for="release in playlists" class="release clickable" @click="playlistView" :data-id="release.id">
<div class="cover_container">
<img class="rounded coverart" :src="release.picture_medium">
<div role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
@ -526,11 +525,11 @@ <h2 id="settings_heading">Settings</h2>
<div class="settings_group">
<label class="with_checkbox">
<input type="checkbox" v-model="darkMode">
<input type="checkbox" v-model="changeDarkMode">
<span class="checkbox_text">Dark Mode</span>
</label>
<label class="with_checkbox">
<input type="checkbox" v-model="slimDownloads">
<input type="checkbox" v-model="changeSlimDownloads">
<span class="checkbox_text">Slim download tab</span>
</label>
</div>
@ -997,8 +996,7 @@ <h2 class="inline-flex"><span v-if="metadata">{{ metadata }}</span><span class="
:class="'material-icons' + (track.preview_url ? ' preview_playlist_controls' : '')"
:data-preview="track.preview_url">play_arrow</i></td>
<td>{{ i+1 }}</td>
<td class="inline-flex"><i v-if="track.explicit"
class="material-icons">explicit</i>{{ track.name }}
<td class="inline-flex"><i v-if="track.explicit" class="material-icons">explicit</i>{{ track.name }}
</td>
<td>{{ track.artists[0].name }}</td>
<td>{{ track.album.name }}</td>
@ -1058,4 +1056,4 @@ <h2 class="inline-flex"><span v-if="metadata">{{ metadata }}</span><span class="
<script type="module" src="/public/js/app.js"></script>
</html>
</html>

View File

@ -9,27 +9,28 @@ const SettingsTab = new Vue({
lastCredentials: {},
defaultSettings: {},
lastUser: '',
spotifyUser: ''
spotifyUser: '',
darkMode: false,
slimDownloads: false
}),
computed: {
darkMode: {
changeDarkMode: {
get() {
return 'true' === localStorage.getItem('darkMode')
return this.darkMode
},
set(wantDarkMode) {
this.darkMode = wantDarkMode
document.documentElement.setAttribute('data-theme', wantDarkMode ? 'dark' : 'default')
localStorage.setItem('darkMode', wantDarkMode)
}
},
slimDownloads: {
changeSlimDownloads: {
get() {
return 'true' === localStorage.getItem('slimDownloads')
return this.slimDownloads
},
set(wantSlimDownloads) {
if (wantSlimDownloads)
document.getElementById("download_list").classList.add("slim")
else
document.getElementById("download_list").classList.remove("slim")
this.slimDownloads = wantSlimDownloads
document.getElementById('download_list').classList.toggle('slim', wantSlimDownloads)
localStorage.setItem('slimDownloads', wantSlimDownloads)
}
}
@ -47,19 +48,24 @@ const SettingsTab = new Vue({
toast('ARL copied to clipboard', 'assignment')
},
saveSettings() {
this.lastSettings = { ...SettingsTab.settings }
this.lastCredentials = { ...SettingsTab.spotifyFeatures }
this.lastSettings = { ...this.settings }
this.lastCredentials = { ...this.spotifyFeatures }
let changed = false
if (this.lastUser != this.spotifyUser){
if (this.lastUser != this.spotifyUser) {
// force cloning without linking
this.lastUser = (' ' + this.spotifyUser).slice(1)
localStorage.setItem('spotifyUser', this.lastUser)
changed = true
}
socket.emit('saveSettings', this.lastSettings, this.lastCredentials, changed ? this.lastUser : false)
console.log(this.darkMode)
},
loadSettings(settings, spotifyCredentials, defaults = null) {
if (defaults) this.defaultSettings = { ...defaults }
if (defaults) {
this.defaultSettings = { ...defaults }
}
this.lastSettings = { ...settings }
this.lastCredentials = { ...spotifyCredentials }
this.settings = settings
@ -90,7 +96,7 @@ const SettingsTab = new Vue({
socket.on('init_settings', this.initSettings)
socket.on('updateSettings', this.updateSettings)
let spotyUser = localStorage.getItem('spotifyUser')
if (spotyUser){
if ('' !== spotyUser) {
this.lastUser = spotyUser
this.spotifyUser = spotyUser
}