Huge refactor for bulk editing of references and new schema changes in backend
This commit is contained in:
parent
eb130ffcfd
commit
067272b797
3 changed files with 624 additions and 19 deletions
364
app.js
364
app.js
|
|
@ -9,6 +9,7 @@ let allSources = [];
|
|||
let allMusicians = [];
|
||||
let allInstruments = [];
|
||||
let allTunings = [];
|
||||
let allReferenceSites = [];
|
||||
let sortCol = 'name';
|
||||
let sortDir = 'asc';
|
||||
|
||||
|
|
@ -42,6 +43,13 @@ const instrumentSelect = $('instrument-select');
|
|||
const tuningDatalist = $('tuning-list');
|
||||
const btnDeleteTune = $('btn-delete-tune');
|
||||
const btnEditNotes = $('btn-edit-notes');
|
||||
const btnBulkEdit = $('btn-bulk-edit');
|
||||
const bulkEditPopover = $('bulk-edit-popover');
|
||||
const bulkRefsModal = $('bulk-refs-modal');
|
||||
const bulkRefsList = $('bulk-refs-list');
|
||||
const refsModal = $('refs-modal');
|
||||
const refsModalList = $('refs-modal-list');
|
||||
const refSiteDatalist = $('ref-site-list');
|
||||
|
||||
// ── Config ───────────────────────────────────────────────────
|
||||
const _cfg = window.REPERTORY_CONFIG || {};
|
||||
|
|
@ -68,6 +76,7 @@ function setUnlocked(val) {
|
|||
unlocked = val;
|
||||
btnUnlock.hidden = val;
|
||||
btnAddTune.hidden = !val;
|
||||
btnBulkEdit.hidden = !val;
|
||||
// Show/hide edit column header and edit buttons
|
||||
const editHeader = document.querySelector('.edit-col');
|
||||
if (editHeader) editHeader.hidden = !val;
|
||||
|
|
@ -105,17 +114,19 @@ function setStatus(msg, isError = false) {
|
|||
async function loadAll() {
|
||||
setStatus('Loading…');
|
||||
try {
|
||||
[allTunes, allSources, allMusicians, allInstruments, allTunings] = await Promise.all([
|
||||
[allTunes, allSources, allMusicians, allInstruments, allTunings, allReferenceSites] = await Promise.all([
|
||||
apiFetch('/tunes/'),
|
||||
apiFetch('/sources/'),
|
||||
apiFetch('/musicians/'),
|
||||
apiFetch('/instruments'),
|
||||
apiFetch('/tunings/'),
|
||||
apiFetch('/reference_sites/'),
|
||||
]);
|
||||
populateFilterOptions();
|
||||
populateDatalist(sourceDatalist, allSources);
|
||||
populateDatalist(musicianDatalist, allMusicians);
|
||||
populateDatalist(tuningDatalist, allTunings);
|
||||
populateDatalist(refSiteDatalist, allReferenceSites);
|
||||
populateInstrumentSelect();
|
||||
renderTable();
|
||||
setStatus(`${allTunes.length} tunes loaded`);
|
||||
|
|
@ -153,8 +164,13 @@ function populateFilterOptions() {
|
|||
async function quickAdd(endpoint, promptText, list, datalist, onDone) {
|
||||
const name = prompt(promptText);
|
||||
if (!name) return null;
|
||||
const existing = list.find(x => x.name.toLowerCase() === name.trim().toLowerCase());
|
||||
if (existing) {
|
||||
if (onDone) onDone(existing);
|
||||
return existing;
|
||||
}
|
||||
try {
|
||||
const item = await apiFetch(endpoint, { method: 'POST', body: JSON.stringify({ name }) });
|
||||
const item = await apiFetch(endpoint, { method: 'POST', body: JSON.stringify({ name: name.trim() }) });
|
||||
list.push(item);
|
||||
list.sort((a, b) => a.name.localeCompare(b.name));
|
||||
if (datalist) populateDatalist(datalist, list);
|
||||
|
|
@ -396,8 +412,8 @@ function renderTable() {
|
|||
const tr = document.createElement('tr');
|
||||
tr.innerHTML = `
|
||||
<td>${esc(tune.name ?? '')}</td>
|
||||
<td>${esc(tune.key ?? '')}</td>
|
||||
<td>${esc(tune.source?.name ?? '')}</td>
|
||||
<td>${esc(tune.key ?? '')}</td>
|
||||
<td>${tune.modal ? '<span class="pill pill-yes">Yes</span>' : '<span class="pill" style="background:#222">—</span>'}</td>
|
||||
<td>${esc(entry?.instrument_name ?? '')}</td>
|
||||
<td>${esc(entry?.tuning ?? '')}</td>
|
||||
|
|
@ -407,6 +423,9 @@ function renderTable() {
|
|||
<td>${hasNotes
|
||||
? `<button class="action-btn btn-notes" data-tune-id="${tune.id}" data-entry-id="${entry?.id ?? ''}">📝</button>`
|
||||
: ''}</td>
|
||||
<td>${tune.references?.length > 0
|
||||
? `<button class="action-btn btn-show-refs" data-tune-id="${tune.id}" title="References">🔗</button>`
|
||||
: ''}</td>
|
||||
<td><button class="action-btn btn-edit-row"
|
||||
data-tune-id="${tune.id}"
|
||||
data-entry-id="${entry?.id ?? ''}"
|
||||
|
|
@ -419,6 +438,8 @@ function renderTable() {
|
|||
b.addEventListener('click', () => openNotesModal(+b.dataset.tuneId, b.dataset.entryId ? +b.dataset.entryId : null)));
|
||||
tbody.querySelectorAll('.btn-edit-row').forEach(b =>
|
||||
b.addEventListener('click', () => openEdit(+b.dataset.tuneId, b.dataset.entryId ? +b.dataset.entryId : null)));
|
||||
tbody.querySelectorAll('.btn-show-refs').forEach(b =>
|
||||
b.addEventListener('click', () => openRefsModal(+b.dataset.tuneId)));
|
||||
}
|
||||
|
||||
function pillBool(val, warnIfTrue = false, neutralIfTrue = false) {
|
||||
|
|
@ -476,24 +497,108 @@ function openEdit(tuneId, entryId) {
|
|||
|
||||
// References
|
||||
refsList.innerHTML = '';
|
||||
(tune?.references ?? []).forEach(r => addRefRow(r.link, r.site, r.id));
|
||||
(tune?.references ?? []).forEach(r => addRefRow(r.link, r.site?.name ?? '', r.id, r.site_id, r.musicians ?? []));
|
||||
|
||||
btnDeleteTune.hidden = false;
|
||||
btnEditNotes.hidden = false;
|
||||
tuneModal.showModal();
|
||||
}
|
||||
|
||||
// ── Musician chip picker (shared by ref rows + bulk form) ──────
|
||||
function makeMusicianPicker(initialMusicians = []) {
|
||||
let musicians = initialMusicians.map(m => ({ id: m.id, name: m.name }));
|
||||
|
||||
const el = document.createElement('div');
|
||||
el.className = 'ref-musicians-row';
|
||||
el.innerHTML = `<span class="ref-musician-chips"></span>
|
||||
<span class="autocomplete-row">
|
||||
<input type="text" placeholder="Musician" class="ref-musician-input"
|
||||
list="musician-list" autocomplete="off" />
|
||||
<button type="button" class="quick-add-btn btn-add-ref-musician" title="Add musician">+</button>
|
||||
</span>`;
|
||||
|
||||
const chipsEl = el.querySelector('.ref-musician-chips');
|
||||
const input = el.querySelector('.ref-musician-input');
|
||||
const btnPlus = el.querySelector('.btn-add-ref-musician');
|
||||
|
||||
function refresh() {
|
||||
chipsEl.innerHTML = '';
|
||||
musicians.forEach(m => {
|
||||
const chip = document.createElement('span');
|
||||
chip.className = 'musician-chip';
|
||||
chip.innerHTML = `${esc(m.name)}<button type="button" class="chip-remove" title="Remove">✕</button>`;
|
||||
chip.querySelector('.chip-remove').addEventListener('click', () => {
|
||||
musicians = musicians.filter(x => x.id !== m.id);
|
||||
refresh();
|
||||
});
|
||||
chipsEl.appendChild(chip);
|
||||
});
|
||||
}
|
||||
|
||||
function addByName(name) {
|
||||
name = name.trim();
|
||||
if (!name) return false;
|
||||
const found = allMusicians.find(m => m.name.toLowerCase() === name.toLowerCase());
|
||||
if (!found || musicians.some(m => m.id === found.id)) return false;
|
||||
musicians.push({ id: found.id, name: found.name });
|
||||
input.value = '';
|
||||
refresh();
|
||||
return true;
|
||||
}
|
||||
|
||||
attachTabAutocomplete(input, musicianDatalist);
|
||||
|
||||
input.addEventListener('keydown', e => {
|
||||
if (e.key === 'Enter') { e.preventDefault(); addByName(input.value); }
|
||||
});
|
||||
|
||||
btnPlus.addEventListener('click', async () => {
|
||||
if (addByName(input.value)) return;
|
||||
const item = await quickAdd('/musicians/', 'New musician name:', allMusicians, musicianDatalist);
|
||||
if (item) { musicians.push({ id: item.id, name: item.name }); refresh(); }
|
||||
});
|
||||
|
||||
refresh();
|
||||
|
||||
return {
|
||||
el,
|
||||
getMusicians: () => musicians.map(m => ({ id: m.id })),
|
||||
reset: () => { musicians = []; input.value = ''; refresh(); },
|
||||
};
|
||||
}
|
||||
|
||||
// ── Reference rows ────────────────────────────────────────────
|
||||
$('btn-add-ref').addEventListener('click', () => addRefRow());
|
||||
|
||||
function addRefRow(link = '', site = '', refId = null) {
|
||||
function addRefRow(link = '', site = '', refId = null, siteId = null, initialMusicians = []) {
|
||||
const row = document.createElement('div');
|
||||
row.className = 'ref-row';
|
||||
row.dataset.refId = refId ?? '';
|
||||
row.innerHTML = `<input type="text" placeholder="URL" value="${esc(link)}" class="ref-link" />
|
||||
<input type="text" placeholder="Site" value="${esc(site)}" class="ref-site" style="max-width:100px" />
|
||||
row.dataset.refId = refId ?? '';
|
||||
row.dataset.siteId = siteId ?? '';
|
||||
const siteOptions = allReferenceSites
|
||||
.map(s => `<option value="${s.id}"${s.id === siteId ? ' selected' : ''}>${esc(s.name)}</option>`)
|
||||
.join('');
|
||||
row.innerHTML = `<input type="text" placeholder="URL" value="${esc(link)}" class="ref-link" />
|
||||
<span class="autocomplete-row ref-site-wrap">
|
||||
<select class="ref-site"><option value="">— site —</option>${siteOptions}</select>
|
||||
<button type="button" class="quick-add-btn btn-quick-add-ref-site" title="Add new site">+</button>
|
||||
</span>
|
||||
<button type="button" class="remove-btn">✕</button>`;
|
||||
row.querySelector('.remove-btn').addEventListener('click', () => row.remove());
|
||||
row.querySelector('.btn-quick-add-ref-site').addEventListener('click', async () => {
|
||||
const item = await quickAdd('/reference_sites/', 'New site name:', allReferenceSites, null);
|
||||
if (item) {
|
||||
const sel = row.querySelector('.ref-site');
|
||||
const opt = document.createElement('option');
|
||||
opt.value = item.id;
|
||||
opt.textContent = item.name;
|
||||
sel.appendChild(opt);
|
||||
sel.value = item.id;
|
||||
}
|
||||
});
|
||||
const picker = makeMusicianPicker(initialMusicians);
|
||||
row.appendChild(picker.el);
|
||||
row._getMusicians = picker.getMusicians;
|
||||
refsList.appendChild(row);
|
||||
}
|
||||
|
||||
|
|
@ -525,10 +630,11 @@ async function saveTune() {
|
|||
|
||||
const references = [...refsList.querySelectorAll('.ref-row')]
|
||||
.map(row => ({
|
||||
link: row.querySelector('.ref-link').value || null,
|
||||
site: row.querySelector('.ref-site').value || null,
|
||||
link: row.querySelector('.ref-link').value.trim() || null,
|
||||
site_id: row.querySelector('.ref-site').value ? parseInt(row.querySelector('.ref-site').value) : null,
|
||||
musicians: row._getMusicians ? row._getMusicians() : [],
|
||||
}))
|
||||
.filter(r => r.link || r.site);
|
||||
.filter(r => r.link || r.site_id);
|
||||
|
||||
try {
|
||||
let tuneId = editingTuneId;
|
||||
|
|
@ -711,6 +817,225 @@ async function reloadNotesModal() {
|
|||
|
||||
$('btn-notes-close').addEventListener('click', () => notesModal.close());
|
||||
|
||||
// ── References display modal ────────────────────────────────────
|
||||
$('btn-refs-modal-close').addEventListener('click', () => refsModal.close());
|
||||
|
||||
function openRefsModal(tuneId) {
|
||||
const tune = allTunes.find(t => t.id === tuneId);
|
||||
$('refs-modal-title').textContent = `References — ${tune?.name ?? ''}`;
|
||||
refsModalList.innerHTML = '';
|
||||
|
||||
const refs = tune?.references ?? [];
|
||||
if (refs.length === 0) {
|
||||
refsModalList.innerHTML = '<p style="color:var(--muted);font-size:.875rem">No references.</p>';
|
||||
} else {
|
||||
refs.forEach(r => {
|
||||
const item = document.createElement('div');
|
||||
item.className = 'refs-modal-item';
|
||||
const musicians = r.musicians?.map(m => m.name).join(', ') ?? '';
|
||||
const siteName = r.site?.name ?? '';
|
||||
const meta = [siteName, musicians].filter(Boolean).join(' · ');
|
||||
item.innerHTML = `
|
||||
<a href="${esc(r.link ?? '')}" target="_blank" rel="noopener" class="ref-link-anchor">${esc(r.link ?? r.site?.name ?? 'link')}</a>
|
||||
${meta ? `<span class="ref-meta">${esc(meta)}</span>` : ''}`;
|
||||
refsModalList.appendChild(item);
|
||||
});
|
||||
}
|
||||
|
||||
refsModal.showModal();
|
||||
}
|
||||
|
||||
// ── Bulk Edit ─────────────────────────────────────────────
|
||||
btnBulkEdit.addEventListener('click', e => {
|
||||
e.stopPropagation();
|
||||
if (!bulkEditPopover.hidden) { bulkEditPopover.hidden = true; return; }
|
||||
const rect = btnBulkEdit.getBoundingClientRect();
|
||||
bulkEditPopover.style.top = (rect.bottom + 4) + 'px';
|
||||
bulkEditPopover.style.right = (window.innerWidth - rect.right) + 'px';
|
||||
bulkEditPopover.hidden = false;
|
||||
});
|
||||
|
||||
document.addEventListener('click', e => {
|
||||
if (!bulkEditPopover.hidden && !bulkEditPopover.contains(e.target) && e.target !== btnBulkEdit) {
|
||||
bulkEditPopover.hidden = true;
|
||||
}
|
||||
});
|
||||
|
||||
$('btn-open-bulk-refs').addEventListener('click', () => {
|
||||
bulkEditPopover.hidden = true;
|
||||
openBulkRefsModal();
|
||||
});
|
||||
|
||||
$('btn-bulk-refs-close').addEventListener('click', () => bulkRefsModal.close());
|
||||
|
||||
['bulk-refs-search', 'bulk-refs-instrument', 'bulk-refs-source',
|
||||
'bulk-refs-has-refs', 'bulk-refs-sort'].forEach(id => {
|
||||
const el = $(id);
|
||||
el.addEventListener('input', renderBulkRefsList);
|
||||
el.addEventListener('change', renderBulkRefsList);
|
||||
});
|
||||
|
||||
function openBulkRefsModal() {
|
||||
const instSel = $('bulk-refs-instrument');
|
||||
instSel.innerHTML = '<option value="">All instruments</option>';
|
||||
allInstruments.forEach(i => {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = i.id;
|
||||
opt.textContent = i.name;
|
||||
instSel.appendChild(opt);
|
||||
});
|
||||
|
||||
const srcSel = $('bulk-refs-source');
|
||||
srcSel.innerHTML = '<option value="">All sources</option>';
|
||||
allSources.forEach(s => {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = s.id;
|
||||
opt.textContent = s.name;
|
||||
srcSel.appendChild(opt);
|
||||
});
|
||||
|
||||
renderBulkRefsList();
|
||||
bulkRefsModal.showModal();
|
||||
}
|
||||
|
||||
function getBulkRefsFiltered() {
|
||||
const search = $('bulk-refs-search').value.toLowerCase();
|
||||
const instId = $('bulk-refs-instrument').value;
|
||||
const srcId = $('bulk-refs-source').value;
|
||||
const hasRefs = $('bulk-refs-has-refs').value;
|
||||
const sortKey = $('bulk-refs-sort').value;
|
||||
|
||||
let tunes = allTunes.filter(t => {
|
||||
if (search && !(t.name ?? '').toLowerCase().includes(search)) return false;
|
||||
if (srcId && t.source_id !== parseInt(srcId)) return false;
|
||||
if (instId && !t.instruments.some(e => e.instrument_id === parseInt(instId))) return false;
|
||||
if (hasRefs === 'no' && t.references.length > 0) return false;
|
||||
if (hasRefs === 'yes' && t.references.length === 0) return false;
|
||||
return true;
|
||||
});
|
||||
|
||||
tunes = [...tunes].sort((a, b) => {
|
||||
if (sortKey === 'newest') {
|
||||
const diff = (b.created_at || '') > (a.created_at || '') ? 1
|
||||
: (b.created_at || '') < (a.created_at || '') ? -1 : 0;
|
||||
return diff !== 0 ? diff : b.id - a.id;
|
||||
}
|
||||
if (sortKey === 'oldest') {
|
||||
const diff = (a.created_at || '') > (b.created_at || '') ? 1
|
||||
: (a.created_at || '') < (b.created_at || '') ? -1 : 0;
|
||||
return diff !== 0 ? diff : a.id - b.id;
|
||||
}
|
||||
if (sortKey === 'name_desc') return (b.name ?? '').localeCompare(a.name ?? '');
|
||||
return (a.name ?? '').localeCompare(b.name ?? '');
|
||||
});
|
||||
|
||||
return tunes;
|
||||
}
|
||||
|
||||
function renderBulkRefsList() {
|
||||
const tunes = getBulkRefsFiltered();
|
||||
bulkRefsList.innerHTML = '';
|
||||
|
||||
if (tunes.length === 0) {
|
||||
bulkRefsList.innerHTML = '<p class="bulk-refs-empty">No tunes match the current filters.</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
tunes.forEach(tune => {
|
||||
const row = document.createElement('div');
|
||||
row.className = 'bulk-tune-row';
|
||||
row.dataset.tuneId = tune.id;
|
||||
|
||||
const instruments = tune.instruments.map(e => e.instrument_name).filter(Boolean).join(', ');
|
||||
const refCount = tune.references.length;
|
||||
const refPill = refCount > 0
|
||||
? `<span class="pill pill-yes">${refCount} ref${refCount !== 1 ? 's' : ''}</span>`
|
||||
: `<span class="pill" style="background:#222">0</span>`;
|
||||
|
||||
row.innerHTML = `
|
||||
<div class="bulk-tune-main">
|
||||
<span class="bulk-tune-name">${esc(tune.name ?? '')}</span>
|
||||
<span class="bulk-tune-meta">${[esc(tune.key ?? ''), esc(tune.source?.name ?? '')].filter(Boolean).join(' · ')}</span>
|
||||
<span class="bulk-tune-instruments">${esc(instruments)}</span>
|
||||
<span class="bulk-tune-refs">${refPill}</span>
|
||||
<button class="btn-bulk-add-ref action-btn">+ ref</button>
|
||||
</div>
|
||||
<div class="bulk-ref-form" hidden>
|
||||
<input type="text" class="bulk-ref-url" placeholder="URL" />
|
||||
<span class="autocomplete-row">
|
||||
<select class="bulk-ref-site"><option value="">— site —</option>${allReferenceSites.map(s => `<option value="${s.id}">${esc(s.name)}</option>`).join('')}</select>
|
||||
<button class="btn-bulk-quick-add-site quick-add-btn" type="button" title="Add new site">+</button>
|
||||
</span>
|
||||
<button class="btn-bulk-ref-save">Add</button>
|
||||
<button class="btn-bulk-ref-cancel remove-btn">✕</button>
|
||||
<div class="bulk-ref-musicians-mount"></div>
|
||||
</div>`;
|
||||
|
||||
const form = row.querySelector('.bulk-ref-form');
|
||||
const urlInput = row.querySelector('.bulk-ref-url');
|
||||
const siteSel = row.querySelector('.bulk-ref-site');
|
||||
const btnAdd = row.querySelector('.btn-bulk-add-ref');
|
||||
const btnSave = row.querySelector('.btn-bulk-ref-save');
|
||||
const btnCancel = row.querySelector('.btn-bulk-ref-cancel');
|
||||
const btnQuickAddSite = row.querySelector('.btn-bulk-quick-add-site');
|
||||
const picker = makeMusicianPicker();
|
||||
row.querySelector('.bulk-ref-musicians-mount').appendChild(picker.el);
|
||||
|
||||
btnAdd.addEventListener('click', () => {
|
||||
form.hidden = !form.hidden;
|
||||
if (!form.hidden) urlInput.focus();
|
||||
});
|
||||
|
||||
btnCancel.addEventListener('click', () => {
|
||||
form.hidden = true;
|
||||
urlInput.value = '';
|
||||
siteSel.value = '';
|
||||
picker.reset();
|
||||
});
|
||||
|
||||
btnQuickAddSite.addEventListener('click', async () => {
|
||||
const item = await quickAdd('/reference_sites/', 'New site name:', allReferenceSites, null);
|
||||
if (item) {
|
||||
// Add the new option to every open site select in the list
|
||||
bulkRefsList.querySelectorAll('.bulk-ref-site').forEach(sel => {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = item.id;
|
||||
opt.textContent = item.name;
|
||||
sel.appendChild(opt);
|
||||
});
|
||||
siteSel.value = item.id;
|
||||
}
|
||||
});
|
||||
|
||||
const submitRef = async () => {
|
||||
const link = urlInput.value.trim();
|
||||
const siteId = siteSel.value ? parseInt(siteSel.value) : null;
|
||||
const musicians = picker.getMusicians();
|
||||
if (!link && !siteId) return;
|
||||
btnSave.disabled = true;
|
||||
try {
|
||||
await apiFetch(`/tunes/${tune.id}/references`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ link: link || null, site_id: siteId, musicians }),
|
||||
});
|
||||
await loadAll();
|
||||
renderBulkRefsList();
|
||||
} catch (e) {
|
||||
setStatus(e.message, true);
|
||||
btnSave.disabled = false;
|
||||
}
|
||||
};
|
||||
|
||||
btnSave.addEventListener('click', submitRef);
|
||||
urlInput.addEventListener('keydown', e => {
|
||||
if (e.key === 'Enter') submitRef();
|
||||
if (e.key === 'Escape') btnCancel.click();
|
||||
});
|
||||
|
||||
bulkRefsList.appendChild(row);
|
||||
});
|
||||
}
|
||||
|
||||
// ── Utility ───────────────────────────────────────────────────
|
||||
function esc(str) {
|
||||
if (str === null || str === undefined) return '';
|
||||
|
|
@ -721,5 +1046,22 @@ function esc(str) {
|
|||
.replace(/"/g, '"');
|
||||
}
|
||||
|
||||
// Pressing Tab in a datalist-backed input fills the top matching suggestion.
|
||||
function attachTabAutocomplete(input, datalist) {
|
||||
input.addEventListener('keydown', e => {
|
||||
if (e.key !== 'Tab' || !input.value) return;
|
||||
const val = input.value.toLowerCase();
|
||||
const opts = [...datalist.options].map(o => o.value);
|
||||
const match = opts.find(o => o.toLowerCase().startsWith(val))
|
||||
?? opts.find(o => o.toLowerCase().includes(val));
|
||||
if (match) input.value = match;
|
||||
// Don't preventDefault — Tab still moves focus normally
|
||||
});
|
||||
}
|
||||
|
||||
attachTabAutocomplete(sourceInput, sourceDatalist);
|
||||
attachTabAutocomplete(tuneForm.elements.inst_tuning, tuningDatalist);
|
||||
attachTabAutocomplete(tuneForm.elements.inst_learned_from, musicianDatalist);
|
||||
|
||||
// ── Boot ─────────────────────────────────────────────────────
|
||||
loadAll();
|
||||
|
|
|
|||
58
index.html
58
index.html
|
|
@ -9,11 +9,12 @@
|
|||
<body>
|
||||
|
||||
<header>
|
||||
<h1>🎵 Repertory</h1>
|
||||
<h1>🪕 Repertory</h1>
|
||||
<div id="header-actions">
|
||||
<input type="search" id="filter-search" placeholder="Search…" />
|
||||
<button id="btn-clear-filters" hidden>✕ Clear filters</button>
|
||||
<span id="status"></span>
|
||||
<button id="btn-bulk-edit" hidden>⚡ Bulk Edit</button>
|
||||
<button id="btn-add-tune" hidden>+ Add tune</button>
|
||||
<button id="btn-unlock">🔒 Unlock</button>
|
||||
</div>
|
||||
|
|
@ -25,15 +26,16 @@
|
|||
<thead>
|
||||
<tr>
|
||||
<th data-col="name">Name <span class="sort-indicator"></span></th>
|
||||
<th data-filter="key">Key</th>
|
||||
<th data-filter="source">Source</th>
|
||||
<th data-filter="modal">Modal</th>
|
||||
<th data-filter="key">Key</th>
|
||||
<th data-filter="modal"><span class="col-full">Modal</span><span class="col-short">Mod.</span></th>
|
||||
<th data-filter="instrument">Instrument</th>
|
||||
<th data-filter="tuning">Tuning</th>
|
||||
<th data-filter="callable">Callable</th>
|
||||
<th data-filter="review">Review</th>
|
||||
<th data-filter="to_learn">To learn</th>
|
||||
<th data-filter="callable"><span class="col-full">Callable</span><span class="col-short">Call.</span></th>
|
||||
<th data-filter="review"><span class="col-full">Review</span><span class="col-short">Rev.</span></th>
|
||||
<th data-filter="to_learn"><span class="col-full">To learn</span><span class="col-short">Learn</span></th>
|
||||
<th>Notes</th>
|
||||
<th>Refs</th>
|
||||
<th class="edit-col" hidden></th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
|
@ -47,6 +49,40 @@
|
|||
<div id="filter-popover-inner"></div>
|
||||
</div>
|
||||
|
||||
<!-- ── Bulk edit popover ─────────────────────────────────────── -->
|
||||
<div id="bulk-edit-popover" hidden>
|
||||
<button id="btn-open-bulk-refs">📎 Bulk Edit References</button>
|
||||
</div>
|
||||
|
||||
<!-- ── Bulk edit references modal ───────────────────────────── -->
|
||||
<dialog id="bulk-refs-modal">
|
||||
<h2>Bulk Edit References</h2>
|
||||
<div id="bulk-refs-controls">
|
||||
<input type="search" id="bulk-refs-search" placeholder="Filter by name…" />
|
||||
<select id="bulk-refs-instrument">
|
||||
<option value="">All instruments</option>
|
||||
</select>
|
||||
<select id="bulk-refs-source">
|
||||
<option value="">All sources</option>
|
||||
</select>
|
||||
<select id="bulk-refs-has-refs">
|
||||
<option value="">All tunes</option>
|
||||
<option value="no">No refs yet</option>
|
||||
<option value="yes">Has refs</option>
|
||||
</select>
|
||||
<select id="bulk-refs-sort">
|
||||
<option value="newest">Newest first</option>
|
||||
<option value="oldest">Oldest first</option>
|
||||
<option value="name_asc">Name A→Z</option>
|
||||
<option value="name_desc">Name Z→A</option>
|
||||
</select>
|
||||
</div>
|
||||
<div id="bulk-refs-list"></div>
|
||||
<div class="modal-actions">
|
||||
<button id="btn-bulk-refs-close">Close</button>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
<!-- ── Add / Edit tune modal ────────────────────────────────── -->
|
||||
<dialog id="tune-modal">
|
||||
<form id="tune-form" method="dialog">
|
||||
|
|
@ -106,6 +142,7 @@
|
|||
<div id="refs-section">
|
||||
<h3>References</h3>
|
||||
<div id="refs-list"></div>
|
||||
<datalist id="ref-site-list"></datalist>
|
||||
<button type="button" id="btn-add-ref">+ reference</button>
|
||||
</div>
|
||||
|
||||
|
|
@ -118,6 +155,15 @@
|
|||
</form>
|
||||
</dialog>
|
||||
|
||||
<!-- ── References display modal ─────────────────────────────── -->
|
||||
<dialog id="refs-modal">
|
||||
<h2 id="refs-modal-title">References</h2>
|
||||
<div id="refs-modal-list"></div>
|
||||
<div class="modal-actions">
|
||||
<button id="btn-refs-modal-close">Close</button>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
<!-- ── Notes modal ──────────────────────────────────────────── -->
|
||||
<dialog id="notes-modal">
|
||||
<h2 id="notes-modal-title">Notes</h2>
|
||||
|
|
|
|||
221
style.css
221
style.css
|
|
@ -138,6 +138,9 @@ th[data-filter].filter-active::before {
|
|||
}
|
||||
.popover-clear:hover { color: var(--text); }
|
||||
|
||||
/* Short/full column header label swap (see responsive section) */
|
||||
.col-short { display: none; }
|
||||
|
||||
/* ── Buttons ──────────────────────────────────────────────── */
|
||||
button {
|
||||
cursor: pointer;
|
||||
|
|
@ -156,6 +159,7 @@ main {
|
|||
flex: 1;
|
||||
overflow-x: auto;
|
||||
padding: 1rem 1.25rem;
|
||||
min-width: 0; /* required for overflow-x: auto to work inside a flex container */
|
||||
}
|
||||
|
||||
#tune-table {
|
||||
|
|
@ -345,6 +349,219 @@ fieldset.active .fs-body { display: contents; }
|
|||
|
||||
/* ── Responsive ───────────────────────────────────────────── */
|
||||
@media (max-width: 600px) {
|
||||
#tune-table th:nth-child(n+5),
|
||||
#tune-table td:nth-child(n+5) { display: none; }
|
||||
/* Header: let actions wrap onto a second line */
|
||||
header { flex-wrap: wrap; }
|
||||
#header-actions { flex-wrap: wrap; }
|
||||
|
||||
/* Table: scroll horizontally instead of hiding columns */
|
||||
#tune-table { width: max-content; min-width: 100%; }
|
||||
|
||||
/* Tighter cell padding on mobile */
|
||||
#tune-table th,
|
||||
#tune-table td { padding: .4rem .35rem; }
|
||||
|
||||
/* Short column headers: swap to abbreviated label on mobile */
|
||||
.col-full { display: none; }
|
||||
.col-short { display: inline; }
|
||||
|
||||
/* Modals: fullscreen */
|
||||
dialog {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Bulk edit popover ────────────────────────────────────── */
|
||||
#bulk-edit-popover {
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: .4rem;
|
||||
min-width: 200px;
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,.4);
|
||||
flex-direction: column;
|
||||
gap: .2rem;
|
||||
}
|
||||
#bulk-edit-popover:not([hidden]) { display: flex; }
|
||||
|
||||
#bulk-edit-popover button {
|
||||
text-align: left;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--text);
|
||||
padding: .4rem .65rem;
|
||||
border-radius: var(--radius);
|
||||
font-size: .875rem;
|
||||
}
|
||||
|
||||
#bulk-edit-popover button:hover { background: rgba(255,255,255,.08); opacity: 1; }
|
||||
|
||||
#btn-bulk-edit { background: transparent; border: 1px solid var(--border); color: var(--muted); }
|
||||
|
||||
/* ── Bulk refs modal ──────────────────────────────────────── */
|
||||
#bulk-refs-modal { max-width: 760px; }
|
||||
|
||||
#bulk-refs-controls {
|
||||
display: flex;
|
||||
gap: .5rem;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: .75rem;
|
||||
}
|
||||
|
||||
#bulk-refs-controls input,
|
||||
#bulk-refs-controls select {
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text);
|
||||
border-radius: var(--radius);
|
||||
padding: .3rem .5rem;
|
||||
font-size: .85rem;
|
||||
}
|
||||
|
||||
#bulk-refs-controls input[type="search"] { flex: 1; min-width: 140px; }
|
||||
|
||||
#bulk-refs-list {
|
||||
max-height: 55vh;
|
||||
overflow-y: auto;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.bulk-tune-row {
|
||||
padding: .45rem .65rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.bulk-tune-row:last-child { border-bottom: none; }
|
||||
|
||||
.bulk-tune-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .6rem;
|
||||
}
|
||||
|
||||
.bulk-tune-name {
|
||||
font-weight: 600;
|
||||
font-size: .875rem;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.bulk-tune-meta,
|
||||
.bulk-tune-instruments {
|
||||
font-size: .8rem;
|
||||
color: var(--muted);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.bulk-tune-refs { white-space: nowrap; }
|
||||
|
||||
.btn-bulk-add-ref { flex-shrink: 0; font-size: .75rem; padding: .2rem .5rem; }
|
||||
|
||||
.bulk-ref-form {
|
||||
display: flex;
|
||||
gap: .4rem;
|
||||
align-items: center;
|
||||
margin-top: .35rem;
|
||||
padding-top: .35rem;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.bulk-ref-form input {
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text);
|
||||
border-radius: var(--radius);
|
||||
padding: .3rem .5rem;
|
||||
font-size: .85rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.bulk-ref-form .bulk-ref-site { max-width: 110px; flex: none; }
|
||||
|
||||
.btn-bulk-ref-save { background: var(--accent); flex-shrink: 0; font-size: .8rem; padding: .25rem .6rem; }
|
||||
|
||||
.bulk-refs-empty { color: var(--muted); text-align: center; padding: 1.5rem; font-size: .875rem; }
|
||||
|
||||
/* ── Musician chips ──────────────────────────────────────────── */
|
||||
.ref-musicians-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: .35rem;
|
||||
width: 100%;
|
||||
margin-top: .3rem;
|
||||
}
|
||||
|
||||
.ref-musician-chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: .3rem;
|
||||
}
|
||||
|
||||
.musician-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: .2rem;
|
||||
background: var(--accent2);
|
||||
border-radius: 99px;
|
||||
padding: .15rem .45rem .15rem .55rem;
|
||||
font-size: .75rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.chip-remove {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: inherit;
|
||||
padding: 0 .1rem;
|
||||
font-size: .65rem;
|
||||
line-height: 1;
|
||||
opacity: .7;
|
||||
}
|
||||
.chip-remove:hover { opacity: 1; }
|
||||
|
||||
/* Allow ref rows to wrap so the musician row sits on its own line */
|
||||
.ref-row { flex-wrap: wrap; }
|
||||
|
||||
/* Same for bulk ref form */
|
||||
.bulk-ref-form { flex-wrap: wrap; }
|
||||
.bulk-ref-musicians-mount { width: 100%; }
|
||||
.bulk-ref-musicians-mount .ref-musicians-row { margin-top: 0; }
|
||||
|
||||
/* ── References display modal ────────────────────────────────── */
|
||||
.refs-modal-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: .2rem;
|
||||
padding: .5rem 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.refs-modal-item:last-child { border-bottom: none; }
|
||||
|
||||
.ref-link-anchor {
|
||||
color: var(--accent);
|
||||
font-size: .875rem;
|
||||
word-break: break-all;
|
||||
text-decoration: none;
|
||||
}
|
||||
.ref-link-anchor:hover { text-decoration: underline; }
|
||||
|
||||
.ref-meta {
|
||||
font-size: .8rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.ref-site-wrap { max-width: 160px; }
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue