Implemented arl login, settings loading and fixed toast display

This commit is contained in:
RemixDev 2021-05-06 08:56:03 +02:00
parent 9dbe0a5cb7
commit 0b1c5a8718
8 changed files with 4965 additions and 8899 deletions

7504
package-lock.json generated

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@ -49,9 +49,9 @@ async function startApp() {
let result let result
if (accountNum !== 0) { if (accountNum !== 0) {
result = await fetchData('login', { arl, force: true, child: accountNum || 0 }) result = await fetchData('login-arl', { arl, force: true, child: accountNum || 0 }, 'POST')
} else { } else {
result = await fetchData('login', { arl }) result = await fetchData('login-arl', { arl }, 'POST')
} }
loggedIn(result) loggedIn(result)

View File

@ -959,7 +959,7 @@ export default {
let newArl = this.$refs.loginInput.value.trim() let newArl = this.$refs.loginInput.value.trim()
if (newArl && newArl !== this.arl) { if (newArl && newArl !== this.arl) {
const res = await fetchData('login', { arl: newArl, force: true, child: this.accountNum }) const res = await fetchData('login-arl', { arl: newArl, force: true, child: this.accountNum }, 'POST')
this.loggedInViaDeezer(res.arl) this.loggedInViaDeezer(res.arl)
} }
}, },

View File

@ -1,4 +1,4 @@
import { socket } from '@/utils/socket' import { fetchData } from '@/utils/api'
let settingsData = {} let settingsData = {}
let defaultSettingsData = {} let defaultSettingsData = {}
@ -6,24 +6,16 @@ let spotifyCredentials = {}
let cached = false let cached = false
export function getSettingsData() { export async function getSettingsData() {
if (cached) { if (!cached) {
return { settingsData, defaultSettingsData, spotifyCredentials } let data = await fetchData('getSettings')
} else { let { settings, defaultSettings, spotifySettings } = data
socket.emit('get_settings_data')
return new Promise((resolve, reject) => {
socket.on('init_settings', (settings, credentials, defaults) => {
settingsData = settings
defaultSettingsData = defaults
spotifyCredentials = credentials
// cached = true // cached = true
settingsData = settings
socket.off('init_settings') defaultSettingsData = defaultSettings
resolve({ settingsData, defaultSettingsData, spotifyCredentials }) spotifyCredentials = spotifySettings || {}
})
})
} }
return { settingsData, defaultSettingsData, spotifyCredentials }
} }
/** /**

View File

@ -1,11 +1,11 @@
export function fetchData(key, data = {}) { export function fetchData(key, data = {}, method = 'GET') {
const url = new URL(`${window.location.origin}/api/${key}`) const url = new URL(`${window.location.origin}/api/${key}`)
Object.keys(data).forEach(key => { Object.keys(data).forEach(key => {
url.searchParams.append(key, data[key]) url.searchParams.append(key, data[key])
}) })
return fetch(url.href) return fetch(url.href, {method})
.then(response => response.json()) .then(response => response.json())
.catch(() => {}) .catch(() => {})
} }

View File

@ -22,23 +22,31 @@ export const toast = function(msg, icon = null, dismiss = true, id = null) {
const messages = toast.querySelectorAll('.toast-message') const messages = toast.querySelectorAll('.toast-message')
messages.forEach(message => { messages.forEach(message => {
message.innerHTML = msg message.innerText = msg
}) })
}) })
} }
if (icon) { if (icon) {
let iconNode = document.createElement('span')
iconNode.classList.add('toast-icon')
if (icon == 'loading') { if (icon == 'loading') {
icon = `<div class="circle-loader"></div>` let loader = document.createElement('div')
loader.classList.add('circle-loader')
iconNode.appendChild(loader)
} else { } else {
icon = `<i class="material-icons">${icon}</i>` let materialIcon = document.createElement('i')
materialIcon.classList.add('material-icons')
materialIcon.appendChild(document.createTextNode(icon))
iconNode.appendChild(materialIcon)
} }
toastElement.forEach(toast => { toastElement.forEach(toast => {
const icons = toast.querySelectorAll('.toast-icon') const icons = toast.querySelectorAll('.toast-icon')
icons.forEach(toastIcon => { icons.forEach(toastIcon => {
toastIcon.innerHTML = icon toastIcon.parentNode.replaceChild(iconNode, toastIcon)
}) })
}) })
} }
@ -54,17 +62,31 @@ export const toast = function(msg, icon = null, dismiss = true, id = null) {
}, 3000) }, 3000)
} }
} else { } else {
let iconNode = document.createElement('span')
iconNode.classList.add('toast-icon')
if (icon == null) { if (icon == null) {
icon = '' iconNode.appendChild(document.createTextNode(''))
} else if (icon == 'loading') { } else if (icon == 'loading') {
icon = `<div class="circle-loader"></div>` let loader = document.createElement('div')
loader.classList.add('circle-loader')
iconNode.appendChild(loader)
} else { } else {
icon = `<i class="material-icons">${icon}</i>` let materialIcon = document.createElement('i')
materialIcon.classList.add('material-icons')
materialIcon.appendChild(document.createTextNode(icon))
iconNode.appendChild(materialIcon)
} }
let messageNode = document.createElement('span')
messageNode.classList.add('toast-message')
messageNode.appendChild(document.createTextNode(msg))
let toastNode = document.createElement('toast')
toastNode.appendChild(iconNode)
toastNode.appendChild(messageNode)
let toastObj = Toastify({ let toastObj = Toastify({
...sharedOptions, ...sharedOptions,
text: `<span class="toast-icon">${icon}</span><span class="toast-message">${msg}</toast>`, node: toastNode,
duration: dismiss ? 3000 : 0, duration: dismiss ? 3000 : 0,
className: dismiss ? 'dismissable' : '', className: dismiss ? 'dismissable' : '',
onClick: function() { onClick: function() {

3556
yarn.lock Normal file

File diff suppressed because it is too large Load Diff