tmiller/pokemon
1
0
Fork 1
Code Issues 8 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Merge branch 'feat/inventory'

Browse Source
This commit is contained in:
Thad Miller
2026-05-26 05:32:26 -04:00
parent 85cfd1de64 52e7f77e51
commit 601cb7b770
35 changed files with 3305 additions and 1073 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1318
src/assets/css/main.scss
View File

File diff suppressed because it is too large Load Diff

129
src/assets/js/main.js
View File

@@ -1,52 +1,97 @@
import * as bootstrap from 'bootstrap';
window.bootstrap = bootstrap;
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
// trap browser back and close the modal if open
const cardModal = document.getElementById('cardModal');
const loadingMsg = cardModal.innerHTML;
// Push a new history state when the modal is shown
cardModal.addEventListener('shown.bs.modal', () => {
history.pushState({ modalOpen: true }, null, '#cardModal');
});
// Listen for the browser's back button (popstate event)
window.addEventListener('popstate', (e) => {
if (cardModal.classList.contains('show')) {
const modalInstance = bootstrap.Modal.getInstance(cardModal);
if (modalInstance) {
modalInstance.hide();
document.addEventListener('DOMContentLoaded', () => {
// Initialize all Bootstrap modals
document.querySelectorAll('.modal').forEach(modalEl => {
bootstrap.Modal.getOrCreateInstance(modalEl);
});
// Initialize tooltips
document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => {
if (!el._tooltipInstance) {
el._tooltipInstance = new bootstrap.Tooltip(el, { container: 'body' });
}
}
});
// Trigger a back navigation when the modal is closed via its native controls (X, backdrop click)
cardModal.addEventListener('hide.bs.modal', () => {
cardModal.innerHTML = loadingMsg;
if (history.state && history.state.modalOpen) {
history.back();
}
});
});
// ---------------- DASHBOARD LOGIC ----------------
const toggleBtn = document.getElementById("toggleViewBtn");
const gridView = document.getElementById("gridView");
const tableView = document.getElementById("tableView");
const searchInput = document.getElementById("inventorySearch");
const tbody = document.getElementById("inventoryRows");
import { Tooltip } from "bootstrap";
// Initialize all tooltips globally
const initTooltips = () => {
document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => {
if (!el._tooltipInstance) {
el._tooltipInstance = new Tooltip(el, {
container: 'body', // ensures tooltip is appended to body, important for modals
});
if(toggleBtn && gridView && tableView && tbody) {
// TOGGLE GRID/TABLE
toggleBtn.addEventListener("click", () => {
if(gridView.style.display !== "none") {
gridView.style.display = "none";
tableView.style.display = "block";
toggleBtn.textContent = "Switch to Grid View";
} else {
gridView.style.display = "block";
tableView.style.display = "none";
toggleBtn.textContent = "Switch to Table View";
}
});
};
// Run on page load
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initTooltips);
} else {
initTooltips();
// SEARCH FILTER
if(searchInput) {
searchInput.addEventListener("input", e => {
const term = e.target.value.toLowerCase();
[...tbody.querySelectorAll("tr")].forEach(row => {
row.style.display = row.textContent.toLowerCase().includes(term) ? "" : "none";
});
});
}
// SORTING
document.querySelectorAll("th[data-key]").forEach(th => {
let sortAsc = true;
th.addEventListener("click", () => {
const key = th.dataset.key;
const indexMap = {name:0,set:1,condition:2,qty:3,price:4,market:5,gain:6};
const idx = indexMap[key];
const rows = [...tbody.querySelectorAll("tr")];
rows.sort((a,b) => {
let aText = a.children[idx].textContent.replace(/\$|,/g,'').toLowerCase();
let bText = b.children[idx].textContent.replace(/\$|,/g,'').toLowerCase();
if(!isNaN(aText) && !isNaN(bText)) return sortAsc ? aText-bText : bText-aText;
return sortAsc ? aText.localeCompare(bText) : bText.localeCompare(aText);
});
sortAsc = !sortAsc;
tbody.innerHTML="";
rows.forEach(r => tbody.appendChild(r));
});
});
// INLINE EDITING + GAIN/LOSS UPDATE
tbody.addEventListener("input", e => {
const row = e.target.closest("tr");
if(!row) return;
const priceCell = row.querySelector(".editable-price");
const qtyCell = row.querySelector(".editable-qty");
const marketCell = row.children[5];
const gainCell = row.querySelector(".gain");
if(e.target.classList.contains("editable-price")) {
e.target.textContent = e.target.textContent.replace(/[^\d.]/g,"");
}
if(e.target.classList.contains("editable-qty")) {
e.target.textContent = e.target.textContent.replace(/\D/g,"");
}
const price = parseFloat(priceCell.textContent) || 0;
const qty = parseInt(qtyCell.textContent) || 0;
const market = parseFloat(marketCell.textContent) || 0;
const gain = market - price;
gainCell.textContent = (gain>=0 ? "+" : "-") + Math.abs(gain);
gainCell.className = gain>=0 ? "gain text-success" : "gain text-danger";
});
}
// Optional: observe DOM changes for dynamically added tooltips (e.g., modals loaded later)
const observer = new MutationObserver(() => initTooltips());
observer.observe(document.body, { childList: true, subtree: true });
});

42
src/assets/js/priceChart.js
View File

@@ -3,11 +3,11 @@ import Chart from 'chart.js/auto';
const CONDITIONS = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Played", "Damaged"];
const CONDITION_COLORS = {
"Near Mint": { active: 'rgba(156, 204, 102, 1)', muted: 'rgba(156, 204, 102, 0.67)' },
"Lightly Played": { active: 'rgba(211, 225, 86, 1)', muted: 'rgba(211, 225, 86, 0.67)' },
"Moderately Played": { active: 'rgba(255, 238, 87, 1)', muted: 'rgba(255, 238, 87, 0.67)' },
"Heavily Played": { active: 'rgba(255, 201, 41, 1)', muted: 'rgba(255, 201, 41, 0.67)' },
"Damaged": { active: 'rgba(255, 167, 36, 1)', muted: 'rgba(255, 167, 36, 0.67)' },
"Near Mint": { active: 'hsla(88, 50%, 67%, 1)', muted: 'hsla(88, 50%, 67%, 0.67)' },
"Lightly Played": { active: 'hsla(66, 70%, 68%, 1)', muted: 'hsla(66, 70%, 68%, 0.67)' },
"Moderately Played": { active: 'hsla(54, 100%, 73%, 1)', muted: 'hsla(54, 100%, 73%, 0.67)' },
"Heavily Played": { active: 'hsla(46, 100%, 65%, 1)', muted: 'hsla(46, 100%, 65%, 0.67)' },
"Damaged": { active: 'hsla(36, 100%, 65%, 1)', muted: 'hsla(36, 100%, 65%, 0.67)' },
};
const RANGE_DAYS = { '1m': 30, '3m': 90, '6m': 180, '1y': 365, 'all': Infinity };
@@ -32,6 +32,12 @@ function setEmptyState(isEmpty) {
canvasWrapper.classList.toggle('d-none', isEmpty);
}
function setChartVisible(visible) {
const modal = document.getElementById('cardModal');
const chartWrapper = modal?.querySelector('#priceHistoryChart')?.closest('.alert');
if (chartWrapper) chartWrapper.classList.toggle('d-none', !visible);
}
function buildChartData(history, rangeKey) {
const cutoff = RANGE_DAYS[rangeKey] === Infinity
? new Date(0)
@@ -39,20 +45,14 @@ function buildChartData(history, rangeKey) {
const filtered = history.filter(r => new Date(r.calculatedAt) >= cutoff);
// Always build the full date axis for the selected window, even if sparse.
// Generate one label per day in the range so the x-axis reflects the
// chosen period rather than collapsing to only the days that have data.
const dataDateSet = new Set(filtered.map(r => r.calculatedAt));
const allDates = [...dataDateSet].sort((a, b) => new Date(a) - new Date(b));
// If we have real data, expand the axis to span from cutoff → today so
// empty stretches at the start/end of a range are visible.
let axisLabels = allDates;
if (allDates.length > 0 && RANGE_DAYS[rangeKey] !== Infinity) {
const start = new Date(cutoff);
const end = new Date();
const expanded = [];
// Step through every day in the window
for (let d = new Date(start); d <= end; d.setDate(d.getDate() + 1)) {
expanded.push(d.toISOString().split('T')[0]);
}
@@ -101,17 +101,9 @@ function buildChartData(history, rangeKey) {
function updateChart() {
if (!chartInstance) return;
const { labels, datasets, hasData, activeConditionHasData } = buildChartData(allHistory, activeRange);
// Always push the new labels/datasets to the chart so the x-axis
// reflects the selected time window — even when there's no data for
// the active condition. Then toggle the empty state overlay on top.
chartInstance.data.labels = labels;
chartInstance.data.datasets = datasets;
chartInstance.update('none');
// Show the empty state overlay if the active condition has no points
// in this window, but leave the (empty) chart visible underneath so
// the axis communicates the selected period.
setEmptyState(!hasData || !activeConditionHasData);
}
@@ -135,7 +127,6 @@ function initPriceChart(canvas) {
const { labels, datasets, hasData, activeConditionHasData } = buildChartData(allHistory, activeRange);
// Render the chart regardless — show empty state overlay if needed
setEmptyState(!hasData || !activeConditionHasData);
chartInstance = new Chart(canvas.getContext('2d'), {
@@ -202,9 +193,16 @@ function initFromCanvas(canvas) {
activeCondition = "Near Mint";
activeRange = '1m';
const modal = document.getElementById('cardModal');
modal?.querySelectorAll('.price-range-btn').forEach(b => {
b.classList.toggle('active', b.dataset.range === '1m');
});
// Hide chart if the vendor tab is already active when the modal opens
// (e.g. opened via the inventory button)
const activeTab = modal?.querySelector('.nav-link.active')?.getAttribute('data-bs-target');
setChartVisible(activeTab !== '#nav-vendor');
initPriceChart(canvas);
}
@@ -225,6 +223,10 @@ function setup() {
document.addEventListener('shown.bs.tab', (e) => {
if (!modal.contains(e.target)) return;
const target = e.target?.getAttribute('data-bs-target');
// Hide the chart when the vendor tab is active, show it for all others
setChartVisible(target !== '#nav-vendor');
const conditionMap = {
'#nav-nm': 'Near Mint',
'#nav-lp': 'Lightly Played',