shawn/canteen-admin-server
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: per-field review UI polish — blank-fill auto-select, btn-accent CSS, card-bg fixes, sticky bar z-index

Browse Source
This commit is contained in:
Leo
2026-05-23 18:35:27 -04:00
parent c35e2a1af9
commit 8fc6a93ff2
1 changed files with 10 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/index.html
+10 -2
View File
@@ -200,6 +200,8 @@
.btn-danger { background: transparent; border: 1.5px solid var(--red); color: var(--red); }
.btn-green { background: var(--green); color: #000; }
.btn-green-outline { background: transparent; border: 1.5px solid var(--green); color: var(--green); }
.btn-accent { background: var(--accent-bg); border: 1.5px solid var(--accent); color: var(--accent2); }
.btn-accent:hover { background: var(--accent); color: #fff; }
.btn-amber { background: var(--amber); color: #000; }
.btn-block { width: 100%; }
@@ -2559,6 +2561,12 @@ async function toggleFieldReview(batchId) {
try {
const data = await api(`/api/admin/cantaloupe/batches/${batchId}/field-changes`);
_csFieldReviewState.changes = data.field_changes || [];
// Auto-select blank-fill changes (old_value was empty/null)
for (const ch of _csFieldReviewState.changes) {
if (ch.is_blank_fill) {
_csFieldReviewState.selected.add(ch.machine_id + ':' + ch.field);
}
}
renderFieldChanges(area);
area.style.display = 'block';
_csFieldReviewOpen = true;
@@ -2597,7 +2605,7 @@ function renderFieldChanges(area) {
const allSelected = assetChanges.every(c => state.selected.has(c.machine_id + ':' + c.field));
const anySelected = assetChanges.some(c => state.selected.has(c.machine_id + ':' + c.field));
html += `<div style="background:var(--card-bg);border:1px solid var(--border);border-radius:8px;padding:8px;transition:opacity 0.2s;" id="fcAsset_${esc(asset.machine_id)}">`;
html += `<div style="background:var(--card2);border:1px solid var(--border);border-radius:8px;padding:8px;transition:opacity 0.2s;" id="fcAsset_${esc(asset.machine_id)}">`;
html += `<div style="display:flex;align-items:center;gap:8px;margin-bottom:4px;">
<input type="checkbox" ${allSelected ? 'checked' : ''} onchange="toggleAssetChanges('${esc(asset.machine_id)}', this.checked)" style="accent-color:var(--green);">
<span style="font-weight:600;font-size:13px;"><code class="mono">${esc(asset.machine_id)}</code> — ${esc(asset.name || '—')}</span>
@@ -2624,7 +2632,7 @@ function renderFieldChanges(area) {
// Sticky apply bar at bottom
const selectedCount = state.selected.size;
html += `<div style="position:sticky;bottom:0;background:var(--card-bg);border-top:1px solid var(--border);padding:10px 0;margin-top:8px;display:flex;align-items:center;justify-content:space-between;">
html += `<div style="position:sticky;bottom:0;background:var(--card);border-top:1px solid var(--border);padding:10px 0;margin-top:8px;display:flex;align-items:center;justify-content:space-between;z-index:10;">
<span style="font-size:12px;"><span id="csFieldCount" style="font-weight:700;">${selectedCount}</span> field change(s) selected</span>
<div style="display:flex;gap:8px;">
<button class="btn btn-sm btn-green" onclick="applyFieldChanges(${_csFieldReviewState.batchId})" id="csApplyFieldBtn"${selectedCount === 0 ? ' disabled style="opacity:0.5;"' : ''}>✓ Apply Selected</button>