/**
|
* 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
|
};
|
this.user = jvbSettings.currentUser;
|
|
|
this.headers = {
|
'X-WP-Nonce': jvbSettings.nonce,
|
...config.headers
|
};
|
|
this.a11y = window.jvbA11y;
|
this.errors = window.jvbError;
|
|
// Initialize DataStore for queue persistence
|
this.store = window.jvbStore.register('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.classes = [
|
'offline',
|
'synced',
|
'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();
|
this.initListeners();
|
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) {
|
this.ui.toggle.hidden = false;
|
this.ui.panel.hidden = false;
|
}
|
}
|
|
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); // Remove first parameter
|
}
|
|
updateOperationStatus(itemID, status) {
|
let item = this.store.get(itemID);
|
if (!item){
|
return;
|
}
|
item.status = status;
|
|
this.notify('operation-status', item);
|
this.updateOperationUI(item);
|
}
|
|
getQueue(itemID) {
|
return this.store.get(itemID);
|
}
|
|
clearQueue(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;
|
}
|
}
|
|
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();
|
}
|
}
|
|
async processOperation(operation) {
|
try {
|
//update to uploading
|
this.updateOperationStatus(operation.id, 'uploading');
|
|
// Get fresh copy from store to restore FormData
|
operation = this.getQueue(operation.id);
|
|
//build request
|
const url = `${this.config.apiBase}${operation.endpoint}`;
|
let requestBody;
|
console.log(operation.data);
|
if (operation.data instanceof FormData) {
|
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';
|
}
|
|
|
|
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 = '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 = 'pending';
|
operation.serverData = result;
|
this.updateOperationStatus(operation.id, operation.status);
|
this.setQueue(operation);
|
}
|
} else {
|
// Normal processing - no merge
|
operation.status = 'pending';
|
operation.serverData = result;
|
this.updateOperationStatus(operation.id, 'pending');
|
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) {
|
//ensure ids are in an array
|
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 (['cancel', 'dismiss'].includes(action)) {
|
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})
|
}
|
);
|
|
if (!response.ok) {
|
const errorData = await response.json().catch(()=>{});
|
throw new Error(errorData.message || `${action} failed: ${response.status}`);
|
}
|
|
const result = await response.json();
|
if (!result.success) {
|
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);
|
|
item.status = 'queued';
|
item.retries = 0;
|
this.setQueue(item);
|
this.updateOperationStatus(item.id, item.status);
|
});
|
this.startActivityTracking();
|
}
|
this.updateUI();
|
|
return result;
|
} catch (error) {
|
const result = await window.jvbError.log(error, {
|
component: 'QueueManager',
|
operation: 'performQueueAction',
|
action: action,
|
operationIds: ids,
|
itemCount: ids.length
|
}, () => this.updateServerOperations(ids, action)); // Retry callback
|
|
if (result.retried) {
|
return result; // Return successful retry result
|
} else {
|
throw error; // Re-throw if not retried
|
}
|
}
|
}
|
|
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);
|
this.changeHandler = this.handleChange.bind(this);
|
|
document.addEventListener('click', this.clickHandler);
|
this.ui.panel?.addEventListener('change', this.changeHandler);
|
|
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);
|
}
|
|
}
|
|
handleChange(e) {
|
}
|
|
/*********************************************
|
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',
|
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"]',
|
}
|
};
|
|
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),
|
};
|
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() {
|
if (!this.canUpdateUI) {
|
return;
|
}
|
|
// 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 : '';
|
}
|
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;
|
|
const operations = this.store.getFiltered();
|
|
// Clear container
|
window.removeChildren(this.ui.itemsContainer);
|
|
// 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);
|
});
|
}
|
}
|
|
createOperationUI(operation) {
|
const listItem = window.getTemplate('queueItem');
|
listItem.dataset.id = operation.id;
|
|
this.updateOperationUI(operation, listItem);
|
return listItem;
|
}
|
|
updateOperationUI(item, element = null) {
|
if (!element) {
|
element = this.ui.itemsContainer?.querySelector(`[data-id="${item.id}"]`);
|
}
|
if (!element) {
|
element = this.createOperationUI(item);
|
}
|
|
// 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);
|
}
|
}
|
|
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)) {
|
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);
|
}
|
});
|
|
if (filter === 'all') {
|
this.store.clearFilters();
|
} else {
|
this.store.setFilter('status', filter);
|
}
|
}
|
|
/**************************************************************************
|
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) {
|
|
if (!Array.isArray(status) && 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));
|
}
|
hasQueuedOperations() {
|
return this.getOperationsByStatus('queued').length > 0;
|
}
|
subscribe(callback) {
|
this.subscribers.add(callback);
|
return () => this.subscribers.delete(callback);
|
}
|
|
notify(event, data) {
|
this.subscribers.forEach(cb => cb(event, data));
|
}
|
|
/**************************************************************************
|
CLEANUP
|
**************************************************************************/
|
destroy() {
|
this.stopPolling();
|
this.stopActivityTracking();
|
|
if (this.clickHandler) {
|
document.removeEventListener('click', this.clickHandler);
|
}
|
|
if (this.keyHandler) {
|
document.removeEventListener('keydown', this.keyHandler);
|
}
|
|
this.subscribers.clear();
|
}
|
}
|
|
document.addEventListener('DOMContentLoaded', function() {
|
window.jvbQueue = new QueueManager();
|
});
|
