From ac444cba221832c012c0435fdc8339fe9f37febb Mon Sep 17 00:00:00 2001
From: Jake Vanderwerf <get@jakevanderwerf.ca>
Date: Mon, 11 May 2026 18:35:04 +0000
Subject: [PATCH] =Some changes to the CRUD.js editing, timeline post configuration
---
assets/js/concise/Queue.js | 188 ++++++++++++++++++++++++++++++++++++----------
1 files changed, 145 insertions(+), 43 deletions(-)
diff --git a/assets/js/concise/Queue.js b/assets/js/concise/Queue.js
index 6c097c1..a2232ca 100644
--- a/assets/js/concise/Queue.js
+++ b/assets/js/concise/Queue.js
@@ -5,6 +5,10 @@
this.user = window.auth.getUser();
+ if (!this.user) {
+ return;
+ }
+
this.canUpdateUI = true;
this.isProcessing = false;
@@ -12,12 +16,11 @@
this.queue = new Map();
this.items = new Map();
this.subscribers = new Set();
+ this.loadFromStorage = false;
this.api = jvbSettings.api;
this.endpoint = 'queue';
- this.queueItems = new Map();
-
this.init();
}
init() {
@@ -28,7 +31,7 @@
this.initListeners();
this.initStore();
if (this.canUpdateUI && this.ui.panel) {
- this.popup = new window.jvbPopup({
+ this.popup = window.jvbPopup.registerPopup({
popup: this.ui.panel,
toggle: this.ui.toggle.button,
name: 'Queue Panel',
@@ -57,8 +60,8 @@
count: '.qtoggle .count'
},
refresh: {
- button: '#queue .refresh .refreshNow',
- countdown: '#queue .refresh .countdown'
+ button: '#queue .m-actions .refresh',
+ countdown: '#queue .m-actions .refresh .countdown'
},
popup: {
popup: '#queue .popup',
@@ -161,11 +164,15 @@
this.onlineHandler = this.handleOnline.bind(this);
this.offlineHandler = this.handleOffline.bind(this);
this.unloadHandler = this.handleBeforeUnload.bind(this);
+ this.visibilityHandler = this.handleVisibilityChange.bind(this);
document.addEventListener('click', this.clickHandler);
window.addEventListener('online', this.onlineHandler);
window.addEventListener('offline', this.offlineHandler);
- window.addEventListener('beforeunload', this.unloadHandler);
+
+ // window.addEventListener('beforeunload', this.unloadHandler);
+
+ document.addEventListener('visibilitychange', this.visibilityHandler);
}
handleOnline() {
this.updatePanel('synced');
@@ -176,6 +183,14 @@
handleOffline() {
this.updatePanel('offline');
}
+
+ handleVisibilityChange(e) {
+ if (this.isPolling && document.hidden) {
+ this.stopPolling();
+ } else {
+ this.maybeStartPolling();
+ }
+ }
handleBeforeUnload(e) {
if (!this.ui.panel) return;
const total = this.getQueueByStatus(this.pendingStatuses).length;
@@ -289,6 +304,7 @@
keyPath: 'id',
endpoint: this.endpoint,
TTL: Infinity,
+ isAuth: true,
indexes: [
{name: 'status', keyPath: 'status'},
{name: 'type', keyPath: 'type'},
@@ -475,7 +491,7 @@
}
try {
- const response = await fetch(
+ const response = await window.auth.fetch(
`${this.api}${this.endpoint}`,
{
method: 'POST',
@@ -485,7 +501,7 @@
},
body: JSON.stringify({
action,
- ids: statusOrId,
+ ids: Array.isArray(statusOrId) ? statusOrId : [statusOrId],
user: this.user
})
}
@@ -547,7 +563,13 @@
}
this.setProcessing(false);
- this.stopActivityTracking();
+ const remainingQueue = this.getQueueByStatus('queued');
+ if (remainingQueue.length === 0) {
+ this.stopActivityTracking();
+ } else {
+ // Still have queued items, restart activity tracking
+ this.trackActivity();
+ }
this.toggleQueue(this.maybeStartPolling());
}
@@ -567,21 +589,25 @@
this.updateOperationStatus(operation.id, 'uploading');
let requestBody;
+ let req;
if (operation.data instanceof FormData) {
operation.data.append('id', operation.id);
operation.data.append('user', window.auth.getUser());
requestBody = operation.data;
+ req = operation.data;
} else {
- requestBody = JSON.stringify({
+ req = {
...operation.data,
id: operation.id,
user: window.auth.getUser()
- });
+ };
+ requestBody = JSON.stringify(req);
operation.headers['Content-Type'] = 'application/json';
}
- if (requestBody === undefined || requestBody === null) return;
+ if (operation.endpoint === 'unknown' || requestBody === undefined || requestBody === null) return;
- const response = await fetch(
+
+ const response = await window.auth.fetch(
`${this.api}${operation.endpoint}`,
{
method: operation.method,
@@ -589,15 +615,18 @@
body: requestBody
}
);
+ console.log('Sending request with data: ', req);
const result = await response.json();
if (skip) {
operation.data = {};
}
+ console.log('Result: ', result);
if (response.ok && result.success) {
+ this.notify('sent-to-server', req);
if (result.id && operation.id !== result.id) {
operation = await this.handleServerMerge(operation, result);
} else {
- operation.status = result.status??'pending';
+ operation.status = result.status??'failed';
operation.serverData = result;
this.updateOperationStatus(operation.id, operation.status);
}
@@ -677,10 +706,24 @@
}
getAllQueue() {
- let ops = [... new Set([
- ...Array.from(this.store.data.values()),
+ let index = new Set();
+
+ let ops = [
... Array.from(this.queue.values())
- ])];
+ ];
+ if (!this.loadFromStorage) {
+ this.loadFromStorage = true;
+ ops = [
+ ... ops,
+ ...Array.from(this.store.data.values())
+ ];
+
+ ops = ops.filter(el => {
+ const isAdded = index.has(el.id);
+ index.add(el.id);
+ return !isAdded;
+ });
+ }
//Sort operations by operation updated_at
return this.sortOperations(ops);
}
@@ -690,17 +733,19 @@
status = [status];
}
- let ops = [...new Set([
- ...Array.from(this.store.filterByIndex({status: status})),
- ...Array.from(this.queue.values()).filter(op => status.includes(op.status))
- ])];
- return this.sortOperations(ops);
+ let ops = this.getAllQueue();
+ return ops.filter(op => status.includes(op.status));
}
updateOperationStatus(itemID, status) {
let item = this.getQueue(itemID);
- if (!item || !this.statuses.includes(status)) return;
+ if (!item) return;
+ if (!this.statuses.includes(status)) {
+ console.log('Invalid status: ', status);
+ return;
+ }
+
item.status = status;
this.notify('operation-status', item);
this.setQueue(item);
@@ -809,9 +854,10 @@
this.ui.actions.retry.disabled = operations.filter(op => op.status === 'failed').length === 0;
this.ui.actions.clear.disabled = operations.filter(op => op.status === 'completed').length ===0;
- const activeCount = operations.filter(op =>
+ let activeCount = operations.filter(op =>
[...this.pendingStatuses, ...this.workingStatuses].includes(op.status)
- ).length;
+ );
+ activeCount = activeCount.length;
this.ui.toggle.count.hidden = activeCount === 0;
this.ui.toggle.count.textContent = activeCount;
@@ -889,7 +935,8 @@
let op = this.getQueue(opId);
let element = item.element;
- element.classList.remove(this.statuses);
+
+ element.classList.remove(... this.statuses);
element.classList.add(op.status);
let progress = this.getProgress(op);
@@ -926,20 +973,28 @@
item.ui.actions.refresh.hidden = op.status !== 'completed';
}
}
- getProgress(op) {
- if (op.progress) return op.progress;
- if (!this.statuses.includes(op.status)) return 0;
- let statusProgress = {
- 'queued': 10,
- 'uploading': 25,
- 'pending': 40,
- 'processing':70,
- 'completed':100,
- 'failed':0,
- 'failed_permanent':0
- };
- return statusProgress[op.status]??0;
+ getProgress(op) {
+ // Check server-provided percentage first
+ if (op.progress_percentage !== undefined) {
+ return op.progress_percentage;
}
+ // Legacy: check old 'progress' field
+ if (op.progress !== undefined) {
+ return op.progress;
+ }
+ // Fallback to status-based calculation
+ if (!this.statuses.includes(op.status)) return 0;
+ const statusProgress = {
+ 'queued': 10,
+ 'uploading': 25,
+ 'pending': 40,
+ 'processing': 70,
+ 'completed': 100,
+ 'failed': 0,
+ 'failed_permanent': 0
+ };
+ return statusProgress[op.status] ?? 0;
+ }
removeOperationUI(opId) {
let op = this.items.get(opId);
if (!op) return;
@@ -964,7 +1019,8 @@
'processing': 'Processing',
'completed': 'Completed',
'failed': 'Failed',
- 'failed_permanent': 'Failed permanently'
+ 'failed_permanent': 'Failed permanently',
+ 'merged': 'Merged'
};
return labels[status];
}
@@ -980,9 +1036,24 @@
case 'pending':
return item.position ? `Position ${item.position} in queue` : 'In server queue';
case 'processing':
- return item.progress ? `${item.progress}% complete` : 'Processing...';
+ // Show progress count if available
+ if (item.count && item.progress_count !== undefined) {
+ const processed = item.progress_count;
+ const total = item.count;
+ const percentage = Math.round((processed / total) * 100);
+ return `Processing ${processed}/${total} items (${percentage}%)`;
+ }
+ // Fallback to percentage only
+ if (item.progress_percentage !== undefined) {
+ return `${item.progress_percentage}% complete`;
+ }
+ return 'Processing...';
case 'completed':
return 'Successfully completed. Refresh to see changes.';
+ case 'merged':
+ return item.merged_into
+ ? `Merged with another operation (${item.merged_into.substring(0, 8)}...)`
+ : 'Merged with another operation';
case 'failed':
return `Failed: ${item.lastError || 'Unknown error'} (Retry ${item.retries}/${2})`;
case 'failed_permanent':
@@ -1011,25 +1082,55 @@
// If we have local operation data, preserve it
if (localOp && localOp.endpoint) {
- return {
+ const mappedOp = {
...localOp,
...serverOp,
endpoint: localOp.endpoint,
method: localOp.method,
headers: localOp.headers,
+ progress_percentage: serverOp.progress_percentage,
+ progress_count: serverOp.progress_count,
+ count: serverOp.count
};
+
+ if (serverOp.merged_into) {
+ this.handleMergedOperation(mappedOp);
+ }
}
+
// Minimal mapping for server-only operations
// Extract endpoint from type if possible, otherwise use type
const endpoint = serverOp.type ? serverOp.type.replace('_update', '').replace('_', '/') : 'unknown';
- return {
+ const mappedOp = {
...serverOp,
endpoint: endpoint,
method: 'POST',
headers: { ...this.headers },
};
+ if (serverOp.merged_into) {
+ this.handleMergedOperation(mappedOp);
+ }
+ return mappedOp
+ }
+
+ /**
+ * Handle merged operations
+ * The target operation already has merged data from server,
+ * so we just need to clean up the merged operation locally
+ */
+ handleMergedOperation(operation) {
+ if (!operation.merged_into) return;
+
+ console.log(`[Queue] Operation ${operation.id} merged into ${operation.merged_into}`);
+
+ // Auto-dismiss merged operation after brief display
+ // The target operation already has all the merged data from server
+ setTimeout(() => {
+ this.clearQueue(operation.id);
+ this.removeOperationFromUI(operation.id);
+ }, 3000);
}
/****************************************************************************
@@ -1065,3 +1166,4 @@
}
});
});
+
--
Gitblit v1.10.0