fixed dark mode and slim download checkboxes resetting when saving

public/index.html

@@ -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"
+								<div v-for="release in playlists" class="release clickable" @click="playlistView" :data-id="release.id">
-									: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"
+										<td class="inline-flex"><i v-if="track.explicit" class="material-icons">explicit</i>{{ track.name }}
-												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>

public/js/modules/components/settings-tab.js

@@ -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)
+				this.slimDownloads = wantSlimDownloads
-					document.getElementById("download_list").classList.add("slim")
+				document.getElementById('download_list').classList.toggle('slim', wantSlimDownloads)
-				else
-					document.getElementById("download_list").classList.remove("slim")
 				localStorage.setItem('slimDownloads', wantSlimDownloads)
 			}
 		}
@@ -47,19 +48,24 @@ const SettingsTab = new Vue({
 			toast('ARL copied to clipboard', 'assignment')
 		},
 		saveSettings() {
-			this.lastSettings = { ...SettingsTab.settings }
+			this.lastSettings = { ...this.settings }
-			this.lastCredentials = { ...SettingsTab.spotifyFeatures }
+			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
 		}