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

Batches

Browse Source
This commit is contained in:
oliver
2026-06-10 06:44:34 -03:00
parent 586eb87156
commit c5f2d299ee
4 changed files with 898 additions and 307 deletions
Download Patch File Download Diff File Expand all files Collapse all files
agent.md
+28 -4
View File
@@ -33,7 +33,8 @@ Font: system font stack (`-apple-system`, `Segoe UI`, etc.)
## Webhook
**Base URL:** `https://brandize.app.n8n.cloud/webhook/e0268b0f-4935-49ba-bfdf-1c0ee01d3b9d`
**Base URL (scan):** `https://brandize.app.n8n.cloud/webhook/transfer`
**Base URL (batches):** `https://brandize.app.n8n.cloud/webhook/batch`
### GET — load users
Called once on page load to populate the user dropdown.
@@ -54,7 +55,7 @@ Authorization: Basic <base64>
3. `{ Name: "Oliver" }` — single object, Name is a string
### POST — submit scan
Called when the user presses Enter in the scan input.
Called automatically when the user types/stops typing for 100ms (debounced).
```
POST <base_url>
@@ -103,6 +104,28 @@ Two cases:
Errors appear in the **persistent status banner** (red, no auto-dismiss) and the scan input is selected so the user can re-scan or correct the code.
### GET — load batches
Called on page load and when the Batches tab becomes visible.
```
GET <batch_url>
Authorization: Basic <base64>
```
**Response shape:**
```json
[
{
"data": [
{ "id": 18599, "name": "BATCH/26-06-10/18599", "description": "mix dpd", "carrier": "DPD/AT", "state": "done" },
...
]
}
]
```
The Batches tab shows a searchable, filterable table with German headers (Chargenname, Transport, Status). Default filter resets to `state != "done"` ("Active") each time the tab opens. Columns are sortable — click Chargenname or Status to toggle ascending/descending. Sorting resets to name-asc when switching tabs.
### NDJSON / response format
n8n sometimes returns multiple items as NDJSON (one JSON object per line) instead of a proper JSON array. `parseJson(res)` handles all three formats:
1. Standard JSON array `[...]`
@@ -131,8 +154,9 @@ n8n sometimes returns multiple items as NDJSON (one JSON object per line) instea
On mobile (< 620 px): scan input goes full-width on its own row; user dropdown and clear button share the row below.
## Key behaviours
- **On load**: cookie credentials restored → GET webhook fires → dropdown populated → scan input auto-focused
- **Enter key**: trims input → duplicate check → clears input **immediately** → adds pending row → pushed onto FIFO queue → `drainQueue()` starts if idle
- **On load**: cookie credentials restored → GET webhooks fire (users + batches) → dropdown populated → scan input auto-focused
- **Scan auto-submit**: scanner input is debounced at 100ms — typing a barcode and pausing auto-submits without needing Enter
- **Scan auto-switches tab**: submitting a scan automatically switches to the Scan Log tab if the Batches tab is active
- **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
app.js
+440 -274
View File
@@ -1,8 +1,8 @@
"use strict";
// ── Config ──────────────────────────────────────────────────────────────
const WEBHOOK =
"https://brandize.app.n8n.cloud/webhook/e0268b0f-4935-49ba-bfdf-1c0ee01d3b9d";
const WEBHOOK = "https://brandize.app.n8n.cloud/webhook/transfer";
const BATCH_WEBHOOK = "https://brandize.app.n8n.cloud/webhook/batch";
// ── State ───────────────────────────────────────────────────────────────────
let creds = null; // { user, pass }
@@ -11,6 +11,12 @@ let scanCount = 0;
const scanQueue = []; // { code, user, rowEl } — FIFO
let queueBusy = false; // true while drainQueue is running
// Batches
let allBatches = [];
let scanDebounceTimer = null;
let sortField = "name";
let sortAsc = true;
// ── DOM refs ─────────────────────────────────────────────────────────────
const scanInput = document.getElementById("scanInput");
const userSelect = document.getElementById("userSelect");
@@ -26,328 +32,340 @@ const authPass = document.getElementById("authPass");
const authBtn = document.getElementById("authBtn");
const modalError = document.getElementById("modalError");
const toast = document.getElementById("toast");
const scanSearch = document.getElementById("scanSearch");
const batchSearch = document.getElementById("batchSearch");
const batchList = document.getElementById("batchList");
const batchStateFilter = document.getElementById("batchStateFilter");
const scanPanel = document.getElementById("scanPanel");
const batchesPanel = document.getElementById("batchesPanel");
// ── Cookie helpers ────────────────────────────────────────────────────────
function saveCreds(user, pass) {
const val = btoa(encodeURIComponent(JSON.stringify({ user, pass })));
document.cookie = `hr_auth=${val}; max-age=${30 * 24 * 3600}; SameSite=Strict; path=/`;
const val = btoa(encodeURIComponent(JSON.stringify({ user, pass })));
document.cookie = `hr_auth=${val}; max-age=${30 * 24 * 3600}; SameSite=Strict; path=/`;
}
function loadCredsFromCookie() {
const match = document.cookie.match(/(?:^|;\s*)hr_auth=([^;]+)/);
if (match) {
try {
return JSON.parse(decodeURIComponent(atob(match[1])));
} catch (_) {}
}
return null;
const match = document.cookie.match(/(?:^|;\s*)hr_auth=([^;]+)/);
if (match) {
try {
return JSON.parse(decodeURIComponent(atob(match[1])));
} catch (_) {}
}
return null;
}
function clearCredsCookie() {
document.cookie = "hr_auth=; max-age=0; path=/";
document.cookie = "hr_auth=; max-age=0; path=/";
}
// ── JSON parser (handles array, single object, and NDJSON) ───────────────
async function parseJson(res) {
const text = await res.text();
// Standard JSON (array or object)
try {
const parsed = JSON.parse(text);
return parsed;
} catch (_) {}
// NDJSON — n8n sometimes returns one object per line
try {
const lines = text
.trim()
.split("\n")
.filter((l) => l.trim());
if (lines.length > 0) {
return lines.map((l) => JSON.parse(l));
}
} catch (_) {}
throw new Error("Could not parse server response");
const text = await res.text();
// Standard JSON (array or object)
try {
const parsed = JSON.parse(text);
return parsed;
} catch (_) {}
// NDJSON — n8n sometimes returns one object per line
try {
const lines = text
.trim()
.split("\n")
.filter((l) => l.trim());
if (lines.length > 0) {
return lines.map((l) => JSON.parse(l));
}
} catch (_) {}
throw new Error("Could not parse server response");
}
// ── Helpers ──────────────────────────────────────────────────────────────
function esc(str) {
return String(str ?? "")
.replace(/&/g, "&amp;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.replace(/"/g, "&quot;");
return String(str ?? "")
.replace(/&/g, "&amp;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.replace(/"/g, "&quot;");
}
function getHeaders(json = true) {
const h = {};
if (json) h["Content-Type"] = "application/json";
if (creds) {
h["Authorization"] = "Basic " + btoa(creds.user + ":" + creds.pass);
}
return h;
const h = {};
if (json) h["Content-Type"] = "application/json";
if (creds) {
h["Authorization"] = "Basic " + btoa(creds.user + ":" + creds.pass);
}
return h;
}
// ── Toast ────────────────────────────────────────────────────────────────
let toastTimer = null;
function showToast(msg, type = "", ms = 3200) {
clearTimeout(toastTimer);
toast.textContent = msg;
toast.className = "visible " + type;
toastTimer = setTimeout(() => {
toast.className = "";
}, ms);
clearTimeout(toastTimer);
toast.textContent = msg;
toast.className = "visible " + type;
toastTimer = setTimeout(() => {
toast.className = "";
}, ms);
}
// ── Status Banner ────────────────────────────────────────────────────────
let bannerTimer = null;
function showBanner(msg, type, autohide = 0) {
clearTimeout(bannerTimer);
banner.textContent = "";
if (type === "loading") {
const dots = document.createElement("div");
dots.className = "dot-spinner";
dots.innerHTML = "<span></span><span></span><span></span>";
banner.appendChild(dots);
const t = document.createTextNode(" " + msg);
banner.appendChild(t);
} else {
banner.textContent = msg;
}
banner.className = "active " + type;
if (autohide) bannerTimer = setTimeout(hideBanner, autohide);
clearTimeout(bannerTimer);
banner.textContent = "";
if (type === "loading") {
const dots = document.createElement("div");
dots.className = "dot-spinner";
dots.innerHTML = "<span></span><span></span><span></span>";
banner.appendChild(dots);
const t = document.createTextNode(" " + msg);
banner.appendChild(t);
} else {
banner.textContent = msg;
}
banner.className = "active " + type;
if (autohide) bannerTimer = setTimeout(hideBanner, autohide);
}
function hideBanner() {
banner.className = "";
banner.textContent = "";
banner.className = "";
banner.textContent = "";
}
// ── Auth Modal ───────────────────────────────────────────────────────────
function needAuth(retryCb) {
pendingAuthCb = retryCb;
modalError.style.display = "none";
// Pre-fill from saved cookie so user only needs to confirm
const saved = loadCredsFromCookie();
authUser.value = saved?.user || "";
authPass.value = saved?.pass || "";
authModal.classList.remove("hidden");
// Focus password if username already filled, otherwise username
setTimeout(() => (saved ? authPass.focus() : authUser.focus()), 50);
pendingAuthCb = retryCb;
modalError.style.display = "none";
// Pre-fill from saved cookie so user only needs to confirm
const saved = loadCredsFromCookie();
authUser.value = saved?.user || "";
authPass.value = saved?.pass || "";
authModal.classList.remove("hidden");
// Focus password if username already filled, otherwise username
setTimeout(() => (saved ? authPass.focus() : authUser.focus()), 50);
}
function cancelAuth() {
authModal.classList.add("hidden");
pendingAuthCb = null;
showBanner("Authentication cancelled.", "error", 4000);
authModal.classList.add("hidden");
pendingAuthCb = null;
showBanner("Authentication cancelled.", "error", 4000);
}
async function submitAuth() {
const u = authUser.value.trim();
const p = authPass.value;
if (!u || !p) {
modalError.textContent = "Please enter both username and password.";
modalError.style.display = "block";
return;
}
const u = authUser.value.trim();
const p = authPass.value;
if (!u || !p) {
modalError.textContent = "Please enter both username and password.";
modalError.style.display = "block";
return;
}
creds = { user: u, pass: p };
saveCreds(u, p); // persist to cookie
authBtn.classList.add("loading");
authBtn.disabled = true;
modalError.style.display = "none";
creds = { user: u, pass: p };
saveCreds(u, p); // persist to cookie
authBtn.classList.add("loading");
authBtn.disabled = true;
modalError.style.display = "none";
// Close modal first, then retry
authModal.classList.add("hidden");
authBtn.classList.remove("loading");
authBtn.disabled = false;
// Close modal first, then retry
authModal.classList.add("hidden");
authBtn.classList.remove("loading");
authBtn.disabled = false;
if (pendingAuthCb) {
const cb = pendingAuthCb;
pendingAuthCb = null;
await cb();
}
if (pendingAuthCb) {
const cb = pendingAuthCb;
pendingAuthCb = null;
await cb();
}
}
authPass.addEventListener("keydown", (e) => {
if (e.key === "Enter") submitAuth();
if (e.key === "Enter") submitAuth();
});
// ── Load Users ───────────────────────────────────────────────────────────
async function loadUsers() {
showBanner("Loading users…", "loading");
try {
const res = await fetch(WEBHOOK, {
method: "GET",
headers: getHeaders(false),
});
showBanner("Loading users…", "loading");
try {
const res = await fetch(WEBHOOK, {
method: "GET",
headers: getHeaders(false),
});
if (res.status === 401) {
hideBanner();
needAuth(loadUsers);
return;
}
if (!res.ok) {
showBanner(`Could not load users (HTTP ${res.status}).`, "error");
userSelect.innerHTML =
'<option value="">Error – tap to retry</option>';
return;
}
const data = await parseJson(res);
console.log("[HR] Users response:", data);
buildDropdown(data);
hideBanner();
} catch (err) {
console.error(err);
showBanner("Network error – could not reach the server.", "error");
userSelect.innerHTML =
'<option value="">Offline – check connection</option>';
if (res.status === 401) {
hideBanner();
needAuth(loadUsers);
return;
}
if (!res.ok) {
showBanner(`Could not load users (HTTP ${res.status}).`, "error");
userSelect.innerHTML = '<option value="">Error – tap to retry</option>';
return;
}
const data = await parseJson(res);
console.log("[HR] Users response:", data);
buildDropdown(data);
hideBanner();
} catch (err) {
console.error(err);
showBanner("Network error – could not reach the server.", "error");
userSelect.innerHTML =
'<option value="">Offline – check connection</option>';
}
}
function buildDropdown(users) {
userSelect.innerHTML = '<option value="">— Select User —</option>';
userSelect.innerHTML = '<option value="">— Select User —</option>';
// Normalise all shapes n8n may return:
// { Name: ["Oliver", "Luka", "Benni"] } ← actual format
// [ { Name: "Oliver" }, ... ] ← standard array
// { Name: "Oliver" } ← single object
let names = [];
if (Array.isArray(users)) {
// Array of objects: pull .Name from each
names = users.map((u) => u.Name).filter(Boolean);
} else if (users && Array.isArray(users.Name)) {
// Single object with a Name array
names = users.Name.filter(Boolean);
} else if (users && users.Name) {
// Single object with a single Name string
names = [users.Name];
}
// Normalise all shapes n8n may return:
// { Name: ["Oliver", "Luka", "Benni"] } ← actual format
// [ { Name: "Oliver" }, ... ] ← standard array
// { Name: "Oliver" } ← single object
let names = [];
if (Array.isArray(users)) {
// Array of objects: pull .Name from each
names = users.map((u) => u.Name).filter(Boolean);
} else if (users && Array.isArray(users.Name)) {
// Single object with a Name array
names = users.Name.filter(Boolean);
} else if (users && users.Name) {
// Single object with a single Name string
names = [users.Name];
}
names.forEach((name) => {
userSelect.appendChild(new Option(name, name));
});
names.forEach((name) => {
userSelect.appendChild(new Option(name, name));
});
}
// ── Duplicate check ──────────────────────────────────────────────────────
// Checks both resolved rows and pending rows (all have .col-code)
function isDuplicate(code) {
for (const cell of tableBody.querySelectorAll(".col-code")) {
if (cell.textContent === code) return true;
}
return false;
for (const cell of tableBody.querySelectorAll(".col-code")) {
if (cell.textContent === code) return true;
}
return false;
}
// ── 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");
}
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 code = raw.trim();
if (!code) return;
const user = userSelect.value;
if (!user) {
showToast("Please select a user first!", "fail");
userSelect.style.outline = "2px solid rgba(255,80,80,0.8)";
setTimeout(() => {
userSelect.style.outline = "";
}, 1200);
return;
}
const user = userSelect.value;
if (!user) {
showToast("Please select a user first!", "fail");
userSelect.style.outline = "2px solid rgba(255,80,80,0.8)";
setTimeout(() => {
userSelect.style.outline = "";
}, 1200);
return;
}
if (isDuplicate(code)) {
showToast("⚠️ Already scanned: " + code, "fail", 4000);
scanInput.select();
return;
}
if (isDuplicate(code)) {
showToast("⚠️ Already scanned: " + code, "fail", 4000);
scanInput.select();
return;
}
// Clear input immediately so the next scan can happen right away
scanInput.value = "";
scanInput.focus();
hideBanner();
// Auto-switch to scan log tab
switchToScanTab();
// Add a pending row to the table (also registers code for dupe detection)
const rowEl = addPendingRow(code);
// Clear input immediately so the next scan can happen right away
scanInput.value = "";
scanInput.focus();
hideBanner();
// Push onto queue
scanQueue.push({ code, user, rowEl });
updateQueuePill();
// Add a pending row to the table (also registers code for dupe detection)
const rowEl = addPendingRow(code);
// Kick off the queue processor if it isn't running already
if (!queueBusy) drainQueue();
// Push onto queue
scanQueue.push({ code, user, rowEl });
updateQueuePill();
// Kick off the queue processor if it isn't running already
if (!queueBusy) drainQueue();
}
// ── Batch search/filter events ──────────────────────────────────────────
batchSearch.addEventListener("input", renderBatches);
batchStateFilter.addEventListener("change", renderBatches);
// ── 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();
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;
}
queueBusy = false;
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 }),
});
try {
const res = await fetch(WEBHOOK, {
method: "POST",
headers: getHeaders(true),
body: JSON.stringify({ user, code }),
});
if (res.status === 401) return "auth"; // signal caller to pause
if (res.status === 401) return "auth"; // signal caller to pause
if (!res.ok) {
let errMsg = `Scan failed (HTTP ${res.status})`;
try {
const errData = await parseJson(res);
if (errData?.error) errMsg = errData.error;
} catch (_) {}
rowError(rowEl, errMsg);
return "ok";
}
const item = await parseJson(res);
if (item?.error) {
rowError(rowEl, item.error);
return "ok";
}
resolveRow(rowEl, item);
return "ok";
} catch (err) {
console.error(err);
rowError(rowEl, "Network error – could not reach server");
return "ok";
if (!res.ok) {
let errMsg = `Scan failed (HTTP ${res.status})`;
try {
const errData = await parseJson(res);
if (errData?.error) errMsg = errData.error;
} catch (_) {}
rowError(rowEl, errMsg);
return "ok";
}
const item = await parseJson(res);
if (item?.error) {
rowError(rowEl, item.error);
return "ok";
}
resolveRow(rowEl, item);
return "ok";
} catch (err) {
console.error(err);
rowError(rowEl, "Network error – could not reach server");
return "ok";
}
}
// ── Table rows ────────────────────────────────────────────────────────────────
function addPendingRow(code) {
emptyState.style.display = "none";
const tr = document.createElement("tr");
tr.className = "row-pending";
tr.innerHTML = `
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>
@@ -355,28 +373,28 @@ function addPendingRow(code) {
</td>
<td class="col-code">${esc(code)}</td>
`;
tableBody.insertBefore(tr, tableBody.firstChild);
return tr;
tableBody.insertBefore(tr, tableBody.firstChild);
return tr;
}
function resolveRow(rowEl, item) {
const code = rowEl.querySelector(".col-code").textContent;
rowEl.className = item.gepackt ? "row-already-packed" : "";
rowEl.innerHTML = `
const code = rowEl.querySelector(".col-code").textContent;
rowEl.className = item.gepackt ? "row-already-packed" : "";
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");
scanCount++;
countPill.textContent = scanCount + (scanCount === 1 ? " scan" : " scans");
countPill.classList.remove("zero");
}
function rowError(rowEl, msg) {
const code = rowEl.querySelector(".col-code").textContent;
rowEl.className = "row-error";
rowEl.innerHTML = `
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>
@@ -387,47 +405,195 @@ function rowError(rowEl, msg) {
}
// ── Clear ──────────────────────────────────────────────────────────────────────
function clearTable() {
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;
countPill.textContent = "0 scans";
countPill.classList.add("zero");
emptyState.style.display = "";
scanInput.focus();
showToast("Table cleared", "", 2000);
}
// ── Scan Input Enter ──────────────────────────────────────────────────────────
scanInput.addEventListener("keydown", (e) => {
if (e.key === "Enter") {
const v = scanInput.value.trim();
if (v) enqueue(v);
// ── Scan search/filter ──────────────────────────────────────────────────
scanSearch.addEventListener("input", () => {
const q = scanSearch.value.toLowerCase().trim();
let visible = 0;
for (const row of tableBody.querySelectorAll("tr")) {
const txt = row.textContent.toLowerCase();
if (!q || txt.includes(q)) {
row.style.display = "";
visible++;
} else {
row.style.display = "none";
}
}
// Update the count pill with filtered count
countPill.textContent = visible + (visible === 1 ? " scan" : " scans");
countPill.classList.toggle("zero", visible === 0);
});
// Retry on clicking offline dropdown
userSelect.addEventListener("focus", () => {
if (
userSelect.options.length <= 1 &&
userSelect.options[0]?.value === "" &&
/error|offline/i.test(userSelect.options[0]?.text)
) {
loadUsers();
function clearTable() {
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 = "";
scanSearch.value = "";
scanCount = 0;
countPill.textContent = "0 scans";
countPill.classList.add("zero");
emptyState.style.display = "";
scanInput.focus();
showToast("Table cleared", "", 2000);
}
// ── Scan Input (debounced auto-submit) ──────────────────────────────────
scanInput.addEventListener("input", () => {
clearTimeout(scanDebounceTimer);
scanDebounceTimer = setTimeout(() => {
const v = scanInput.value.trim();
if (v) enqueue(v);
}, 100);
});
// ── Tab switching ────────────────────────────────────────────────────────
function switchTab(tab) {
document.body.className = "tab-" + tab;
document.querySelectorAll(".tab-btn").forEach((btn) => {
btn.classList.toggle("active", btn.dataset.tab === tab);
});
if (tab === "batches") {
batchStateFilter.value = "!done";
sortField = "name";
sortAsc = true;
loadBatches();
}
}
// Autoswitch to scan tab when a scan is enqueued
function switchToScanTab() {
if (document.body.classList.contains("tab-batches")) {
switchTab("scan");
}
}
// ── Batch webhook ────────────────────────────────────────────────────────
async function loadBatches() {
try {
const res = await fetch(BATCH_WEBHOOK, {
method: "GET",
headers: getHeaders(false),
});
if (res.status === 401) {
needAuth(loadBatches);
return;
}
if (!res.ok) {
batchList.innerHTML =
'<div class="empty-state" style="margin:40px 0"><div class="empty-title">Could not load batches</div></div>';
return;
}
const data = await parseJson(res);
console.log("[HR] Batches response:", data);
// Response can be { data: [...] } or an array wrapping it
if (data && Array.isArray(data.data)) {
allBatches = data.data;
} else if (
Array.isArray(data) &&
data.length > 0 &&
Array.isArray(data[0].data)
) {
allBatches = data[0].data;
} else {
allBatches = [];
}
renderBatches();
} catch (err) {
console.error(err);
batchList.innerHTML =
'<div class="empty-state" style="margin:40px 0"><div class="empty-title">Network error</div></div>';
}
}
function sortBatches(field) {
if (sortField === field) {
sortAsc = !sortAsc;
} else {
sortField = field;
sortAsc = true;
}
renderBatches();
}
function renderBatches() {
const query = batchSearch.value.toLowerCase().trim();
const stateFilter = batchStateFilter.value;
let filtered = allBatches.filter((b) => {
// State filter
if (stateFilter === "!done") {
if (b.state === "done") return false;
} else if (stateFilter && b.state !== stateFilter) {
return false;
}
// Text search
if (!query) return true;
return (
(b.name && b.name.toLowerCase().includes(query)) ||
(b.description && b.description.toLowerCase().includes(query)) ||
(b.carrier && b.carrier.toLowerCase().includes(query))
);
});
// Sort
filtered.sort((a, b) => {
const aVal = (a[sortField] || "").toLowerCase();
const bVal = (b[sortField] || "").toLowerCase();
return sortAsc ? aVal.localeCompare(bVal) : bVal.localeCompare(aVal);
});
// Update sort arrows
document.getElementById("sortArrowName").textContent =
sortField === "name" ? (sortAsc ? "▲" : "▼") : "";
document.getElementById("sortArrowState").textContent =
sortField === "state" ? (sortAsc ? "▲" : "▼") : "";
if (filtered.length === 0) {
batchList.innerHTML =
'<tr><td colspan="4" class="batch-empty">No batches match</td></tr>';
return;
}
batchList.innerHTML = filtered
.map(
(b) => `
<tr class="${b.state === "done" ? "batch-row-done" : ""}">
<td><span class="batch-charge-cell">${esc(b.name)}</span></td>
<td><span class="batch-name-cell">${esc(b.description || "")}</span></td>
<td><span class="batch-carrier-cell">${esc(b.carrier || "")}</span></td>
<td><span class="batch-state-cell batch-state-${esc(b.state || "open")}">${esc(b.state || "open")}</span></td>
</tr>`,
)
.join("");
}
// ── Retry on clicking offline dropdown ──────────────────────────────────
userSelect.addEventListener("focus", () => {
if (
userSelect.options.length <= 1 &&
userSelect.options[0]?.value === "" &&
/error|offline/i.test(userSelect.options[0]?.text)
) {
loadUsers();
}
});
// ── Init ─────────────────────────────────────────────────────────────────
window.addEventListener("DOMContentLoaded", () => {
// Restore saved credentials before the first network call
const saved = loadCredsFromCookie();
if (saved) creds = saved;
loadUsers();
scanInput.focus();
// Restore saved credentials before the first network call
const saved = loadCredsFromCookie();
if (saved) creds = saved;
loadUsers();
loadBatches();
scanInput.focus();
});
index.html
+117 -21
View File
@@ -9,7 +9,7 @@
<title>Health Routine – Package Scanner</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<body class="tab-scan">
<!-- Brand bar -->
<div class="brand-bar">
<div class="brand-logo-wrap">
@@ -73,34 +73,63 @@
</div>
</div>
<!-- Tab bar -->
<div class="tab-bar">
<button
class="tab-btn active"
data-tab="scan"
onclick="switchTab('scan')"
>
Scan Log
</button>
<button
class="tab-btn"
data-tab="batches"
onclick="switchTab('batches')"
>
Batches
</button>
</div>
<!-- Status banner -->
<div id="statusBanner"></div>
<!-- Main content -->
<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>
<!-- Scan Log panel -->
<main id="scanPanel">
<div class="scan-search-wrap">
<svg
class="scan-search-icon"
viewBox="0 0 24 24"
width="16"
height="16"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
>
<circle cx="11" cy="11" r="8" />
<line x1="21" y1="21" x2="16.65" y2="16.65" />
</svg>
<input
type="text"
id="scanSearch"
placeholder="Filter scans…"
autocomplete="off"
/>
<span class="count-pill zero" id="countPill">0 scans</span>
<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>
</div>
<div class="table-wrapper" id="tableWrapper">
<table id="scanTable">
<thead>
<tr>
<th>Country</th>
<th>Land</th>
<th>Name</th>
<th>Tag</th>
<th class="col-code">Code</th>
@@ -188,6 +217,73 @@
</div>
</div>
<!-- Batches panel -->
<div class="tab-panel" id="batchesPanel" style="display: none">
<div class="batch-search-wrap">
<svg
class="batch-search-icon"
viewBox="0 0 24 24"
width="16"
height="16"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
>
<circle cx="11" cy="11" r="8" />
<line x1="21" y1="21" x2="16.65" y2="16.65" />
</svg>
<input
type="text"
id="batchSearch"
placeholder="Search batches…"
autocomplete="off"
/>
<select id="batchStateFilter">
<option value="!done">Active</option>
<option value="">All</option>
<option value="done">Done</option>
<option value="open">Open</option>
</select>
</div>
<div class="batch-table-wrap">
<table class="batch-table">
<thead>
<tr>
<th>Charge</th>
<th
class="batch-th-sort"
onclick="sortBatches('name')"
>
Name
<span class="sort-arrow" id="sortArrowName"
>▲</span
>
</th>
<th>Transport</th>
<th
class="batch-th-sort"
onclick="sortBatches('state')"
>
Status
<span
class="sort-arrow"
id="sortArrowState"
></span>
</th>
</tr>
</thead>
<tbody id="batchList">
<tr>
<td colspan="4" class="batch-empty">
Loading batches…
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Toast notification -->
<div id="toast"></div>
styles.css
+313 -8
View File
@@ -97,6 +97,65 @@ body {
font-weight: 400;
}
/* ── Tab Bar ─────────────────────────────────────────── */
.tab-bar {
background: var(--primary-dark);
display: flex;
gap: 0;
padding: 0 20px;
flex-shrink: 0;
}
.tab-btn {
background: transparent;
border: none;
color: rgba(255, 255, 255, 0.55);
font-size: 13px;
font-weight: 600;
padding: 10px 20px;
cursor: pointer;
position: relative;
transition: color 0.15s;
letter-spacing: 0.3px;
}
.tab-btn:hover {
color: rgba(255, 255, 255, 0.85);
}
.tab-btn.active {
color: #fff;
}
.tab-btn.active::after {
content: "";
position: absolute;
bottom: 0;
left: 8px;
right: 8px;
height: 3px;
background: #fff;
border-radius: 3px 3px 0 0;
}
.tab-panel {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
}
body.tab-scan #batchesPanel {
display: none;
}
body.tab-batches main {
display: none;
}
body.tab-batches #batchesPanel {
display: flex !important;
}
/* ── Controls Bar ────────────────────────────────────── */
.controls-bar {
background: var(--primary);
@@ -295,14 +354,49 @@ body {
}
}
/* ── Scan search bar ─────────────────────────────────── */
.scan-search-wrap {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
background: var(--white);
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.scan-search-icon {
flex-shrink: 0;
color: var(--text-muted);
}
#scanSearch {
flex: 1;
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: 8px 12px;
font-size: 14px;
font-family: inherit;
background: var(--bg);
outline: none;
transition: border-color 0.15s;
}
#scanSearch:focus {
border-color: var(--primary);
}
.scan-search-wrap .count-pill {
flex-shrink: 0;
}
/* ── Main / Table ────────────────────────────────────── */
main {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
padding: 16px 20px 20px;
gap: 10px;
padding: 0;
overflow: hidden;
}
@@ -338,6 +432,13 @@ main {
}
/* Table wrapper — this scrolls */
.scan-header-row {
display: flex;
align-items: center;
gap: 10px;
padding: 2px 0;
}
.table-wrapper {
flex: 1;
min-height: 0;
@@ -364,19 +465,19 @@ thead {
}
thead tr {
background: var(--primary);
background: var(--white);
}
thead th {
padding: 13px 18px;
padding: 14px 18px 6px;
text-align: left;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.2px;
letter-spacing: 0.8px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.9);
color: var(--text-muted);
white-space: nowrap;
border-bottom: 2px solid var(--primary-dark);
border-bottom: 2px solid var(--border);
}
thead th:first-child {
@@ -884,7 +985,211 @@ tbody td {
}
}
/* Scrollbar styling */
/* ── Batch List ──────────────────────────────────────── */
.batch-search-wrap {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
background: var(--white);
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.batch-search-icon {
flex-shrink: 0;
color: var(--text-muted);
}
#batchSearch {
flex: 1;
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: 8px 12px;
font-size: 14px;
font-family: inherit;
background: var(--bg);
outline: none;
transition: border-color 0.15s;
}
#batchSearch:focus {
border-color: var(--primary);
}
#batchStateFilter {
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: 8px 10px;
font-size: 13px;
font-family: inherit;
background: var(--bg);
color: var(--text);
outline: none;
cursor: pointer;
}
#batchStateFilter:focus {
border-color: var(--primary);
}
.batch-table-wrap {
flex: 1;
min-height: 0;
overflow: auto;
padding: 0 20px 20px;
background: var(--white);
}
.batch-table {
width: 100%;
border-collapse: separate;
border-spacing: 0 4px;
}
.batch-table thead {
position: sticky;
top: 0;
z-index: 5;
}
.batch-table thead tr {
background: var(--white);
}
.batch-table thead th {
padding: 14px 18px 6px;
text-align: left;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--text-muted);
white-space: nowrap;
border-bottom: 2px solid var(--border);
}
.batch-th-sort {
cursor: pointer;
user-select: none;
}
.batch-th-sort:hover {
color: var(--text);
}
.sort-arrow {
font-size: 10px;
margin-left: 3px;
opacity: 0.7;
}
.batch-table tbody td {
padding: 12px;
background: var(--bg);
border-radius: 0;
font-size: 14px;
vertical-align: middle;
}
.batch-table tbody tr {
border-radius: var(--r-md);
overflow: hidden;
transition: opacity 0.15s;
}
.batch-table tbody tr:hover td {
background: var(--primary-light);
}
.batch-table tbody tr:first-child td:first-child {
border-radius: var(--r-md) 0 0 var(--r-md);
}
.batch-table tbody tr:first-child td:last-child {
border-radius: 0 var(--r-md) var(--r-md) 0;
}
.batch-row-done td {
opacity: 0.5;
}
.batch-row-done .batch-name-cell {
text-decoration: line-through;
}
.batch-charge-cell {
font-weight: 600;
color: var(--text);
font-size: 13px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}
.batch-name-cell {
color: var(--text);
font-size: 13px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 180px;
}
.batch-carrier-cell {
font-size: 11px;
font-weight: 600;
color: var(--primary);
background: var(--primary-light);
padding: 2px 8px;
border-radius: 99px;
white-space: nowrap;
display: inline-block;
}
.batch-state-cell {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 3px 10px;
border-radius: 99px;
white-space: nowrap;
display: inline-block;
}
.batch-state-done {
background: #d1fae5;
color: #065f46;
}
.batch-state-open {
background: #fef3c7;
color: #92400e;
}
.batch-empty {
text-align: center;
color: var(--text-muted);
padding: 40px 0 !important;
font-size: 14px;
}
@media (max-width: 620px) {
.batch-table tbody td {
padding: 8px 6px;
font-size: 12px;
}
.batch-charge-cell {
max-width: 120px;
}
.batch-name-cell {
max-width: 100px;
}
}
/* ── Scrollbar styling ───────────────────────────────── */
.table-wrapper::-webkit-scrollbar {
width: 6px;
height: 6px;