From 56a9a1ccf764ff7a6af8f8a2292cb07443cb4aa7 Mon Sep 17 00:00:00 2001
From: Jake Vanderwerf <get@jakevanderwerf.ca>
Date: Thu, 28 May 2026 18:19:57 +0000
Subject: [PATCH] =New Gitbit setpu
---
assets/js/concise/Queue.js | 1966 ++++++++++++++++++++++++++++++++--------------------------
1 files changed, 1,088 insertions(+), 878 deletions(-)
diff --git a/assets/js/concise/Queue.js b/assets/js/concise/Queue.js
index 4590141..77e5aeb 100644
--- a/assets/js/concise/Queue.js
+++ b/assets/js/concise/Queue.js
@@ -1,906 +1,258 @@
-/**
- * QueueManager
- * Uses DataStore for persistent storage
- */
class QueueManager {
- constructor(config = {}) {
- this.canUpdateUI = true;
- this.config = {
- apiBase: jvbSettings.api,
- maxRetries: 3,
- pollInterval: 5000,
- activityDelay: 2000, //2 seconds
- autosync: true,
- endpoint: 'queue',
- ...config
- };
-
- // 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'
- ];
+ constructor() {
+ this.a11y = window.jvbA11y;
+ this.error = window.jvbError;
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.canUpdateUI = true;
+ this.isProcessing = false;
+ this.isPolling = false;
+ this.queue = new Map();
+ this.items = new Map();
+ this.subscribers = new Set();
+ this.loadFromStorage = false;
+
+ this.api = jvbSettings.api;
+ this.endpoint = 'queue';
+
+ this.init();
+ }
+ init() {
this.headers = {
'X-WP-Nonce': window.auth.getNonce(),
- ...config.headers
};
-
- this.a11y = window.jvbA11y;
- this.errors = window.jvbError;
-
- // Initialize DataStore for queue persistence
- const store = window.jvbStore.register('queue', {
- storeName: 'queue',
- keyPath: 'id',
- endpoint: this.config.endpoint,
- TTL: Infinity,
- indexes: [
- {name: 'status', keyPath: 'status'},
- {name: 'type', keyPath: 'type'},
- ],
- showLoading: false,
- delayFetch: false, // Queue should fetch immediately
- });
- this.store = store.queue;
-
- this.classes = [
- 'offline',
- 'synced',
- 'pending'
- ];
-
-
-
- // Initialize
- this.initUI();
+ this.initElements();
this.initListeners();
- if (this.ui.panel) {
- this.popup = new window.jvbPopup({
+ this.initStore();
+ if (this.canUpdateUI && this.ui.panel) {
+ this.popup = window.jvbPopup.registerPopup({
popup: this.ui.panel,
- toggle: this.ui.toggle,
+ toggle: this.ui.toggle.button,
name: 'Queue Panel',
});
}
- this.updateUI = () => window.debouncer.schedule('queue-ui-update', this._updateUI.bind(this), 100);
- this.initQueue();
+ this.defineTemplates();
}
- async initQueue() {
- const incomplete = this.getOperationsByStatus(['completed', 'failed_permanent'], false)
-
- if (incomplete.length > 0) {
- this.startPolling();
- } else {
- this.updateStatusPanel('synced');
- }
-
- this.store.subscribe((event, data) => {
- switch (event) {
- case 'data-loaded':
- case 'items-saved':
- // Initial load from IndexedDB
- const incomplete = this.getOperationsByStatus(['completed', 'failed_permanent'], false);
- if (incomplete.length > 0) {
- this.startPolling();
- }
- this.updateUI();
- break;
- case 'item-saved':
- // Check for status changes
- if (data.item) {
- const oldItem = this.store.data.get(data.item.id);
- if (oldItem && oldItem.status !== data.item.status) {
- this.handleOperationStatusChange(data.item, oldItem.status);
- }
- }
- if (this.hasQueuedOperations()) {
- this.startPolling();
- }
- break;
- default:
- this.updateUI();
- break;
- }
-
- });
- this.notify('queue-initialized', {operations: incomplete});
- }
-
- /**
- * Handle operation status changes and notify subscribers
- */
- handleOperationStatusChange(operation, oldStatus) {
- if (!operation || oldStatus === operation.status) return;
-
- // Notify based on new status
- switch(operation.status) {
- case 'completed':
- this.notify('operation-completed', operation);
- break;
- case 'failed':
- this.notify('operation-failed', operation);
- break;
- case 'failed_permanent':
- this.notify('operation-failed-permanent', operation);
- break;
- }
- }
- /**
- *
- * @param {object} operation
- * @param {string} operation.endpoint The endpoint, excluding the apiBase
- * @param {object} operation.data The data to save
- * @param {boolean} operation.canMerge Whether data can merge
- * @param {string} operation.title The title of the operation for the Queue Panel
- * @param {string} operation.popup The string to show in the popup
- * @param {object} operation.headers Optional additional headers. Defaults to the API nonce
- *
- * @returns {string|null} Returns the operation id, for reference
- */
- addToQueue(operation) {
- const item = {
- id: `u${this.user}_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`,
- endpoint: null,
- method: 'POST',
- headers: {},
- data: {},
- canMerge: true,
- popup: 'Saving changes...',
- title: 'Operation',
- status: 'queued',
- timestamp: Date.now(),
- retries: 0,
- user: this.user,
- ... operation
- };
-
- item.headers = {
- ...this.headers,
- ...item.headers
- };
-
- if (!item.endpoint || !item.data) {
- console.error('Invalid operation queued: missing endpoint or data');
- return null;
- }
-
- const existingOps = Array.from(this.store.data.values()).filter(op=>
- op.status === 'queued' &&
- op.endpoint === item.endpoint &&
- op.canMerge
- );
-
- if (existingOps.length > 0) {
- const existing = existingOps[0];
- existing.data = window.deepMerge(existing.data, item.data);
- existing.timestamp = Date.now();
-
- this.updateOperationStatus(existing.id, existing.status);
- this.updateUI();
-
- this.startActivityTracking();
- return existing.id;
- }
-
- console.log('Added to Queue: ', item);
- this.store.clearCache();
-
- //Add new operation to DataStore
- this.setQueue(item);
-
- this.updateOperationStatus(item.id, item.status);
- this.updateUI();
-
- this.startActivityTracking();
- return item.id;
-
-
- }
-
-
- setQueue(item) {
- this.store.save(item);
- }
-
- updateOperationStatus(itemID, status) {
- let item = this.store.get(itemID);
- if (!item) return;
-
- // Update status
- item.status = status;
-
- this.notify('operation-status', item);
- this.updateOperationUI(item);
- }
-
- getQueue(itemID) {
- return this.store.get(itemID);
- }
-
- clearQueue(itemID) {
- const item = this.store.get(itemID);
- this.store.delete(itemID);
- }
-
- startActivityTracking() {
- if (!this.activityListeners) {
- const activityEvents = ['mousedown', 'mousemove', 'keypress', 'scroll', 'touchstart'];
- this.activityListeners = activityEvents.map(event => {
- const handler = () => this.resetActivityTimer();
- document.addEventListener(event, handler, {passive: true});
- return {event, handler};
- });
- }
- this.resetActivityTimer();
- }
-
- resetActivityTimer() {
- this.lastActivity = Date.now();
-
- if (this.activityTimer) {
- clearTimeout(this.activityTimer);
- }
-
- this.activityTimer = setTimeout(() => {
- this.processQueue();
- }, this.config.activityDelay);
- }
-
- stopActivityTracking() {
- if (this.activityTimer) {
- clearTimeout(this.activityTimer);
- this.activityTimer = null;
- }
- if (this.activityListeners) {
- this.activityListeners.forEach(({event, handler}) => {
- document.removeEventListener(event, handler);
- });
- this.activityListeners = null;
- }
- }
-
- 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);
- }
- /**
- * Send any queued operations to the server
- * @returns {Promise<void>}
- */
- async processQueue() {
- if (this.isProcessing) return;
-
- const queue = this.getOperationsByStatus('queued');
-
- if (queue.length === 0) {
- this.stopActivityTracking();
- return;
- }
- this.setProcessing(true);
-
- for (const operation of queue) {
- await this.processOperation(operation);
- }
-
- this.setProcessing(false);
- this.stopActivityTracking();
-
- const pending = this.getOperationsByStatus(['queued', 'completed', 'failed_permanent'], false);
- if (pending.length > 0) {
- this.startPolling();
- this.showQueue();
- } else {
- this.hideQueue();
- }
- }
-
- async processOperation(operation) {
- try {
- this.updateOperationStatus(operation.id, 'uploading');
-
- if (operation.data?._isFormData) {
- operation.data = await this.store.objectToFormData(operation.data);
- }
-
- const url = `${this.config.apiBase}${operation.endpoint}`;
- let requestBody;
-
- if (operation.data instanceof FormData) {
- operation.data.append('id', operation.id);
- operation.data.append('user', this.user);
- requestBody = operation.data;
- } else {
- requestBody = JSON.stringify({
- ...operation.data,
- id: operation.id,
- user: this.user
- });
- operation.headers['Content-Type'] = 'application/json';
- }
-
- const response = await fetch(url, {
- method: operation.method,
- headers: operation.headers,
- body: requestBody
- });
-
- const result = await response.json();
-
- if (response.ok && result.success !== false) {
- // Handle server-side merge
- if (result.id && operation.id !== result.id) {
-
- // Check if the returned ID exists locally
- const existingOp = this.getQueue(result.id);
-
- if (existingOp) {
- // Merge data from both operations
- existingOp.data = window.deepMerge(existingOp.data, operation.data);
- existingOp.status = result.status || 'pending';
- existingOp.serverData = result;
- this.updateOperationStatus(existingOp.id, existingOp.status);
- // Update the existing operation
- this.setQueue(existingOp);
-
- this.removeOperationFromUI(operation.id);
-
- // Switch reference to the merged operation
- operation = existingOp;
- } else {
- // Server merged with an operation we don't have locally
- // Update the ID and continue
- this.clearQueue(operation.id);
- operation.id = result.id;
- operation.status = result.status || 'pending';
- operation.serverData = result;
- this.updateOperationStatus(operation.id, operation.status);
- this.setQueue(operation);
- }
- } else {
- // Normal processing - no merge
- operation.status = result.status || 'pending';
- operation.serverData = result;
- this.updateOperationStatus(operation.id, operation.status);
- this.setQueue(operation);
- }
-
- this.a11y.announce(`${operation.title} sent to server for processing.`);
-
- } else {
- throw new Error(result.message || `HTTP ${response.status}`);
- }
- } catch (error) {
- console.error('Operation failed:', error);
-
- operation.retries++;
- operation.lastError = error.message;
-
- if (operation.retries >= this.config.maxRetries) {
- operation.status = 'failed_permanent';
- } else {
- operation.status = 'failed';
- operation.nextRetry = Date.now() + (Math.pow(2, operation.retries) * 1000);
- }
- this.updateOperationStatus(operation.id, operation.status);
-
- this.setQueue(operation);
- }
- }
-
- startPolling() {
- if (this.isPolling) return;
-
- this.isPolling = true;
- this.updateStatusPanel('pending');
-
- this.pollTimer = setInterval(async () => {
- try {
- this.store.clearCache();
- await this.store.fetch(); // Fetches from server, updates store.data
-
- const incomplete = this.getOperationsByStatus(['completed', 'failed_permanent'], false);
- if (incomplete.length === 0) {
- this.stopPolling();
- this.updateStatusPanel('synced');
- }
- } catch (error) {
- console.error('Polling error:', error);
- }
- }, this.config.pollInterval);
- }
-
- stopPolling() {
- if (!this.isPolling) return;
- this.isPolling = false;
- if (this.pollTimer) {
- clearInterval(this.pollTimer);
- this.pollTimer = null;
- }
- if (this.countdownTimer) {
- clearInterval(this.countdownTimer);
- this.countdownTimer = null;
- }
- }
-
- /***********************************************************
- USER ACTIONS
- ***********************************************************/
-
- /**
- *
- * @param {array} ids
- * @param {string }action
- * @returns {Promise<void>}
- */
- async updateServerOperations(ids, action) {
- 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;
-
- // SINGLE place to handle UI removal
- const shouldRemove = ['cancel', 'dismiss'].includes(action);
- if (shouldRemove) {
- ids.forEach(id => this.removeOperationFromUI(id));
- }
-
- try {
- 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) {
- throw new Error(`${action} failed: ${response.status}`);
- }
-
- const result = await response.json();
- if (!result.success) {
- throw new Error(result.message || `${action} operation failed`);
- }
-
- // 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();
- return result;
-
- } catch (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));
-
- // Don't re-throw - error is logged and handled
- return { success: false, error: error.message };
- }
- }
-
- getAllowedActions(status) {
- const actionMap = {
- 'queued': ['cancel'],
- 'localProcessing': ['cancel'],
- 'pending': ['cancel'],
- 'processing': [],
- 'completed': ['dismiss'],
- 'failed': ['retry', 'dismiss'],
- 'failed_permanent': ['dismiss']
- };
- return actionMap[status] || [];
- }
-
-
- /*********************************************
- LISTENERS
- *********************************************/
- initListeners() {
- this.clickHandler = this.handleClick.bind(this);
-
- document.addEventListener('click', this.clickHandler);
-
- this.handleOnline = () => {
- this.updateStatusPanel();
- if (this.hasQueuedOperations()) {
- this.processQueue();
- }
- };
- this.handleOffline = () => this.updateStatusPanel('offline');
- this.handleBeforeUnload = (e) => {
- const hasPending = this.getOperationsByStatus(['queued', 'uploading']);
- if (hasPending.length > 0) {
- e.preventDefault();
- return 'You have unsaved changes in the queue.';
- }
- };
-
- window.addEventListener('online', this.handleOnline);
- window.addEventListener('offline', this.handleOffline);
- window.addEventListener('beforeunload', this.handleBeforeUnload);
- }
- handleClick(e) {
- if (!e.target.closest(this.selectors.panel, this.selectors.toggle)) {
- return;
- }
- if (e.target.closest(this.selectors.refreshButton)) {
- this.store.clearCache();
- this.store.clearHttpHeaders(); // Clear cached headers first
- this.store.fetch();
- } else if (e.target.closest(this.selectors.clearButton)) {
- const completedOps = this.getOperationsByStatus('completed');
- if (completedOps.length > 0) {
- const ids = completedOps.map(op => op.id);
- this.updateServerOperations(ids, 'dismiss');
- }
- } else if (e.target.closest(this.selectors.retryButton)) {
- const failedOps = this.getOperationsByStatus('failed');
- if (failedOps.length > 0) {
- const ids = failedOps.map(op => op.id);
- this.updateServerOperations(ids, 'retry');
- }
- } else if (e.target.closest('[data-action]')) {
- const button = e.target.closest('[data-action]');
- const operationId = button.closest('[data-id]')?.dataset.id;
- if (operationId) {
- this.updateServerOperations(operationId, button.dataset.action);
- }
- } else if (e.target.closest('.filters [data-filter]')) {
- const filter = e.target.closest('[data-filter]').dataset.filter;
- this.setFilter(filter);
- }
-
- }
+ initElements() {
+ this.panelStatuses = ['syncing', 'synced', 'pending', 'offline'];
+ this.statuses = ['queued', 'localProcessing', 'uploading', 'pending', 'processing', 'completed', 'failed', 'failed_permanent'];
+ this.pendingStatuses = ['queued', 'localProcessing', 'uploading'];
+ this.workingStatuses = ['pending','processing'];
+ this.completedStatuses = ['completed', 'failed', 'failed_permanent'];
- /*********************************************
- UI
- *********************************************/
- initUI() {
this.icons = {
queued: 'arrows-clockwise', localProcessing: 'arrows-clockwise', uploading: 'syncing',
pending: 'cloud', processing: 'syncing', completed: 'cloud-check',
failed: 'cloud-warning', failed_permanent: 'cloud-warning'
};
-
this.selectors = {
panel: 'aside#queue',
- toggle: 'button.qtoggle',
- refreshButton: 'button.refreshNow',
- countdown: '.countdown',
- indicator: '.qtoggle .indicator',
- count: '.qtoggle .count',
- popup: '.popup',
- itemsContainer: '.qitems',
- clearButton: '.dismiss-all',
- retryButton: '.retry-all',
+ toggle: {
+ button: 'button.qtoggle',
+ indicator: '.qtoggle .indicator',
+ count: '.qtoggle .count'
+ },
+ refresh: {
+ button: '#queue .m-actions .refresh',
+ countdown: '#queue .m-actions .refresh .countdown'
+ },
+ popup: {
+ popup: '#queue .popup',
+ message: '#queue .popup span'
+ },
+ items: {
+ container: '#queue .qitems',
+ },
+ actions: {
+ retry: '#queue .retry-all',
+ clear: '#queue .dismiss-all'
+ },
filters: {
- all: '.filters [data-filter="all"]',
- received: '.filters [data-filter="queued"]',
- localProcessing: '.filters [data-filter="localProcessing"]',
- uploading: '.filters [data-filter="uploading"]',
- pending: '.filters [data-filter="pending"]',
- processing: '.filters [data-filter="processing"]',
- completed: '.filters [data-filter="completed"]',
- failed: '.filters [data-filter="failed"]',
- }
+ filter: '#queue [data-filter]',
+ all: {
+ label: '#queue [for="qfilter-all"]',
+ radio: '#queue [data-filter="all"]',
+ count: '#queue [data-filter="all"] .count'
+ },
+ queued: {
+ label: '#queue [for="qfilter-queued"]',
+ input: '#queue [data-filter="queued"]',
+ count: '#queue [for="qfilter-queued"] .count'
+ },
+ localProcessing: {
+ label: '#queue [for="qfilter-localProcessing"]',
+ input: '#queue [data-filter="localProcessing"]',
+ count: '#queue [for="qfilter-localProcessing"] .count',
+ },
+ uploading: {
+ label: '#queue [for="qfilter-uploading"]',
+ input: '#queue [data-filter="uploading"]',
+ count: '#queue [for="qfilter-uploading"] .count',
+ },
+ pending: {
+ label: '#queue [for="qfilter-pending"]',
+ input: '#queue [data-filter="pending"]',
+ count: '#queue [for="qfilter-pending"] .count',
+ },
+ processing: {
+ label: '#queue [for="qfilter-processing"]',
+ input: '#queue [data-filter="processing"]',
+ count: '#queue [for="qfilter-processing"] .count',
+ },
+ completed: {
+ label: '#queue [for="qfilter-completed"]',
+ input: '#queue [data-filter="completed"]',
+ count: '#queue [for="qfilter-completed"] .count',
+ },
+ failed: {
+ label: '#queue [for="qfilter-failed"]',
+ input: '#queue [data-filter="failed"]',
+ count: '#queue [for="qfilter-failed"] .count',
+ },
+ },
+ item: {
+ type: '.type',
+ status: '.status',
+ details: '.info .details',
+ icon: '.status .icon',
+ startedAt: '.started time',
+ completed: {
+ wrap: '.completed',
+ label: '.completed span',
+ time: '.completed time',
+ },
+ progress: {
+ progress: '.progress',
+ fill: '.progress .fill',
+ details: '.progress .details',
+ icon: '.progress .icon'
+ },
+ actions: {
+ cancel: 'button.cancel',
+ retry: 'button.retry',
+ refresh: 'button.refresh',
+ dismiss: 'button.dismiss',
+ }
+ },
};
-
this.ui = window.uiFromSelectors(this.selectors);
- if (!this.ui.panel) {
- this.canUpdateUI = false;
- }
+ if (!this.ui.panel) this.canUpdateUI = false;
}
- _updateUI() {
- if (!this.canUpdateUI) {
- return;
- }
+ defineTemplates() {
+ const T = window.jvbTemplates;
- // Get current operations from store
- const operations = Array.from(this.store.data.values());
-
- // Get stats from last fetch response (server-provided)
- const stats = this.store.lastResponse?.queue_stats || {
- queued: 0,
- localProcessing: 0,
- uploading: 0,
- pending: 0,
- processing: 0,
- completed: 0,
- failed: 0,
- failed_permanent: 0
- };
-
- // Update count badge
- if (this.ui.count) {
- const activeCount = operations.length - stats.completed;
- this.ui.count.textContent = activeCount > 0 ? activeCount : '';
- this.ui.count.style.display = activeCount > 0 ? '' : 'none';
- }
-
- // Update indicator
- if (this.ui.indicator) {
- const hasActive = stats.queued > 0 || stats.uploading > 0 ||
- stats.pending > 0 || stats.processing > 0;
- this.ui.indicator.classList.toggle('active', hasActive);
- }
-
- // Update button states
- this.ui.clearButton.disabled = this.getOperationsByStatus('completed').length === 0;
- this.ui.retryButton.disabled = this.getOperationsByStatus('failed').length === 0 && this.getOperationsByStatus('failed_permanent').length === 0;
-
- // Update filter counts (from server stats)
- Object.entries(this.ui.filters).forEach(([status, button]) => {
- const count = status === 'all'
- ? operations.length
- : stats[status] || 0;
- const countEl = button.querySelector('.count');
- if (countEl) {
- countEl.textContent = count > 0 ? count : '';
+ T.define('emptyState');
+ T.define('queueItem', {
+ setup({el, refs, manyRefs, data}) {
+ el.dataset.id = data.id;
}
- button.setAttribute('data-count', count);
});
-
- // Render current operations
- this.renderOperations();
- }
-
- getStatusLabel(status) {
- const labels = {
- 'queued': 'Queued',
- 'localProcessing': 'Processing locally',
- 'uploading': 'Uploading',
- 'pending': 'Waiting on server',
- 'processing': 'Processing',
- 'completed': 'Completed',
- 'failed': 'Failed (will retry)',
- 'failed_permanent': 'Failed permanently'
- };
- return labels[status] || status;
- }
-
- getItemMessage(item) {
- if (item.message) return item.message;
- if (item.error_message) return item.error_message;
-
- switch(item.status) {
- case 'queued':
- return 'Waiting to send...';
- case 'uploading':
- return 'Sending to server...';
- case 'pending':
- return item.position ? `Position ${item.position} in queue` : 'In server queue';
- case 'processing':
- return item.progress ? `${item.progress}% complete` : 'Processing...';
- case 'completed':
- return 'Successfully completed';
- case 'failed':
- return `Failed: ${item.lastError || 'Unknown error'} (Retry ${item.retries}/${this.config.maxRetries})`;
- case 'failed_permanent':
- return `Failed: ${item.lastError || 'Unknown error'}`;
- default:
- return '';
- }
- }
-
- calculateProgress(item) {
- if (item.progress) return item.progress;
-
- // Estimate progress based on status
- const statusProgress = {
- 'queued': 10,
- 'uploading': 25,
- 'pending': 40,
- 'processing': 70,
- 'completed': 100,
- 'failed': 0,
- 'failed_permanent': 0
- };
-
- return statusProgress[item.status] || 0;
}
- renderOperations() {
- if (!this.ui.itemsContainer) return;
+ initListeners() {
+ this.activityListeners = null;
+ this.clickHandler = this.handleClick.bind(this);
+ this.onlineHandler = this.handleOnline.bind(this);
+ this.offlineHandler = this.handleOffline.bind(this);
+ this.unloadHandler = this.handleBeforeUnload.bind(this);
+ this.visibilityHandler = this.handleVisibilityChange.bind(this);
- const operations = this.store.getFiltered();
+ document.addEventListener('click', this.clickHandler);
+ window.addEventListener('online', this.onlineHandler);
+ window.addEventListener('offline', this.offlineHandler);
- // Clear container
- window.removeChildren(this.ui.itemsContainer);
+ // window.addEventListener('beforeunload', this.unloadHandler);
- // Render operations or empty state
- if (operations.length === 0) {
- let empty = window.getTemplate('emptyQueue');
- this.ui.itemsContainer.append(empty);
- this.a11y.announce('Nothing queued.');
- } else {
- operations.forEach(op => {
- const element = this.createOperationUI(op);
- this.ui.itemsContainer.append(element);
- });
+ document.addEventListener('visibilitychange', this.visibilityHandler);
+ }
+ handleOnline() {
+ this.updatePanel('synced');
+ if (this.getQueueByStatus(this.pendingStatuses).length > 0) {
+ this.processQueue();
+ }
+ }
+ 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;
+ if (total > 0) {
+ // Modern browsers ignore custom messages, but this triggers the native dialog
+ e.preventDefault();
+ e.returnValue = ''; // Required for Chrome
+ return ''; // Required for some older browsers
}
}
+ handleClick(e) {
+ if (!window.targetCheck(e, this.selectors.panel+', '+this.selectors.toggle.button)) return;
+ const refresh = window.targetCheck(e, this.selectors.refresh.button);
+ if (refresh) {
+ this.ui.refresh.button.classList.add('fetching');
+ this.store.clearCache();
+ this.store.clearFilters();
+ this.store.fetch().finally(() => {
+ this.ui.refresh.button.classList.remove('fetching');
+ });
+ return;
+ }
- createOperationUI(operation) {
- const listItem = window.getTemplate('queueItem');
- listItem.dataset.id = operation.id;
- this.updateOperationUI(operation, listItem);
- return listItem;
- }
+ const refreshPage = window.targetCheck(e, this.selectors.actions.refresh);
+ if (refreshPage) {
+ this.handleRefresh(opId);
+ return;
+ }
- updateOperationUI(item, element = null) {
- if (!element) {
- element = this.ui.itemsContainer?.querySelector(`[data-id="${item.id}"]`);
- }
- if (!element) {
- element = this.createOperationUI(item);
+ const clear = window.targetCheck(e, this.selectors.actions.clear);
+ if (clear) {
+ this.opActions('completed', 'dismiss').then(()=>{});
+ return;
+ }
+
+ const retry = window.targetCheck(e, this.selectors.actions.retry);
+ if (retry) {
+ this.opActions('failed', 'retry').then(()=>{});
+ return;
+ }
+
+ const action = window.targetCheck(e, '[data-action]');
+ if (action) {
+ const opId = action.closest('[data-id]')?.dataset.id;
+ if (opId) {
+ this.opActions(opId, action.dataset.action);
+ }
+ return;
+ }
+
+ const filter = window.targetCheck(e, this.selectors.filters.filter);
+ if (filter) {
+ this.setFilter(filter.dataset.filter);
+ }
}
- // Remove old status classes
- this.statuses.forEach(status => element.classList.remove(status));
- element.classList.add(item.status);
-
- // Update content
- let timeDisplay = '';
-
- if (item.updated_at) {
- // Server now sends ISO format timestamps - much more reliable!
- timeDisplay = window.formatTimeAgo(new Date(item.updated_at));
- } else if (item.created_at) {
- timeDisplay = window.formatTimeAgo(new Date(item.created_at));
- }
- const progressPercent = this.calculateProgress(item);
-
- // Update text content safely
- const typeEl = element.querySelector('.type');
- const statusEl = element.querySelector('.status');
- const detailsEl = element.querySelector('.info .details');
- const timeEl = element.querySelector('.info .time');
- const progressFill = element.querySelector('.progress .fill');
-
- if (typeEl) typeEl.textContent = item.title;
- if (statusEl) {
- statusEl.querySelector('.icon')?.remove();
- let status = this.getStatusLabel(item.status);
- statusEl.title = status;
- statusEl.prepend(window.getIcon(this.icons[item.status]));
- statusEl.querySelector('span').textContent = status;
- }
- if (detailsEl) detailsEl.textContent = this.getItemMessage(item);
- if (timeEl) timeEl.textContent = timeDisplay;
- if (progressFill) progressFill.style.width = `${progressPercent}%`;
-
- // Update action buttons
- const actionsContainer = element.querySelector('.actions');
- if (actionsContainer) {
- this.updateActionButtons(item, actionsContainer);
- }
- }
-
- updateActionButtons(item, container) {
- window.removeChildren(container);
-
- switch (item.status) {
- case 'queued':
- case 'localProcessing':
- case 'pending':
- // Show cancel button for in-progress items
- const cancelBtn = window.getTemplate('button');
- cancelBtn.classList.add('cancel');
- cancelBtn.dataset.action = 'cancel';
- cancelBtn.textContent = 'Cancel';
- container.appendChild(cancelBtn);
- break;
-
- case 'failed':
- case 'failed_permanent':
- // Show retry and dismiss buttons
- const retryBtn = window.getTemplate('button');
- const dismissBtn = window.getTemplate('button');
-
- retryBtn.classList.add('retry');
- retryBtn.textContent = 'Retry';
- retryBtn.disabled = item.retries >= this.maxRetries;
- retryBtn.dataset.action = 'retry';
-
- dismissBtn.classList.add('dismiss');
- dismissBtn.textContent = 'Dismiss';
- dismissBtn.dataset.action = 'dismiss';
-
- container.appendChild(retryBtn);
- container.appendChild(dismissBtn);
- break;
-
- case 'completed':
- // Show dismiss button only
- const dismissCompletedBtn = window.getTemplate('button');
- dismissCompletedBtn.dataset.action = 'dismiss';
- dismissCompletedBtn.classList.add('dismiss');
- dismissCompletedBtn.textContent = 'Dismiss';
- container.appendChild(dismissCompletedBtn);
- break;
- }
- }
-
- removeOperationFromUI(operationId) {
- const element = this.ui.itemsContainer?.querySelector(`[data-id="${operationId}"]`);
- if (element) {
- element.style.opacity = '0';
- element.style.transform = 'scale(0.9)';
- setTimeout(() => element.remove(), 300);
- }
- }
-
- updateStatusPanel(status) {
- this.ui.panel?.classList.remove(...this.classes);
- if (!this.classes.includes(status)) {
- return;
- }
- this.ui.panel?.classList.add(status);
- }
-
- /***************************************************
- FILTERS
- **************************************************/
setFilter(filter) {
// Update active button
- Object.values(this.ui.filters).forEach(button => {
- if (button) {
- button.classList.toggle('active', button.dataset.filter === filter);
+ Object.values(this.ui.filters).forEach(filterObj => {
+ if (filterObj.input?.dataset.filter === filter) {
+ filterObj.input.checked = true;
}
});
@@ -911,21 +263,886 @@
}
}
- /**************************************************************************
- HELPERS
- **************************************************************************/
- getOperationsByStatus(status, include = true) {
+ trackActivity() {
+ if (!this.activityListeners) {
+ const events = ['mousedown', 'mousemove', 'keypress', 'scroll', 'touchstart'];
+ this.activityListeners = events.map(event => {
+ const handler = () => this.resetActivityTimer();
+ document.addEventListener(event, handler, {passive: true});
+ return {event, handler};
+ });
+ }
+ this.resetActivityTimer();
+ }
+ resetActivityTimer() {
+ if (this.activityTimer) {
+ clearTimeout(this.activityTimer);
+ }
+ this.activityTimer = setTimeout(() => {
+ this.processQueue();
+ }, 1750);
+ }
+ stopActivityTracking() {
+ if (this.activityTimer) {
+ clearTimeout(this.activityTimer);
+ this.activityTimer = null;
+ }
+ if (this.activityListeners) {
+ this.activityListeners.forEach(({event, handler}) => {
+ document.removeEventListener(event, handler);
+ });
+ this.activityListeners = null;
+ }
+ }
- if (!Array.isArray(status) && typeof status === 'string') {
+ initStore() {
+ if (!this.user) return;
+ const store = window.jvbStore.register(
+ 'queue',
+ {
+ storeName: 'queue',
+ keyPath: 'id',
+ endpoint: this.endpoint,
+ TTL: Infinity,
+ isAuth: true,
+ indexes: [
+ {name: 'status', keyPath: 'status'},
+ {name: 'type', keyPath: 'type'},
+ ],
+ filters: {
+ user: window.auth.getUser()
+ },
+ showLoading: false,
+ }
+ )
+ this.store = store.queue;
+ this.store.subscribe((event, data) => {
+ switch (event) {
+ case 'data-loaded':
+ const serverOps = this.store.getAll();
+
+ serverOps.forEach(serverOp => {
+ const localOp = this.queue.get(serverOp.id);
+ const mapped = this.mapServerOperation(serverOp);
+
+ this.queue.set(mapped.id, mapped);
+
+ // Notify if changed
+ if (localOp && localOp.status !== mapped.status) {
+ this.notify('operation-status', mapped);
+ }
+ });
+
+ this.maybeStartPolling();
+ this.updateUI();
+ break;
+
+ case 'items-save':
+ this.maybeStartPolling();
+ this.updateUI();
+ break;
+
+ case 'item-saved':
+ if (data.item) {
+ this.queue.set(data.item.id, data.item);
+ if (data.previousItem?.status !== data.item.status) {
+ this.notify('operation-status', data.item);
+ }
+ }
+ this.maybeStartPolling();
+ break;
+ }
+ });
+ }
+
+ /**
+ * Handle refresh button click - clears cache for the relevant store
+ */
+ handleRefresh(opId) {
+ const op = this.getQueue(opId);
+ if (!op) return;
+
+ // Determine which store to refresh based on operation type
+ let storeName = null;
+
+ // Map operation types to store names
+ const typeToStore = {
+ 'content_update': op.data?.posts ? Object.values(op.data.posts)[0]?.content : null,
+ 'batch_creation': op.data?.content,
+ 'image_upload': 'uploads',
+ 'video_upload': 'uploads',
+ 'document_upload': 'uploads',
+ };
+
+ storeName = typeToStore[op.type];
+
+ // If we found a store name, clear its cache
+ if (storeName && window.jvbStore) {
+ const store = window.jvbStore.stores.get(storeName);
+ if (store) {
+ window.jvbStore.clearCache(storeName);
+ window.jvbStore.fetch(storeName);
+
+ // Give visual feedback
+ const button = this.items.get(opId)?.ui?.actions?.refresh;
+ if (button) {
+ const originalText = button.querySelector('span').textContent;
+ button.querySelector('span').textContent = 'Refreshed!';
+ button.disabled = true;
+
+ setTimeout(() => {
+ button.querySelector('span').textContent = originalText;
+ button.disabled = false;
+ }, 2000);
+ }
+ }
+ } else {
+ // Fallback: just reload the page if we can't determine the store
+ if (confirm('Refresh the page to see changes?')) {
+ window.location.reload();
+ }
+ }
+ }
+ /****************************************************************************
+ OPERATIONS
+ ****************************************************************************/
+ addToQueue(operation) {
+ const item = {
+ id: `u${this.user}_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`,
+ endpoint: null,
+ method: 'POST',
+ headers: {},
+ data: {},
+ delay: false,
+ canMerge: true,
+ popup: 'Saving changes...',
+ title: 'Operation',
+ status: 'queued',
+ timestamp: Date.now(),
+ created_at: new Date().toISOString(),
+ retries: 0,
+ user: this.user,
+ ... operation
+ };
+
+ item.headers = {
+ ... this.headers,
+ ... item.headers
+ }
+ if (!item.endpoint || !item.data) return null;
+
+ if (item.popup && this.ui.popup?.message) { // Add popup support
+ this.ui.popup.message.textContent = item.popup;
+ this.ui.popup.popup.hidden = false;
+ setTimeout(() => this.ui.popup.popup.hidden = true, 2000);
+ }
+
+ if (!item.delay) {
+ this.queue.set(item.id, item);
+ this.processOperation(item).then(()=> {});
+ this.store.clearCache();
+ this.maybeStartPolling();
+ this.toggleQueue();
+ return item.id;
+ }
+
+ const existingOps = Array.from(this.getAllQueue()).filter(op=> {
+ return op.status === 'queued' &&
+ op.endpoint === item.endpoint &&
+ op.canMerge
+ });
+ if (existingOps.length > 0) {
+ const existing = existingOps[0];
+ existing.data = window.deepMerge(existing.data, item.data);
+ existing.timestamp = Date.now();
+
+ this.setQueue(existing);
+
+ this.updateOperationStatus(existing.id, existing.status);
+ this.updateUI();
+ this.trackActivity();
+ return existing.id;
+ }
+
+ this.store.clearCache();
+ this.setQueue(item);
+ this.updateOperationStatus(item.id, item.status);
+ this.updateUI();
+ this.trackActivity();
+ return item.id;
+ }
+
+ async opActions(statusOrId, action) {
+ //Extract ids based on status, if it exists
+ if (this.statuses.includes(statusOrId)) {
+ statusOrId = this.getQueueByStatus(statusOrId).map(op => op.id);
+ } else if (typeof statusOrId === 'string') {
+ //If it's still a string, wrap the id inside an array
+ statusOrId = [statusOrId];
+ }
+ if (statusOrId.length ===0) return;
+ if (!['cancel', 'dismiss', 'retry'].includes(action)) return;
+
+ const shouldRemove = ['cancel', 'dismiss'].includes(action);
+ if (shouldRemove) {
+ statusOrId.forEach(id => {
+ this.removeOperationUI(id)
+ });
+ }
+
+ try {
+ const response = await window.auth.fetch(
+ `${this.api}${this.endpoint}`,
+ {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ ... this.headers
+ },
+ body: JSON.stringify({
+ action,
+ ids: Array.isArray(statusOrId) ? statusOrId : [statusOrId],
+ user: this.user
+ })
+ }
+ );
+ if (!response.ok) {
+ throw new Error(`${action} failed: ${response.status}`);
+ }
+ const result = await response.json();
+ if (!result.success) {
+ throw new Error(result.message || `${action} operation failed`);
+ }
+ statusOrId.forEach(id => {
+ let item = this.getQueue(id);
+ if (item) {
+ this.notify(`${action}-operation`, item);
+ }
+
+ if (shouldRemove) {
+ this.clearQueue(id);
+ } else {
+ let item = this.getQueue(id);
+ item.status = 'queued';
+ this.setQueue(item);
+ this.updateOperationStatus(item.id, item.status);
+ }
+ });
+
+ if (action === 'retry') {
+ this.trackActivity();
+ }
+ this.updateUI();
+ return result;
+ } catch (error) {
+ await window.jvbError.log(error, {
+ component: 'Queue',
+ operation: 'performQueueAction',
+ action: action,
+ operationIds: statusOrId,
+ itemCount: statusOrId.length
+ }, () => this.opActions(statusOrId, action));
+ return {success: false, error: error.message};
+ }
+ }
+
+
+ async processQueue() {
+ if (this.isProcessing) return;
+
+ const queue = this.getQueueByStatus('queued');
+
+ if (queue.length === 0) {
+ this.stopActivityTracking();
+ return;
+ }
+ this.setProcessing();
+
+ for (const operation of queue) {
+ await this.processOperation(operation);
+ }
+
+ this.setProcessing(false);
+ 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());
+ }
+
+ async processOperation(operation) {
+ try {
+ //Add it to memory if it isn't already there
+ if (!this.queue.has(operation.id)) {
+ this.queue.set(operation.id, operation);
+ }
+ let skip = false;
+ if (operation.data?._isFormData && !operation.data instanceof FormData) {
+ skip = true;
+ operation.data = await this.store.objectToFormData(operation.data);
+ }
+
+ 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 {
+ req = {
+ ...operation.data,
+ id: operation.id,
+ user: window.auth.getUser()
+ };
+ requestBody = JSON.stringify(req);
+ operation.headers['Content-Type'] = 'application/json';
+ }
+ if (operation.endpoint === 'unknown' || requestBody === undefined || requestBody === null) return;
+
+
+ const response = await window.auth.fetch(
+ `${this.api}${operation.endpoint}`,
+ {
+ method: operation.method,
+ headers: operation.headers,
+ 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.serverData = result;
+ this.updateOperationStatus(operation.id, operation.status);
+ }
+ this.a11y.announce(`${operation.title} sent to server for processing`);
+ } else {
+ throw new Error(result.message || `HTTP ${response.status}`);
+ }
+ this.setQueue(operation);
+ } catch (error) {
+ console.error('Operation failed: ', error);
+ operation.retries++;
+ operation.lastError = error.message;
+ if (operation.retries >= 3) {
+ operation.status = 'failed_permanent';
+ } else {
+ operation.status = 'failed';
+ }
+ this.updateOperationStatus(operation.id, operation.status);
+ this.setQueue(operation);
+ }
+ }
+
+ async handleServerMerge(operation, result) {
+ const existingOp = this.getQueue(result.id);
+ if (existingOp) {
+ operation.status = result.status||'pending';
+ operation.serverData = result;
+ return this.mergeOp(existingOp, operation);
+ } else {
+ this.clearQueue(operation.id);
+ this.setQueue(result);
+ return result;
+ }
+ }
+
+ mergeOp(oldOp, newOp) {
+ oldOp.data = window.deepMerge(oldOp.data, newOp.data);
+ oldOp.status = newOp.status;
+ if (Object.hasOwn(newOp, 'serverData')) {
+ oldOp.serverData = newOp.serverData;
+ }
+ this.updateOperationStatus(oldOp.id, oldOp.status);
+ this.removeOperationUI(newOp.id);
+ this.clearQueue(newOp.id);
+ return oldOp;
+ }
+ sortByDate(ops) {
+ return ops.sort((a, b) => {
+ const aTime = a.updated_at ?? a.timestamp ?? 0;
+ const bTime = b.updated_at ?? b.timestamp ?? 0;
+ return aTime - bTime;
+ });
+ }
+
+ sortOperations(ops) {
+ const statusPriority = {
+ 'processing': 0,
+ 'uploading': 1,
+ 'pending': 2,
+ 'queued': 3,
+ 'localProcessing': 4,
+ 'failed': 5,
+ 'completed': 6,
+ 'failed_permanent': 7
+ };
+
+ return ops.sort((a, b) => {
+ // First by status priority
+ const priorityDiff = (statusPriority[a.status] ?? 99) - (statusPriority[b.status] ?? 99);
+ if (priorityDiff !== 0) return priorityDiff;
+
+ // Then by updated_at (most recent first)
+ const aTime = a.updated_at ?? a.timestamp ?? 0;
+ const bTime = b.updated_at ?? b.timestamp ?? 0;
+ return new Date(bTime) - new Date(aTime);
+ });
+ }
+
+ getAllQueue() {
+ 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);
+ }
+
+ getQueueByStatus(status) {
+ if (typeof status === 'string') {
status = [status];
}
- return (include)
- ? Array.from(this.store.data.values()).filter((item) => status.includes(item.status))
- : Array.from(this.store.data.values()).filter((item) => !status.includes(item.status));
+
+ let ops = this.getAllQueue();
+ return ops.filter(op => status.includes(op.status));
}
- hasQueuedOperations() {
- return this.getOperationsByStatus('queued').length > 0;
+
+
+ updateOperationStatus(itemID, status) {
+ let item = this.getQueue(itemID);
+ 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);
}
+ setQueue(item) {
+ this.store.save(item);
+ this.queue.set(item.id, item);
+ }
+ getQueue(itemID) {
+ return this.queue.has(itemID) ? this.queue.get(itemID) : this.store.get(itemID);
+ }
+ clearQueue(itemID) {
+ this.queue.delete(itemID);
+ this.store.delete(itemID);
+ }
+ /****************************************************************************
+ POLLING
+ ****************************************************************************/
+ maybeStartPolling() {
+ const incomplete = this.getQueueByStatus([...this.pendingStatuses, ...this.workingStatuses]);
+ if (incomplete.length > 0) {
+ this.startPolling();
+ return true;
+ }
+ this.updatePanel('synced');
+ return false;
+ }
+ startPolling() {
+ if (this.isPolling) return;
+ this.isPolling = true;
+ this.updatePanel('pending');
+ this.runPollCycle();
+ }
+
+ async runPollCycle() {
+ if (!this.isPolling) return;
+
+ try {
+ this.ui.refresh.button.classList.add('fetching');
+ this.store.clearCache();
+ let response = await this.store.fetch();
+ if (response.status === 429) {
+ console.log('Too many requests. Waiting 30 seconds');
+ this.stopPolling();
+ this.startCountdown(30, () => this.runPollCycle());
+ return;
+ }
+
+ this.ui.refresh.button.classList.remove('fetching');
+ if (!this.maybeStartPolling()) {
+ this.stopPolling();
+ this.updatePanel('synced');
+ return;
+ }
+ } catch (error) {
+ console.error('Polling error:', error);
+ }
+
+ // Schedule next poll with countdown
+ this.startCountdown(5, () => this.runPollCycle());
+ }
+
+ startCountdown(count, onComplete) {
+ if (!this.ui.refresh.countdown) {
+ console.warn('Countdown element not found');
+ return;
+ }
+ this.ui.refresh.countdown.classList.add('counting');
+ this.ui.refresh.countdown.textContent = count;
+
+ this.countdownTimer = setInterval(() => {
+ count--;
+ if (count > 0) {
+ this.ui.refresh.countdown.textContent = count;
+ } else {
+ this.stopCountdown();
+ if (onComplete) onComplete();
+ }
+ }, 1000);
+ }
+
+ stopPolling() {
+ if (!this.isPolling) return;
+ this.isPolling = false;
+ if (this.pollTimer) {
+ clearInterval(this.pollTimer);
+ this.pollTimer = null;
+ }
+ this.stopCountdown();
+ }
+
+ stopCountdown() {
+ if (this.countdownTimer) {
+ clearInterval(this.countdownTimer);
+ this.countdownTimer = null;
+ }
+ this.ui.refresh.countdown.classList.remove('counting');
+ this.ui.refresh.countdown.textContent = '';
+ }
+ /****************************************************************************
+ UI
+ ****************************************************************************/
+ updateUI() {
+ if (!this.canUpdateUI) return;
+
+ window.debouncer.schedule(
+ 'queue-ui',
+ this.handleUpdateUI.bind(this)
+ )
+ }
+ handleUpdateUI() {
+ const operations = this.getAllQueue();
+ 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;
+
+ let activeCount = operations.filter(op =>
+ [...this.pendingStatuses, ...this.workingStatuses].includes(op.status)
+ );
+ activeCount = activeCount.length;
+ this.ui.toggle.count.hidden = activeCount === 0;
+ this.ui.toggle.count.textContent = activeCount;
+
+ for (let status of this.statuses) {
+ if (status === 'failed_permanent') continue;
+ let total = operations.filter(op => op.status === status).length;
+ this.ui.filters[status].label.hidden = total === 0;
+ this.ui.filters[status].input.dataset.count = `${total}`;
+ if (total > 0) {
+ this.ui.filters[status].count.textContent = total;
+ } else {
+ this.ui.filters[status].count.textContent = '';
+ }
+ }
+
+ this.renderOperations();
+ }
+
+ renderOperations() {
+ if (!this.ui.items.container) return;
+
+ const status = this.store.filters?.status ?? 'all';
+ const operations = (status === 'all') ? this.getAllQueue() : this.getQueueByStatus(status);
+ const sortedOps = this.sortOperations(operations);
+
+ if (sortedOps.length === 0) {
+ window.removeChildren(this.ui.items.container);
+ const empty = window.jvbTemplates.create('emptyQueue');
+ this.ui.items.container.append(empty);
+ this.a11y.announce('No items in queue');
+ return;
+ } else {
+ this.ui.items.container.querySelector('.empty-group')?.remove();
+ }
+
+ // Track which items should exist
+ const expectedIds = new Set(sortedOps.map(op => op.id));
+
+ // Remove items that shouldn't exist
+ this.items.forEach((item, id) => {
+ if (!expectedIds.has(id)) {
+ item.element?.remove();
+ this.items.delete(id);
+ }
+ });
+
+ // Update/add items in order
+ sortedOps.forEach((op, index) => {
+ let item = this.items.get(op.id);
+ if (!item) {
+ item = this.createOperationElement(op);
+ }
+ if (item?.element) {
+ this.updateOperationUI(op.id);
+ // Reorder by re-appending (moves to end in correct order)
+ this.ui.items.container.append(item.element);
+ }
+ });
+ }
+
+ createOperationElement(op) {
+ const el = window.jvbTemplates.create('queueItem', op);
+ const item = {
+ element: el,
+ ui: window.uiFromSelectors(this.selectors.item, el)
+ };
+
+ this.items.set(op.id, item);
+ return item;
+ }
+
+ updateOperationUI(opId) {
+ let item = (this.items.has(opId)) ? this.items.get(opId) : this.createOperationElement(opId);
+ if (!item) return;
+ let op = this.getQueue(opId);
+
+ let element = item.element;
+
+ element.classList.remove(... this.statuses);
+ element.classList.add(op.status);
+
+ let progress = this.getProgress(op);
+ if (item.ui.type && item.ui.type.textContent !== op.title) item.ui.type.textContent = op.title;
+ if (item.ui.status) {
+ item.ui.status.title = this.statusLabel(op.status);
+ }
+ if (item.ui.icon) {
+ item.ui.icon.className = `icon icon-${this.icons[op.status]}`;
+ }
+ if (item.ui.details) item.ui.details.textContent = this.itemMessage(op);
+ if (item.ui.startedAt) {
+ item.ui.startedAt.setAttribute('datetime', op.created_at);
+ item.ui.startedAt.textContent = window.formatTimeAgo(op.created_at);
+ }
+ let text = op.status === 'completed' ? 'Completed: ' : 'Last updated: ';
+ const shouldShowCompleted = op.status === 'completed' && (op.completed_at || op.updated_at);
+ item.ui.completed.wrap.hidden = !shouldShowCompleted;
+ if (shouldShowCompleted) {
+ const completedTime = op.completed_at ?? op.updated_at;
+ item.ui.completed.label.textContent = 'Completed: ';
+ item.ui.completed.time.setAttribute('datetime', completedTime);
+ item.ui.completed.time.textContent = window.formatTimeAgo(completedTime);
+ }
+
+ window.showProgress(item.ui.progress, progress, 100, this.statusLabel(op.status));
+ if (item.ui.actions.cancel) item.ui.actions.cancel.hidden = this.completedStatuses.includes(op.status);
+ if (item.ui.actions['retry']) {
+ if (op.retries >= 3) item.ui.actions['retry'].disabled = true;
+ item.ui.actions['retry'].hidden = op.status !=='failed';
+ }
+ if (item.ui.actions.dismiss) item.ui.actions.dismiss.hidden = this.pendingStatuses.includes(op.status);
+ if (item.ui.actions.refresh) {
+ item.ui.actions.refresh.hidden = op.status !== 'completed';
+ }
+ }
+ 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;
+ window.fade(op.element, false);
+ }
+
+ updatePanel(status = 'syncing') {
+ if (!this.ui.panel || !this.panelStatuses.includes(status)) return;
+ this.ui.panel.classList.remove(...this.panelStatuses);
+ this.ui.panel.classList.add(status);
+ }
+ /****************************************************************************
+ UTILITY
+ ****************************************************************************/
+ statusLabel(status) {
+ if (!this.statuses.includes(status)) return'';
+ const labels = {
+ 'queued': 'Queued',
+ 'localProcessing': 'Processing locally',
+ 'uploading': 'Uploading',
+ 'pending': 'Waiting on server',
+ 'processing': 'Processing',
+ 'completed': 'Completed',
+ 'failed': 'Failed',
+ 'failed_permanent': 'Failed permanently',
+ 'merged': 'Merged'
+ };
+ return labels[status];
+ }
+ itemMessage(item) {
+ if (Object.hasOwn(item, 'message') && item.message !== '') return item.message;
+ if (Object.hasOwn(item, 'error_message') && item.error_message) return item.error_message;
+
+ switch(item.status) {
+ case 'queued':
+ return 'Waiting to send...';
+ case 'uploading':
+ return 'Sending to server...';
+ case 'pending':
+ return item.position ? `Position ${item.position} in queue` : 'In server queue';
+ case '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':
+ return `Failed: ${item.lastError || 'Unknown error'}`;
+ default:
+ return '';
+ }
+ }
+ toggleQueue(on = true) {
+ if (!this.ui.panel) return;
+ this.ui.panel.hidden = !on;
+ this.ui.toggle.button.hidden = !on;
+ }
+ setProcessing(on = true) {
+ this.isProcessing = on;
+ this.ui.toggle.button.classList.toggle('saving', on);
+ }
+
+ /**
+ * Map server operation format to frontend format
+ * Server uses: type, data (requestData), status (from state/outcome)
+ * Frontend uses: endpoint, data, status, headers, method, etc.
+ */
+ mapServerOperation(serverOp) {
+ const localOp = this.queue.get(serverOp.id);
+
+ // If we have local operation data, preserve it
+ if (localOp && localOp.endpoint) {
+ 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';
+
+ 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);
+ }
+
+ /****************************************************************************
+ SUBSCRIPTION
+ ****************************************************************************/
subscribe(callback) {
if (!this.subscribers) {
return;
@@ -937,26 +1154,18 @@
notify(event, data) {
this.subscribers.forEach(cb => cb(event, data));
}
-
- /**************************************************************************
+ /****************************************************************************
CLEANUP
- **************************************************************************/
+ ****************************************************************************/
destroy() {
- this.stopPolling();
+ if (this.isPolling) {
+ this.stopPolling();
+ }
this.stopActivityTracking();
-
- if (this.clickHandler) {
- document.removeEventListener('click', this.clickHandler);
- }
-
- if (this.keyHandler) {
- document.removeEventListener('keydown', this.keyHandler);
- }
-
+ document.removeEventListener('click', this.clickHandler);
this.subscribers.clear();
}
}
-
document.addEventListener('DOMContentLoaded', async function() {
window.auth.subscribe((event) => {
if (event === 'auth-loaded') {
@@ -964,3 +1173,4 @@
}
});
});
+
--
Gitblit v1.10.0