import { toast } from '../toasts.js' import { socket } from '../socket.js' const SettingsTab = new Vue({ data: () => ({ settings: { tags: {} }, lastSettings: {}, lastCredentials: {}, spotifyFeatures: {}, defaultSettings: {} }), computed: { darkMode: { get() { return 'true' === localStorage.getItem('darkMode') }, set(wantDarkMode) { document.documentElement.setAttribute('data-theme', wantDarkMode ? 'dark' : 'default') localStorage.setItem('darkMode', wantDarkMode) } } }, methods: { copyARLtoClipboard() { let copyText = this.$refs.loginInput copyText.setAttribute('type', 'text') copyText.select() copyText.setSelectionRange(0, 99999) document.execCommand('copy') copyText.setAttribute('type', 'password') toast('ARL copied to clipboard', 'assignment') }, saveSettings() { this.lastSettings = { ...SettingsTab.settings } this.lastCredentials = { ...SettingsTab.spotifyFeatures } socket.emit('saveSettings', this.lastSettings, this.lastCredentials) }, loadSettings(settings, spotifyCredentials, defaults = null) { if (defaults) this.defaultSettings = { ...defaults } this.lastSettings = { ...settings } this.lastCredentials = { ...spotifyCredentials } this.settings = settings this.spotifyFeatures = spotifyCredentials }, login() { let arl = this.$refs.loginInput.value if (arl != '' && arl != localStorage.getItem('arl')) { socket.emit('login', arl, true) } }, logout() { socket.emit('logout') }, initSettings(settings, credentials, defaults) { this.loadSettings(settings, credentials, defaults) toast('Settings loaded!', 'settings') }, updateSettings(settings, credentials) { this.loadSettings(settings, credentials) toast('Settings updated!', 'settings') }, resetSettings() { this.settings = { ...this.defaultSettings } } }, mounted() { socket.on('init_settings', this.initSettings) socket.on('updateSettings', this.updateSettings) } }).$mount('#settings_tab') export default SettingsTab