From d7dbe7fee362d587dfc334135d9581b6216a4295 Mon Sep 17 00:00:00 2001
From: Jake Vanderwerf <get@jakevanderwerf.ca>
Date: Sun, 23 Nov 2025 04:13:56 +0000
Subject: [PATCH] =Timeline block, and feed block updated. DataStore.js refactored to not block rendering
---
assets/js/concise/Queue.js | 152 ++++++++++++++++++++++++--------------------------
1 files changed, 73 insertions(+), 79 deletions(-)
diff --git a/assets/js/concise/Queue.js b/assets/js/concise/Queue.js
index 38d9105..56dcb97 100644
--- a/assets/js/concise/Queue.js
+++ b/assets/js/concise/Queue.js
@@ -5,7 +5,6 @@
class QueueManager {
constructor(config = {}) {
this.canUpdateUI = true;
- console.log('jvbSettings', jvbSettings);
this.config = {
apiBase: jvbSettings.api,
maxRetries: 3,
@@ -16,7 +15,6 @@
...config
};
this.user = jvbSettings.currentUser;
- console.log(this.user);
this.headers = {
@@ -28,9 +26,7 @@
this.errors = window.jvbError;
// Initialize DataStore for queue persistence
- this.store = new window.jvbStore({
- name: 'queue',
- storeName: 'operations',
+ this.store = window.jvbStore.register('queue', {
keyPath: 'id',
endpoint: this.config.endpoint,
TTL: Infinity,
@@ -39,19 +35,7 @@
{name: 'type', keyPath: 'type'},
],
showLoading: false,
- getBlobs: async (ids) => {
- if (window.jvbUploadBlobs) {
- if (!Array.isArray(ids) && typeof ids === 'string') {
- ids = [ids];
- }
- // Get individual blobs (not all items)
- const blobs = await Promise.all(
- ids.map(id => window.jvbUploadBlobs.getBlob(id))
- );
- return blobs.filter(Boolean); // Remove nulls
- }
- return null;
- }
+ delayFetch: false, // Queue should fetch immediately
});
this.classes = [
@@ -80,7 +64,6 @@
// Initialize
this.initUI();
this.initListeners();
- console.log(this.ui);
if (this.ui.panel) {
this.popup = new window.jvbPopup({
popup: this.ui.panel,
@@ -109,6 +92,7 @@
this.store.subscribe((event, data) => {
switch (event) {
case 'data-loaded':
+ case 'items-saved':
// Initial load from IndexedDB
const incomplete = this.getOperationsByStatus(['completed', 'failed_permanent'], false);
if (incomplete.length > 0) {
@@ -117,9 +101,17 @@
this.updateUI();
break;
case 'item-saved':
+ // Check for status changes
+ if (data.item) {
+ const oldItem = this.store.data.get(data.item.id);
+ if (oldItem && oldItem.status !== data.item.status) {
+ this.handleOperationStatusChange(data.item, oldItem.status);
+ }
+ }
if (this.hasQueuedOperations()) {
this.startPolling();
}
+ break;
default:
this.updateUI();
break;
@@ -128,10 +120,30 @@
});
this.notify('queue-initialized', {operations: incomplete});
}
+
+ /**
+ * Handle operation status changes and notify subscribers
+ */
+ handleOperationStatusChange(operation, oldStatus) {
+ if (!operation || oldStatus === operation.status) return;
+
+ // Notify based on new status
+ switch(operation.status) {
+ case 'completed':
+ this.notify('operation-completed', operation);
+ break;
+ case 'failed':
+ this.notify('operation-failed', operation);
+ break;
+ case 'failed_permanent':
+ this.notify('operation-failed-permanent', operation);
+ break;
+ }
+ }
/**
*
* @param {object} operation
- * @param {string} operatio n.endpoint The endpoint, excluding the apiBase
+ * @param {string} operation.endpoint The endpoint, excluding the apiBase
* @param {object} operation.data The data to save
* @param {boolean} operation.canMerge Whether data can merge
* @param {string} operation.title The title of the operation for the Queue Panel
@@ -186,6 +198,7 @@
}
console.log('Added to Queue: ', item);
+ this.store.clearCache();
//Add new operation to DataStore
this.setQueue(item);
@@ -312,10 +325,6 @@
// console.log(pair[0], pair[1]);
// }
- console.log('Sending to server:');
- for (var [key, value] of requestBody.entries()) {
- console.log(key, value);
- }
} else {
requestBody = JSON.stringify({
...operation.data,
@@ -409,6 +418,7 @@
this.pollTimer = setInterval(async () => {
try {
+ this.store.clearCache();
await this.store.fetch(); // Fetches from server, updates store.data
const incomplete = this.getOperationsByStatus(['completed', 'failed_permanent'], false);
@@ -474,7 +484,7 @@
'Content-Type': 'application/json',
...this.headers
},
- body: JSON.stringify({ids,action})
+ body: JSON.stringify({ids,action, user: jvbSettings.currentUser})
}
);
@@ -574,6 +584,8 @@
return;
}
if (e.target.closest(this.selectors.refreshButton)) {
+ this.store.clearCache();
+ this.store.clearHttpHeaders(); // Clear cached headers first
this.store.fetch();
} else if (e.target.closest(this.selectors.clearButton)) {
const completedOps = this.getOperationsByStatus('completed');
@@ -666,13 +678,27 @@
if (!this.canUpdateUI) {
return;
}
- const stats = this.getQueueStats();
+
+ // Get current operations from store
+ const operations = Array.from(this.store.data.values());
+
+ // Get stats from last fetch response (server-provided)
+ const stats = this.store.lastResponse?.queue_stats || {
+ queued: 0,
+ localProcessing: 0,
+ uploading: 0,
+ pending: 0,
+ processing: 0,
+ completed: 0,
+ failed: 0,
+ failed_permanent: 0
+ };
// Update count badge
if (this.ui.count) {
- const total = stats.total - stats.completed;
- this.ui.count.textContent = total > 0 ? total : '';
- this.ui.count.style.display = total > 0 ? '' : 'none';
+ const activeCount = operations.length - stats.completed;
+ this.ui.count.textContent = activeCount > 0 ? activeCount : '';
+ this.ui.count.style.display = activeCount > 0 ? '' : 'none';
}
// Update indicator
@@ -681,14 +707,16 @@
stats.pending > 0 || stats.processing > 0;
this.ui.indicator.classList.toggle('active', hasActive);
}
- let failed = this.getOperationsByStatus('failed');
- let completed = this.getOperationsByStatus('completed');
- this.ui.clearButton.disabled = completed.length === 0;
- this.ui.retryButton.disabled = failed.length === 0;
- // Update filter counts
+ // Update button states
+ this.ui.clearButton.disabled = this.getOperationsByStatus('completed').length === 0;
+ this.ui.retryButton.disabled = this.getOperationsByStatus('failed').length === 0 && this.getOperationsByStatus('failed_permanent').length === 0;
+
+ // Update filter counts (from server stats)
Object.entries(this.ui.filters).forEach(([status, button]) => {
- const count = status === 'all' ? stats.total : stats[status] || 0;
+ const count = status === 'all'
+ ? operations.length
+ : stats[status] || 0;
const countEl = button.querySelector('.count');
if (countEl) {
countEl.textContent = count > 0 ? count : '';
@@ -696,7 +724,7 @@
button.setAttribute('data-count', count);
});
- // Update operation list
+ // Render current operations
this.renderOperations();
}
@@ -755,46 +783,24 @@
return statusProgress[item.status] || 0;
}
- getQueueStats() {
- const stats = {};
- this.statuses.forEach(status => {
- stats[status] = 0;
- });
-
- Array.from(this.store.data.values()) // Change items to data
- .forEach(op => {
- if (stats.hasOwnProperty(op.status)) {
- stats[op.status]++;
- }
- });
-
- stats.total = Array.from(this.store.data.values()).length; // Change items to data
-
- return stats;
- }
renderOperations() {
if (!this.ui.itemsContainer) return;
- const activeFilter = this.getActiveFilter();
- const operations = this.getFilteredOperations(activeFilter);
+ const operations = this.store.getFiltered();
// Clear container
window.removeChildren(this.ui.itemsContainer);
- // Render each operation
+ // Render operations or empty state
if (operations.length === 0) {
let empty = window.getTemplate('emptyQueue');
this.ui.itemsContainer.append(empty);
this.a11y.announce('Nothing queued.');
} else {
- let empty = this.ui.itemsContainer.querySelector('.emptyQueue');
- if (empty) {
- empty.remove();
- }
operations.forEach(op => {
const element = this.createOperationUI(op);
- this.ui.itemsContainer.appendChild(element);
+ this.ui.itemsContainer.append(element);
});
}
}
@@ -941,29 +947,18 @@
FILTERS
**************************************************/
setFilter(filter) {
+ // Update active button
Object.values(this.ui.filters).forEach(button => {
if (button) {
button.classList.toggle('active', button.dataset.filter === filter);
}
});
- this.activeFilter = filter;
- this.renderOperations();
- }
-
- getActiveFilter() {
- const activeButton = this.ui.panel?.querySelector('.filter.active');
- return activeButton?.dataset.filter || 'all';
- }
-
- getFilteredOperations(filter) {
- const operations = Array.from(this.store.data.values()); // Change items to data
-
if (filter === 'all') {
- return operations;
+ this.store.clearFilters();
+ } else {
+ this.store.setFilter('status', filter);
}
-
- return operations.filter(op => op.status === filter);
}
/**************************************************************************
@@ -995,9 +990,8 @@
? Array.from(this.store.data.values()).filter((item) => status.includes(item.status))
: Array.from(this.store.data.values()).filter((item) => !status.includes(item.status));
}
- async hasQueuedOperations() {
- const queued = await this.store.query('status', 'queued');
- return queued.length > 0;
+ hasQueuedOperations() {
+ return this.getOperationsByStatus('queued').length > 0;
}
subscribe(callback) {
this.subscribers.add(callback);
--
Gitblit v1.10.0