diff --git a/static/inventory.html b/static/inventory.html index a36e7793..a69d73ff 100644 --- a/static/inventory.html +++ b/static/inventory.html @@ -281,6 +281,25 @@ user-select: none; } + .results-table th .th-label { + cursor: pointer; + } + + .results-table th .th-hide { + display: inline-block; + margin-left: 3px; + color: #999; + cursor: pointer; + font-size: 10px; + font-weight: normal; + line-height: 1; + vertical-align: middle; + } + + .results-table th .th-hide:hover { + color: #c00; + } + /* Resizable column handle */ .results-table th .resize-handle { position: absolute; @@ -1138,9 +1157,9 @@ -
- Columns: - +
Enter search criteria above and click "Search Items" to find inventory items.
diff --git a/static/inventory.js b/static/inventory.js index fa4a9a8a..ccefa559 100644 --- a/static/inventory.js +++ b/static/inventory.js @@ -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) { - ${visibleCols.map(c => ``).join('\n ')} + ${visibleCols.map(c => ``).join('\n ')} @@ -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(); }
${c.label}${getSortIcon(c.sort)}${c.label}${getSortIcon(c.sort)}\u00d7