Add Images admin section for managing source image uses
New top-level nav section showing all source images in a list view with checkboxes to edit the uses array (grid, bin) per image. Allows correcting wrongly-tagged images without code changes. Server PUT /api/source-images/:id was already in place; re-added the frontend API wrapper that was prematurely removed. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1921,6 +1921,73 @@ function confirm_delete(message, on_confirm) {
|
||||
dlg.showModal();
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Images (source image admin)
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const KNOWN_USES = ['grid', 'bin'];
|
||||
|
||||
function render_images_section() {
|
||||
const main = document.getElementById('main');
|
||||
main.replaceChildren(document.getElementById('t-section-images').content.cloneNode(true));
|
||||
const list_el = document.getElementById('img-admin-list');
|
||||
|
||||
if (all_sources.length === 0) {
|
||||
const el = clone('t-empty-block');
|
||||
el.textContent = 'No source images yet.';
|
||||
list_el.appendChild(el);
|
||||
return;
|
||||
}
|
||||
|
||||
for (const src of all_sources) {
|
||||
const row = clone('t-img-admin-row');
|
||||
const link = qs(row, '.img-admin-thumb-link');
|
||||
link.href = `/img/${src.id}`;
|
||||
qs(row, '.img-admin-thumb').src = `/img/${src.id}`;
|
||||
qs(row, '.img-admin-name').textContent = src.original_name || src.id;
|
||||
qs(row, '.img-admin-meta').textContent = src.width && src.height ? `${src.width}×${src.height}` : '';
|
||||
|
||||
const uses_el = qs(row, '.img-admin-uses');
|
||||
for (const use of KNOWN_USES) {
|
||||
const label = document.createElement('label');
|
||||
label.className = 'img-admin-use-label';
|
||||
const cb = document.createElement('input');
|
||||
cb.type = 'checkbox';
|
||||
cb.checked = src.uses?.includes(use) ?? false;
|
||||
cb.addEventListener('change', async () => {
|
||||
const new_uses = KNOWN_USES.filter(u => {
|
||||
const el = uses_el.querySelector(`input[data-use="${u}"]`);
|
||||
return el ? el.checked : src.uses?.includes(u);
|
||||
});
|
||||
try {
|
||||
const result = await api.update_source_image_uses(src.id, new_uses);
|
||||
src.uses = result.source.uses;
|
||||
all_sources = all_sources.map(s => s.id === src.id ? { ...s, uses: src.uses } : s);
|
||||
} catch (err) {
|
||||
alert(err.message);
|
||||
cb.checked = !cb.checked; // revert
|
||||
}
|
||||
});
|
||||
cb.dataset.use = use;
|
||||
label.appendChild(cb);
|
||||
label.append(' ' + use);
|
||||
uses_el.appendChild(label);
|
||||
}
|
||||
|
||||
qs(row, '.img-admin-delete').addEventListener('click', async () => {
|
||||
try {
|
||||
await api.delete_source_image(src.id);
|
||||
all_sources = all_sources.filter(s => s.id !== src.id);
|
||||
row.remove();
|
||||
} catch (err) {
|
||||
alert(err.message);
|
||||
}
|
||||
});
|
||||
|
||||
list_el.appendChild(row);
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Bins
|
||||
// ---------------------------------------------------------------------------
|
||||
@@ -2087,6 +2154,8 @@ function parse_url() {
|
||||
section = 'fields';
|
||||
} else if (p0 === 'templates') {
|
||||
section = 'templates';
|
||||
} else if (p0 === 'images') {
|
||||
section = 'images';
|
||||
} else if (p0 === 'bins') {
|
||||
section = 'bins';
|
||||
bin_tab = p1 === 'sources' ? 'sources' : 'bins';
|
||||
@@ -2171,6 +2240,7 @@ function render() {
|
||||
else if (section === 'grids') render_grids();
|
||||
else if (section === 'templates') render_templates();
|
||||
else if (section === 'bins') render_bins();
|
||||
else if (section === 'images') render_images_section();
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
@@ -17,6 +17,7 @@
|
||||
<button class="nav-btn" data-section="grids">Grids</button>
|
||||
<button class="nav-btn" data-section="templates">Templates</button>
|
||||
<button class="nav-btn" data-section="bins">Bins</button>
|
||||
<button class="nav-btn" data-section="images">Images</button>
|
||||
</nav>
|
||||
<div class="maint-menu" id="maint-menu">
|
||||
<button class="maint-toggle" id="maint-toggle" title="Maintenance">⚙</button>
|
||||
|
||||
@@ -36,6 +36,7 @@ export const delete_grid_draft = (id) => req('DELETE', `/api/grid-drafts/${id}`
|
||||
|
||||
// Source images
|
||||
export const get_source_images = () => req('GET', '/api/source-images');
|
||||
export const update_source_image_uses = (id, uses) => req('PUT', `/api/source-images/${id}`, { uses });
|
||||
export const delete_source_image = (id) => req('DELETE', `/api/source-images/${id}`);
|
||||
|
||||
// Component templates
|
||||
|
||||
@@ -1844,6 +1844,68 @@ nav {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* ===== IMAGES ADMIN ===== */
|
||||
|
||||
.img-admin-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.img-admin-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.5rem 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.img-admin-thumb-link {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.img-admin-thumb {
|
||||
width: 80px;
|
||||
height: 56px;
|
||||
object-fit: cover;
|
||||
border-radius: 3px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.img-admin-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.img-admin-name {
|
||||
font-size: 0.9rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.img-admin-meta {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-faint);
|
||||
}
|
||||
|
||||
.img-admin-uses {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.img-admin-use-label {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
/* ===== BINS ===== */
|
||||
|
||||
.bin-gallery {
|
||||
|
||||
@@ -248,6 +248,27 @@
|
||||
<div class="empty-state"></div>
|
||||
</template>
|
||||
|
||||
<!-- ===== IMAGES SECTION ===== -->
|
||||
<template id="t-section-images">
|
||||
<section class="section" id="section-images">
|
||||
<div class="img-admin-list" id="img-admin-list"></div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<template id="t-img-admin-row">
|
||||
<div class="img-admin-row">
|
||||
<a class="img-admin-thumb-link" target="_blank" rel="noopener">
|
||||
<img class="img-admin-thumb" alt="">
|
||||
</a>
|
||||
<div class="img-admin-info">
|
||||
<div class="img-admin-name"></div>
|
||||
<div class="img-admin-meta"></div>
|
||||
<div class="img-admin-uses"></div>
|
||||
</div>
|
||||
<button type="button" class="btn-icon btn-danger img-admin-delete" title="Delete">✕</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- ===== GRIDS SECTION ===== -->
|
||||
<template id="t-section-grids">
|
||||
<section class="section" id="section-grids">
|
||||
|
||||
Reference in New Issue
Block a user