Improved admin UI
This commit is contained in:
@@ -295,13 +295,14 @@ function renderFilterBar(s) {
|
||||
`;
|
||||
}
|
||||
|
||||
function showTab(tab, btn) {
|
||||
function showTab(tab, btn, noHash) {
|
||||
currentTab = tab;
|
||||
document.querySelectorAll('nav button').forEach(b => b.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
clearSelection();
|
||||
const pag = document.getElementById('lib-pagination');
|
||||
if (pag) pag.style.display = 'none';
|
||||
if (!noHash) location.hash = tab;
|
||||
if (tab === 'queue') { loadQueue(); loadStats(); }
|
||||
else if (tab === 'artists') { libPage.artists = 0; renderLibSearchBar([{ label: 'Artist', key: 'q', tab: 'artists', value: libSearch.artists.q, placeholder: 'search artist…' }], ''); loadLibArtists(); }
|
||||
else if (tab === 'tracks') { libPage.tracks = 0; renderLibSearchBar([{ label: 'Title', key: 'q', tab: 'tracks', value: libSearch.tracks.q, placeholder: 'search title…' }, { label: 'Artist', key: 'artist', tab: 'tracks', value: libSearch.tracks.artist, placeholder: 'search artist…' }, { label: 'Album', key: 'album', tab: 'tracks', value: libSearch.tracks.album, placeholder: 'search album…' }], ''); loadLibTracks(); }
|
||||
@@ -312,7 +313,11 @@ function showTab(tab, btn) {
|
||||
// --- Queue ---
|
||||
async function loadQueue(status, keepSelection) {
|
||||
currentFilter = status;
|
||||
if (!keepSelection) { clearSelection(); queueOffset = 0; }
|
||||
if (!keepSelection) {
|
||||
clearSelection();
|
||||
queueOffset = 0;
|
||||
location.hash = status ? 'queue/' + status : 'queue';
|
||||
}
|
||||
const qs = `?${status ? 'status='+status+'&' : ''}limit=${queuePageSize+1}&offset=${queueOffset}`;
|
||||
const raw = await api(`/queue${qs}`) || [];
|
||||
const hasMore = raw.length > queuePageSize;
|
||||
@@ -359,6 +364,9 @@ function renderQueue(hasMore) {
|
||||
const artist = it.norm_artist || it.raw_artist || '-';
|
||||
const title = it.norm_title || it.raw_title || '-';
|
||||
const album = it.norm_album || it.raw_album || '-';
|
||||
const albumCoverUrl = (it.norm_album || it.raw_album) && (it.norm_artist || it.raw_artist)
|
||||
? `${API}/albums/cover-by-name?artist=${encodeURIComponent(it.norm_artist||it.raw_artist||'')}&name=${encodeURIComponent(it.norm_album||it.raw_album||'')}`
|
||||
: null;
|
||||
const year = it.norm_year || it.raw_year || '';
|
||||
const tnum = it.norm_track_number || it.raw_track_number || '';
|
||||
const canApprove = it.status === 'review';
|
||||
@@ -368,7 +376,7 @@ function renderQueue(hasMore) {
|
||||
<td><span class="status status-${it.status}">${it.status}</span></td>
|
||||
<td class="editable" ondblclick="inlineEdit(this,'${it.id}','norm_artist')" title="${esc(it.raw_artist||'')}">${esc(artist)}</td>
|
||||
<td class="editable" ondblclick="inlineEdit(this,'${it.id}','norm_title')" title="${esc(it.raw_title||'')}">${esc(title)}</td>
|
||||
<td class="editable" ondblclick="inlineEdit(this,'${it.id}','norm_album')" title="${esc(it.raw_album||'')}">${esc(album)}</td>
|
||||
<td class="editable" ondblclick="inlineEdit(this,'${it.id}','norm_album')" title="${esc(it.raw_album||'')}"><span style="display:inline-flex;align-items:center;gap:4px">${albumCoverUrl?`<img src="${albumCoverUrl}" style="width:20px;height:20px;border-radius:2px;object-fit:cover;flex-shrink:0" onerror="this.style.display='none'">`:''}${esc(album)}</span></td>
|
||||
<td>${year}</td>
|
||||
<td>${tnum}</td>
|
||||
<td>${conf}</td>
|
||||
@@ -1163,6 +1171,37 @@ function openTrackEditForArtist(trackId, artistId) {
|
||||
openTrackEdit(trackId, () => openArtistForm(artistId));
|
||||
}
|
||||
|
||||
// --- Album inline meta edit (from artist form) ---
|
||||
async function saveAlbumMeta(albumId, artistId) {
|
||||
const name = document.getElementById(`alb-name-${albumId}`)?.value?.trim();
|
||||
const yearRaw = document.getElementById(`alb-year-${albumId}`)?.value;
|
||||
if (!name) return;
|
||||
await api(`/albums/${albumId}/edit`, {
|
||||
method: 'PUT',
|
||||
headers: {'Content-Type':'application/json'},
|
||||
body: JSON.stringify({ name, year: parseInt(yearRaw) || null, artist_id: artistId }),
|
||||
});
|
||||
// Update header display in place
|
||||
const block = document.getElementById(`album-block-${albumId}`);
|
||||
if (block) {
|
||||
const nameSpan = block.querySelector('.ab-name');
|
||||
if (nameSpan) nameSpan.textContent = name;
|
||||
const yearSpan = block.querySelector('.ab-year');
|
||||
if (yearSpan) yearSpan.textContent = yearRaw || '';
|
||||
}
|
||||
}
|
||||
|
||||
async function applyAlbumGenre(albumId) {
|
||||
const genre = document.getElementById(`alb-genre-${albumId}`)?.value?.trim();
|
||||
if (!genre) return;
|
||||
await api(`/albums/${albumId}/genre`, {
|
||||
method: 'PUT',
|
||||
headers: {'Content-Type':'application/json'},
|
||||
body: JSON.stringify({ genre }),
|
||||
});
|
||||
document.getElementById(`alb-genre-${albumId}`).value = '';
|
||||
}
|
||||
|
||||
// --- Helpers ---
|
||||
function openModal() { document.getElementById('modalOverlay').classList.add('visible'); }
|
||||
function closeModal() { document.getElementById('modalOverlay').classList.remove('visible'); }
|
||||
@@ -1495,7 +1534,20 @@ async function openArtistForm(id) {
|
||||
<button class="btn btn-edit" style="font-size:10px;padding:2px 6px" onclick="openTrackEditForArtist(${t.id},${id})">Edit</button>
|
||||
<button data-hidden="${t.hidden}" onclick="toggleTrackHidden(${t.id},this)">${t.hidden?'Show':'Hide'}</button>
|
||||
</div>`).join('');
|
||||
body.innerHTML = tracks;
|
||||
const albumMeta = `<div style="padding:8px 10px;border-bottom:1px solid var(--border);background:var(--bg-panel)">
|
||||
<div style="display:flex;gap:6px;align-items:center;flex-wrap:wrap">
|
||||
<input id="alb-name-${alb.id}" value="${esc(alb.name)}" placeholder="Album name"
|
||||
style="flex:2;min-width:140px;background:var(--bg-card);border:1px solid var(--border);border-radius:4px;padding:4px 8px;color:var(--text);font-size:11px;font-family:inherit">
|
||||
<input id="alb-year-${alb.id}" type="number" value="${alb.year??''}" placeholder="Year"
|
||||
style="width:70px;background:var(--bg-card);border:1px solid var(--border);border-radius:4px;padding:4px 8px;color:var(--text);font-size:11px;font-family:inherit">
|
||||
<button class="btn btn-primary" style="font-size:10px;padding:3px 10px" onclick="saveAlbumMeta(${alb.id},${id})">Save</button>
|
||||
<span style="color:var(--border);user-select:none">|</span>
|
||||
<input id="alb-genre-${alb.id}" placeholder="Apply genre to all tracks…"
|
||||
style="flex:1;min-width:130px;background:var(--bg-card);border:1px solid var(--border);border-radius:4px;padding:4px 8px;color:var(--text);font-size:11px;font-family:inherit">
|
||||
<button class="btn btn-edit" style="font-size:10px;padding:3px 10px" onclick="applyAlbumGenre(${alb.id})">Apply</button>
|
||||
</div>
|
||||
</div>`;
|
||||
body.innerHTML = albumMeta + tracks;
|
||||
if (openAlbumBlocks.has(alb.id)) body.classList.add('open');
|
||||
}
|
||||
|
||||
@@ -1586,9 +1638,82 @@ async function removeAppearance(artistId, trackId, btn) {
|
||||
btn.closest('.appearance-row').remove();
|
||||
}
|
||||
|
||||
// --- Cover preview ---
|
||||
(function() {
|
||||
const box = document.createElement('div');
|
||||
box.id = 'cover-preview';
|
||||
box.style.cssText = [
|
||||
'display:none', 'position:fixed', 'z-index:9999', 'pointer-events:none',
|
||||
'border-radius:10px', 'overflow:hidden',
|
||||
'box-shadow:0 12px 40px rgba(0,0,0,0.85)',
|
||||
'border:1px solid rgba(255,255,255,0.08)',
|
||||
'background:#0a0c12', 'transition:opacity 0.1s',
|
||||
].join(';');
|
||||
const img = document.createElement('img');
|
||||
img.style.cssText = 'display:block;width:280px;height:280px;object-fit:contain';
|
||||
box.appendChild(img);
|
||||
document.body.appendChild(box);
|
||||
|
||||
let showTimer = null;
|
||||
|
||||
function isCoverImg(el) {
|
||||
return el && el.tagName === 'IMG' && el.src && el.src.includes('/cover');
|
||||
}
|
||||
|
||||
function place(e) {
|
||||
const margin = 16, pw = 280, ph = 280;
|
||||
const vw = window.innerWidth, vh = window.innerHeight;
|
||||
let x = e.clientX + margin, y = e.clientY + margin;
|
||||
if (x + pw > vw - 8) x = e.clientX - pw - margin;
|
||||
if (y + ph > vh - 8) y = e.clientY - ph - margin;
|
||||
box.style.left = x + 'px';
|
||||
box.style.top = y + 'px';
|
||||
}
|
||||
|
||||
document.addEventListener('mouseover', e => {
|
||||
if (!isCoverImg(e.target)) return;
|
||||
clearTimeout(showTimer);
|
||||
showTimer = setTimeout(() => {
|
||||
img.src = e.target.src;
|
||||
box.style.display = 'block';
|
||||
place(e);
|
||||
}, 120);
|
||||
});
|
||||
|
||||
document.addEventListener('mousemove', e => {
|
||||
if (box.style.display === 'none') return;
|
||||
if (!isCoverImg(e.target)) { clearTimeout(showTimer); box.style.display = 'none'; return; }
|
||||
place(e);
|
||||
});
|
||||
|
||||
document.addEventListener('mouseout', e => {
|
||||
if (!isCoverImg(e.target)) return;
|
||||
clearTimeout(showTimer);
|
||||
box.style.display = 'none';
|
||||
});
|
||||
})();
|
||||
|
||||
// --- Init ---
|
||||
(function restoreFromHash() {
|
||||
const hash = location.hash.slice(1); // strip #
|
||||
if (!hash) return;
|
||||
const [tab, filter] = hash.split('/');
|
||||
const validTabs = ['queue','tracks','albums','artists','merges'];
|
||||
if (!validTabs.includes(tab)) return;
|
||||
const btn = Array.from(document.querySelectorAll('nav button'))
|
||||
.find(b => (b.getAttribute('onclick') || '').includes(`'${tab}'`));
|
||||
if (!btn) return;
|
||||
// Switch tab without overwriting the hash
|
||||
showTab(tab, btn, true);
|
||||
// For queue, also restore the filter
|
||||
if (tab === 'queue' && filter) {
|
||||
currentFilter = filter;
|
||||
loadQueue(filter);
|
||||
}
|
||||
})();
|
||||
|
||||
loadStats();
|
||||
loadQueue();
|
||||
if (currentTab === 'queue' && !location.hash.slice(1)) loadQueue();
|
||||
setInterval(loadStats, 5000);
|
||||
// Auto-refresh queue when on queue tab
|
||||
setInterval(() => { if (currentTab === 'queue') loadQueue(currentFilter, true); }, 5000);
|
||||
|
||||
Reference in New Issue
Block a user