| | |
| | | class FrontendFavourites { |
| | | class Favourites { |
| | | constructor() { |
| | | // Initialize DataStore for queue persistence |
| | | this.store = window.jvbStore.register( |
| | | let store = window.jvbStore.register( |
| | | 'favourites', |
| | | { |
| | | storeName: 'favourites', |
| | | keyPath: 'id', |
| | | endpoint: 'favourites', |
| | | headers: { |
| | | 'X-Action-Nonce': window.auth.getNonce('favourites') |
| | | }, |
| | | indexes: [ |
| | | {name: 'content', keyPath: 'content'}, |
| | | {name: 'listId', keyPath: 'listId'}, |
| | |
| | | } |
| | | }); |
| | | |
| | | this.listStore = window.jvbStore.register( |
| | | 'favourites_lists', |
| | | { |
| | | storeName: 'lists', |
| | | keyPath: 'listId', |
| | | endpoint: 'favourites/lists', |
| | | TTL: 6 * 60 * 1000, |
| | | }); |
| | | this.queue = { |
| | | add: new Map(), |
| | | remove: new Map(), |
| | | }; |
| | | |
| | | this.store = store.favourites; |
| | | |
| | | // this.listStore = window.jvbStore.register( |
| | | // 'favourites_lists', |
| | | // { |
| | | // storeName: 'lists', |
| | | // keyPath: 'listId', |
| | | // endpoint: 'favourites/lists', |
| | | // TTL: 6 * 60 * 1000, |
| | | // }); |
| | | |
| | | this.store.subscribe((event, data) => { |
| | | switch (event) { |
| | |
| | | } |
| | | |
| | | }); |
| | | |
| | | this.store.fetch(); |
| | | } |
| | | |
| | | toggleFavourite(button) { |
| | |
| | | // Update button icon |
| | | button.innerHTML = jvbSettings.icons[button.classList.contains('favourited') ? 'heart-filled' : 'heart']; |
| | | |
| | | this.store.setItem(button.dataset.id, { |
| | | this.checkQueue(action, { |
| | | target_id: button.dataset.id, |
| | | action: action, |
| | | type: button.dataset.type, |
| | | artist: button.dataset.artist, |
| | | type: button.dataset.type |
| | | }); |
| | | window.debouncer.schedule('favourites', this.postFavourites.bind(this), 200); |
| | | |
| | | |
| | | } |
| | | |
| | | checkQueue(action, item) { |
| | | switch (action) { |
| | | case 'add': |
| | | if (this.queue.remove.has(item.target_id)) { |
| | | this.queue.remove.delete(item.target_id); |
| | | } |
| | | this.queue.add.set(item.target_id, item); |
| | | break; |
| | | case 'remove': |
| | | if (this.queue.add.has(item.target_id)) { |
| | | this.queue.add.delete(item.target_id); |
| | | } |
| | | this.queue.remove.set(item.target_id, item); |
| | | break; |
| | | default: |
| | | return; |
| | | } |
| | | } |
| | | async postFavourites() { |
| | | console.log(this.queue,'Posting favourites'); |
| | | const response = await window.auth.fetch( |
| | | `${jvbSettings.api}favourites`, |
| | | { |
| | | method: 'POST', |
| | | headers: { |
| | | 'X-Action-Nonce': window.auth.getNonce('favourites') |
| | | }, |
| | | body: { |
| | | user: window.auth.getUser(), |
| | | ... this.queue |
| | | } |
| | | } |
| | | ); |
| | | |
| | | if (response.ok) { |
| | | console.log('Posted favourites - clearing queue'); |
| | | //Add or remove from store |
| | | for (let item of this.queue.add.entries()) { |
| | | await this.store.setItem(item.target_id, |
| | | item); |
| | | } |
| | | for (let item of this.queue.remove.entries()) { |
| | | await this.store.delete(item.target_id); |
| | | } |
| | | //Clear the favourite queue |
| | | this.queue.add.clear(); |
| | | this.queue.remove.clear(); |
| | | } else { |
| | | console.log(await response.json(), 'Something went wrong'); |
| | | window.debouncer.schedule('favourites', this.postFavourites.bind(this), 200); |
| | | } |
| | | } |
| | | |
| | | // async toggleFavourite(itemType, itemId) { |
| | |
| | | return this.store.get(favId) !== undefined; |
| | | } |
| | | } |
| | | |
| | | document.addEventListener('DOMContentLoaded', function() { |
| | | window.jvbFavourites = false; |
| | | if (window.auth.getUser() !== '') { |
| | | window.jvbFavourites = new FrontendFavourites(); |
| | | } |
| | | window.auth.subscribe((event) => { |
| | | if (event === 'auth-loaded') { |
| | | window.jvbFavourites = new Favourites(); |
| | | } |
| | | }); |
| | | }); |
| | | |
| | | |