/**
|
* Middleman between front-end changes and backend processing
|
* Uses IndexedDB to store content locally before ensuring it gets sent back to the server
|
*/
|
class DataStore {
|
constructor(config = {}) {
|
this.config = {
|
name: false,
|
endpoint: false,
|
autosync: true,
|
syncInterval: 10000, //10 seconds
|
useIndexedDB: true,
|
apiBase: jvbSettings.api,
|
headers: {},
|
operation: {},
|
... config
|
}
|
this.headers = {
|
'X-WP-Nonce': jvbSettings.nonce,
|
... this.config.headers
|
}
|
if (!config.name || !config.endpoint) {
|
return;
|
}
|
|
this.items = new Map();
|
this.queue = new Map();
|
this.filters = config.filters??{}; //Load initial filters
|
this.subscribers = new Set();
|
this.db = null;
|
|
this.initDB();
|
}
|
|
async initDB() {
|
if (!('indexedDB' in window)) return;
|
|
const request = indexedDB.open(`jvb_${this.config.name}_db`, 1);
|
|
request.onupgradeneeded = (e) => {
|
const db = e.target.result;
|
|
if (!db.objectStoreNames.contains('items')) {
|
db.createObjectStore('items', { keyPath: 'id' });
|
}
|
|
if (!db.objectStoreNames.contains('queue')) {
|
db.createObjectStore('queue', { keyPath: 'id' });
|
}
|
};
|
|
request.onsuccess = (e) => {
|
this.db = e.target.result;
|
this.loadFromDB();
|
};
|
}
|
|
async loadFromDB() {
|
if (!this.db) return;
|
|
// Load items
|
const itemTx = this.db.transaction(['items'], 'readonly');
|
const itemStore = itemTx.objectStore('items');
|
const itemRequest = itemStore.getAll();
|
|
itemRequest.onsuccess = (e) => {
|
e.target.result.forEach(item => {
|
this.items.set(item.id, item);
|
});
|
this.notify('items-loaded', Array.from(this.items.values()));
|
};
|
|
// Load queue
|
const queueTx = this.db.transaction(['queue'], 'readonly');
|
const queueStore = queueTx.objectStore('queue');
|
const queueRequest = queueStore.getAll();
|
|
queueRequest.onsuccess = (e) => {
|
e.target.result.forEach(item => {
|
this.queue.set(item.id, item);
|
});
|
};
|
}
|
|
async fetchFromServer() {
|
try {
|
const params = new URLSearchParams(this.filters);
|
|
const response = await fetch(`${jvbSettings.api}${this.config.endpoint}?${params}`, {
|
headers: this.headers
|
});
|
|
const data = await response.json();
|
console.log(data);
|
if (data.items) {
|
// Clear and update items
|
this.items.clear();
|
data.items.forEach(item => {
|
this.items.set(item.id, item);
|
});
|
|
// Save to IndexedDB
|
this.saveItemsToDB();
|
|
// Notify subscribers
|
this.notify('items-fetched', this.getFilteredItems());
|
}
|
|
return data;
|
} catch (error) {
|
console.error('Fetch error:', error);
|
this.notify('fetch-error', error);
|
}
|
}
|
|
saveItemsToDB() {
|
if (!this.db) return;
|
|
const tx = this.db.transaction(['items'], 'readwrite');
|
const store = tx.objectStore('items');
|
|
this.items.forEach(item => {
|
store.put(item);
|
});
|
}
|
|
updateItem(id, changes) {
|
const item = this.items.get(id);
|
if (!item) return;
|
|
// Apply changes optimistically
|
const updated = { ...item, ...changes, _pending: true };
|
this.items.set(id, updated);
|
|
// Add to queue
|
this.addToQueue(id, changes);
|
|
// Notify
|
this.notify('item-updated', updated);
|
|
return updated;
|
}
|
|
createItem(data) {
|
const tempId = `temp_${Date.now()}`;
|
const newItem = {
|
id: tempId,
|
...data,
|
_isNew: true,
|
_pending: true
|
};
|
|
this.items.set(tempId, newItem);
|
this.addToQueue(tempId, { ...data, _action: 'create' });
|
this.notify('item-created', newItem);
|
|
return newItem;
|
}
|
|
deleteItem(id) {
|
const item = this.items.get(id);
|
if (!item) return;
|
|
// Mark for deletion
|
item._deleted = true;
|
item._pending = true;
|
this.items.set(id, item);
|
|
this.addToQueue(id, { _action: 'delete' });
|
this.notify('item-deleted', item);
|
}
|
|
addToQueue(id, changes) {
|
const existing = this.queue.get(id) || {};
|
const merged = { ...existing, ...changes, id, timestamp: Date.now() };
|
|
this.queue.set(id, merged);
|
|
// Save queue to IndexedDB
|
if (this.db) {
|
const tx = this.db.transaction(['queue'], 'readwrite');
|
tx.objectStore('queue').put(merged);
|
}
|
|
this.notify('queue-updated', this.queue.size);
|
}
|
|
async syncQueue() {
|
if (this.queue.size === 0) return;
|
|
const batch = Array.from(this.queue.values());
|
|
console.log(batch);
|
|
try {
|
const response = await fetch(`${jvbSettings.api}${this.config.endpoint}`, {
|
method: 'POST',
|
headers: this.headers,
|
body: JSON.stringify({
|
content: this.contentType,
|
operations: batch
|
})
|
});
|
|
const result = await response.json();
|
|
if (result.success) {
|
// Clear queue for successful items
|
result.processed.forEach(({ tempId, newId }) => {
|
this.queue.delete(tempId);
|
|
// Update temp IDs with real IDs
|
if (tempId !== newId) {
|
const item = this.items.get(tempId);
|
if (item) {
|
item.id = newId;
|
delete item._isNew;
|
delete item._pending;
|
this.items.delete(tempId);
|
this.items.set(newId, item);
|
}
|
} else {
|
// Just clear pending flag
|
const item = this.items.get(newId);
|
if (item) {
|
delete item._pending;
|
this.items.set(newId, item);
|
}
|
}
|
});
|
|
// Clear queue from IndexedDB
|
if (this.db) {
|
const tx = this.db.transaction(['queue'], 'readwrite');
|
const store = tx.objectStore('queue');
|
result.processed.forEach(({ tempId }) => {
|
store.delete(tempId);
|
});
|
}
|
|
this.notify('sync-success', result);
|
}
|
} catch (error) {
|
this.notify('sync-error', error);
|
}
|
}
|
|
setFilter(key, value) {
|
if (value === '' || value === null) {
|
delete this.filters[key];
|
} else {
|
this.filters[key] = value;
|
}
|
|
this.notify('filters-changed', this.getFilteredItems());
|
}
|
|
getFilteredItems() {
|
let items = Array.from(this.items.values());
|
// Apply filters
|
|
let filters = this.filters;
|
delete filters.user;
|
delete filters.content;
|
delete filters.page;
|
Object.entries(filters).forEach(([key, value]) => {
|
items = items.filter(item => {
|
if (key === 'status') {
|
if (value === 'all') {
|
return item.status === 'publish' || item.status === 'draft';
|
}
|
return item.status === value;
|
}
|
if (key === 'search') {
|
const searchLower = value.toLowerCase();
|
return item.post_title?.toLowerCase().includes(searchLower) ||
|
item.post_content?.toLowerCase().includes(searchLower);
|
}
|
// Handle taxonomy filters
|
if (key.startsWith('tax_')) {
|
const taxonomy = key.replace('tax_', '');
|
return item.taxonomies?.[taxonomy]?.includes(value);
|
}
|
return true;
|
});
|
});
|
|
// Exclude deleted items
|
items = items.filter(item => !item._deleted);
|
|
return items;
|
}
|
|
subscribe(callback) {
|
this.subscribers.add(callback);
|
return () => this.subscribers.delete(callback);
|
}
|
|
notify(event, data) {
|
this.subscribers.forEach(cb => cb(event, data));
|
}
|
}
|
window.jvbStore = DataStore;
|
|
class QueueManager {
|
constructor() {
|
//Core Components
|
this.a11y = window.jvbA11y;
|
this.errors = window.jvbError;
|
this.cache = window.jvbCache;
|
this.debouncer = window.debouncer;
|
//Config
|
this.STORAGE_KEY = 'jvb_queue';
|
this.API = `${jvbSettings.api}queue`;
|
this.defaultHeaders = {
|
'Content-Type': 'application/json',
|
'X-WP-Nonce': jvbSettings.nonce
|
};
|
this.maxRetries = 3;
|
|
this.queue = new Map();
|
this.hasChanges = this.cache.getItem('queueHasChanges')??false;
|
this.isProcessing = false;
|
this.lastPollTime = null;
|
this.pendingUIUpdates = new Map();
|
|
this.keyHandler = this.handleEscape.bind(this);
|
this.statuses = [
|
'queued', 'localProcessing', 'uploading',
|
'pending', 'processing', 'completed',
|
'failed', 'failed_permanent'
|
];
|
|
this.icons = {
|
queued: 'refresh', localProcessing: 'refresh', uploading: 'syncing',
|
pending: 'cloud', processing: 'syncing', completed: 'synced',
|
failed: 'error', failed_permanent: 'error'
|
};
|
|
|
|
this.statusMessages = {
|
'queued': 'Waiting to send to server...',
|
'localProcessing': 'Processing locally...',
|
'uploading': 'Sending to server...',
|
'pending': 'Sent to server - waiting to be processed...',
|
'processing': 'Server is working on it...',
|
'completed': 'All done!',
|
'failed': 'There was an error',
|
'failed_permanent': 'Failed permanently'
|
};
|
|
|
|
// Skip if not logged in
|
if (!jvbSettings.currentUser) {
|
return;
|
}
|
|
this.initElements();
|
this.loadQueue();
|
|
this.polling = {
|
interval: null, base: 5000, max: 60000,
|
consecutiveNoChanges: 0, isActive: false,
|
lastActivity: Date.now(), startTime: null
|
}
|
|
this.setupActivityTracking();
|
this.initEventListeners();
|
this.fetchOperations(true);
|
|
}
|
|
|
initElements() {
|
this.panel = document.querySelector('aside#queue');
|
if (!this.panel) return;
|
|
this.elements = {
|
queueItems: '.qitems',
|
toggle: '.qtoggle',
|
countdown: '.countdown',
|
refresh: '.refreshNow',
|
popup: '.popup',
|
filters: '.filters',
|
filterButtons: '.filter',
|
retryButton: 'button.retry',
|
dismissButton: 'button.dismiss',
|
cancelButton: 'button.cancel'
|
};
|
|
this.queuedItems = this.panel.querySelector(this.elements.queueItems);
|
this.toggle = this.panel.querySelector(this.elements.toggle);
|
this.countdown = this.panel.querySelector(this.elements.countdown);
|
this.refresh = this.panel.querySelector(this.elements.refresh);
|
this.popup = this.panel.querySelector(this.elements.popup);
|
this.filters = this.panel.querySelector(this.elements.filters);
|
this.filterButtons = this.filters.querySelectorAll(this.elements.filterButtons);
|
this.retryButton = this.panel.querySelector(this.elements.retryButton);
|
this.dismissButton = this.panel.querySelector(this.elements.dismissButton);
|
|
this.statusButtons = {};
|
this.statuses.forEach(status => {
|
this.statusButtons[status] = this.panel.querySelector(`.filter[data-filter="${status}"]`);
|
});
|
}
|
|
initEventListeners() {
|
// Bind handlers to maintain context
|
this.clickHandler = this.handleClick.bind(this);
|
this.handleOnline = () => {
|
this.updateNetworkIndicator();
|
this.maybeProcessQueue(this.hasChanges);
|
};
|
this.handleOffline = () => this.updateNetworkIndicator();
|
this.handleBeforeUnload = (e) => {
|
const hasPending = [...this.queue.values()].some(item =>
|
['queued', 'localProcessing', 'uploading'].includes(item.status)
|
);
|
if (hasPending) {
|
e.preventDefault();
|
return 'You have unsaved changes.';
|
}
|
};
|
this.trackActivity = () => {
|
this.polling.lastActivity = Date.now();
|
};
|
|
// Add listeners
|
document.addEventListener('click', this.clickHandler);
|
window.addEventListener('online', this.handleOnline);
|
window.addEventListener('offline', this.handleOffline);
|
window.addEventListener('beforeunload', this.handleBeforeUnload);
|
|
// Activity tracking
|
const events = ['mousedown', 'mousemove', 'keypress', 'scroll', 'touchstart'];
|
events.forEach(event => {
|
document.addEventListener(event, this.trackActivity, { passive: true });
|
});
|
}
|
/**
|
* Update network indicator
|
*/
|
updateNetworkIndicator() {
|
// Update UI based on online status
|
if (this.panel) {
|
this.panel.classList.toggle('offline', !navigator.onLine);
|
}
|
}
|
handleClick(e) {
|
if (window.targetCheck(e, '#queue ' + this.elements.toggle)) {
|
this.togglePanel();
|
this.maybeAddEmptyState();
|
}
|
// Individual item actions
|
else if (window.targetCheck(e, '#queue .item ' + this.elements.retryButton)) {
|
const operation = e.target.closest('.item');
|
if (operation?.dataset.id) {
|
this.performItemAction(operation.dataset.id, 'retry');
|
}
|
}
|
else if (window.targetCheck(e, '#queue .item ' + this.elements.cancelButton)) {
|
const operation = e.target.closest('.item');
|
if (operation?.dataset.id) {
|
this.performItemAction(operation.dataset.id, 'cancel');
|
}
|
}
|
else if (window.targetCheck(e, '#queue .item ' + this.elements.dismissButton)) {
|
const operation = e.target.closest('.item');
|
if (operation?.dataset.id) {
|
this.performItemAction(operation.dataset.id, 'dismiss');
|
}
|
}
|
// Bulk actions
|
else if (window.targetCheck(e, '#queue ' + this.elements.retryButton)) {
|
this.performBulkAction('retry');
|
}
|
else if (window.targetCheck(e, '#queue ' + this.elements.dismissButton)) {
|
this.performBulkAction('dismiss');
|
}
|
else if (window.targetCheck(e, '#queue ' + this.elements.filterButtons)) {
|
this.handleFilterClick(e);
|
}
|
else if (window.targetCheck(e, '#queue ' + this.elements.refresh)) {
|
this.handleRefreshClick(e);
|
}
|
|
// Close panel when clicking outside
|
if (this.panel.classList.contains('expanded') &&
|
!this.panel.contains(e.target) &&
|
e.target !== this.toggle) {
|
this.closePanel();
|
}
|
}
|
|
closePanel(message = 'Closed Queue Panel') {
|
this.panel.classList.remove('expanded');
|
this.toggle.title = 'Show Queue';
|
this.toggle.ariaExpanded = false;
|
this.a11y.announce(message);
|
document.removeEventListener('keydown', this.keyHandler);
|
}
|
|
openPanel(message = 'Opened Queue Panel') {
|
this.panel.classList.add('expanded');
|
this.toggle.title = 'Hide Queue';
|
this.toggle.ariaExpanded = true;
|
this.a11y.announce(message);
|
document.addEventListener('keydown', this.keyHandler);
|
}
|
|
handleEscape(e) {
|
if (e.key === 'Escape') {
|
this.closePanel('Closed Queue Panel with escape key');
|
}
|
}
|
|
maybeAddEmptyState() {
|
let empty = this.queuedItems.querySelector('.emptyQueue');
|
if (empty) {
|
empty.remove();
|
}
|
if (this.queuedItems.children.length === 0) {
|
let empty = window.getTemplate('emptyQueue');
|
this.queuedItems.append(empty);
|
this.a11y.announce('Nothing queued.');
|
}
|
}
|
|
|
/**
|
* Track user activity to adjust polling
|
*/
|
setupActivityTracking() {
|
const events = ['mousedown', 'mousemove', 'keypress', 'scroll', 'touchstart'];
|
|
events.forEach(event => {
|
document.addEventListener(event, () => {
|
this.polling.lastActivity = Date.now();
|
}, { passive: true });
|
});
|
}
|
|
/**
|
*
|
* Queue Item Operations
|
*
|
*/
|
/**
|
* Add item to queue - Map operations work normally
|
*/
|
async addToQueue(operation) {
|
console.log('Queuing operation: ', operation);
|
let id = operation.id ?? this.generateId();
|
if ('append' in operation) {
|
id = id + operation.append;
|
}
|
|
if (!operation.endpoint || !operation.data) {
|
console.error('Invalid operation - missing endpoint or data');
|
return false;
|
}
|
|
const result = await this.updateItem(id, operation);
|
|
this.updateStatusPanel('pending');
|
this.addPopup(result.item.popup);
|
this.setChanges(true);
|
|
return result.item.id;
|
}
|
|
/**
|
* Generate a unique operation ID
|
*
|
* @returns {string} Unique ID
|
*/
|
generateId() {
|
// Create a timestamp-based prefix
|
const timestamp = new Date().getTime().toString(36);
|
|
// Add random component
|
const randomPart = Math.random().toString(36).substring(2, 8);
|
|
// Add counter to ensure uniqueness within same millisecond
|
this.idCounter = (this.idCounter || 0) + 1;
|
const counter = this.idCounter.toString(36);
|
|
return `u${jvbSettings.currentUser}-${timestamp}-${randomPart}-${counter}`;
|
}
|
|
|
async performBulkAction(action, filterFn = null) {
|
const items = filterFn ?
|
[...this.queue.values()].filter(filterFn) :
|
[...this.queue.values()].filter(item => {
|
switch(action) {
|
case 'dismiss': return item.status === 'completed';
|
case 'retry': return ['failed', 'failed_permanent'].includes(item.status);
|
case 'cancel': return ['queued', 'pending'].includes(item.status);
|
default: return false;
|
}
|
});
|
|
if (!items.length) {
|
this.addPopup(`No operations available for ${action}`);
|
return;
|
}
|
|
try {
|
const result = await this.performQueueAction(
|
items.map(item => item.id),
|
action
|
);
|
|
// Handle results based on action
|
if (['dismiss', 'cancel'].includes(action)) {
|
result.processed_ids.forEach(id => this.removeItem(id, action));
|
} else if (action === 'retry') {
|
result.processed_ids.forEach(id => {
|
this.updateItem(id, {
|
status: 'pending',
|
retries: (this.queue.get(id)?.retries || 0) + 1,
|
error_message: null
|
});
|
});
|
this.setChanges(true);
|
}
|
|
this.addPopup(`${action} completed: ${result.processed_count} operations`);
|
} catch (error) {
|
// Centralized error handling
|
await window.jvbError.log(error, {
|
component: 'QueueManager',
|
action: `bulk_${action}`,
|
itemCount: items.length
|
});
|
}
|
}
|
|
handleFilterClick(e) {
|
this.filterButtons.forEach(btn => btn.classList.remove('active'));
|
const button = e.target.closest(this.elements.filterButtons);
|
button.classList.add('active');
|
const filter = button.dataset.filter || 'all';
|
this.fetchOperations(true, { status: filter });
|
}
|
|
handleRefreshClick(e) {
|
this.refresh.classList.add('refreshing');
|
this.fetchOperations(true, { force: true }).finally(() => {
|
this.refresh.classList.remove('refreshing');
|
});
|
}
|
|
togglePanel() {
|
this.panel.classList.toggle('expanded');
|
if (this.panel.classList.contains('expanded')) {
|
this.openPanel();
|
} else {
|
this.closePanel();
|
}
|
}
|
|
async performItemAction(operationId, action, options = {}) {
|
const item = this.queue.get(operationId);
|
if (!item) {
|
this.addPopup(`Operation ${operationId} not found`);
|
return false;
|
}
|
|
// Validate action is allowed for current status
|
const allowedActions = this.getAllowedActions(item.status);
|
if (!allowedActions.includes(action)) {
|
this.addPopup(`Cannot ${action} operation in current state`);
|
return false;
|
}
|
|
try {
|
// Update UI immediately for responsiveness
|
const tempStatus = `${action}ing`;
|
this.updateItem(operationId, { status: tempStatus });
|
this.addPopup(`${action.charAt(0).toUpperCase() + action.slice(1)}ing operation...`);
|
|
const result = await this.performQueueAction(operationId, action);
|
|
// Handle different action results
|
switch (action) {
|
case 'cancel':
|
case 'dismiss':
|
this.removeItem(operationId, action);
|
break;
|
case 'retry':
|
this.updateItem(operationId, {
|
status: 'pending',
|
retries: (item.retries || 0) + 1,
|
error_message: null,
|
retryAfter: null
|
});
|
this.setChanges(true);
|
break;
|
}
|
|
this.addPopup(`Operation ${action}ed successfully`);
|
return true;
|
|
} catch (error) {
|
// Revert status on error
|
this.updateItem(operationId, {
|
status: item.status,
|
error_message: `${action} failed: ${error.message}`
|
});
|
this.addPopup(`${action} failed: ${error.message}`);
|
return false;
|
}
|
}
|
|
getAllowedActions(status) {
|
const actionMap = {
|
'queued': ['cancel'],
|
'localProcessing': ['cancel'],
|
'pending': ['cancel'],
|
'processing': [],
|
'completed': ['dismiss'],
|
'failed': ['retry', 'dismiss'],
|
'failed_permanent': ['retry', 'dismiss']
|
};
|
return actionMap[status] || [];
|
}
|
|
/**
|
* Queue Operations
|
*/
|
/**
|
* Fetch operations from the server
|
* @param {boolean} refresh
|
* @param {Object} options Filter options
|
* @returns {Promise<Object>} Server response
|
*/
|
async fetchOperations(refresh = false, options = {}) {
|
const params = new URLSearchParams(options);
|
const url = `${this.API}?${params.toString()}`;
|
|
try {
|
const data = await this.cache.fetchWithCache(url,
|
{ method: 'GET', headers: this.defaultHeaders },
|
{
|
content: 'queue',
|
forceRefresh: refresh,
|
maxAge: 30000 // 30 seconds for queue data
|
}
|
);
|
|
if (data?.operations) {
|
this.processOperationsData(data.operations);
|
}
|
return data;
|
} catch (error) {
|
// Cache's fetchWithCache already handles errors via window.jvbError
|
return { operations: [], error: error.message };
|
}
|
}
|
|
async performQueueAction(operationIds, action) {
|
const ids = Array.isArray(operationIds) ? operationIds : [operationIds];
|
|
try {
|
const response = await fetch(this.API, {
|
method: 'POST',
|
headers: this.defaultHeaders,
|
body: JSON.stringify({ ids, action })
|
});
|
|
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`);
|
}
|
|
return result;
|
|
} catch (error) {
|
const result = await window.jvbError.log(error, {
|
component: 'QueueManager',
|
operation: 'performQueueAction',
|
action: action,
|
operationIds: ids,
|
itemCount: ids.length
|
}, () => this.performQueueAction(operationIds, action)); // Retry callback
|
|
if (result.retried) {
|
return result; // Return successful retry result
|
} else {
|
throw error; // Re-throw if not retried
|
}
|
}
|
}
|
|
processOperationsData(operations) {
|
if (!Array.isArray(operations)) {
|
console.warn('Invalid operations data received:', operations);
|
return;
|
}
|
|
const validOperations = operations.filter(op =>
|
op && typeof op === 'object' && op.id
|
);
|
|
if (validOperations.length !== operations.length) {
|
console.warn(`Filtered ${operations.length - validOperations.length} invalid operations`);
|
}
|
|
// 🔧 FIX: Track which server operations we received
|
const serverIds = new Set(validOperations.map(op => op.id));
|
|
// Remove dismissed items (items not returned by server)
|
const itemsToRemove = [];
|
for (const [localId, localItem] of this.queue) {
|
if (!serverIds.has(localId) && localItem.status !== 'queued') {
|
// Item not returned by server and wasn't just queued - likely dismissed
|
itemsToRemove.push(localId);
|
}
|
}
|
|
// 🔧 FIX: Use centralized removeItem
|
for (const id of itemsToRemove) {
|
console.log(`Server dismissed operation: ${id}`);
|
this.removeItem(id, 'server-dismissed', { skipSave: true }); // Batch save below
|
}
|
|
// 🔧 FIX: Use centralized updateItem for all server updates
|
const updatePromises = validOperations.map(op =>
|
this.updateItem(op.id, op, { skipSave: true }) // Batch save below
|
);
|
|
// Wait for all updates to complete, then save once
|
Promise.all(updatePromises).then(() => {
|
this.saveQueue();
|
});
|
}
|
|
/**
|
*
|
* @param {boolean} on
|
*/
|
setChanges(on) {
|
this.hasChanges = on;
|
this.cache.setItem('queueHasChanges', on);
|
this.maybeProcessQueue(on);
|
}
|
|
/**
|
* Starts a timeout after X ms to process queue if no changes are made
|
* @param on
|
*/
|
maybeProcessQueue(on) {
|
console.log('Checking to process queue...');
|
if (!on) {
|
this.debouncer.cancel('queue');
|
return;
|
}
|
|
this.debouncer.schedule(
|
'queue',
|
() => { this.processQueue()},
|
2500
|
);
|
}
|
|
/**
|
* Method to manually trigger immediate processing (bypass debounce)
|
*/
|
processQueueImmediately() {
|
console.log('Processing queue immediately - bypassing debounce');
|
this.processQueue();
|
}
|
|
async processQueue() {
|
|
if (!navigator.onLine) {
|
console.log('Offline - postponing queue processing');
|
return;
|
}
|
|
const pendingItems = this.getPendingItems();
|
|
if (pendingItems.length === 0) {
|
this.setChanges(false);
|
return;
|
}
|
|
try {
|
console.log(`Processing ${pendingItems.length} queued items`);
|
|
const batchSize = this.getOptimalBatchSize();
|
for (let i = 0; i < pendingItems.length; i += batchSize) {
|
const batch = pendingItems.slice(i, i + batchSize);
|
await this.processBatchWithIsolation(batch);
|
|
if (i + batchSize < pendingItems.length) {
|
await new Promise(resolve => setTimeout(resolve, 500));
|
}
|
}
|
|
this.setChanges(false);
|
this.updateStatusPanel('synced');
|
|
} catch (error) {
|
await window.jvbError.log(error, {
|
component: 'QueueManager',
|
operation: 'processQueue',
|
pendingCount: pendingItems.length,
|
batchSize: this.getOptimalBatchSize()
|
});
|
|
this.setChanges(false);
|
this.addPopup('Processing will retry automatically');
|
}
|
}
|
|
getPendingItems() {
|
return [...this.queue.values()].filter(item =>
|
item.status === 'queued'
|
);
|
}
|
|
async processBatchWithIsolation(batch) {
|
const batchResults = [];
|
|
// Process each item with error isolation
|
for (const item of batch) {
|
try {
|
const result = await this.processItem(item);
|
batchResults.push({ id: item.id, success: true, result });
|
} catch (error) {
|
console.error(`Failed to process item ${item.id}:`, error);
|
batchResults.push({ id: item.id, success: false, error: error.message });
|
}
|
}
|
|
// Batch update all results
|
const updates = batchResults.map(result => ({
|
id: result.id,
|
data: result.success ?
|
{ status: 'pending', sent_at: Date.now() } :
|
{
|
status: 'failed',
|
error_message: result.error,
|
retries: (this.queue.get(result.id)?.retries || 0) + 1,
|
failed_at: Date.now()
|
}
|
}));
|
|
updates.forEach(item => this.updateItem(item.id, item.data, {skipSave: true}));
|
await this.saveQueue();
|
}
|
|
getOptimalBatchSize() {
|
const systemLoad = this.getSystemLoad();
|
|
if (systemLoad < 0.3) return 5; // Low load - larger batches
|
if (systemLoad < 0.6) return 3; // Medium load - medium batches
|
return 1; // High load - single items
|
}
|
|
getSystemLoad() {
|
// Simple heuristic based on queue size and active operations
|
const queueSize = this.queue.size;
|
const activeCount = [...this.queue.values()]
|
.filter(item => ['localProcessing', 'uploading'].includes(item.status)).length;
|
|
return Math.min((queueSize + activeCount * 2) / 20, 1);
|
}
|
|
sendUpdate(item) {
|
if ('onUpdate' in item && typeof item.onUpdate === "function") {
|
console.log('Calling on update for item');
|
item.onUpdate(item);
|
}
|
}
|
sendComplete(item) {
|
if ('onComplete' in item && typeof item.onComplete === "function") {
|
item.onComplete(item);
|
}
|
}
|
|
async processItem(item) {
|
console.log('Processing item:', item.id, item.title);
|
this.a11y.announce(`Processing ${item.title}...`);
|
this.updateItem(item.id, {status: 'localProcessing'});
|
|
try {
|
let result = await this.makeRequest(item);
|
|
this.updateItem(item.id, {
|
status: 'pending',
|
result: result,
|
sent_at: Date.now()
|
});
|
|
this.a11y.announce(`${item.title} sent to server for processing`);
|
|
// Only start polling if we're not already polling
|
if (!this.polling.isActive) {
|
console.log('Starting polling for pending server operations');
|
this.startPolling();
|
}
|
|
} catch (error) {
|
const result = await window.jvbError.log(error, {
|
component: 'QueueManager',
|
operation: 'processItem',
|
operationId: item.id
|
}, () => this.makeRequest(item)); // Retry callback
|
|
if (!result.retried) {
|
this.updateItem(item.id, {
|
status: (item.retries || 0) >= this.maxRetries ? 'failed_permanent' : 'failed',
|
error_message: result.message,
|
retries: (item.retries || 0) + 1
|
});
|
}
|
}
|
}
|
|
/**
|
* Send operation to server
|
* @param item
|
* @returns {Promise<any>}
|
*/
|
async makeRequest(item) {
|
this.updateItem(item.id, {status: 'uploading'});
|
|
// Check if data is FormData
|
const isFormData = item.data instanceof FormData;
|
|
let headers = {
|
'X-WP-Nonce': jvbSettings.nonce,
|
...item.headers
|
};
|
|
// Only set Content-Type for non-FormData requests
|
if (!isFormData) {
|
headers['Content-Type'] = 'application/json';
|
}
|
|
console.log('Sending Data...', item.data);
|
|
let requestBody;
|
|
if (isFormData) {
|
// For FormData, append user and id directly to the FormData
|
item.data.append('user', jvbSettings.currentUser);
|
item.data.append('id', item.id);
|
requestBody = item.data;
|
} else if (typeof item.data === "object") {
|
// For regular objects, JSON stringify as before
|
item.data['user'] = jvbSettings.currentUser;
|
item.data['id'] = item.id;
|
requestBody = JSON.stringify(item.data);
|
} else {
|
// For strings or other data types
|
requestBody = item.data;
|
}
|
|
try {
|
const response = await fetch (`${jvbSettings.api}${item.endpoint}`,
|
{
|
method: item.method,
|
headers,
|
body: requestBody
|
});
|
if (!response.ok) {
|
const errorData = await response.json().catch(() => ({}));
|
throw new Error(errorData.message || `Request failed with status ${response.status}`);
|
}
|
|
return await response.json();
|
} catch (error) {
|
throw error;
|
}
|
|
}
|
|
/**
|
* Smart polling with backoff
|
*/
|
async startPolling() {
|
if (this.polling.isActive) return;
|
|
this.polling.isActive = true;
|
this.polling.consecutiveNoChanges = 0;
|
this.polling.startTime = Date.now();
|
|
const poll = async () => {
|
try {
|
if (!this.shouldContinuePolling()) {
|
this.stopPolling();
|
return;
|
}
|
|
const result = await this.cache.fetchWithCache(
|
`${this.API}?${new URLSearchParams({ polling: 'true' })}`,
|
{ method: 'GET', headers: this.defaultHeaders },
|
{
|
maxAge: 30000,
|
content: 'queue_polling',
|
timeout: 15000
|
}
|
);
|
|
if (result.operations && Array.isArray(result.operations)) {
|
const hasChanges = this.processPollingData(result.operations);
|
this.polling.consecutiveNoChanges = hasChanges ? 0 : this.polling.consecutiveNoChanges + 1;
|
} else {
|
this.polling.consecutiveNoChanges++;
|
}
|
|
const delay = this.calculatePollingDelay();
|
if (this.polling.isActive) {
|
this.polling.interval = setTimeout(poll, delay);
|
}
|
|
} catch (error) {
|
await window.jvbError.log(error, {
|
component: 'QueueManager',
|
operation: 'polling',
|
consecutiveFailures: this.polling.consecutiveNoChanges,
|
isActive: this.polling.isActive
|
});
|
|
this.polling.consecutiveNoChanges++;
|
|
if (this.polling.isActive && this.shouldContinuePolling()) {
|
const errorDelay = Math.min(this.polling.max, 30000);
|
this.polling.interval = setTimeout(poll, errorDelay);
|
} else {
|
this.stopPolling();
|
}
|
}
|
};
|
|
poll();
|
}
|
|
calculatePollingDelay() {
|
const baseDelay = this.polling.base;
|
const maxDelay = this.polling.max;
|
|
// Exponential backoff based on consecutive no-changes
|
const backoffMultiplier = Math.min(
|
Math.pow(1.5, this.polling.consecutiveNoChanges),
|
8 // Cap the multiplier
|
);
|
|
// Reduce frequency if user is inactive
|
const inactivityMultiplier = this.isUserActive() ? 1 : 2;
|
|
return Math.min(
|
baseDelay * backoffMultiplier * inactivityMultiplier,
|
maxDelay
|
);
|
}
|
|
isUserActive() {
|
return this.polling.lastActivity &&
|
(Date.now() - this.polling.lastActivity) < 60000; // 1 minute
|
}
|
|
processPollingData(operations) {
|
if (operations.length === 0) return false;
|
|
let hasChanges = false;
|
|
// Update operations from server (batch at end)
|
for (const operation of operations) {
|
const localItem = this.queue.get(operation.id);
|
|
if (!localItem) {
|
// New operation from server
|
this.updateItem(operation.id, operation, { skipSave: true });
|
hasChanges = true;
|
} else if (localItem.status !== operation.status ||
|
localItem.progress_percentage !== operation.progress_percentage) {
|
// Status or progress changed
|
this.updateItem(operation.id, operation, { skipSave: true });
|
hasChanges = true;
|
}
|
}
|
|
// Remove operations completed/dismissed on server
|
const serverIds = new Set(operations.map(op => op.id));
|
for (const [localId, localItem] of this.queue) {
|
if (!serverIds.has(localId) &&
|
['pending', 'processing'].includes(localItem.status)) {
|
this.removeItem(localId, 'server-completed', { skipSave: true });
|
hasChanges = true;
|
}
|
}
|
|
// Single save if any changes
|
if (hasChanges) {
|
this.saveQueue();
|
console.debug(`Polling update completed`);
|
}
|
|
return hasChanges;
|
}
|
/**
|
* Check if polling should continue
|
* @returns {boolean} Whether to continue polling
|
*/
|
shouldContinuePolling() {
|
// Stop if offline
|
if (!navigator.onLine) {
|
return false;
|
}
|
|
// Check for local items that need server monitoring
|
const pendingServerItems = [...this.queue.values()].filter(item =>
|
['pending', 'processing', 'uploading'].includes(item.status)
|
);
|
|
// If we have items waiting on the server, keep polling
|
if (pendingServerItems.length > 0) {
|
return true;
|
}
|
|
// Also stop if user has been inactive for too long
|
const isUserInactive = this.polling.lastActivity &&
|
(Date.now() - this.polling.lastActivity) > (5 * 60 * 1000); // 5 minutes
|
|
if (isUserInactive) {
|
console.log('User inactive for 5+ minutes - stopping polling');
|
return false;
|
}
|
|
// Stop polling if no server-pending items
|
return false;
|
}
|
|
stopPolling() {
|
this.polling.isActive = false;
|
if (this.polling.interval) {
|
clearTimeout(this.polling.interval);
|
this.polling.interval = null;
|
}
|
console.log('Polling stopped');
|
}
|
|
|
/**
|
* Fetch specific operation by ID
|
*/
|
async fetchOperation(operationId) {
|
return await this.fetchOperations(true, {
|
ids: operationId,
|
limit: 1
|
});
|
}
|
|
|
/**
|
* Load queue from cache - now just 12 lines!
|
*/
|
async loadQueue() {
|
try {
|
const [queueMap, metadata] = await Promise.all([
|
this.cache.getItem('user_queue', 'queue'),
|
this.cache.getItem('queue_metadata', 'queue')
|
]);
|
|
if (queueMap instanceof Map && queueMap.size > 0) {
|
console.debug(`Loading ${queueMap.size} queue items from cache`);
|
this.queue.clear();
|
|
const updates = Array.from(queueMap.entries()).map(([id, item]) => ({
|
id, data: item
|
}));
|
|
updates.forEach(item => this.updateItem(item.id, item.data, {skipSave: true}));
|
await this.saveQueue();
|
} else {
|
this.queue = new Map();
|
}
|
|
this.updateUIFromLoadedQueue();
|
|
} catch (error) {
|
await window.jvbError.log(error, {
|
component: 'QueueManager',
|
operation: 'loadQueue',
|
action: 'cache_recovery'
|
});
|
|
this.queue = new Map();
|
this.addPopup('Queue data recovered');
|
}
|
}
|
|
/**
|
* Save queue to cache
|
*/
|
async saveQueue() {
|
try {
|
const filteredQueue = this.filterQueueForSaving();
|
const stats = this.getQueueStats();
|
|
await Promise.all([
|
this.cache.setItem('user_queue', filteredQueue, 'queue'),
|
this.cache.setItem('queue_stats', stats, 'queue'),
|
this.cache.setItem('queue_metadata', {
|
lastSaved: Date.now(),
|
version: '1.0',
|
totalOperations: filteredQueue.size,
|
hasChanges: this.hasChanges
|
}, 'queue')
|
]);
|
|
} catch (error) {
|
const result = await window.jvbError.log(error, {
|
component: 'QueueManager',
|
operation: 'saveQueue',
|
queueSize: this.queue.size
|
}, () => this.saveQueue()); // Retry callback
|
|
if (!result.retried) {
|
// Fallback save
|
try {
|
await this.cache.setItem('user_queue', new Map(), 'queue');
|
} catch (fallbackError) {
|
console.warn('Even fallback save failed');
|
}
|
}
|
}
|
}
|
|
/**
|
* Helper: Filter queue items that should be saved
|
*/
|
filterQueueForSaving() {
|
const filteredQueue = new Map();
|
|
for (const [id, item] of this.queue) {
|
if (this.shouldSaveItem(item)) {
|
filteredQueue.set(id, item);
|
}
|
}
|
|
return filteredQueue;
|
}
|
|
/**
|
* Helper: Determine if an item should be persisted
|
*/
|
shouldSaveItem(item) {
|
// Always save active items
|
if (['queued', 'localProcessing', 'uploading'].includes(item.status)) {
|
return true;
|
}
|
|
// Save recent completed items (1 hour)
|
if (item.status === 'completed' && item.completed_at) {
|
const oneHourAgo = Date.now() - (60 * 60 * 1000);
|
return new Date(item.completed_at).getTime() > oneHourAgo;
|
}
|
|
// Save failed items that can still be retried
|
return (item.status === 'failed' || item.status === 'failed_permanent') &&
|
item.retries < this.maxRetries;
|
}
|
|
/**
|
* Get queue statistics
|
*
|
* @returns {Object} Queue statistics by status
|
*/
|
getQueueStats() {
|
const stats = {};
|
|
// Initialize all statuses to 0
|
this.statuses.forEach(status => {
|
stats[status] = 0;
|
});
|
|
// Count items by status
|
for (const item of this.queue.values()) {
|
if (stats[item.status] !== undefined) {
|
stats[item.status]++;
|
}
|
}
|
|
return stats;
|
}
|
|
/**
|
*
|
* UI Updates
|
*
|
*/
|
/**
|
* Enhanced action buttons with cancel support
|
*/
|
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.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;
|
|
dismissBtn.classList.add('dismiss');
|
dismissBtn.textContent = 'Dismiss';
|
|
container.appendChild(retryBtn);
|
container.appendChild(dismissBtn);
|
break;
|
|
case 'completed':
|
// Show dismiss button only
|
const dismissCompletedBtn = window.getTemplate('button');
|
dismissCompletedBtn.classList.add('dismiss');
|
dismissCompletedBtn.textContent = 'Dismiss';
|
container.appendChild(dismissCompletedBtn);
|
break;
|
}
|
}
|
|
/**
|
* Update Queue Item
|
* @param id
|
* @param newData
|
* @param {object} options
|
* @param {bool} options.skipSave If you don't want to update the queue
|
* @param {bool} options.skipUI If you don't want to update the UI
|
* @returns {Promise<{item: any, wasNew: boolean, oldStatus: null}>}
|
*/
|
async updateItem(id, newData, options = {}) {
|
const wasNew = !this.queue.has(id);
|
let oldStatus = null;
|
let oldItem = null;
|
|
if (wasNew) {
|
//Check queue for any item in the queue with the same endpoint and that canMerge === true
|
let pendingItems = this.getPendingItems();
|
if (pendingItems.length > 0) {
|
for (const item of pendingItems) {
|
if (item.canMerge && item.endpoint === newData.endpoint){
|
let mergeData = window.deepMerge(item.data, newData.data);
|
newData = item;
|
id = newData.id;
|
newData.data = mergeData;
|
break;
|
}
|
}
|
}
|
// Create new item with defaults
|
const item = {
|
id: id,
|
endpoint: false,
|
method: 'POST',
|
headers: {},
|
canMerge: true,
|
title: 'Queue operation',
|
popup: 'Processing...',
|
user: jvbSettings.currentUser,
|
started_at: Date.now(),
|
status: 'queued',
|
retries: 0,
|
dependencies: [],
|
type: false,
|
data: false,
|
...newData
|
};
|
this.queue.set(id, item);
|
console.log(`Created new queue item: ${id}`);
|
} else {
|
// Update existing item
|
oldItem = this.queue.get(id);
|
oldStatus = oldItem.status;
|
|
// Deep merge for data, shallow merge for other properties
|
const updated = {
|
...oldItem,
|
...newData
|
};
|
|
// Special handling for data merging if both exist
|
if (oldItem.data && newData.data && typeof oldItem.data === 'object' && typeof newData.data === 'object') {
|
updated.data = window.deepMerge(oldItem.data, newData.data);
|
}
|
|
this.queue.set(id, updated);
|
}
|
|
const item = this.queue.get(id);
|
|
// Handle status change side effects
|
if (oldStatus !== item.status) {
|
this.handleStatusChange(item, oldStatus, wasNew);
|
}
|
|
// Always save and update UI unless explicitly skipped
|
if (!options.skipSave) {
|
await this.saveQueue();
|
}
|
if (!options.skipUI) {
|
this.scheduleUIUpdate(id, item);
|
}
|
|
return { item, wasNew, oldStatus };
|
}
|
|
handleStatusChange(item, oldStatus) {
|
// Start polling if server-pending
|
if (['pending', 'processing'].includes(item.status) && !this.polling.isActive) {
|
this.startPolling();
|
}
|
|
if(oldStatus && item.status !== oldStatus) {
|
if (['completed', 'failed_permanent'].includes(item.status)){
|
this.sendComplete(item);
|
} else {
|
this.sendUpdate(item);
|
}
|
}
|
}
|
|
/**
|
* THE ONLY removeItem method - replaces all duplicates
|
* @param id The Operation ID
|
* @param {string} reason An optional message
|
* @param {object} options Optional options Including:
|
* @param {bool} options.skipSave Whether to skip saving the queue
|
* @param {bool} options.skipUI Whether to skip UI updates
|
*/
|
async removeItem(id, reason = 'dismissed', options = {}) {
|
const item = this.queue.get(id);
|
if (!item) {
|
console.warn(`Attempted to remove non-existent item: ${id}`);
|
return false;
|
}
|
|
// Log removal for debugging
|
console.log(`Removing queue item ${id} (${item.title}) - reason: ${reason}`);
|
|
// Handle removal side effects
|
this.handleItemRemoval(item, reason);
|
|
// Remove from queue
|
this.queue.delete(id);
|
|
// Always save and update UI unless explicitly skipped
|
if (!options.skipSave) {
|
await this.saveQueue();
|
}
|
if (!options.skipUI) {
|
this.scheduleUIUpdate(id, null);
|
}
|
|
return true;
|
}
|
|
handleItemRemoval(item, reason) {
|
// Clear any related timeouts/intervals
|
if (item.retryTimeout) {
|
clearTimeout(item.retryTimeout);
|
}
|
|
// Log analytics/metrics
|
if (reason === 'completed') {
|
console.log(`Operation completed: ${item.title} (${Date.now() - item.started_at}ms)`);
|
}
|
|
// Clean up any temporary data
|
if (item.data instanceof FormData) {
|
// FormData cleanup if needed
|
console.log('Cleaned up FormData for removed item');
|
}
|
}
|
|
/**
|
* Schedule UI update (batched)
|
*/
|
scheduleUIUpdate(itemId, item = null) {
|
this.pendingUIUpdates.set(itemId, item);
|
if (!this.uiUpdateScheduled) {
|
this.uiUpdateScheduled = true;
|
requestAnimationFrame(() => {
|
this.processPendingUIUpdates();
|
this.uiUpdateScheduled = false;
|
});
|
}
|
}
|
|
/**
|
* Process all pending UI updates in a single batch
|
*/
|
processPendingUIUpdates() {
|
if (this.pendingUIUpdates.size === 0) return;
|
|
const updates = new Map(this.pendingUIUpdates);
|
this.pendingUIUpdates.clear();
|
|
// Process all updates
|
for (const [itemId, item] of updates) {
|
if (item === null) {
|
this.removeItemFromUI(itemId);
|
} else {
|
this.updateItemInUI(item);
|
}
|
}
|
|
// Update global UI state once after all items processed
|
this.updateGlobalUIState();
|
}
|
|
/**
|
* Update or create a single item in the UI
|
*/
|
updateItemInUI(item) {
|
let listItem = this.queuedItems.querySelector(`.item[data-id="${item.id}"]`);
|
|
if (!listItem) {
|
listItem = this.createItemElement(item);
|
this.queuedItems.prepend(listItem);
|
} else {
|
this.updateItemElement(listItem, item);
|
}
|
}
|
|
/**
|
* Remove item from UI with animation
|
*/
|
removeItemFromUI(itemId) {
|
const element = this.queuedItems.querySelector(`.item[data-id="${itemId}"]`);
|
if (!element) return;
|
|
element.style.transition = 'opacity 0.3s ease-out, transform 0.3s ease-out';
|
element.style.opacity = '0';
|
element.style.transform = 'translateX(-100%)';
|
|
setTimeout(() => {
|
element.remove();
|
this.updateGlobalUIState();
|
}, 300);
|
}
|
|
/**
|
* Create a new item element
|
*/
|
createItemElement(item) {
|
const listItem = window.getTemplate('queueItem');
|
listItem.dataset.id = item.id;
|
this.updateItemElement(listItem, item);
|
return listItem;
|
}
|
|
/**
|
* Update an existing item element
|
*/
|
updateItemElement(element, 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}%`;
|
|
if (item.status === 'processing' && item.estimated_completion) {
|
const estimatedEl = element.querySelector('.estimated-completion');
|
if (estimatedEl) {
|
const remaining = window.formatTimeSoon(new Date(item.estimated_completion));
|
estimatedEl.textContent = `Est. ${remaining}`;
|
}
|
}
|
|
// Update action buttons
|
const actionsContainer = element.querySelector('.actions');
|
if (actionsContainer) {
|
this.updateActionButtons(item, actionsContainer);
|
}
|
}
|
|
/**
|
* Update global UI state (status, counts, etc.)
|
*/
|
updateGlobalUIState() {
|
this.updateStatusPanel();
|
this.updateFilterCounts();
|
this.maybeAddEmptyState();
|
}
|
|
/**
|
* Helper: Update UI after loading queue
|
*/
|
updateUIFromLoadedQueue() {
|
// Schedule updates for all loaded items
|
for (const item of this.queue.values()) {
|
this.scheduleUIUpdate(item.id, item);
|
}
|
|
// Check if there are pending changes
|
this.setChanges([...this.queue.values()].some(item =>
|
['queued', 'localProcessing', 'uploading'].includes(item.status)
|
));
|
|
if (this.hasChanges) {
|
this.updateStatusPanel('pending');
|
}
|
}
|
/**
|
* Update filter counts
|
*/
|
updateFilterCounts() {
|
const stats = this.getQueueStats();
|
|
if (this.filterButtons) {
|
this.filterButtons.forEach(button => {
|
const filter = button.dataset.filter;
|
if (!filter || filter === 'all') return;
|
|
const count = stats[filter] || 0;
|
button.dataset.count = count;
|
|
// Update badge
|
let badge = button.querySelector('.count-badge');
|
if (count > 0) {
|
if (!badge) {
|
badge = document.createElement('span');
|
badge.className = 'count-badge';
|
button.appendChild(badge);
|
}
|
badge.textContent = count;
|
} else if (badge) {
|
badge.remove();
|
}
|
});
|
}
|
}
|
|
/**
|
* Update status panel
|
*
|
* @param {string} status Special status to display
|
*/
|
updateStatusPanel(status) {
|
if (!this.panel) return;
|
|
// Get pending count for badge
|
const pendingCount = [...this.queue.values()].filter(item =>
|
['queued', 'localProcessing', 'uploading'].includes(item.status)
|
).length;
|
|
// Update indicator status
|
this.panel.classList.remove('offline', 'pending', 'synced', 'image_processing');
|
|
if (!navigator.onLine) {
|
this.panel.classList.add('offline');
|
this.addPopup('Looks like we\'re offline...');
|
} else if (status === 'pending' || pendingCount > 0) {
|
this.panel.classList.add('pending');
|
} else if (status === 'image_processing') {
|
this.panel.classList.add('image_processing');
|
this.addPopup('Processing images...');
|
} else if (status === 'synced' || pendingCount === 0) {
|
this.panel.classList.add('synced');
|
}
|
|
// Update queue stats
|
this.updateQueueStats();
|
}
|
|
/**
|
* Update queue statistics
|
*/
|
updateQueueStats() {
|
// Calculate stats
|
const stats = this.getQueueStats();
|
|
// Update filter buttons with counts
|
Object.entries(stats).forEach(([status, count]) => {
|
const button = this.statusButtons[status];
|
if (button) {
|
button.dataset.count = count;
|
|
// Update count badge
|
if (count > 0) {
|
let badge = button.querySelector('.count');
|
if (!badge) {
|
badge = document.createElement('span');
|
badge.className = 'count';
|
button.appendChild(badge);
|
}
|
badge.textContent = count;
|
} else {
|
const badge = button.querySelector('.count');
|
if (badge) {
|
badge.remove();
|
}
|
}
|
}
|
});
|
|
// Update the status indicator badge
|
const badgeCount = stats.queued + stats.localProcessing + stats.uploading;
|
const statusIndicator = this.panel.querySelector('.queue-status-indicator');
|
const statusCount = this.panel.querySelector('.queue-status-count');
|
|
if (statusIndicator) {
|
statusIndicator.classList.toggle('active', badgeCount > 0);
|
}
|
|
if (statusCount) {
|
statusCount.textContent = badgeCount > 0 ? badgeCount : '';
|
}
|
|
// Update action buttons
|
if (this.retryButton) {
|
this.retryButton.disabled = stats.failed === 0;
|
}
|
|
this.dismissButton.disabled = stats.completed === 0;
|
}
|
/**
|
* Show popup message
|
*
|
* @param {string} message Message to show
|
* @param {number} delay Time in ms to show popup
|
*/
|
addPopup(message, delay = 2000) {
|
if (!this.popup) return;
|
|
this.a11y.announce(message);
|
this.popup.innerHTML = message;
|
this.popup.classList.add('showing');
|
|
setTimeout(() => {
|
this.popup.classList.remove('showing');
|
setTimeout(() => {
|
// Clear popup content after fadeout
|
while (this.popup.firstChild) {
|
this.popup.removeChild(this.popup.firstChild);
|
}
|
}, 50);
|
}, delay);
|
}
|
|
|
calculateProgress(item) {
|
// Use server-provided progress percentage if available
|
if (item.progress_percentage !== undefined) {
|
return Math.max(0, Math.min(100, item.progress_percentage));
|
}
|
|
// Fallback to status-based progress
|
switch (item.status) {
|
case 'queued':
|
case 'failed':
|
case 'failed_permanent':
|
return 0;
|
case 'localProcessing':
|
return 5;
|
case 'uploading':
|
return 40;
|
case 'pending':
|
return 65;
|
case 'processing':
|
return 85;
|
case 'completed':
|
return 100;
|
default:
|
return 0;
|
}
|
}
|
/**
|
* Get status label for display
|
*
|
* @param {string} status Operation status
|
* @returns {string} Human-readable status
|
*/
|
getStatusLabel(status) {
|
switch (status) {
|
case 'queued':
|
return 'Received';
|
case 'localProcessing':
|
return 'Processing Data';
|
case 'uploading':
|
return 'Sending to Server';
|
case 'pending':
|
return 'Sent to Server';
|
case 'processing':
|
return 'Server processing';
|
case 'completed':
|
return 'Completed';
|
case 'failed':
|
return 'Failed';
|
case 'failed_permanent':
|
return 'Failed';
|
default:
|
return status;
|
}
|
}
|
|
/**
|
* Get detailed message for an item
|
*
|
* @param {Object} item Queue item
|
* @returns {string} Detailed message
|
*/
|
getItemMessage(item) {
|
// Server provides better error messages and status info
|
let message = this.statusMessages[item.status] || '';
|
|
// Show progress for processing items
|
if (item.status === 'processing' && item.progress_count && item.count) {
|
message = `Processing ${item.progress_count} of ${item.count}`;
|
if (item.progress_percentage) {
|
message += ` (${item.progress_percentage}%)`;
|
}
|
}
|
|
// Add error if failed
|
if ((item.status === 'failed' || item.status === 'failed_permanent') && item.error_message) {
|
message = `Error: ${item.error_message}`;
|
}
|
|
// Show estimated completion for processing items
|
if (item.status === 'processing' && item.estimated_completion) {
|
const remaining = window.formatTimeSoon(new Date(item.estimated_completion));
|
message += ` • Est. ${remaining}`;
|
}
|
|
return message;
|
}
|
|
cleanup() {
|
// Clear all timeouts and intervals
|
this.stopPolling();
|
|
// Remove all event listeners
|
document.removeEventListener('click', this.clickHandler);
|
window.removeEventListener('online', this.handleOnline);
|
window.removeEventListener('offline', this.handleOffline);
|
window.removeEventListener('beforeunload', this.handleBeforeUnload);
|
document.removeEventListener('keydown', this.handleEscape);
|
|
// Clear activity tracking
|
const events = ['mousedown', 'mousemove', 'keypress', 'scroll', 'touchstart'];
|
events.forEach(event => {
|
document.removeEventListener(event, this.trackActivity);
|
});
|
|
// Clear references
|
this.queue.clear();
|
this.pendingUIUpdates.clear();
|
|
console.log('QueueManager destroyed');
|
}
|
|
/**
|
* Create reply button template
|
*/
|
createReplyButtonTemplate() {
|
const button = document.createElement('button');
|
button.type = 'button';
|
button.className = 'reply';
|
button.dataset.action = 'make-response';
|
button.innerHTML = window.getIcon('reply') + '<span>Reply</span>';
|
return button;
|
}
|
|
/**
|
* Create comments button template
|
*/
|
createCommentsButtonTemplate() {
|
const button = document.createElement('a');
|
button.className = 'button';
|
button.innerHTML = window.getIcon('response') + '{ <span class="count"></span> }';
|
return button;
|
}
|
|
/**
|
* Create vote buttons template
|
*/
|
createVoteButtonsTemplate() {
|
const vote = document.createElement('div');
|
vote.className = 'vote';
|
vote.innerHTML = `
|
<button type="button" class="up" onClick="handleVote(this)"
|
data-vote="up">${window.getIcon('upvoted') + window.getIcon('upvote')}
|
<span>{ <span class="count">0</span> }</span>
|
</button>
|
<button type="button" class="down" onClick="handleVote(this)"
|
data-vote="down">${window.getIcon('downvoted') + window.getIcon('downvote')}
|
<span>{ <span class="count">0</span> }</span>
|
</button>
|
`;
|
return vote;
|
}
|
}
|
//
|
// document.addEventListener('DOMContentLoaded', () => {
|
// window.jvbQueue = new QueueManager();
|
// });
|
|
// Theme switching functionality
|
document.addEventListener('DOMContentLoaded', function() {
|
const themeSwitch = document.getElementById('theme-switch');
|
|
if (!themeSwitch) return;
|
|
// Initialize theme from localStorage or system preference
|
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
|
const storedTheme = localStorage.getItem('theme');
|
|
if (storedTheme) {
|
document.documentElement.classList.toggle('dark', storedTheme === 'dark');
|
themeSwitch.checked = storedTheme === 'dark';
|
} else {
|
document.documentElement.classList.toggle('dark', prefersDark.matches);
|
themeSwitch.checked = prefersDark.matches;
|
}
|
|
// Handle theme switch changes
|
themeSwitch.addEventListener('change', async function () {
|
const isDark = this.checked;
|
document.documentElement.classList.toggle('dark', isDark);
|
localStorage.setItem('theme', isDark ? 'dark' : 'light');
|
|
// If user is logged in, save preference
|
if (jvbSettings.currentUser !== null) {
|
try {
|
await fetch(`${jvbSettings.api}settings`, {
|
method: 'POST',
|
headers: {
|
'Content-Type': 'application/json',
|
'X-WP-Nonce': jvbSettings.nonce,
|
'action_nonce': jvbSettings.dash,
|
},
|
body: JSON.stringify({
|
dark_mode: isDark
|
})
|
});
|
} catch (error) {
|
console.error('Failed to save theme preference:', error);
|
}
|
}
|
|
// Update label
|
const label = document.getElementById('theme-switch');
|
if (label) {
|
label.title = isDark ? 'Toggle Light Mode' : 'Toggle Dark Mode';
|
}
|
});
|
|
// Handle system theme changes
|
prefersDark.addEventListener('change', (e) => {
|
if (!localStorage.getItem('theme')) {
|
const isDark = e.matches;
|
document.documentElement.classList.toggle('dark', isDark);
|
themeSwitch.checked = isDark;
|
}
|
});
|
});
|
|
// window.addEventListener('beforeunload', () => window.jvbQueue?.cleanup());
|
