/**
|
* Refactor statuses:
|
* 1) queued - local queue
|
* 1) localProcessing - any local processing that can be done in the browser
|
* 2) uploading - sending to server
|
* 3) pending; x in line - sent to server, waiting
|
* 4) processing - server actively working on it
|
* 5) completed - with optional refresh
|
*/
|
class QueueManagerBackup {
|
constructor() {
|
// localStorage.clear();
|
//Core components
|
this.a11y = window.jvbA11y;
|
this.errors = window.jvbError;
|
this.cache = window.jvbCache;
|
|
//Config
|
this.STORAGE_KEY = 'jvb_queue';
|
this.API = `${jvbSettings.api}queue`;
|
this.maxRetries = 3;
|
|
//Initialize State
|
this.queue = new Map();
|
this.hasChanges = false;
|
this.processing = false;
|
this.lastPollTime = null;
|
|
//Status Tracking
|
this.statuses = [
|
'queued', // Local, waiting to be sent
|
'localProcessing', // Being processed client-side
|
'uploading', // Being sent to server
|
'pending', // On server, waiting to be processed
|
'processing', // Server is actively processing
|
'completed', // Successfully completed
|
'failed', // Failed, can be retried
|
'failed_permanent' // Failed too many times
|
];
|
|
//Initialize UI
|
this.loadTemplates();
|
this.initUI();
|
|
// Operation type handlers
|
this.processors = {
|
'handle_vote': this.processVote.bind(this),
|
'invite_artist': this.processArtistInvite.bind(this),
|
'new_news': this.processNewNews.bind(this),
|
'new_response': this.processNewResponse.bind(this),
|
'bio_update': this.processBioUpdate.bind(this),
|
'favourite_toggle': this.processFavourite.bind(this),
|
'favourite_notes': this.processFavouriteNotes.bind(this),
|
'favourite_list_create': this.processFavouriteListCreate.bind(this),
|
'favourite_list_add': this.processFavouriteListAddItems.bind(this),
|
'favourite_list_remove': this.processFavouriteListRemoveItems.bind(this),
|
'favourite_list_delete': this.processFavouriteListDelete.bind(this),
|
'favourite_list_share': this.processFavouriteListShare.bind(this),
|
'favourite_list_unshare': this.processFavouriteListUnshare.bind(this),
|
'user_settings': this.processSettingsUpdate.bind(this),
|
'image_upload': this.processFileUpload.bind(this),
|
'content_create': this.processContentCreation.bind(this),
|
'batch_creation': this.processBatchCreation.bind(this),
|
'content_update': this.processContentUpdate.bind(this),
|
};
|
|
// Cache types that need to be cleared after operations
|
this.cacheTypesToClear = {
|
'handle_vote': ['karma'],
|
'new_news': ['news'],
|
'new_response': ['responses', 'news'],
|
'bio_update': ['artist'],
|
'favourite_toggle': ['favourites', 'favouritesManager'],
|
'favourite_notes': ['favouritesManager'],
|
'favourite_list_create': ['list-item', 'favourite-lists'],
|
'favourite_list_add': ['list-item', 'favourite-lists'],
|
'favourite_list_remove': ['list-item', 'favourite-lists'],
|
'favourite_list_delete': ['list-item', 'favourite-lists'],
|
'favourite_list_share': ['list-item', 'favourite-lists'],
|
'favourite_list_unshare': ['list-item', 'favourite-lists'],
|
};
|
|
// Human-readable operation names
|
this.operationNames = {
|
'handle_vote': 'Adding your voice',
|
'new_news': 'New News',
|
'invite_artist': 'Sending Invites...',
|
'new_response': 'Sending in your response',
|
'image_upload': 'Image Upload',
|
'content_update': 'Content Update',
|
'content_create': 'New Content',
|
'user_settings': 'Settings Update',
|
'favourite_toggle': 'Favourite Update',
|
'bio_update': 'Profile Update',
|
'batch_creation': 'Batch Content Creation',
|
'favourite_notes': 'Favourite Notes',
|
'favourite_list_create': 'List Creation',
|
'favourite_list_add': 'List Update',
|
'favourite_list_remove': 'List Update',
|
'favourite_list_delete': 'List Deletion',
|
'favourite_list_share': 'List Sharing',
|
'favourite_list_unshare': 'List Share Removal'
|
};
|
|
// Status messages for UI
|
this.statusMessages = {
|
'queued': 'Waiting to send to server...',
|
'localProcessing': 'Processing locally...',
|
'uploading': 'Sending to server...',
|
'pending': 'In line for processing...',
|
'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;
|
}
|
|
// Load queue from localStorage
|
this.loadQueue();
|
|
// Set up polling configuration
|
this.pollingConfig = {
|
enabled: true,
|
interval: 10000,
|
minInterval: 5000,
|
maxInterval: 60000,
|
countdown: true,
|
backoffFactor: 1.5, // Increase interval by this factor when no changes
|
consecutiveNoChanges: 0, // Track consecutive polls with no changes
|
maxNoChangesCount: 8, // Cap on increasing interval
|
lastETag: null,
|
lastUserActivity: Date.now(),
|
inactiveThreshold: 5 * 60 * 1000
|
};
|
|
// Track user activity
|
this.setupActivityTracking();
|
|
// Set up event listeners
|
this.initEventListeners();
|
|
// Initial fetch of server operations
|
this.fetchOperations(true).then(() => {
|
this.startPolling();
|
});
|
|
// Process queue periodically if there are changes
|
setInterval(() => {
|
if (this.hasChanges) {
|
this.processQueue();
|
}
|
}, 3000);
|
}
|
|
/**
|
* Track user activity to adjust polling
|
*/
|
setupActivityTracking() {
|
const events = ['mousedown', 'mousemove', 'keypress', 'scroll', 'touchstart'];
|
|
events.forEach(event => {
|
document.addEventListener(event, () => {
|
this.pollingConfig.lastUserActivity = Date.now();
|
}, { passive: true });
|
});
|
}
|
|
/**
|
* Initialize UI elements
|
*/
|
initUI() {
|
if (!jvbSettings.currentUser) return;
|
|
// Main panel elements
|
this.panel = document.querySelector('#queue-status-panel');
|
if (!this.panel) return;
|
|
this.panelList = this.panel.querySelector('.queue-list');
|
this.togglePanel = this.panel.querySelector('.queue-status-toggle');
|
this.countdown = this.panel.querySelector('.refresh-countdown');
|
this.refreshButton = this.panel.querySelector('.manual-refresh');
|
this.popup = this.panel.querySelector('.popup');
|
|
// Filter buttons
|
this.filterButtonsContainer = this.panel.querySelector('.queue-filters');
|
this.filterButtons = this.panel.querySelectorAll('.queue-filters .filter');
|
|
// Status-specific filter buttons
|
this.statusButtons = {};
|
this.statuses.forEach(status => {
|
this.statusButtons[status] = this.panel.querySelector(`.filter[data-filter="${status}"]`);
|
});
|
|
// Action buttons
|
this.retryButton = this.panel.querySelector('.retry-failed');
|
this.clearButton = this.panel.querySelector('.dismiss-completed');
|
|
// Initialize status panel
|
this.initStatusPanel();
|
}
|
|
|
|
|
/**
|
* Load HTML templates
|
*/
|
loadTemplates() {
|
this.templates = new Map();
|
|
// Default templates
|
this.templates.set('replyButton', this.createReplyButtonTemplate());
|
this.templates.set('commentsButton', this.createCommentsButtonTemplate());
|
this.templates.set('voteButton', this.createVoteButtonsTemplate());
|
|
// Load templates from DOM
|
document.querySelectorAll('template').forEach(template => {
|
const classes = Array.from(template.classList);
|
if (classes.length > 0) {
|
const item = template.content.cloneNode(true).firstElementChild;
|
classes.forEach(key => {
|
if (!this.templates.has(key)) {
|
this.templates.set(key, item);
|
}
|
});
|
}
|
});
|
}
|
|
/**
|
* Create reply button template
|
*/
|
createReplyButtonTemplate() {
|
const button = document.createElement('button');
|
button.type = 'button';
|
button.className = 'reply';
|
button.dataset.action = 'make-response';
|
button.innerHTML = jvbSettings.icons.reply + '<span>Reply</span>';
|
return button;
|
}
|
|
/**
|
* Create comments button template
|
*/
|
createCommentsButtonTemplate() {
|
const button = document.createElement('a');
|
button.className = 'button';
|
button.innerHTML = jvbSettings.icons.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">${jvbSettings.icons.upvoted + jvbSettings.icons.upvote}
|
<span>{ <span class="count">0</span> }</span>
|
</button>
|
<button type="button" class="down" onClick="handleVote(this)"
|
data-vote="down">${jvbSettings.icons.downvoted + jvbSettings.icons.downvote}
|
<span>{ <span class="count">0</span> }</span>
|
</button>
|
`;
|
return vote;
|
}
|
|
/**
|
* Initialize status panel
|
*/
|
initStatusPanel() {
|
if (!this.panel) return;
|
|
// Toggle panel visibility
|
if (this.togglePanel) {
|
this.togglePanel.addEventListener('click', () => {
|
this.panel.classList.toggle('expanded');
|
this.togglePanel.title = this.panel.classList.contains('expanded')
|
? 'Hide Queue' : 'Show Queue';
|
|
const message = this.panel.classList.contains('expanded')
|
? 'Opened Queue Panel' : 'Closed Queue Panel';
|
this.a11y.announce(message);
|
|
this.maybeAddEmptyState();
|
});
|
}
|
|
// Close panel when clicking outside
|
document.addEventListener('click', (e) => {
|
if (this.panel.classList.contains('expanded') &&
|
!this.panel.contains(e.target) &&
|
e.target !== this.togglePanel) {
|
this.panel.classList.remove('expanded');
|
}
|
});
|
|
// Handle Escape key
|
document.addEventListener('keydown', (e) => {
|
if (e.key === 'Escape' && this.panel.classList.contains('expanded')) {
|
this.panel.classList.remove('expanded');
|
}
|
});
|
|
// Retry failed operations
|
if (this.retryButton) {
|
this.retryButton.addEventListener('click', () => this.retryFailedOperations());
|
}
|
|
// Clear completed operations
|
if (this.clearButton) {
|
this.clearButton.addEventListener('click', () => this.clearCompletedOperations());
|
}
|
|
// Filter buttons
|
if (this.filterButtons) {
|
this.filterButtons.forEach(button => {
|
button.addEventListener('click', () => {
|
this.filterButtons.forEach(btn => btn.classList.remove('active'));
|
button.classList.add('active');
|
|
const filter = button.dataset.filter || 'all';
|
this.fetchOperations(true, {status: filter});
|
});
|
});
|
}
|
|
// Refresh button
|
if (this.refreshButton) {
|
this.refreshButton.addEventListener('click', () => {
|
this.refreshButton.classList.add('refreshing');
|
this.fetchOperations(true, {force: true}).finally(() => {
|
this.refreshButton.classList.remove('refreshing');
|
});
|
});
|
}
|
|
// Item-specific actions
|
this.panelList.addEventListener('click', (e) => {
|
// Retry operation
|
if (e.target.classList.contains('retry-operation')) {
|
const operationItem = e.target.closest('.queue-item');
|
if (operationItem) {
|
this.retryOperation(operationItem.dataset.id);
|
}
|
}
|
|
// Dismiss operation
|
else if (e.target.classList.contains('dismiss-operation')) {
|
const operationItem = e.target.closest('.queue-item');
|
if (operationItem) {
|
this.dismissOperations([operationItem.dataset.id]);
|
}
|
}
|
});
|
|
// Initialize empty state
|
this.maybeAddEmptyState();
|
}
|
|
/**
|
* Set up event listeners
|
*/
|
initEventListeners() {
|
// Network status change
|
window.addEventListener('online', () => {
|
this.updateNetworkIndicator();
|
if (this.hasChanges) {
|
this.processQueue();
|
}
|
});
|
|
window.addEventListener('offline', () => {
|
this.updateNetworkIndicator();
|
this.updateStatusPanel('offline');
|
});
|
|
// Before unload warning for unsaved changes
|
window.addEventListener('beforeunload', (e) => {
|
const hasPendingLocalChanges = [...this.queue.values()].some(item =>
|
['queued', 'localProcessing', 'uploading'].includes(item.status)
|
);
|
|
if (hasPendingLocalChanges) {
|
e.preventDefault();
|
return e.returnValue = 'You have unsaved changes that haven\'t been sent to the server. Are you sure you want to leave?';
|
}
|
});
|
}
|
|
/**
|
* Maybe add empty state message
|
*/
|
maybeAddEmptyState() {
|
if (this.panelList.children.length === 0) {
|
this.panelList.innerHTML = '<div class="no-operations">Everything up to date</div>';
|
this.a11y.announce('Nothing queued.');
|
} else if (this.panelList.children.length > 1 && this.panelList.querySelector('.no-operations')) {
|
this.panelList.querySelector('.no-operations').remove();
|
}
|
}
|
|
/**
|
* Add an operation to the queue
|
*
|
* @param {Object} operation Operation data
|
* @returns {string} Operation ID
|
*/
|
async addToQueue(operation) {
|
// Try to merge with similar operations
|
const mergedOperation = this.mergeOperations(operation);
|
operation = mergedOperation || operation;
|
|
// Generate unique ID
|
const id = this.generateId();
|
|
// Create queue item
|
const item = {
|
id: id,
|
type: operation.type,
|
data: operation.data,
|
user: jvbSettings.currentUser,
|
started_at: Date.now(),
|
status: 'queued',
|
retries: 0,
|
dependencies: operation.dependencies || [],
|
onUpdate: operation.onUpdate??false
|
};
|
|
// Add to queue
|
this.queue.set(id, item);
|
this.saveQueue();
|
|
// Update UI
|
this.updateStatusPanel('pending');
|
this.addPopup(this.getPopupMessage(item));
|
this.hasChanges = true;
|
|
return 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}`;
|
}
|
|
/**
|
* Load queue from localStorage
|
*/
|
loadQueue() {
|
try {
|
const storedData = localStorage.getItem(this.STORAGE_KEY);
|
if (!storedData) return;
|
|
const queueData = JSON.parse(storedData);
|
if (!queueData || !Array.isArray(queueData)) return;
|
|
this.queue = new Map();
|
queueData.forEach(item => {
|
if (item && item.id) {
|
this.queue.set(item.id, item);
|
}
|
});
|
|
// Update UI for loaded items
|
[...this.queue.values()].forEach(item => {
|
this.updatePanelItem(item);
|
});
|
|
// Set hasChanges if there are queued items
|
this.hasChanges = [...this.queue.values()].some(item =>
|
['queued', 'localProcessing', 'uploading'].includes(item.status)
|
);
|
} catch (error) {
|
console.error('Error loading queue:', error);
|
this.queue = new Map();
|
}
|
}
|
|
|
/**
|
* Save queue to localStorage
|
*/
|
saveQueue() {
|
try {
|
// Filter items for storage
|
const queueToSave = [...this.queue.values()].filter(item => {
|
// Keep local items
|
if (['queued', 'localProcessing', 'uploading'].includes(item.status)) {
|
return true;
|
}
|
|
// Keep completed items for a short while
|
if (item.status === 'completed' && item.completed_at) {
|
const hourAgo = Date.now() - (60 * 60 * 1000);
|
return new Date(item.completed_at).getTime() > hourAgo;
|
}
|
|
// Keep failed items that might be retried
|
return (item.status === 'failed' || item.status === 'failed_permanent') &&
|
item.retries < this.maxRetries;
|
});
|
|
// Serialize and store
|
localStorage.setItem(this.STORAGE_KEY, JSON.stringify(queueToSave));
|
|
// Also save stats for quick access
|
localStorage.setItem(
|
this.STORAGE_KEY + '_stats',
|
JSON.stringify(this.getQueueStats())
|
);
|
} catch (error) {
|
console.error('Error saving queue:', error);
|
// If we hit storage limits, clean up
|
this.emergencyQueueCleanup();
|
}
|
}
|
|
/**
|
* Emergency cleanup when storage is full
|
*/
|
emergencyQueueCleanup() {
|
console.warn('Emergency queue cleanup triggered');
|
|
// Keep only essential pending items
|
const tempQueue = this.queue;
|
this.queue = new Map();
|
|
for (const [key, item] of tempQueue.entries()) {
|
if (item && item.status === 'pending') {
|
this.queue.set(key, item);
|
}
|
}
|
|
// Save the reduced queue
|
try {
|
localStorage.setItem(this.STORAGE_KEY, JSON.stringify([...this.queue.values()]));
|
localStorage.removeItem(this.STORAGE_KEY + '_stats');
|
} catch (error) {
|
console.error('Failed even after cleanup:', error);
|
// Last resort - clear everything
|
localStorage.removeItem(this.STORAGE_KEY);
|
localStorage.removeItem(this.STORAGE_KEY + '_stats');
|
}
|
}
|
|
/**
|
* Fetch operations from the server
|
*
|
* @param {boolean} initial Whether this is the initial fetch
|
* @param {Object} options Filter options
|
* @returns {Promise<Object>} Server response
|
*/
|
async fetchOperations(initial = false, options = {}) {
|
this.processing = true;
|
|
// Start loading indicator
|
if (this.refreshButton) {
|
this.refreshButton.classList.add('refreshing');
|
}
|
|
try {
|
// Build query parameters
|
const params = new URLSearchParams();
|
|
if (options.status) {
|
params.append('status', options.status);
|
}
|
|
if (options.ids) {
|
params.append('ids', Array.isArray(options.ids) ? options.ids.join(',') : options.ids);
|
}
|
|
if (options.limit) {
|
params.append('limit', options.limit);
|
}
|
|
const url = `${this.API}?${params.toString()}`;
|
|
// Set up fetch options
|
const fetchOptions = {
|
method: 'GET',
|
headers: {
|
'X-WP-Nonce': jvbSettings.nonce
|
}
|
};
|
|
// Add ETag support
|
if (!initial && !options.force && this.pollingConfig.lastETag) {
|
fetchOptions.headers['If-None-Match'] = this.pollingConfig.lastETag;
|
}
|
|
// Add If-Modified-Since as backup
|
if (!initial && !options.force && this.lastPollTime) {
|
fetchOptions.headers['If-Modified-Since'] = new Date(this.lastPollTime).toUTCString();
|
}
|
|
// Execute fetch
|
const response = await fetch(url, fetchOptions);
|
|
// If 304 Not Modified, nothing has changed
|
if (response.status === 304) {
|
this.pollingConfig.consecutiveNoChanges++;
|
return { operations: [], cached: true };
|
}
|
|
// Store ETag for next request
|
const etag = response.headers.get('ETag');
|
if (etag) {
|
this.pollingConfig.lastETag = etag;
|
}
|
|
// Reset consecutive no changes counter
|
this.pollingConfig.consecutiveNoChanges = 0;
|
|
// Update last poll time
|
this.lastPollTime = new Date().toISOString();
|
|
// Parse response
|
const data = await response.json();
|
|
// Process server operations
|
if (data.operations && Array.isArray(data.operations)) {
|
for (const op of data.operations) {
|
// Convert to expected format
|
const operation = {
|
id: op.id,
|
type: op.type,
|
data: op.data || {},
|
user: op.user_id,
|
status: op.status,
|
retries: op.retries || 0,
|
started_at: op.started_at,
|
created_at: op.created_at,
|
completed_at: op.completed_at,
|
estimated_completion: op.estimated_completion,
|
queue_position: op.queue_position,
|
error_message: op.error_message
|
};
|
|
// Update or add to local queue
|
this.updateItem(op.id, operation);
|
}
|
}
|
|
// Update UI
|
this.maybeAddEmptyState();
|
this.updateStatusPanel();
|
this.updateFilterCounts();
|
|
return data;
|
} catch (error) {
|
console.error('Failed to fetch operations:', error);
|
|
return { operations: [], error: true };
|
} finally {
|
// End loading indicator
|
if (this.refreshButton) {
|
this.refreshButton.classList.remove('refreshing');
|
}
|
this.processing = false;
|
}
|
}
|
|
/**
|
* Update a queue item
|
*
|
* @param {string} id Item ID
|
* @param {Object} newData New data to merge
|
* @returns {boolean} Success
|
*/
|
updateItem(id, newData) {
|
// If item doesn't exist yet, create it
|
if (!this.queue.has(id)) {
|
this.queue.set(id, {
|
id,
|
...newData
|
});
|
this.saveQueue();
|
this.updatePanelItem(this.queue.get(id));
|
return true;
|
}
|
|
// Get existing item
|
const item = this.queue.get(id);
|
const oldStatus = item.status;
|
|
// Merge updates
|
const updated = {
|
...item,
|
...newData
|
};
|
|
// Start polling if server-side processing is happening
|
if (['pending', 'processing'].includes(updated.status) &&
|
oldStatus !== updated.status) {
|
this.startPolling();
|
}
|
|
// Update queue
|
this.queue.set(id, updated);
|
this.saveQueue();
|
|
// Update UI
|
this.updatePanelItem(updated, oldStatus);
|
|
// Handle status transitions
|
if (oldStatus !== updated.status) {
|
this.handleStatusChange(updated, oldStatus);
|
}
|
|
return true;
|
}
|
|
/**
|
* Handle status change for an item
|
*
|
* @param {Object} item Item that changed
|
* @param {string} oldStatus Previous status
|
*/
|
handleStatusChange(item, oldStatus) {
|
// Clear caches when operation completes
|
if (item.status === 'completed' && oldStatus !== 'completed') {
|
const cacheTypes = this.cacheTypesToClear[item.type];
|
if (cacheTypes && cacheTypes.length > 0) {
|
cacheTypes.forEach(cacheType => {
|
this.cache.clearByContent(cacheType);
|
});
|
}
|
|
// Show completion notification
|
this.addPopup(`${this.getOperationTitle(item)} completed`);
|
}
|
// Log failures
|
else if (item.status === 'failed' && oldStatus !== 'failed') {
|
this.errors.logErrorToServer('operation_failed', item.error_message || 'Operation failed', {
|
operation_id: item.id,
|
type: item.type,
|
content_type: item.data.content,
|
retries: item.retries
|
});
|
|
// Show failure notification
|
this.addPopup(`Error: ${item.error_message || 'Unknown error'}`);
|
}
|
}
|
|
/**
|
* Update panel item in the UI
|
*
|
* @param {Object} item Item to update
|
* @param {string} oldStatus Previous status
|
*/
|
updatePanelItem(item, oldStatus = null) {
|
// Find existing panel item or create new one
|
let panelItem = this.panelList.querySelector(`.queue-item[data-id="${item.id}"]`);
|
if (!panelItem) {
|
panelItem = this.createPanelItem(item);
|
return;
|
}
|
|
// Update status classes
|
if (oldStatus) {
|
panelItem.classList.remove(oldStatus);
|
} else {
|
this.statuses.forEach(status => panelItem.classList.remove(status));
|
}
|
panelItem.classList.add(item.status);
|
|
// Update status text
|
const statusElement = panelItem.querySelector('.queue-item-status');
|
if (statusElement) {
|
if (oldStatus) {
|
statusElement.classList.remove(oldStatus);
|
} else {
|
this.statuses.forEach(status => statusElement.classList.remove(status));
|
}
|
statusElement.classList.add(item.status);
|
statusElement.textContent = this.getStatusLabel(item.status);
|
}
|
|
// Update details
|
const details = panelItem.querySelector('.queue-item-details');
|
if (details) {
|
const detailsText = details.querySelector('.details');
|
if (detailsText) {
|
detailsText.textContent = this.getItemMessage(item);
|
}
|
|
// Update completion time if available
|
const completed = details.querySelector('.completed');
|
if (completed && item.completed_at) {
|
completed.textContent = `| Finished: ${window.formatTimeAgo(item.completed_at)}`;
|
}
|
}
|
|
// Update progress bar
|
const progressBar = panelItem.querySelector('.progress-bar .progress-fill');
|
if (progressBar) {
|
progressBar.style.width = `${this.calculateProgressPercentage(item)}%`;
|
}
|
|
// Update action buttons for completed/failed items
|
if (['completed', 'failed', 'failed_permanent'].includes(item.status)) {
|
const actionsContainer = panelItem.querySelector('.queue-item-actions');
|
if (actionsContainer) {
|
actionsContainer.innerHTML = this.renderActionButtons(item);
|
}
|
}
|
}
|
|
/**
|
* Create a new panel item
|
*
|
* @param {Object} item Item to create
|
* @returns {HTMLElement} Created panel item
|
*/
|
createPanelItem(item) {
|
const panelItem = document.createElement('div');
|
panelItem.className = `queue-item ${item.status}`;
|
panelItem.dataset.id = item.id;
|
panelItem.dataset.type = item.type;
|
|
// Format timestamps
|
const timestamp = item.created_at ? new Date(item.created_at).getTime() : item.started_at;
|
const timeDisplay = timestamp ? window.formatTimeAgo(new Date(timestamp)) : '';
|
|
// Calculate progress
|
const progressPercent = this.calculateProgressPercentage(item);
|
|
// Get operation type display name
|
let typeName = this.operationNames[item.type] || item.type;
|
if (typeName && typeName.includes('Content') && item.data && item.data.content) {
|
typeName = typeName.replace('Content', window.uppercaseFirst(item.data.content));
|
}
|
|
// Build HTML
|
panelItem.innerHTML = `
|
<div class="queue-item-header">
|
<span class="queue-item-type">${typeName}</span>
|
<span class="queue-item-status ${item.status}">
|
${this.getStatusLabel(item.status)}
|
</span>
|
${['completed', 'failed', 'failed_permanent'].includes(item.status) ?
|
'<button class="queue-item-dismiss dismiss-operation" title="Dismiss">×</button>' : ''}
|
</div>
|
|
<div class="queue-item-progress">
|
<div class="progress-bar">
|
<div class="progress-fill" style="width: ${progressPercent}%"></div>
|
</div>
|
<div class="progress-details">
|
${item.progress ?
|
`${item.progress.current || 0} of ${item.progress.total || '?'}` : ''}
|
</div>
|
</div>
|
|
<div class="queue-item-details">
|
<div class="details">${this.getItemMessage(item)}</div>
|
<div class="time">
|
${jvbSettings.icons.clock}
|
<span class="started">Started: ${timeDisplay}</span>
|
<span class="completed"></span>
|
</div>
|
</div>
|
|
<div class="queue-item-actions">
|
${this.renderActionButtons(item)}
|
</div>
|
`;
|
|
// Add to panel
|
this.panelList.insertBefore(panelItem, this.panelList.firstChild);
|
|
return panelItem;
|
}
|
|
/**
|
* 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) {
|
// Start with default message
|
let message = this.statusMessages[item.status] || '';
|
|
// Add position info if available
|
if (item.queue_position) {
|
if (item.queue_position === 0) {
|
message += ' You are next in line.';
|
} else {
|
message += ` You are #${item.queue_position} in line.`;
|
}
|
}
|
|
// Add estimated completion time if available
|
if (item.estimated_completion) {
|
message += `\nShould be done ${window.formatTimeSoon(item.estimated_completion)}`;
|
}
|
|
// Add error if failed
|
if ((item.status === 'failed' || item.status === 'failed_permanent') && item.error_message) {
|
message += `\nError: ${item.error_message}`;
|
}
|
|
return item.message || message;
|
}
|
|
/**
|
* Render action buttons for an item
|
*
|
* @param {Object} item Queue item
|
* @returns {string} HTML for action buttons
|
*/
|
renderActionButtons(item) {
|
if (item.status === 'failed' || item.status === 'failed_permanent') {
|
return `
|
<button class="retry-operation" ${item.retries >= this.maxRetries ? 'disabled' : ''}>
|
Retry
|
</button>
|
<button class="dismiss-operation">
|
Dismiss
|
</button>
|
`;
|
}
|
|
if (item.status === 'completed') {
|
// Add refresh button for content updates
|
let refresh = ['batch_creation', 'content_update'].includes(item.type)
|
? '<button class="refresh-content">Refresh</button>'
|
: '';
|
|
return `
|
${refresh}
|
<button class="dismiss-operation">
|
Dismiss
|
</button>
|
`;
|
}
|
|
return '';
|
}
|
|
/**
|
* Calculate progress percentage
|
*
|
* @param {Object} operation Operation
|
* @returns {number} Progress percentage (0-100)
|
*/
|
calculateProgressPercentage(operation) {
|
switch (operation.status) {
|
case 'queued':
|
case 'failed':
|
case 'failed_permanent':
|
return 0;
|
|
case 'localProcessing':
|
// Use progress data if available
|
if (operation.progress && operation.progress.current && operation.progress.total) {
|
return 5 + (35 * (operation.progress.current / operation.progress.total));
|
}
|
return 5;
|
|
case 'uploading':
|
return 40;
|
|
case 'pending':
|
return 65;
|
|
case 'processing':
|
if (operation.data && operation.data.progress) {
|
return 75 + (25 * (operation.data.progress.percentage / 100));
|
}
|
return 85;
|
|
case 'completed':
|
return 100;
|
|
default:
|
return 0;
|
}
|
}
|
|
/**
|
* Get operation title
|
*
|
* @param {Object} item Operation item
|
* @returns {string} Human-readable title
|
*/
|
getOperationTitle(item) {
|
let message = this.operationNames[item.type] || item.type;
|
|
if (message.includes('Content') && item.data && item.data.content) {
|
return message.replace('Content', window.uppercaseFirst(item.data.content));
|
}
|
|
return message;
|
}
|
|
/**
|
* Get popup message for an operation
|
*
|
* @param {Object} item Operation item
|
* @returns {string} Message for popup
|
*/
|
getPopupMessage(item) {
|
switch (item.type) {
|
case 'handle_vote':
|
return 'Adding your voice...';
|
case 'new_response':
|
return 'Adding your voice...';
|
case 'new_news':
|
return 'Creating new news...';
|
case 'image_upload':
|
return 'Uploading image...';
|
case 'user_settings':
|
return 'Updating settings...';
|
case 'content_update':
|
return `Updating ${item.data.content}...`;
|
case 'content_create':
|
return `Creating new ${item.data.content}...`;
|
case 'favourite_toggle':
|
return 'Updating Favourites...';
|
case 'invite_artist':
|
return 'Inviting artists...';
|
case 'bio_update':
|
return 'Updating bio...';
|
case 'batch_creation':
|
return `Sending ${item.data.content} batch to server...`;
|
case 'favourite_notes':
|
return 'Processing note...';
|
case 'favourite_list_create':
|
return 'Processing new list...';
|
case 'favourite_list_add':
|
return 'Processing list changes...';
|
case 'favourite_list_remove':
|
return 'Processing list changes...';
|
case 'favourite_list_delete':
|
return 'Processing deletion...';
|
case 'favourite_list_share':
|
return 'Processing list sharing...';
|
case 'favourite_list_unshare':
|
return 'Processing un-share...';
|
default:
|
return `Processing ${item.type}...`;
|
}
|
}
|
|
/**
|
* 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);
|
}
|
|
|
/**
|
* Update network indicator
|
*/
|
updateNetworkIndicator() {
|
// Update UI based on online status
|
if (this.panel) {
|
this.panel.classList.toggle('offline', !navigator.onLine);
|
}
|
}
|
|
/**
|
* 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-badge');
|
if (!badge) {
|
badge = document.createElement('span');
|
badge.className = 'count-badge';
|
button.appendChild(badge);
|
}
|
badge.textContent = count;
|
} else {
|
const badge = button.querySelector('.count-badge');
|
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;
|
}
|
|
if (this.clearButton) {
|
this.clearButton.disabled = stats.completed === 0;
|
}
|
}
|
|
/**
|
* 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;
|
}
|
|
|
/**
|
* 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();
|
}
|
});
|
}
|
}
|
|
/**
|
* Process the queue
|
*
|
* @returns {Promise<void>}
|
*/
|
async processQueue() {
|
if (!this.hasChanges) return;
|
|
// Check if we're online
|
if (!navigator.onLine) {
|
this.updateStatusPanel('offline');
|
return;
|
}
|
|
try {
|
// Find items that are ready to process
|
const pendingItems = [...this.queue.values()].filter(item =>
|
item.status === 'queued' &&
|
(!item.retryAfter || item.retryAfter <= Date.now())
|
);
|
|
if (pendingItems.length === 0) {
|
this.hasChanges = false;
|
return;
|
}
|
|
// Only process a batch at a time
|
const batchSize = 5;
|
const itemsToProcess = pendingItems.slice(0, batchSize);
|
|
// Update UI
|
this.updateStatusPanel('pending');
|
|
// Process each item
|
for (const item of itemsToProcess) {
|
try {
|
this.a11y.announce(`Now processing ${this.getOperationTitle(item)} locally.`);
|
|
await this.processItem(item);
|
|
this.a11y.announce('Finished sending to server.');
|
} catch (error) {
|
// Log error
|
this.errors.log(error, {
|
component: 'QueueManager',
|
action: 'processQueue',
|
type: item.type,
|
operation_id: item.id
|
});
|
|
// Update item status
|
this.updateItem(item.id, {
|
status: (item.retries >= this.maxRetries - 1) ? 'failed_permanent' : 'failed',
|
error_message: error.message || 'Unknown error',
|
retries: (item.retries || 0) + 1,
|
retryAfter: (item.retries < this.maxRetries - 1) ?
|
Date.now() + (5000 * Math.pow(2, item.retries || 0)) : undefined
|
});
|
|
// Notify user
|
this.addPopup(`Error processing ${this.getOperationTitle(item)}: ${error.message || 'Unknown error'}`);
|
}
|
}
|
|
// Update UI
|
this.updateStatusPanel();
|
|
// Check if there are more items to process
|
const remainingPending = [...this.queue.values()].filter(item =>
|
['queued', 'localProcessing'].includes(item.status)
|
).length;
|
|
if (remainingPending > 0) {
|
// Schedule another processing round
|
setTimeout(() => {
|
this.hasChanges = true;
|
this.processQueue();
|
}, 1000);
|
} else {
|
this.hasChanges = false;
|
this.updateStatusPanel('synced');
|
}
|
} catch (error) {
|
console.error('Error in queue processing:', error);
|
this.addPopup('Whoops! Something went wrong');
|
}
|
}
|
|
/**
|
* Process a single queue item
|
*
|
* @param {Object} item Queue item to process
|
* @returns {Promise<void>}
|
*/
|
async processItem(item) {
|
this.updateItem(item.id, {status: 'localProcessing'});
|
|
try {
|
// Find the processor for this operation type
|
const processor = this.processors[item.type];
|
if (!processor) {
|
throw new Error(`Unknown operation type: ${item.type}`);
|
}
|
|
// Process the item
|
this.a11y.announce(`Processing ${this.getOperationTitle(item)} locally.`);
|
const result = await processor(item);
|
|
// Store result and update status
|
this.updateItem(item.id, {
|
result: result,
|
status: 'pending'
|
});
|
|
this.a11y.announce(`${this.getOperationTitle(item)} sent to server for processing.`);
|
|
// Start polling for status updates
|
this.startPolling();
|
} catch (error) {
|
this.handleProcessError(item, error);
|
throw error;
|
}
|
}
|
|
/**
|
* Handle processing error
|
*
|
* @param {Object} item Item that failed
|
* @param {Error} error The error
|
*/
|
handleProcessError(item, error) {
|
console.error(`Error processing ${item.type}:`, error);
|
|
const errorContext = {
|
operation_id: item.id,
|
type: item.type,
|
content_type: item.data.content,
|
attempt: (item.retries || 0) + 1
|
};
|
|
// Use ErrorHandler
|
this.errors.log(error, {
|
component: 'QueueManager',
|
action: item.type,
|
...errorContext
|
});
|
|
// Update item
|
this.updateItem(item.id, {
|
status: (item.retries >= this.maxRetries - 1) ? 'failed_permanent' : 'failed',
|
error_message: error.message || 'Unknown error',
|
retries: (item.retries || 0) + 1,
|
retryAfter: (item.retries < this.maxRetries - 1) ?
|
Date.now() + (5000 * Math.pow(2, item.retries || 0)) : undefined
|
});
|
|
// Notify user
|
this.addPopup(`Error processing ${this.getOperationTitle(item)}: ${error.message || 'Unknown error'}`);
|
}
|
|
/**
|
* Make API request for an operation
|
*
|
* @param {Object} item Operation item
|
* @param {string} endpoint API endpoint
|
* @param {string} method HTTP method
|
* @param {Object|FormData} data Request data
|
* @param {Object} additionalHeaders Additional headers
|
* @param {string} title Operation title for messages
|
* @returns {Promise<Object>} Response data
|
*/
|
async makeRequest(item, endpoint, method, data, additionalHeaders = {}, title) {
|
this.updateItem(item.id, {status: 'uploading'});
|
|
|
const isFormData = data instanceof FormData;
|
const headers = {
|
'X-WP-Nonce': jvbSettings.nonce,
|
...additionalHeaders
|
};
|
|
if (!isFormData && method !== 'GET') {
|
headers['Content-Type'] = 'application/json';
|
}
|
|
console.log('Sending Data: ',data);
|
|
try {
|
const response = await fetch(`${jvbSettings.api}${endpoint}`, {
|
method,
|
headers,
|
body: isFormData ? data : JSON.stringify(data)
|
});
|
|
|
|
if (!response.ok) {
|
const errorData = await response.json().catch(() => ({}));
|
throw new Error(errorData.message || `Request failed with s[tatus ${response.status}`);
|
}
|
|
return await response.json();
|
} catch (error) {
|
this.handleProcessError(item, error);
|
throw error;
|
}
|
}
|
|
/**
|
* Start polling for operation status updates
|
*/
|
startPolling() {
|
this.stopPolling();
|
|
const interval = this.getPollingInterval();
|
|
// Log polling strategy (remove in production)
|
console.log(`Polling in ${interval}ms (no-changes: ${this.pollingConfig.consecutiveNoChanges})`);
|
|
if (this.pollingConfig.countdown && this.countdown) {
|
this.startCountdown(interval / 1000);
|
}
|
|
this.pollingTimer = setTimeout(() => {
|
this.fetchOperations(false).then((result) => {
|
// Only continue polling if we have pending operations or recent activity
|
const shouldContinue = this.hasServerPendingOperations() ||
|
(Date.now() - this.pollingConfig.lastUserActivity) < this.pollingConfig.inactiveThreshold;
|
|
if (shouldContinue) {
|
this.startPolling();
|
} else {
|
console.log('Stopping polling: no pending operations and user inactive');
|
this.stopPolling();
|
this.updateStatusPanel('synced');
|
}
|
});
|
}, interval);
|
}
|
|
/**
|
* Stop polling
|
*/
|
stopPolling() {
|
if (this.pollingTimer) {
|
clearTimeout(this.pollingTimer);
|
this.pollingTimer = null;
|
}
|
|
if (this.countdownTimer) {
|
clearInterval(this.countdownTimer);
|
this.countdownTimer = null;
|
}
|
|
// Remove refreshing state
|
if (this.refreshButton) {
|
this.refreshButton.classList.remove('refreshing');
|
}
|
}
|
|
/**
|
* Get adaptive polling interval
|
*
|
* @returns {number} Polling interval in milliseconds
|
*/
|
getPollingInterval() {
|
const now = Date.now();
|
const timeSinceActivity = now - this.pollingConfig.lastUserActivity;
|
const isUserActive = timeSinceActivity < this.pollingConfig.inactiveThreshold;
|
|
// Base interval
|
let interval = this.pollingConfig.interval;
|
|
// Increase interval based on consecutive no-changes
|
const noChangesCount = Math.min(
|
this.pollingConfig.consecutiveNoChanges,
|
this.pollingConfig.maxNoChangesCount
|
);
|
|
interval *= Math.pow(this.pollingConfig.backoffFactor, noChangesCount);
|
|
// If user is inactive, poll less frequently
|
if (!isUserActive) {
|
interval *= 3; // Poll 3x less when user is inactive
|
}
|
|
// If we have pending operations, poll more frequently
|
const hasPendingOps = this.hasServerPendingOperations();
|
if (hasPendingOps && isUserActive) {
|
interval = Math.max(interval * 0.5, this.pollingConfig.minInterval);
|
}
|
|
// Clamp between min and max
|
return Math.min(
|
Math.max(interval, this.pollingConfig.minInterval),
|
this.pollingConfig.maxInterval
|
);
|
}
|
|
/**
|
* Start countdown timer
|
*
|
* @param {number} seconds Seconds to count down
|
*/
|
startCountdown(seconds) {
|
// Clear existing countdown
|
if (this.countdownTimer) {
|
clearInterval(this.countdownTimer);
|
}
|
|
if (!this.countdown) return;
|
|
// Set initial value
|
let remainingSeconds = Math.round(seconds);
|
this.countdown.textContent = remainingSeconds;
|
this.countdown.classList.add('counting');
|
|
// Start countdown
|
this.countdownTimer = setInterval(() => {
|
remainingSeconds--;
|
|
if (remainingSeconds <= 0) {
|
clearInterval(this.countdownTimer);
|
this.countdownTimer = null;
|
this.countdown.textContent = '';
|
this.countdown.classList.remove('counting');
|
return;
|
}
|
|
this.countdown.textContent = remainingSeconds;
|
}, 1000);
|
}
|
|
|
/**
|
* Check if there are pending operations on the server
|
*
|
* @returns {boolean} Whether there are pending server operations
|
*/
|
hasServerPendingOperations() {
|
return [...this.queue.values()].some(item =>
|
item.status === 'pending' ||
|
item.status === 'processing'
|
);
|
}
|
|
/**
|
* Retry a failed operation
|
*
|
* @param {string} operationId ID of operation to retry
|
*/
|
retryOperation(operationId) {
|
const operation = this.queue.get(operationId);
|
|
if (operation && (operation.status === 'failed' || operation.status === 'failed_permanent')) {
|
// Send request to server
|
fetch(`${this.API}`, {
|
method: 'POST',
|
headers: {
|
'Content-Type': 'application/json',
|
'X-WP-Nonce': jvbSettings.nonce
|
},
|
body: JSON.stringify({
|
ids: operationId,
|
action: 'retry'
|
})
|
}).then(response => {
|
if (!response.ok) {
|
throw new Error('Failed to retry operation');
|
}
|
return response.json();
|
}).then(data => {
|
if (data.success) {
|
// Update local status
|
this.updateItem(operationId, {
|
status: 'pending',
|
error_message: null
|
});
|
|
// Start polling for status updates
|
this.startPolling();
|
|
// Show notification
|
this.addPopup('Operation queued for retry');
|
}
|
}).catch(error => {
|
console.error('Error retrying operation:', error);
|
this.addPopup('Failed to retry operation');
|
});
|
}
|
}
|
|
/**
|
* Retry all failed operations
|
*/
|
retryFailedOperations() {
|
// Find failed operations
|
const failedIds = [...this.queue.values()]
|
.filter(item =>
|
(item.status === 'failed' || item.status === 'failed_permanent') &&
|
item.retries < this.maxRetries
|
)
|
.map(item => item.id);
|
|
if (failedIds.length === 0) return;
|
|
// Confirm with user
|
if (confirm(`Retry ${failedIds.length} failed operations?`)) {
|
// Send request to server
|
fetch(`${this.API}`, {
|
method: 'POST',
|
headers: {
|
'Content-Type': 'application/json',
|
'X-WP-Nonce': jvbSettings.nonce
|
},
|
body: JSON.stringify({
|
ids: failedIds.join(','),
|
action: 'retry'
|
})
|
}).then(response => {
|
if (!response.ok) {
|
throw new Error('Failed to retry operations');
|
}
|
return response.json();
|
}).then(data => {
|
if (data.success) {
|
// Update local status for each operation
|
failedIds.forEach(id => {
|
this.updateItem(id, {
|
status: 'pending',
|
error_message: null
|
});
|
});
|
|
// Start polling for status updates
|
this.startPolling();
|
|
// Show notification
|
this.addPopup(`Retrying ${failedIds.length} operations...`);
|
}
|
}).catch(error => {
|
console.error('Error retrying operations:', error);
|
this.addPopup('Failed to retry operations');
|
});
|
}
|
}
|
|
/**
|
* Clear completed operations
|
*/
|
clearCompletedOperations() {
|
// Find completed operations
|
const completedIds = [...this.queue.values()]
|
.filter(item => item.status === 'completed')
|
.map(item => item.id);
|
|
if (completedIds.length === 0) return;
|
|
// Dismiss operations
|
this.dismissOperations(completedIds);
|
}
|
|
/**
|
* Dismiss operations
|
*
|
* @param {string[]} operationIds IDs of operations to dismiss
|
*/
|
dismissOperations(operationIds) {
|
if (!operationIds.length) return;
|
|
// Send request to server
|
fetch(`${this.API}`, {
|
method: 'POST',
|
headers: {
|
'Content-Type': 'application/json',
|
'X-WP-Nonce': jvbSettings.nonce
|
},
|
body: JSON.stringify({
|
ids: operationIds.join(','),
|
action: 'dismiss'
|
})
|
}).then(response => {
|
if (!response.ok) {
|
throw new Error('Failed to dismiss operations');
|
}
|
return response.json();
|
}).then(data => {
|
if (data.success) {
|
// Remove from local queue
|
operationIds.forEach(id => {
|
// Remove from UI with animation
|
const item = this.panelList.querySelector(`.queue-item[data-id="${id}"]`);
|
if (item) {
|
item.style.opacity = '0';
|
item.style.transition = 'opacity 0.3s ease-out';
|
setTimeout(() => {
|
item.remove();
|
this.maybeAddEmptyState();
|
}, 300);
|
}
|
|
// Remove from queue
|
this.queue.delete(id);
|
});
|
|
// Save updated queue
|
this.saveQueue();
|
|
// Update UI
|
this.updateQueueStats();
|
this.updateFilterCounts();
|
|
// Notify user
|
this.a11y.announce('Removed completed tasks');
|
}
|
}).catch(error => {
|
console.error('Error dismissing operations:', error);
|
this.addPopup('Failed to dismiss operations');
|
});
|
}
|
|
//INDIVIDUAL PROCESSORS
|
/**
|
* Process vote operation
|
*
|
* @param {Object} item Queue item
|
* @returns {Promise<Object>} Operation result
|
*/
|
async processVote(item) {
|
item.data.id = item.id;
|
return await this.makeRequest(
|
item,
|
'vote',
|
'POST',
|
item.data,
|
{},
|
'Adding Your Voice'
|
);
|
}
|
|
/**
|
* Process artist invite operation
|
*
|
* @param {Object} item Queue item
|
* @returns {Promise<Object>} Operation result
|
*/
|
async processArtistInvite(item) {
|
const data = {
|
user: jvbSettings.currentUser,
|
invites: item.data,
|
id: item.id
|
};
|
|
return await this.makeRequest(
|
item,
|
'invitations',
|
'POST',
|
data,
|
{ 'action_nonce': jvbSettings.dash },
|
'Inviting Artist'
|
);
|
}
|
|
/**
|
* Process new news operation
|
*
|
* @param {Object} item Queue item
|
* @returns {Promise<Object>} Operation result
|
*/
|
async processNewNews(item) {
|
const formData = new FormData();
|
|
// Append all data from item
|
for (const [key, value] of Object.entries(item.data)) {
|
formData.append(key, value);
|
}
|
|
formData.append('id', item.id);
|
|
return await this.makeRequest(
|
item,
|
'news',
|
'POST',
|
formData,
|
{ 'action_nonce': jvbSettings.dash },
|
'Adding News Post'
|
);
|
}
|
|
/**
|
* Process new response operation
|
*
|
* @param {Object} item Queue item
|
* @returns {Promise<Object>} Operation result
|
*/
|
async processNewResponse(item) {
|
item.data.id = item.id;
|
return await this.makeRequest(
|
item,
|
'response',
|
'POST',
|
item.data,
|
{},
|
'Adding your response'
|
);
|
}
|
|
/**
|
* Process settings update operation
|
*
|
* @param {Object} item Queue item
|
* @returns {Promise<Object>} Operation result
|
*/
|
async processSettingsUpdate(item) {
|
const formData = new FormData();
|
|
// Append all data fields
|
for (const [key, value] of Object.entries(item.data)) {
|
formData.append(key, value);
|
}
|
|
formData.append('id', item.id);
|
|
return await this.makeRequest(
|
item,
|
'settings',
|
'POST',
|
formData,
|
{ 'action_nonce': jvbSettings.dash },
|
'Updating Settings'
|
);
|
}
|
|
/**
|
* Process bio update operation
|
*
|
* @param {Object} item Queue item
|
* @returns {Promise<Object>} Operation result
|
*/
|
async processBioUpdate(item) {
|
|
|
item.data.id = item.id;
|
console.log(item);
|
console.log(item.data);
|
|
return await this.makeRequest(
|
item,
|
'bio',
|
'POST',
|
item.data,
|
{ 'action_nonce': jvbSettings.dash },
|
'Updating Bio'
|
);
|
}
|
|
/**
|
* Process content update operation
|
*
|
* @param {Object} item Queue item
|
* @returns {Promise<Object>} Operation result
|
*/
|
async processContentUpdate(item) {
|
const apiData = {
|
id: item.id,
|
user: item.user,
|
posts: item.data.posts || {},
|
content: item.data.content
|
};
|
|
return await this.makeRequest(
|
item,
|
'set',
|
'POST',
|
apiData,
|
{ 'action_nonce': jvbSettings.dash },
|
'Updating Content'
|
);
|
}
|
|
/**
|
* Process content creation operation
|
*
|
* @param {Object} item Queue item
|
* @returns {Promise<Object>} Operation result
|
*/
|
async processContentCreation(item) {
|
const apiData = {
|
id: item.id,
|
content: item.data.content,
|
...item.data
|
};
|
|
return await this.makeRequest(
|
item,
|
'create',
|
'POST',
|
apiData,
|
{ 'action_nonce': jvbSettings.dash },
|
`Creating ${item.data.content === 'artwork' ? 'Artwork' : window.uppercaseFirst(item.data.content)+'s'}`
|
);
|
}
|
|
/**
|
* Process batch creation operation
|
*
|
* @param {Object} item Queue item
|
* @returns {Promise<Object>} Operation result
|
*/
|
async processBatchCreation(item) {
|
const formData = new FormData();
|
|
// Add common data
|
formData.append('content', item.data.content);
|
formData.append('user', item.data.user);
|
formData.append('mode', item.data.mode);
|
formData.append('id', item.id);
|
|
// Process each batch
|
item.data.files.forEach((batch, batchIndex) => {
|
if (!batch.files || !Array.isArray(batch.files)) {
|
console.error('Invalid batch structure:', batch);
|
return;
|
}
|
|
// Add files for this batch - batch.files contains objects with {file: File, metadata: {}}
|
batch.files.forEach((fileObj, fileIndex) => {
|
// Extract the actual File object
|
const file = fileObj.file || fileObj.processedFile || fileObj;
|
|
if (file instanceof File) {
|
formData.append(`files[${batchIndex}][${fileIndex}]`, file);
|
} else {
|
console.error('Invalid file object:', fileObj);
|
}
|
});
|
|
// Add metadata for this batch - combine individual file metadata
|
const batchMetadata = {
|
type: batch.type,
|
metadata: batch.metadata || {},
|
files_metadata: batch.files.map(fileObj => fileObj.metadata || {})
|
};
|
|
formData.append(`files_data[${batchIndex}]`, JSON.stringify(batchMetadata));
|
});
|
|
return await this.makeRequest(
|
item,
|
'create/batch',
|
'POST',
|
formData,
|
{ 'action_nonce': jvbSettings.dash },
|
`Creating ${item.data.content === 'artwork' ? 'Artwork' : window.uppercaseFirst(item.data.content)+'s'}`
|
);
|
}
|
|
/**
|
* Process file upload operation
|
*
|
* @param {Object} item Queue item
|
* @returns {Promise<Object>} Operation result
|
*/
|
async processFileUpload(item) {
|
const formData = new FormData();
|
|
// Add common fields
|
formData.append('content', item.data.content);
|
formData.append('user', item.data.user);
|
formData.append('id', item.id);
|
formData.append('mode', item.data.mode);
|
|
// Add optional fields
|
if (item.data.postId) {
|
formData.append('post_id', item.data.postId);
|
}
|
|
if (item.data.termId) {
|
formData.append('term_id', item.data.termId);
|
}
|
|
if (item.data.fieldName) {
|
formData.append('field_name', item.data.fieldName);
|
}
|
|
console.log('Processing files for upload:', item.data.files);
|
|
// Handle files properly based on structure
|
if (item.data.files && Array.isArray(item.data.files)) {
|
let fileIndex = 0;
|
|
item.data.files.forEach((fileGroup, groupIndex) => {
|
console.log(`Processing group ${groupIndex}:`, fileGroup);
|
|
if (fileGroup.files && Array.isArray(fileGroup.files)) {
|
fileGroup.files.forEach((fileObj) => {
|
// Extract the actual File object
|
let file = null;
|
|
if (fileObj instanceof File) {
|
file = fileObj;
|
} else if (fileObj.file instanceof File) {
|
file = fileObj.file;
|
} else if (fileObj.processedFile instanceof File) {
|
file = fileObj.processedFile;
|
}
|
|
if (file) {
|
console.log(`Adding file ${fileIndex}:`, file.name, file.size, file.type);
|
formData.append(`files[${fileIndex}]`, file);
|
|
// Add metadata if available
|
if (fileObj.metadata) {
|
formData.append(`metadata[${fileIndex}]`, JSON.stringify(fileObj.metadata));
|
}
|
|
fileIndex++;
|
} else {
|
console.error('Invalid file object:', fileObj);
|
}
|
});
|
} else {
|
console.error('Invalid file group structure:', fileGroup);
|
}
|
});
|
|
console.log(`Total files added to FormData: ${fileIndex}`);
|
}
|
|
return await this.makeRequest(
|
item,
|
'uploads',
|
'POST',
|
formData,
|
{ 'action_nonce': jvbSettings.dash },
|
'Uploading Files'
|
);
|
}
|
|
/**
|
* Process favourite toggle operation
|
*
|
* @param {Object} item Queue item
|
* @returns {Promise<Object>} Operation result
|
*/
|
async processFavourite(item) {
|
const batchData = {
|
adds: [],
|
removes: [],
|
id: item.id,
|
user: item.user
|
};
|
|
// Sort adds and removes
|
item.data.forEach(favItem => {
|
const action = favItem.action;
|
const itemCopy = {...favItem};
|
delete itemCopy.action;
|
|
if (action === 'add') {
|
batchData.adds.push(itemCopy);
|
} else {
|
batchData.removes.push(itemCopy);
|
}
|
});
|
|
return await this.makeRequest(
|
item,
|
'favourites',
|
'POST',
|
batchData,
|
{ 'action_nonce': jvbSettings.dash },
|
'Setting Favourites'
|
);
|
}
|
|
/**
|
* Process favourite notes operation
|
*
|
* @param {Object} item Queue item
|
* @returns {Promise<Object>} Operation result
|
*/
|
async processFavouriteNotes(item) {
|
return await this.makeRequest(
|
item,
|
'favourites',
|
'POST',
|
{
|
operation: 'update_notes',
|
type: item.data.type,
|
target_id: item.data.target_id,
|
notes: item.data.notes,
|
id: item.id
|
},
|
{ 'action_nonce': jvbSettings.favourites },
|
'Saving Note'
|
);
|
}
|
|
/**
|
* Process favourite list create operation
|
*
|
* @param {Object} item Queue item
|
* @returns {Promise<Object>} Operation result
|
*/
|
async processFavouriteListCreate(item) {
|
return await this.makeRequest(
|
item,
|
'favourites/lists',
|
'POST',
|
{
|
operation: 'create',
|
name: item.data.name,
|
description: item.data.description,
|
items: item.data.items,
|
id: item.id
|
},
|
{ 'action_nonce': jvbSettings.favourites },
|
'Creating List'
|
);
|
}
|
|
/**
|
* Process adding items to a favourite list
|
*
|
* @param {Object} item Queue item
|
* @returns {Promise<Object>} Operation result
|
*/
|
async processFavouriteListAddItems(item) {
|
return await this.makeRequest(
|
item,
|
'favourites/lists',
|
'POST',
|
{
|
id: item.id,
|
items: item.data.items,
|
list_id: item.data.list_id,
|
operation: 'add_items'
|
},
|
{ 'action_nonce': jvbSettings.favourites },
|
'Adding to List'
|
);
|
}
|
|
/**
|
* Process removing items from a favourite list
|
*
|
* @param {Object} item Queue item
|
* @returns {Promise<Object>} Operation result
|
*/
|
async processFavouriteListRemoveItems(item) {
|
return await this.makeRequest(
|
item,
|
'favourites/lists',
|
'POST',
|
{
|
id: item.id,
|
items: item.data.items,
|
list_id: item.data.list_id,
|
operation: 'remove_items'
|
},
|
{ 'action_nonce': jvbSettings.favourites },
|
'Removing from List'
|
);
|
}
|
|
/**
|
* Process favourite list delete operation
|
*
|
* @param {Object} item Queue item
|
* @returns {Promise<Object>} Operation result
|
*/
|
async processFavouriteListDelete(item) {
|
return await this.makeRequest(
|
item,
|
'favourites/lists',
|
'POST',
|
{
|
operation: 'delete',
|
list_id: item.id
|
},
|
{ 'action_nonce': jvbSettings.favourites },
|
'Deleting list'
|
);
|
}
|
|
/**
|
* Process favourite list share operation
|
*
|
* @param {Object} item Queue item
|
* @returns {Promise<Object>} Operation result
|
*/
|
async processFavouriteListShare(item) {
|
return await this.makeRequest(
|
item,
|
'favourites/lists/shares',
|
'POST',
|
{
|
operation: 'add',
|
email: item.data.email,
|
list_id: item.id},
|
{ 'action_nonce': jvbSettings.favourites },
|
'Sharing List'
|
);
|
}
|
|
/**
|
* Process favourite list unshare operation
|
*
|
* @param {Object} item Queue item
|
* @returns {Promise<Object>} Operation result
|
*/
|
async processFavouriteListUnshare(item) {
|
return await this.makeRequest(
|
item,
|
'favourites/lists/shares',
|
'POST',
|
{
|
operation: 'remove',
|
email: item.data.email,
|
list_id: item.id
|
},
|
{ 'action_nonce': jvbSettings.favourites },
|
'Removing Share Access'
|
);
|
}
|
|
/**
|
* Try to merge similar operations to reduce queue size
|
*
|
* @param {Object} operation New operation
|
* @returns {Object|false} Merged operation or false if no merge
|
*/
|
mergeOperations(operation) {
|
// Find pending operations of the same type
|
const pendingOperations = [...this.queue.values()].filter(item =>
|
item.status === 'queued' &&
|
item.type === operation.type
|
);
|
|
if (pendingOperations.length === 0) return false;
|
|
// Handle based on operation type
|
switch (operation.type) {
|
case 'content_update':
|
return this.mergeContentUpdates(pendingOperations, operation);
|
|
case 'user_settings':
|
case 'bio_update':
|
return this.mergeSettingsUpdates(pendingOperations, operation);
|
|
case 'favourite_toggle':
|
return this.mergeFavouriteToggles(pendingOperations, operation);
|
|
case 'image_upload':
|
return this.mergeImageUploads(pendingOperations, operation);
|
|
default:
|
return false;
|
}
|
}
|
|
/**
|
* Merge content update operations
|
*
|
* @param {Array} existingOperations Existing operations
|
* @param {Object} newOperation New operation
|
* @returns {Object|false} Merged operation or false
|
*/
|
mergeContentUpdates(existingOperations, newOperation) {
|
if (!existingOperations.length) return false;
|
|
// Start with empty set of merged posts
|
const mergedPosts = {};
|
|
// Gather existing post data
|
existingOperations.forEach(operation => {
|
if (!operation.data || !operation.data.posts) return;
|
|
Object.entries(operation.data.posts).forEach(([postID, postData]) => {
|
if (!mergedPosts[postID]) {
|
mergedPosts[postID] = { ...postData };
|
} else {
|
mergedPosts[postID] = this.mergePostData(mergedPosts[postID], postData);
|
}
|
});
|
});
|
|
// Merge in new operation's posts
|
if (newOperation.data && newOperation.data.posts) {
|
Object.entries(newOperation.data.posts).forEach(([postID, postData]) => {
|
if (!mergedPosts[postID]) {
|
mergedPosts[postID] = { ...postData };
|
} else {
|
mergedPosts[postID] = this.mergePostData(mergedPosts[postID], postData);
|
}
|
});
|
}
|
|
// Remove all pending content updates
|
existingOperations.forEach(op => {
|
this.queue.delete(op.id);
|
});
|
|
// Return merged operation
|
return {
|
type: 'content_update',
|
data: {
|
posts: mergedPosts,
|
content: newOperation.data.content
|
}
|
};
|
}
|
|
/**
|
* Merge post data from multiple updates
|
*
|
* @param {Object} existing Existing post data
|
* @param {Object} update New post data
|
* @returns {Object} Merged post data
|
*/
|
mergePostData(existing, update) {
|
const merged = { ...existing };
|
|
// Ensure content stays consistent
|
merged.content = existing.content;
|
|
// Merge fields
|
Object.entries(update).forEach(([key, value]) => {
|
if (key === 'taxonomies') {
|
// Special handling for taxonomies
|
merged.taxonomies = merged.taxonomies || {};
|
Object.entries(value).forEach(([taxKey, terms]) => {
|
// Keep most recent terms
|
merged.taxonomies[taxKey] = [...terms];
|
});
|
} else if (key !== 'content') {
|
// For other fields, take newest value
|
merged[key] = value;
|
}
|
});
|
|
return merged;
|
}
|
|
/**
|
* Merge settings update operations
|
*
|
* @param {Array} existingOperations Existing operations
|
* @param {Object} newOperation New operation
|
* @returns {Object|false} Merged operation or false
|
*/
|
mergeSettingsUpdates(existingOperations, newOperation) {
|
if (!existingOperations.length) return false;
|
|
// Get most recent state of each field
|
const mergedFields = {};
|
|
// Gather existing fields
|
existingOperations.forEach(operation => {
|
if (!operation.data) return;
|
|
Object.entries(operation.data).forEach(([field, value]) => {
|
// Skip user field
|
if (field !== 'user') {
|
if (Array.isArray(value)) {
|
// For arrays, merge and remove duplicates
|
mergedFields[field] = mergedFields[field] || [];
|
mergedFields[field] = [...new Set([...mergedFields[field], ...value])];
|
} else {
|
// For regular fields, take latest value
|
mergedFields[field] = value;
|
}
|
}
|
});
|
});
|
|
// Merge in new operation's fields
|
if (newOperation.data) {
|
Object.entries(newOperation.data).forEach(([field, value]) => {
|
if (field !== 'user') {
|
if (Array.isArray(value)) {
|
mergedFields[field] = mergedFields[field] || [];
|
mergedFields[field] = [...new Set([...mergedFields[field], ...value])];
|
} else {
|
mergedFields[field] = value;
|
}
|
}
|
});
|
}
|
|
// Remove pending operations
|
existingOperations.forEach(op => {
|
this.queue.delete(op.id);
|
});
|
|
// Return merged operation
|
return {
|
type: newOperation.type,
|
data: {
|
user: newOperation.data.user,
|
...mergedFields
|
}
|
};
|
}
|
|
/**
|
* Merge favourite toggle operations
|
*
|
* @param {Array} existingOperations Existing operations
|
* @param {Object} newOperation New operation
|
* @returns {Object|false} Merged operation or false
|
*/
|
mergeFavouriteToggles(existingOperations, newOperation) {
|
if (!existingOperations.length || !newOperation.data || !newOperation.data[0]) return false;
|
|
// Find toggle for this target
|
const targetId = newOperation.data[0].target_id;
|
const targetType = newOperation.data[0].type;
|
|
const existingOperation = existingOperations.find(op =>
|
op.data && op.data[0] &&
|
op.data[0].target_id === targetId &&
|
op.data[0].type === targetType
|
);
|
|
if (existingOperation) {
|
// Use latest toggle action
|
this.queue.delete(existingOperation.id);
|
return newOperation;
|
}
|
|
return false;
|
}
|
|
/**
|
* Merge image upload operations
|
*
|
* @param {Array} existingOperations Existing operations
|
* @param {Object} newOperation New operation
|
* @returns {Object|false} Merged operation or false
|
*/
|
mergeImageUploads(existingOperations, newOperation) {
|
if (!existingOperations.length || !newOperation.data) return false;
|
|
// Only merge if there's a groupId
|
if (!newOperation.data.groupId) return false;
|
|
// Find uploads with same groupId
|
const groupUploads = existingOperations.filter(op =>
|
op.data && op.data.groupId === newOperation.data.groupId
|
);
|
|
if (!groupUploads.length) return false;
|
|
// Collect all files from group
|
const files = [];
|
|
// Add files from existing operations
|
groupUploads.forEach(op => {
|
if (op.data.files) {
|
files.push(...op.data.files);
|
} else if (op.data.file) {
|
files.push(op.data.file);
|
}
|
});
|
|
// Add files from new operation
|
if (newOperation.data.files) {
|
files.push(...newOperation.data.files);
|
} else if (newOperation.data.file) {
|
files.push(newOperation.data.file);
|
}
|
|
// Remove individual uploads
|
groupUploads.forEach(op => {
|
this.queue.delete(op.id);
|
});
|
|
// Return batch operation
|
return {
|
type: 'image_upload',
|
data: {
|
groupId: newOperation.data.groupId,
|
content: newOperation.data.content,
|
postId: newOperation.data.postId,
|
fieldName: newOperation.data.fieldName,
|
files: files
|
}
|
};
|
}
|
|
//TODO: Still necessary?
|
/**
|
* Initialize the refresh button
|
*/
|
initRefreshButton() {
|
|
this.refreshButton.addEventListener('click', () => {
|
if(this.refreshedOnce && this.panelList.children.length === 1 && this.panelList.children[0].classList.contains('no-operations')){
|
this.addPopup('Nothing to refresh');
|
return;
|
}
|
this.refreshedOnce = true;
|
// Show refreshing state
|
this.refreshButton.classList.add('refreshing');
|
|
// Clear existing countdown and polling
|
this.stopPolling();
|
|
// Get current filter
|
const activeFilter = this.filterButtonsContainer.querySelector('.active');
|
const currentFilter = activeFilter ? activeFilter.dataset.filter : 'all';
|
|
// Fetch operations with current filter and force flag
|
this.fetchOperations({
|
initial: false,
|
force: true
|
}).then(() => {}).finally(() => {
|
// Remove refreshing state
|
this.refreshButton.classList.remove('refreshing');
|
});
|
});
|
}
|
}
|
|
// Initialize QueueManager on page load
|
document.addEventListener('DOMContentLoaded', () => {
|
window.jvbQueue = new QueueManagerBackup();
|
});
|
|
// 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;
|
}
|
});
|
});
|
