SawatoMosswartsEnjoyersClub/MosswartOverlord
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: move column toggles into table headers

Browse source 
Replace separate checkbox bar with inline × buttons in each column
header. Click × to hide a column. Hidden columns appear in a bar
above the table with + buttons to restore them. Sort by clicking
the column label text. Persisted to localStorage.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Erik 2026-04-09 10:12:01 +02:00
parent faff102e09
commit 8943133ae3
2 changed files with 68 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

68
static/inventory.js
View file

@ -34,7 +34,7 @@ document.addEventListener('DOMContentLoaded', function() {
initializeEventListeners();
loadCharacterOptions();
renderColumnToggles();
renderHiddenColumnsBar();
});
/**
@ -504,28 +504,40 @@ function saveColumnVisibility() {
localStorage.setItem('inventoryColumnVisibility', JSON.stringify(columnVisibility));
}
function renderColumnToggles() {
const container = document.getElementById('columnToggles');
if (!container) return;
container.innerHTML = '';
RESULT_COLUMNS.forEach(col => {
const label = document.createElement('label');
label.style.cssText = 'display:inline-flex;align-items:center;gap:2px;font-size:9px;margin-right:6px;cursor:pointer;';
const cb = document.createElement('input');
cb.type = 'checkbox';
cb.checked = columnVisibility[col.key] !== false;
cb.style.cssText = 'width:10px;height:10px;margin:0;';
cb.addEventListener('change', () => {
columnVisibility[col.key] = cb.checked;
function renderHiddenColumnsBar() {
const bar = document.getElementById('hiddenColumnsBar');
const list = document.getElementById('hiddenColumnsList');
if (!bar || !list) return;
const hidden = RESULT_COLUMNS.filter(c => columnVisibility[c.key] === false);
if (hidden.length === 0) {
bar.style.display = 'none';
return;
}
bar.style.display = 'flex';
list.innerHTML = '';
hidden.forEach(col => {
const btn = document.createElement('button');
btn.textContent = `+ ${col.label}`;
btn.style.cssText = 'font-size:9px;padding:1px 5px;border:1px solid #999;background:#fff;cursor:pointer;border-radius:3px;margin-right:3px;';
btn.addEventListener('click', () => {
columnVisibility[col.key] = true;
saveColumnVisibility();
if (currentResultsData) displayResults(currentResultsData);
renderHiddenColumnsBar();
});
label.appendChild(cb);
label.appendChild(document.createTextNode(col.label));
container.appendChild(label);
list.appendChild(btn);
});
}
function hideColumn(key) {
columnVisibility[key] = false;
saveColumnVisibility();
if (currentResultsData) displayResults(currentResultsData);
renderHiddenColumnsBar();
}
/**
* Display search results in the UI
*/
@ -551,7 +563,7 @@ function displayResults(data) {
<table class="results-table">
<thead>
<tr>
${visibleCols.map(c => `<th class="${c.cls || ''} sortable" data-sort="${c.sort}">${c.label}${getSortIcon(c.sort)}</th>`).join('\n ')}
${visibleCols.map(c => `<th class="${c.cls || ''} sortable" data-sort="${c.sort}"><span class="th-label">${c.label}${getSortIcon(c.sort)}</span><span class="th-hide" data-col="${c.key}" title="Hide column">\u00d7</span></th>`).join('\n ')}
</tr>
</thead>
<tbody>
@ -577,14 +589,26 @@ function displayResults(data) {
searchResults.innerHTML = html;
// Add click event listeners to sortable headers
document.querySelectorAll('.sortable').forEach(header => {
header.addEventListener('click', () => {
const sortField = header.getAttribute('data-sort');
// Add click event listeners to sortable headers (click label to sort)
document.querySelectorAll('.sortable .th-label').forEach(label => {
label.style.cursor = 'pointer';
label.addEventListener('click', () => {
const sortField = label.closest('th').getAttribute('data-sort');
handleSort(sortField);
});
});
// Add click event listeners to hide buttons
document.querySelectorAll('.th-hide').forEach(btn => {
btn.addEventListener('click', (e) => {
e.stopPropagation();
hideColumn(btn.getAttribute('data-col'));
});
});
// Update hidden columns bar
renderHiddenColumnsBar();
// Initialize resizable columns
initResizableColumns();
}