Jake Vanderwerf
2025-12-21 3aada9949d51024a92a8b5c6cb70d12f9c3cac16
assets/js/concise/Queue.js
@@ -14,11 +14,35 @@
         endpoint: 'queue',
         ...config
      };
      this.user = jvbSettings.currentUser;
      // Queue state
      this.isProcessing = false;
      this.isPolling = false;
      this.subscribers = new Set();
      // Status definitions
      this.statuses = [
         'queued',
         'localProcessing',
         'uploading',
         'pending',
         'processing',
         'completed',
         'failed',
         'failed_permanent'
      ];
      this.user = window.auth.getUser();
      if (!this.user) {
         console.log('Queue: User not logged in, queue disabled');
         this.store = null;
         this.canUpdateUI = false;
         return;
      }
      this.headers = {
         'X-WP-Nonce': jvbSettings.nonce,
         'X-WP-Nonce': window.auth.getNonce(),
         ...config.headers
      };
@@ -46,22 +70,7 @@
         'pending'
      ];
      // Queue state
      this.isProcessing = false;
      this.isPolling = false;
      this.subscribers = new Set();
      // Status definitions
      this.statuses = [
         'queued',
         'localProcessing',
         'uploading',
         'pending',
         'processing',
         'completed',
         'failed',
         'failed_permanent'
      ];
      // Initialize
      this.initUI();
@@ -73,13 +82,8 @@
            name: 'Queue Panel',
         });
      }
      this.updateUI = () => window.debouncer.schedule('queue-ui-update', this._updateUI.bind(this), 100);
      this.initQueue();
      if (this.user) {
         this.ui.toggle.hidden = false;
         this.ui.panel.hidden = false;
      }
   }
   async initQueue() {
@@ -214,15 +218,16 @@
   }
   setQueue(item) {
      this.store.save(item);  // Remove first parameter
      this.store.save(item);
   }
   updateOperationStatus(itemID, status) {
      let item = this.store.get(itemID);
      if (!item){
         return;
      }
      if (!item) return;
      // Update status
      item.status = status;
      this.notify('operation-status', item);
@@ -234,6 +239,7 @@
   }
   clearQueue(itemID) {
      const item = this.store.get(itemID);
      this.store.delete(itemID);
   }
@@ -274,6 +280,15 @@
      }
   }
   hideQueue(){
      this.ui.panel.hidden = true;
      this.ui.toggle.hidden = true;
   }
   showQueue() {
      this.ui.panel.hidden = false;
      this.ui.toggle.hidden = false;
   }
   setProcessing(on) {
      this.isProcessing = on;
      this.ui.toggle.classList.toggle('saving', on);
@@ -303,6 +318,9 @@
      const pending = this.getOperationsByStatus(['queued', 'completed', 'failed_permanent'], false);
      if (pending.length > 0) {
         this.startPolling();
         this.showQueue();
      } else {
         this.hideQueue();
      }
   }
@@ -348,7 +366,7 @@
               if (existingOp) {
                  // Merge data from both operations
                  existingOp.data = window.deepMerge(existingOp.data, operation.data);
                  existingOp.status = 'pending';
                  existingOp.status = result.status || 'pending';
                  existingOp.serverData = result;
                  this.updateOperationStatus(existingOp.id, existingOp.status);
                  // Update the existing operation
@@ -363,16 +381,16 @@
                  // Update the ID and continue
                  this.clearQueue(operation.id);
                  operation.id = result.id;
                  operation.status = 'pending';
                  operation.status = result.status || 'pending';
                  operation.serverData = result;
                  this.updateOperationStatus(operation.id, operation.status);
                  this.setQueue(operation);
               }
            } else {
               // Normal processing - no merge
               operation.status = 'pending';
               operation.status = result.status || 'pending';
               operation.serverData = result;
               this.updateOperationStatus(operation.id, 'pending');
               this.updateOperationStatus(operation.id, operation.status);
               this.setQueue(operation);
            }
@@ -445,41 +463,29 @@
    * @returns {Promise<void>}
    */
   async updateServerOperations(ids, action) {
      //ensure ids are in an array
      ids = Array.isArray(ids) ? ids : ((ids.includes(',')) ? ids.split(',') : [ids]);
      ids = ids.filter((id) => {
      ids = Array.isArray(ids) ? ids : (ids.includes(',') ? ids.split(',') : [ids]);
      ids = ids.filter(id => {
         let item = this.getQueue(id);
         return this.getAllowedActions(item.status).includes(action);
      });
      if (ids.length === 0) {
         return;
      }
      if (ids.length === 0) return;
      if (['cancel', 'dismiss'].includes(action)) {
         ids.forEach(id => {
            this.removeOperationFromUI(id);
         });
      // SINGLE place to handle UI removal
      const shouldRemove = ['cancel', 'dismiss'].includes(action);
      if (shouldRemove) {
         ids.forEach(id => this.removeOperationFromUI(id));
      }
      try {
         const url = `${this.config.apiBase}${this.config.endpoint}`;
         const response = await fetch(
            url,
            {
               method: 'POST',
               headers: {
                  'Content-Type': 'application/json',
                  ...this.headers
               },
               body: JSON.stringify({ids,action, user: jvbSettings.currentUser})
            }
         );
         const response = await fetch(`${this.config.apiBase}${this.config.endpoint}`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', ...this.headers },
            body: JSON.stringify({ ids, action, user: window.auth.getUser() })
         });
         if (!response.ok) {
            const errorData = await response.json().catch(()=>{});
            throw new Error(errorData.message || `${action} failed: ${response.status}`);
            throw new Error(`${action} failed: ${response.status}`);
         }
         const result = await response.json();
@@ -487,41 +493,40 @@
            throw new Error(result.message || `${action} operation failed`);
         }
         if (['cancel', 'dismiss'].includes(action)) {
            ids.forEach(id => {
               let item = this.getQueue(id);
               this.notify(`${action}-operation`, item);
               this.clearQueue(id);
            });
         } else {
            ids.forEach(id => {
               let item = this.getQueue(id);
               this.notify(`${action}-operation`, item);
         // SINGLE place to handle store updates
         ids.forEach(id => {
            let item = this.getQueue(id);
            this.notify(`${action}-operation`, item);
            if (shouldRemove) {
               this.clearQueue(id);
            } else {
               item.status = 'queued';
               item.retries = 0;
               this.setQueue(item);
               this.updateOperationStatus(item.id, item.status);
            });
            }
         });
         if (action === 'retry') {
            this.startActivityTracking();
         }
         this.updateUI();
         this.updateUI();
         return result;
      } catch (error) {
         const result = await window.jvbError.log(error, {
         // Log and let jvbError handle retry
         await window.jvbError.log(error, {
            component: 'QueueManager',
            operation: 'performQueueAction',
            action: action,
            operationIds: ids,
            itemCount: ids.length
         }, () => this.updateServerOperations(ids, action)); // Retry callback
         }, () => this.updateServerOperations(ids, action));
         if (result.retried) {
            return result; // Return successful retry result
         } else {
            throw error; // Re-throw if not retried
         }
         // Don't re-throw - error is logged and handled
         return { success: false, error: error.message };
      }
   }
@@ -544,10 +549,8 @@
   *********************************************/
   initListeners() {
      this.clickHandler = this.handleClick.bind(this);
      this.changeHandler = this.handleChange.bind(this);
      document.addEventListener('click', this.clickHandler);
      this.ui.panel?.addEventListener('change', this.changeHandler);
      this.handleOnline = () => {
         this.updateStatusPanel();
@@ -601,9 +604,6 @@
   }
   handleChange(e) {
   }
   /*********************************************
   UI
    *********************************************/
@@ -637,33 +637,13 @@
         }
      };
      this.ui = {
         panel: document.querySelector(this.selectors.panel),
         toggle: document.querySelector(this.selectors.toggle),
         count: document.querySelector(this.selectors.count),
         indicator: document.querySelector(this.selectors.indicator),
      };
      this.ui = window.uiFromSelectors(this.selectors);
      if (!this.ui.panel) {
         this.canUpdateUI = false;
         return;
      }
      for (let [key, selector] of Object.entries(this.selectors)) {
         if (['panel', 'toggle', 'count', 'indicator'].includes(key)) {
            continue;
         }
         if (typeof selector === 'object') {
            this.ui[key] = {};
            for (let [k, s] of Object.entries(selector)) {
               this.ui[key][k] = this.ui.panel.querySelector(s);
            }
         }else {
            this.ui[key] = this.ui.panel.querySelector(selector);
         }
      }
   }
   updateUI() {
   _updateUI() {
      if (!this.canUpdateUI) {
         return;
      }
@@ -905,25 +885,6 @@
      }
   }
   updateCountdown() {
      if (!this.ui.countdown || !this.isPolling) return;
      let seconds = this.config.pollInterval / 1000;
      this.countdownTimer = setInterval(() => {
         seconds--;
         this.ui.countdown.textContent = seconds;
         if (seconds <= 0) {
            clearInterval(this.countdownTimer);
            if (this.isPolling) {
               setTimeout(() => this.updateCountdown(), 100);
            }
         }
      }, 1000);
   }
   updateStatusPanel(status) {
      this.ui.panel?.classList.remove(...this.classes);
      if (!this.classes.includes(status)) {
@@ -951,23 +912,6 @@
   }
   /**************************************************************************
    NOTIFICATIONS
   **************************************************************************/
   showPopup(message, type = 'success') {
      if (!this.ui.popup) return;
      const span = this.ui.popup.querySelector('span');
      if (span) {
         span.textContent = message;
      }
      this.ui.popup.className = `popup ${type} show`;
      setTimeout(() => {
         this.ui.popup.classList.remove('show');
      }, 3000);
   }
   /**************************************************************************
    HELPERS
   **************************************************************************/
   getOperationsByStatus(status, include = true) {
@@ -983,6 +927,9 @@
      return this.getOperationsByStatus('queued').length > 0;
   }
   subscribe(callback) {
      if (!this.subscribers) {
         return;
      }
      this.subscribers.add(callback);
      return () => this.subscribers.delete(callback);
   }
@@ -1010,6 +957,10 @@
   }
}
document.addEventListener('DOMContentLoaded', function() {
   window.jvbQueue = new QueueManager();
document.addEventListener('DOMContentLoaded', async function() {
   window.auth.subscribe((event) => {
      if (event === 'auth-loaded') {
         window.jvbQueue = new QueueManager();
      }
   });
});