feat: possibility to deactivate logs and saving this choice to localStorage

src/components/pages/Logs.vue

@@ -24,7 +24,7 @@ import { computed } from '@vue/composition-api'
 export default {
 	name: 'Logs',
 	setup() {
-		const messages = useLogs()
+		const { messages } = useLogs()
 		const logMessages = computed(() => messages.value.slice(0, 50).reverse())
 
 		return {

src/components/pages/Search.vue

@@ -52,6 +52,7 @@ import { formatSingleTrack, formatAlbums, formatArtist, formatPlaylist } from '@
 import { standardizeData } from '@/data/standardize'
 import { useMainSearch } from '@/use/main-search'
 import { useSearch } from '@/use/search'
+import { useLogs } from '@/use/logs'
 
 const resetObj = { data: [], next: 0, total: 0, hasLoaded: false }
 

src/components/pages/Settings.vue

@@ -98,6 +98,20 @@
 			</ul>
 		</div>
 
+		<BaseAccordion class="settings-group">
+			<template #title>
+				<h3 class="settings-group__header">
+					<i class="material-icons">description</i>
+					{{ $t('settings.logs.title') }}
+				</h3>
+			</template>
+
+			<label class="with-checkbox">
+				<input v-model="areLogsActive" type="checkbox" />
+				<span class="checkbox-text">{{ $t('settings.logs.areLogsActive') }}</span>
+			</label>
+		</BaseAccordion>
+
 		<BaseAccordion class="settings-group">
 			<template #title>
 				<h3 class="settings-group__header">
@@ -807,12 +821,18 @@ import BaseAccordion from '@/components/globals/BaseAccordion.vue'
 import TemplateVariablesList from '@components/settings/TemplateVariablesList.vue'
 import { fetchData, postToServer } from '@/utils/api'
 import { getFormItem } from '@/utils/forms'
+import { useLogs } from '@/use/logs'
 
 export default {
 	components: {
 		BaseAccordion,
 		TemplateVariablesList
 	},
+	setup() {
+		const { areLogsActive, saveLogsSettings } = useLogs()
+
+		return { areLogsActive, saveLogsSettings }
+	},
 	data() {
 		return {
 			flags,
@@ -951,6 +971,8 @@ export default {
 			localStorage.setItem('locale', newLocale)
 		},
 		saveSettings() {
+			this.saveLogsSettings()
+
 			this.lastSettings = JSON.parse(JSON.stringify(this.settings))
 			this.lastCredentials = JSON.parse(JSON.stringify(this.spotifyFeatures))
 

src/lang/en.js

@@ -390,6 +390,10 @@ const en = {
 			update: 'Settings updated!',
 			reset: 'Settings reset to default!',
 			ARLcopied: 'ARL copied to clipboard'
+		},
+		logs: {
+			title: 'Logs',
+			areLogsActive: 'Active'
 		}
 	},
 	sidebar: {

src/lang/it.js

@@ -393,6 +393,10 @@ const it = {
 			update: 'Impostazioni aggiornate!',
 			reset: 'Impostazioni di default ripristinate!',
 			ARLcopied: 'ARL copiato negli appunti'
+		},
+		logs: {
+			title: 'Log',
+			areLogsActive: 'Attivi'
 		}
 	},
 	sidebar: {

src/use/logs.js

@@ -1,14 +1,27 @@
-import { ref } from '@vue/composition-api'
+import { ref, watch } from '@vue/composition-api'
 import { socket } from '@/utils/socket'
 
 const messages = ref([])
+const cached = localStorage.getItem('areLogsActive')
+const areLogsActive = ref(cached ? cached === 'true' : false)
+
+const saveLogsSettings = () => {
+	localStorage.setItem('areLogsActive', areLogsActive.value)
+}
 
 socket.addEventListener('message', event => {
-	const newMessage = JSON.parse(event.data)
+	if (!areLogsActive.value) {
+		return
+	}
 
+	const newMessage = JSON.parse(event.data)
 	messages.value.push(Object.freeze(newMessage))
 })
 
 export const useLogs = () => {
-	return messages
+	return {
+		messages,
+		areLogsActive,
+		saveLogsSettings
+	}
 }