class QueueManager {
|
constructor() {
|
this.a11y = window.jvbA11y;
|
this.error = window.jvbError;
|
|
this.user = window.auth.getUser();
|
|
|
this.canUpdateUI = true;
|
this.isProcessing = false;
|
this.isPolling = false;
|
this.queue = new Map();
|
this.items = new Map();
|
this.subscribers = new Set();
|
|
this.api = jvbSettings.api;
|
this.endpoint = 'queue';
|
|
this.queueItems = new Map();
|
|
this.init();
|
}
|
init() {
|
this.headers = {
|
'X-WP-Nonce': window.auth.getNonce(),
|
};
|
this.initElements();
|
this.initListeners();
|
this.initStore();
|
if (this.canUpdateUI && this.ui.panel) {
|
this.popup = new window.jvbPopup({
|
popup: this.ui.panel,
|
toggle: this.ui.toggle.button,
|
name: 'Queue Panel',
|
});
|
}
|
this.defineTemplates();
|
}
|
|
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'];
|
|
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: 'button.qtoggle',
|
indicator: '.qtoggle .indicator',
|
count: '.qtoggle .count'
|
},
|
refresh: {
|
button: '#queue .refresh .refreshNow',
|
countdown: '#queue .refresh .countdown'
|
},
|
popup: {
|
popup: '#queue .popup',
|
message: '#queue .popup span'
|
},
|
items: {
|
container: '#queue .qitems',
|
},
|
actions: {
|
retry: '#queue .retry-all',
|
clear: '#queue .dismiss-all'
|
},
|
filters: {
|
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',
|
dismiss: 'button.dismiss',
|
}
|
},
|
};
|
this.ui = window.uiFromSelectors(this.selectors);
|
if (!this.ui.panel) this.canUpdateUI = false;
|
}
|
|
defineTemplates() {
|
const T = window.jvbTemplates;
|
|
T.define('emptyState');
|
T.define('queueItem', {
|
setup({el, refs, manyRefs, data}) {
|
el.dataset.id = data.id;
|
}
|
});
|
}
|
|
|
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);
|
|
document.addEventListener('click', this.clickHandler);
|
window.addEventListener('online', this.onlineHandler);
|
window.addEventListener('offline', this.offlineHandler);
|
window.addEventListener('beforeunload', this.unloadHandler);
|
}
|
handleOnline() {
|
this.updatePanel('synced');
|
if (this.getQueueByStatus(this.pendingStatuses).length > 0) {
|
this.processQueue();
|
}
|
}
|
handleOffline() {
|
this.updatePanel('offline');
|
}
|
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;
|
}
|
|
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);
|
}
|
}
|
|
setFilter(filter) {
|
// Update active button
|
Object.values(this.ui.filters).forEach(filterObj => {
|
if (filterObj.input?.dataset.filter === filter) {
|
filterObj.input.checked = true;
|
}
|
});
|
|
if (filter === 'all') {
|
this.store.clearFilters();
|
} else {
|
this.store.setFilter('status', filter);
|
}
|
}
|
|
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;
|
}
|
}
|
|
initStore() {
|
if (!this.user) return;
|
const store = window.jvbStore.register(
|
'queue',
|
{
|
storeName: 'queue',
|
keyPath: 'id',
|
endpoint: this.endpoint,
|
TTL: Infinity,
|
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':
|
case 'items-save':
|
this.maybeStartPolling();
|
this.updateUI();
|
break;
|
case 'item-saved':
|
if (data.previousItem && data.previousItem.status !== data.item.status) {
|
this.updateOperationStatus(data.item.id, data.item.status);
|
}
|
this.maybeStartPolling();
|
break;
|
default:
|
|
break;
|
}
|
});
|
}
|
/****************************************************************************
|
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.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 fetch(
|
`${this.api}${this.endpoint}`,
|
{
|
method: 'POST',
|
headers: {
|
'Content-Type': 'application/json',
|
... this.headers
|
},
|
body: JSON.stringify({
|
action,
|
ids: 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);
|
this.stopActivityTracking();
|
|
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;
|
if (operation.data instanceof FormData) {
|
operation.data.append('id', operation.id);
|
operation.data.append('user', window.auth.getUser());
|
requestBody = operation.data;
|
} else {
|
requestBody = JSON.stringify({
|
...operation.data,
|
id: operation.id,
|
user: window.auth.getUser()
|
});
|
operation.headers['Content-Type'] = 'application/json';
|
}
|
if (requestBody === undefined || requestBody === null) return;
|
|
const response = await fetch(
|
`${this.api}${operation.endpoint}`,
|
{
|
method: operation.method,
|
headers: operation.headers,
|
body: requestBody
|
}
|
);
|
const result = await response.json();
|
if (skip) {
|
operation.data = {};
|
}
|
if (response.ok && result.success) {
|
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 ops = [... new Set([
|
...Array.from(this.store.data.values()),
|
... Array.from(this.queue.values())
|
])];
|
//Sort operations by operation updated_at
|
return this.sortOperations(ops);
|
}
|
|
getQueueByStatus(status) {
|
if (typeof status === 'string') {
|
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);
|
}
|
|
|
updateOperationStatus(itemID, status) {
|
let item = this.getQueue(itemID);
|
if (!item || !this.statuses.includes(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();
|
await this.store.fetch();
|
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;
|
|
const activeCount = operations.filter(op =>
|
[...this.pendingStatuses, ...this.workingStatuses].includes(op.status)
|
).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);
|
}
|
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;
|
}
|
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'
|
};
|
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':
|
return item.progress ? `${item.progress}% complete` : 'Processing...';
|
case 'completed':
|
return 'Successfully completed';
|
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);
|
}
|
/****************************************************************************
|
SUBSCRIPTION
|
****************************************************************************/
|
subscribe(callback) {
|
if (!this.subscribers) {
|
return;
|
}
|
this.subscribers.add(callback);
|
return () => this.subscribers.delete(callback);
|
}
|
|
notify(event, data) {
|
this.subscribers.forEach(cb => cb(event, data));
|
}
|
/****************************************************************************
|
CLEANUP
|
****************************************************************************/
|
destroy() {
|
if (this.isPolling) {
|
this.stopPolling();
|
}
|
this.stopActivityTracking();
|
document.removeEventListener('click', this.clickHandler);
|
this.subscribers.clear();
|
}
|
}
|
document.addEventListener('DOMContentLoaded', async function() {
|
window.auth.subscribe((event) => {
|
if (event === 'auth-loaded') {
|
window.jvbQueue = new QueueManager();
|
}
|
});
|
});
|
