=DataStore.js and UploaderManager.js overhaul

Jake Vanderwerf

2025-10-18 b0194e10a87e16797a568d8a30d53ebecd27d8a4

 assets/js/concise/Queue.js

@@ -29,10 +29,15 @@
      // Initialize DataStore for queue persistence
      this.store = new window.jvbStore({
         name: 'queue',
         storeName: 'operations',
         keyPath: 'id',
         endpoint: this.config.endpoint,
         useIndexedDB: true,
         TTL: Infinity, //Queue data doesn't expire,
         showLoading: false
         indexes: [
            {name: 'status', keyPath: 'status'},
            {name: 'type', keyPath: 'type'},
         ],
         showLoading: false,
      });

      this.queue = new Map();
@@ -63,6 +68,15 @@
      // Initialize
      this.initUI();
      this.initListeners();
      console.log(this.ui);
      if (this.ui.panel) {
         this.popup = new window.jvbPopup({
            popup: this.ui.panel,
            toggle: this.ui.toggle,
            name: 'Queue Panel',
         });
      }

      this.initQueue();

      if (this.user) {
@@ -172,7 +186,7 @@

   setQueue(item) {
      this.queue.set(item.id, item);
      this.store.setItem(item.id, item);
      this.store.save(item.id, item);
   }

   updateOperationStatus(itemID, status) {
@@ -281,12 +295,21 @@
            operation.data.append('id', operation.id);
            operation.data.append('user', this.user);
            requestBody = operation.data;
            // console.log('Sending formData: ');
            // for (const pair of requestBody.entries()) {
            //    console.log(pair[0], pair[1]);
            // }
         } else {
            requestBody = JSON.stringify({
               ...operation.data,
               id: operation.id,
               user: this.user
            });
            // console.log('Sending data: ', {
            //    ...operation.data,
            //    id: operation.id,
            //    user: this.user
            // });
            operation.headers['Content-Type'] = 'application/json';
         }

@@ -555,7 +578,6 @@
   initListeners() {
      this.clickHandler = this.handleClick.bind(this);
      this.changeHandler = this.handleChange.bind(this);
      this.keyHandler = this.handleEscape.bind(this);

      document.addEventListener('click', this.clickHandler);
      this.ui.panel?.addEventListener('change', this.changeHandler);
@@ -580,16 +602,7 @@
      window.addEventListener('beforeunload', this.handleBeforeUnload);
   }
   handleClick(e) {
      if(!e.target.closest(this.selectors.panel) && !e.target.closest(this.selectors.toggle)) {
         if (this.panelIsOpen()) {
            this.togglePanel(false);
         }
         return;
      }

      if (e.target.closest(this.selectors.toggle)) {
         this.togglePanel(!this.panelIsOpen());
      } else if (e.target.closest(this.selectors.refreshButton)) {
      if (e.target.closest(this.selectors.refreshButton)) {
         this.pollServer(true);
      } else if (e.target.closest(this.selectors.clearButton)) {
         const completedOps = this.getOperationsByStatus('completed');
@@ -619,28 +632,6 @@
   handleChange(e) {
   }

   handleEscape(e) {
      if (e.key === 'Escape') {
         this.togglePanel(false);
      }
   }
   panelIsOpen() {
      return this.ui.panel?.classList.contains('expanded');
   }
   togglePanel(open) {
      if (!this.ui.panel) return;

      if (open) {
         document.addEventListener('keydown', this.keyHandler);
      } else {
         document.removeEventListener('keydown', this.keyHandler);
      }
      this.ui.toggle.title = (open) ? 'Hide Queue' : 'Show Queue';
      this.a11y.announce((open) ? 'Opened Queue Panel': 'Closed Queue Panel');
      this.ui.panel.ariaExpanded = open;
      this.ui.panel.classList.toggle('expanded', open);
   }

   /*********************************************
   UI
    *********************************************/