Oliver/brandize-barcode
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

async

Browse Source
This commit is contained in:
Oliver
2026-05-25 12:31:47 -03:00
parent 55d6f8be7c
commit 45cde10a21
2 changed files with 243 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
agent.md
+23 -2
View File
@@ -132,7 +132,7 @@ On mobile (< 620 px): scan input goes full-width on its own row; user dropdown a
## Key behaviours
- **On load**: cookie credentials restored → GET webhook fires → dropdown populated → scan input auto-focused
- **Enter key**: trims input → **duplicate check** → POSTs to webhook, prepends result row, clears + re-focuses input
- **Enter key**: trims input → duplicate check → clears input **immediately** → adds pending row → pushed onto FIFO queue → `drainQueue()` starts if idle
- **Clear button**: empties the table, clears the scan input, resets the scan counter
- **No user selected**: red toast + highlighted dropdown; does not submit
- **401 on any request**: modal prompts for credentials (pre-filled from cookie), saves to cookie, retries original call
@@ -140,7 +140,28 @@ On mobile (< 620 px): scan input goes full-width on its own row; user dropdown a
- **Network error**: dismissing error banner; input selected so user can retry
- **Dropdown error state**: tapping/focusing the dropdown while it shows an error re-triggers `loadUsers()`
- **NDJSON/array/object**: `parseJson()` normalises all response formats from n8n
- **Duplicate scan**: `isDuplicate(code)` queries `.col-code` cells in the live table before every POST; if found, shows a warning toast and skips the webhook call entirely
- **Duplicate scan**: `isDuplicate(code)` queries `.col-code` cells (present on pending, resolved, and error rows) before enqueuing
- **Scan queue**: `scanQueue[]` is a FIFO array of `{ code, user, rowEl }`. `drainQueue()` runs sequentially in the background — one `processItem()` at a time. Scans can be added faster than the webhook responds; each gets its own pending row immediately
- **Pending row**: shows a spinner + `Processing… <code>` while the item is in-flight; replaced in-place by the resolved row or an error row
- **Error row**: red background, shows the error message and the raw code; code is still in `.col-code` so it cannot be re-scanned
- **Queue pill**: teal badge next to the scan counter showing `N pending`; hidden when queue is empty
- **Auth mid-queue**: if `processItem` gets 401, it returns `"auth"` to `drainQueue`, which pauses (`queueBusy = false`), shows the auth modal with `drainQueue` as the retry callback — queue resumes from the same item after login
- **Clear**: also drains `scanQueue` and resets `queueBusy`
## Scan flow (sequence)
```
Enter key
└─ enqueue(code)
├─ validation (user selected? duplicate?)
├─ scanInput.value = "" ← immediate clear
├─ addPendingRow(code) ← spinner row in table
└─ scanQueue.push(...) ← add to FIFO
└─ drainQueue() if idle
└─ processItem() loop
├─ fetch POST webhook
├─ resolveRow() ← replace spinner with result
└─ rowError() ← replace spinner with error
```
## Table columns (DOM)
| Visible | Header | CSS class | Content |
index.html
+219 -64
View File
@@ -401,6 +401,90 @@
display: none;
}
/* Queue status pill */
.queue-pill {
background: var(--primary-light);
color: var(--primary);
font-size: 12px;
font-weight: 700;
padding: 2px 11px;
border-radius: 99px;
letter-spacing: 0.2px;
display: flex;
align-items: center;
gap: 5px;
}
.queue-pill.hidden {
display: none;
}
/* Pending row */
.row-pending td {
padding: 0;
}
.pending-cell {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 18px;
font-size: 13px;
color: var(--text-muted);
}
.pending-spinner {
width: 14px;
height: 14px;
border: 2px solid rgba(0, 95, 90, 0.2);
border-top-color: var(--primary);
border-radius: 50%;
animation: spin 0.7s linear infinite;
flex-shrink: 0;
}
.pending-label {
font-style: italic;
}
.pending-code {
font-family: "Courier New", monospace;
font-size: 12px;
color: var(--text);
opacity: 0.6;
}
/* Error row */
.row-error td {
padding: 0;
}
.error-cell {
display: flex;
align-items: center;
gap: 8px;
padding: 11px 18px;
background: var(--error-bg);
font-size: 13px;
}
.error-icon {
color: var(--error);
font-weight: 700;
flex-shrink: 0;
}
.error-msg {
color: var(--error);
flex: 1;
}
.error-code {
font-family: "Courier New", monospace;
font-size: 11px;
color: var(--error);
opacity: 0.55;
}
tbody tr {
border-bottom: 1px solid var(--card);
animation: rowIn 0.28s ease-out;
@@ -876,8 +960,21 @@
<main>
<div class="table-meta">
<span class="table-label">Scan Log</span>
<div style="display: flex; align-items: center; gap: 8px">
<span class="queue-pill hidden" id="queuePill">
<span
class="pending-spinner"
style="
width: 10px;
height: 10px;
border-width: 1.5px;
"
></span>
<span id="queuePillText">0 pending</span>
</span>
<span class="count-pill zero" id="countPill">0 scans</span>
</div>
</div>
<div class="table-wrapper" id="tableWrapper">
<table id="scanTable">
@@ -981,10 +1078,12 @@
const WEBHOOK =
"https://brandize.app.n8n.cloud/webhook/e0268b0f-4935-49ba-bfdf-1c0ee01d3b9d";
// ── State ───────────────────────────────────────────────────────────────
// ── State ───────────────────────────────────────────────────────────────────
let creds = null; // { user, pass }
let pendingAuthCb = null; // function to retry after auth
let scanCount = 0;
const scanQueue = []; // { code, user, rowEl } — FIFO
let queueBusy = false; // true while drainQueue is running
// ── DOM refs ─────────────────────────────────────────────────────────────
const scanInput = document.getElementById("scanInput");
@@ -992,6 +1091,8 @@
const tableBody = document.getElementById("tableBody");
const emptyState = document.getElementById("emptyState");
const countPill = document.getElementById("countPill");
const queuePill = document.getElementById("queuePill");
const queuePillText = document.getElementById("queuePillText");
const banner = document.getElementById("statusBanner");
const authModal = document.getElementById("authModal");
const authUser = document.getElementById("authUser");
@@ -1208,22 +1309,34 @@
}
// ── Duplicate check ──────────────────────────────────────────────────────
// Checks both resolved rows and pending rows (all have .col-code)
function isDuplicate(code) {
const cells = tableBody.querySelectorAll(".col-code");
for (const cell of cells) {
if (cell.textContent === code.trim()) return true;
for (const cell of tableBody.querySelectorAll(".col-code")) {
if (cell.textContent === code) return true;
}
return false;
}
// ── Submit Scan ──────────────────────────────────────────────────────────
async function submitScan(code) {
// ── Queue pill ──────────────────────────────────────────────────────────
function updateQueuePill() {
const n = scanQueue.length;
if (n > 0) {
queuePillText.textContent =
n + (n === 1 ? " pending" : " pending");
queuePill.classList.remove("hidden");
} else {
queuePill.classList.add("hidden");
}
}
// ── Enqueue (called immediately on Enter) ──────────────────────────────
function enqueue(raw) {
const code = raw.trim();
if (!code) return;
const user = userSelect.value;
if (!user) {
showToast("Please select a user first!", "fail");
userSelect.focus();
// Short shake animation on the select
userSelect.style.transition = "none";
userSelect.style.outline = "2px solid rgba(255,80,80,0.8)";
setTimeout(() => {
userSelect.style.outline = "";
@@ -1231,96 +1344,138 @@
return;
}
// Duplicate check against already-scanned codes in the table
if (isDuplicate(code)) {
showToast(
"⚠️ Already scanned: " + code.trim(),
"fail",
4000,
);
showToast("⚠️ Already scanned: " + code, "fail", 4000);
scanInput.select();
return;
}
showBanner("Looking up package…", "loading");
// Clear input immediately so the next scan can happen right away
scanInput.value = "";
scanInput.focus();
hideBanner();
// Add a pending row to the table (also registers code for dupe detection)
const rowEl = addPendingRow(code);
// Push onto queue
scanQueue.push({ code, user, rowEl });
updateQueuePill();
// Kick off the queue processor if it isn’t running already
if (!queueBusy) drainQueue();
}
// ── Queue drain (processes items sequentially in the background) ────────
async function drainQueue() {
if (queueBusy) return;
queueBusy = true;
while (scanQueue.length > 0) {
const item = scanQueue[0]; // peek — only shift after handling
const result = await processItem(item);
if (result === "auth") {
// Credentials needed — pause queue, resume after login
queueBusy = false;
needAuth(drainQueue);
return;
}
scanQueue.shift();
updateQueuePill();
}
queueBusy = false;
updateQueuePill();
}
// ── Process one queued item ────────────────────────────────────────────
async function processItem({ code, user, rowEl }) {
try {
const res = await fetch(WEBHOOK, {
method: "POST",
headers: getHeaders(true),
body: JSON.stringify({ user, code: code.trim() }),
body: JSON.stringify({ user, code }),
});
if (res.status === 401) {
hideBanner();
// Restore input so it's not lost
scanInput.value = code;
needAuth(() => submitScan(code));
return;
}
if (res.status === 401) return "auth"; // signal caller to pause
if (!res.ok) {
// Try to extract a descriptive error from the response body
let errMsg = `Scan failed (HTTP ${res.status}).`;
let errMsg = `Scan failed (HTTP ${res.status})`;
try {
const errData = await parseJson(res);
if (errData?.error) errMsg = errData.error;
} catch (_) {}
showBanner(errMsg, "error", 0); // persistent until next action
scanInput.select();
return;
rowError(rowEl, errMsg);
return "ok";
}
const item = await parseJson(res);
// Webhook may return 200 but carry an error field
if (item?.error) {
showBanner(item.error, "error", 0);
scanInput.select();
return;
rowError(rowEl, item.error);
return "ok";
}
hideBanner();
addRow(item, code);
showToast(
"✓ Added: " + (item.name || item.producttag || code),
"ok",
);
// Clear input and keep focus for next scan
scanInput.value = "";
scanInput.focus();
resolveRow(rowEl, item);
return "ok";
} catch (err) {
console.error(err);
showBanner(
"Network error – scan not recorded.",
"error",
5000,
);
scanInput.select();
rowError(rowEl, "Network error – could not reach server");
return "ok";
}
}
// ── Table Row ───────────────────────────────────────────────────────────────────
function addRow(item, code) {
// ── Table rows ────────────────────────────────────────────────────────────────
function addPendingRow(code) {
emptyState.style.display = "none";
const tr = document.createElement("tr");
tr.className = "row-pending";
tr.innerHTML = `
<td colspan="3" class="pending-cell">
<span class="pending-spinner"></span>
<span class="pending-label">Processing…</span>
<span class="pending-code">${esc(code)}</span>
</td>
<td class="col-code">${esc(code)}</td>
`;
tableBody.insertBefore(tr, tableBody.firstChild);
return tr;
}
function resolveRow(rowEl, item) {
const code = rowEl.querySelector(".col-code").textContent;
rowEl.className = "";
rowEl.innerHTML = `
<td><span class="country-badge">${esc(item.country || "—")}</span></td>
<td class="name-cell">${esc(item.name || "—")}</td>
<td><span class="tag-pill" title="${esc(item.producttag || "")}">${esc(item.producttag || "—")}</span></td>
<td class="col-code">${esc(code)}</td>
`;
scanCount++;
countPill.textContent =
scanCount + (scanCount === 1 ? " scan" : " scans");
countPill.classList.remove("zero");
const tr = document.createElement("tr");
tr.innerHTML = `
<td><span class="country-badge">${esc(item.country || "—")}</span></td>
<td class="name-cell">${esc(item.name || "—")}</td>
<td><span class="tag-pill" title="${esc(item.producttag || "")}">${esc(item.producttag || "—")}</span></td>
<td class="col-code">${esc(code.trim())}</td>
`;
// Newest row at the top
tableBody.insertBefore(tr, tableBody.firstChild);
}
// ── Clear ────────────────────────────────────────────────────────────────
function rowError(rowEl, msg) {
const code = rowEl.querySelector(".col-code").textContent;
rowEl.className = "row-error";
rowEl.innerHTML = `
<td colspan="3" class="error-cell">
<span class="error-icon">✕</span>
<span class="error-msg">${esc(msg)}</span>
<span class="error-code">${esc(code)}</span>
</td>
<td class="col-code">${esc(code)}</td>
`;
}
// ── Clear ──────────────────────────────────────────────────────────────────────
function clearTable() {
if (scanCount === 0 && !scanInput.value) return;
const hasContent =
scanCount > 0 || scanQueue.length > 0 || scanInput.value;
if (!hasContent) return;
// Cancel any pending queue items
scanQueue.length = 0;
queueBusy = false;
updateQueuePill();
tableBody.innerHTML = "";
scanInput.value = "";
scanCount = 0;
@@ -1331,11 +1486,11 @@
showToast("Table cleared", "", 2000);
}
// ── Scan Input Enter ─────────────────────────────────────────────────────
// ── Scan Input Enter ──────────────────────────────────────────────────────────
scanInput.addEventListener("keydown", (e) => {
if (e.key === "Enter") {
const v = scanInput.value.trim();
if (v) submitScan(v);
if (v) enqueue(v);
}
});