=Some changes to the CRUD.js editing, timeline post configuration

Jake Vanderwerf

2026-05-11 ac444cba221832c012c0435fdc8339fe9f37febb

 assets/js/concise/Queue.js

@@ -5,6 +5,10 @@

      this.user = window.auth.getUser();

      if (!this.user) {
         return;
      }


      this.canUpdateUI = true;
      this.isProcessing = false;
@@ -12,12 +16,11 @@
      this.queue = new Map();
      this.items = new Map();
      this.subscribers = new Set();
      this.loadFromStorage = false;

      this.api = jvbSettings.api;
      this.endpoint = 'queue';

      this.queueItems = new Map();

      this.init();
   }
   init() {
@@ -28,7 +31,7 @@
      this.initListeners();
      this.initStore();
      if (this.canUpdateUI && this.ui.panel) {
         this.popup = new window.jvbPopup({
         this.popup = window.jvbPopup.registerPopup({
            popup: this.ui.panel,
            toggle: this.ui.toggle.button,
            name: 'Queue Panel',
@@ -57,8 +60,8 @@
            count: '.qtoggle .count'
         },
         refresh: {
            button: '#queue .refresh .refreshNow',
            countdown: '#queue .refresh .countdown'
            button: '#queue .m-actions .refresh',
            countdown: '#queue .m-actions .refresh .countdown'
         },
         popup: {
            popup: '#queue .popup',
@@ -161,11 +164,15 @@
      this.onlineHandler = this.handleOnline.bind(this);
      this.offlineHandler = this.handleOffline.bind(this);
      this.unloadHandler = this.handleBeforeUnload.bind(this);
      this.visibilityHandler = this.handleVisibilityChange.bind(this);

      document.addEventListener('click', this.clickHandler);
      window.addEventListener('online', this.onlineHandler);
      window.addEventListener('offline', this.offlineHandler);
      window.addEventListener('beforeunload', this.unloadHandler);

      // window.addEventListener('beforeunload', this.unloadHandler);

      document.addEventListener('visibilitychange', this.visibilityHandler);
   }
      handleOnline() {
         this.updatePanel('synced');
@@ -176,6 +183,14 @@
      handleOffline() {
         this.updatePanel('offline');
      }

      handleVisibilityChange(e) {
         if (this.isPolling && document.hidden) {
            this.stopPolling();
         } else {
            this.maybeStartPolling();
         }
      }
   handleBeforeUnload(e) {
      if (!this.ui.panel) return;
      const total = this.getQueueByStatus(this.pendingStatuses).length;
@@ -289,6 +304,7 @@
            keyPath: 'id',
            endpoint: this.endpoint,
            TTL: Infinity,
            isAuth: true,
            indexes: [
               {name: 'status', keyPath: 'status'},
               {name: 'type', keyPath: 'type'},
@@ -475,7 +491,7 @@
      }

      try {
         const response = await fetch(
         const response = await window.auth.fetch(
            `${this.api}${this.endpoint}`,
            {
               method: 'POST',
@@ -485,7 +501,7 @@
               },
               body: JSON.stringify({
                  action,
                  ids: statusOrId,
                  ids: Array.isArray(statusOrId) ? statusOrId : [statusOrId],
                  user: this.user
               })
            }
@@ -547,7 +563,13 @@
      }

      this.setProcessing(false);
      this.stopActivityTracking();
      const remainingQueue = this.getQueueByStatus('queued');
      if (remainingQueue.length === 0) {
         this.stopActivityTracking();
      } else {
         // Still have queued items, restart activity tracking
         this.trackActivity();
      }

      this.toggleQueue(this.maybeStartPolling());
   }
@@ -567,21 +589,25 @@
         this.updateOperationStatus(operation.id, 'uploading');

         let requestBody;
         let req;
         if (operation.data instanceof FormData) {
            operation.data.append('id', operation.id);
            operation.data.append('user', window.auth.getUser());
            requestBody = operation.data;
            req = operation.data;
         } else {
            requestBody = JSON.stringify({
            req = {
               ...operation.data,
               id: operation.id,
               user: window.auth.getUser()
            });
            };
            requestBody = JSON.stringify(req);
            operation.headers['Content-Type'] = 'application/json';
         }
         if (requestBody === undefined || requestBody === null) return;
         if (operation.endpoint === 'unknown' || requestBody === undefined || requestBody === null) return;

         const response = await fetch(

         const response = await window.auth.fetch(
            `${this.api}${operation.endpoint}`,
            {
               method: operation.method,
@@ -589,15 +615,18 @@
               body: requestBody
            }
         );
         console.log('Sending request with data: ', req);
         const result = await response.json();
         if (skip) {
            operation.data = {};
         }
         console.log('Result: ', result);
         if (response.ok && result.success) {
            this.notify('sent-to-server', req);
            if (result.id && operation.id !== result.id) {
               operation = await this.handleServerMerge(operation, result);
            } else {
               operation.status = result.status??'pending';
               operation.status = result.status??'failed';
               operation.serverData = result;
               this.updateOperationStatus(operation.id, operation.status);
            }
@@ -677,10 +706,24 @@
   }

   getAllQueue() {
      let ops = [... new Set([
         ...Array.from(this.store.data.values()),
      let index = new Set();

      let ops = [
         ... Array.from(this.queue.values())
      ])];
      ];
      if (!this.loadFromStorage) {
         this.loadFromStorage = true;
         ops = [
            ... ops,
            ...Array.from(this.store.data.values())
         ];

         ops = ops.filter(el => {
            const isAdded = index.has(el.id);
            index.add(el.id);
            return !isAdded;
         });
      }
      //Sort operations by operation updated_at
      return this.sortOperations(ops);
   }
@@ -690,17 +733,19 @@
         status = [status];
      }

      let ops = [...new Set([
         ...Array.from(this.store.filterByIndex({status: status})),
         ...Array.from(this.queue.values()).filter(op => status.includes(op.status))
      ])];
      return this.sortOperations(ops);
      let ops = this.getAllQueue();
      return ops.filter(op => status.includes(op.status));
   }


   updateOperationStatus(itemID, status) {
      let item = this.getQueue(itemID);
      if (!item || !this.statuses.includes(status)) return;
      if (!item) return;
      if (!this.statuses.includes(status)) {
         console.log('Invalid status: ', status);
         return;
      }

      item.status = status;
      this.notify('operation-status', item);
      this.setQueue(item);
@@ -809,9 +854,10 @@
         this.ui.actions.retry.disabled = operations.filter(op => op.status === 'failed').length === 0;
         this.ui.actions.clear.disabled = operations.filter(op => op.status === 'completed').length ===0;

         const activeCount = operations.filter(op =>
         let activeCount = operations.filter(op =>
            [...this.pendingStatuses, ...this.workingStatuses].includes(op.status)
         ).length;
         );
         activeCount = activeCount.length;
         this.ui.toggle.count.hidden = activeCount === 0;
         this.ui.toggle.count.textContent = activeCount;

@@ -889,7 +935,8 @@
         let op = this.getQueue(opId);

         let element = item.element;
         element.classList.remove(this.statuses);

         element.classList.remove(... this.statuses);
         element.classList.add(op.status);

         let progress = this.getProgress(op);
@@ -926,20 +973,28 @@
            item.ui.actions.refresh.hidden = op.status !== 'completed';
         }
      }
      getProgress(op) {
         if (op.progress) return op.progress;
         if (!this.statuses.includes(op.status)) return 0;
         let statusProgress = {
            'queued': 10,
            'uploading': 25,
            'pending': 40,
            'processing':70,
            'completed':100,
            'failed':0,
            'failed_permanent':0
         };
         return statusProgress[op.status]??0;
   getProgress(op) {
      // Check server-provided percentage first
      if (op.progress_percentage !== undefined) {
         return op.progress_percentage;
      }
      // Legacy: check old 'progress' field
      if (op.progress !== undefined) {
         return op.progress;
      }
      // Fallback to status-based calculation
      if (!this.statuses.includes(op.status)) return 0;
      const statusProgress = {
         'queued': 10,
         'uploading': 25,
         'pending': 40,
         'processing': 70,
         'completed': 100,
         'failed': 0,
         'failed_permanent': 0
      };
      return statusProgress[op.status] ?? 0;
   }
   removeOperationUI(opId) {
      let op = this.items.get(opId);
      if (!op) return;
@@ -964,7 +1019,8 @@
         'processing': 'Processing',
         'completed': 'Completed',
         'failed': 'Failed',
         'failed_permanent': 'Failed permanently'
         'failed_permanent': 'Failed permanently',
         'merged': 'Merged'
      };
      return labels[status];
   }
@@ -980,9 +1036,24 @@
         case 'pending':
            return item.position ? `Position ${item.position} in queue` : 'In server queue';
         case 'processing':
            return item.progress ? `${item.progress}% complete` : 'Processing...';
            // Show progress count if available
            if (item.count && item.progress_count !== undefined) {
               const processed = item.progress_count;
               const total = item.count;
               const percentage = Math.round((processed / total) * 100);
               return `Processing ${processed}/${total} items (${percentage}%)`;
            }
            // Fallback to percentage only
            if (item.progress_percentage !== undefined) {
               return `${item.progress_percentage}% complete`;
            }
            return 'Processing...';
         case 'completed':
            return 'Successfully completed. Refresh to see changes.';
         case 'merged':
            return item.merged_into
               ? `Merged with another operation (${item.merged_into.substring(0, 8)}...)`
               : 'Merged with another operation';
         case 'failed':
            return `Failed: ${item.lastError || 'Unknown error'} (Retry ${item.retries}/${2})`;
         case 'failed_permanent':
@@ -1011,25 +1082,55 @@

      // If we have local operation data, preserve it
      if (localOp && localOp.endpoint) {
         return {
         const mappedOp = {
            ...localOp,
            ...serverOp,
            endpoint: localOp.endpoint,
            method: localOp.method,
            headers: localOp.headers,
            progress_percentage: serverOp.progress_percentage,
            progress_count: serverOp.progress_count,
            count: serverOp.count
         };

         if (serverOp.merged_into) {
            this.handleMergedOperation(mappedOp);
         }
      }


      // Minimal mapping for server-only operations
      // Extract endpoint from type if possible, otherwise use type
      const endpoint = serverOp.type ? serverOp.type.replace('_update', '').replace('_', '/') : 'unknown';

      return {
      const mappedOp = {
         ...serverOp,
         endpoint: endpoint,
         method: 'POST',
         headers: { ...this.headers },
      };
      if (serverOp.merged_into) {
         this.handleMergedOperation(mappedOp);
      }
      return mappedOp
   }

   /**
    * Handle merged operations
    * The target operation already has merged data from server,
    * so we just need to clean up the merged operation locally
    */
   handleMergedOperation(operation) {
      if (!operation.merged_into) return;

      console.log(`[Queue] Operation ${operation.id} merged into ${operation.merged_into}`);

      // Auto-dismiss merged operation after brief display
      // The target operation already has all the merged data from server
      setTimeout(() => {
         this.clearQueue(operation.id);
         this.removeOperationFromUI(operation.id);
      }, 3000);
   }

   /****************************************************************************
@@ -1065,3 +1166,4 @@
      }
   });
});