tmiller/pokemon
1
0
Fork 1
Code Issues 4 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

283
src/components/CardGrid.astro
View File

@@ -1,6 +1,7 @@
---
import BackToTop from "./BackToTop.astro"
---
<div class="container-fluid container-sm mt-3">
<div class="row mb-4">
<div class="col-md-2">
<div class="h5 d-none">Inventory management placeholder</div>
@@ -43,17 +44,150 @@ import BackToTop from "./BackToTop.astro"
</button>
<BackToTop />
<!-- <script src="src/assets/js/holofoil-init.js" is:inline></script> -->
</div>
<script is:inline>
(function () {
// ── Price mode helpers ────────────────────────────────────────────────────
// marketPriceByCondition is injected into the modal HTML via a data attribute
// on #inventoryEntryList: data-market-prices='{"Near Mint":6.00,...}'
// See card-modal.astro for where this is set.
function getMarketPrices(form) {
const listEl = form.closest('.tab-pane')?.querySelector('#inventoryEntryList')
?? document.getElementById('inventoryEntryList');
try {
return JSON.parse(listEl?.dataset.marketPrices || '{}');
} catch {
return {};
}
}
function applyPriceModeUI(form, mode) {
const priceInput = form.querySelector('#purchasePrice');
const pricePrefix = form.querySelector('#pricePrefix');
const priceSuffix = form.querySelector('#priceSuffix');
const priceHint = form.querySelector('#priceHint');
if (!priceInput) return;
const isPct = mode === 'percent';
pricePrefix?.classList.toggle('d-none', isPct);
priceSuffix?.classList.toggle('d-none', !isPct);
priceInput.step = isPct ? '1' : '0.01';
priceInput.max = isPct ? '100' : '';
priceInput.placeholder = isPct ? '0' : '0.00';
priceInput.classList.toggle('rounded-end', !isPct);
priceInput.classList.toggle('rounded-start', isPct);
if (priceHint && !isPct) priceHint.textContent = 'Enter the purchase price.';
}
function updatePriceHint(form) {
const priceInput = form.querySelector('#purchasePrice');
const priceHint = form.querySelector('#priceHint');
if (!priceInput || !priceHint) return;
const mode = form.querySelector('input[name="priceMode"]:checked')?.value ?? 'dollar';
if (mode !== 'percent') { priceHint.textContent = 'Enter the purchase price.'; return; }
const condition = form.querySelector('input[name="condition"]:checked')?.value ?? 'Near Mint';
const prices = getMarketPrices(form);
const marketPrice = prices[condition] ?? 0;
const pct = parseFloat(priceInput.value) || 0;
const resolved = ((pct / 100) * marketPrice).toFixed(2);
priceHint.textContent = marketPrice
? `= $${resolved} (${pct}% of $${marketPrice.toFixed(2)} market)`
: 'No market price available for this condition.';
}
function resolveFormPrice(form) {
// Returns a FormData ready to POST; % is converted to $ in-place.
const data = new FormData(form);
const mode = data.get('priceMode');
if (mode === 'percent') {
const condition = data.get('condition');
const prices = getMarketPrices(form);
const marketPrice = prices[condition] ?? 0;
const pct = parseFloat(data.get('purchasePrice')) || 0;
data.set('purchasePrice', ((pct / 100) * marketPrice).toFixed(2));
}
data.delete('priceMode'); // UI-only field
return data;
}
// ── Empty state helper ────────────────────────────────────────────────────
function syncEmptyState(invList) {
const emptyState = document.getElementById('inventoryEmptyState');
if (!emptyState) return;
const hasEntries = invList.querySelector('[data-inventory-id]') !== null;
emptyState.classList.toggle('d-none', hasEntries);
}
// ── Inventory form init (binding price-mode UI events) ───────────────────
function initInventoryForms(root = document) {
// Fetch inventory entries for this card
const invList = root.querySelector('#inventoryEntryList') || document.getElementById('inventoryEntryList');
if (invList && !invList.dataset.inventoryFetched) {
invList.dataset.inventoryFetched = 'true';
const cardId = invList.dataset.cardId;
if (cardId) {
const body = new FormData();
body.append('cardId', cardId);
fetch('/api/inventory', { method: 'POST', body })
.then(r => r.text())
.then(html => {
invList.innerHTML = html || '';
syncEmptyState(invList);
})
.catch(() => { invList.innerHTML = '<span class="text-danger">Failed to load inventory</span>'; });
}
}
const forms = root.querySelectorAll('[data-inventory-form]');
forms.forEach((form) => {
if (form.dataset.inventoryBound === 'true') return;
form.dataset.inventoryBound = 'true';
const priceInput = form.querySelector('#purchasePrice');
const modeInputs = form.querySelectorAll('input[name="priceMode"]');
const condInputs = form.querySelectorAll('input[name="condition"]');
// Set initial UI state
const checkedMode = form.querySelector('input[name="priceMode"]:checked')?.value ?? 'dollar';
applyPriceModeUI(form, checkedMode);
// Mode toggle
modeInputs.forEach((input) => {
input.addEventListener('change', () => {
if (priceInput) priceInput.value = ''; // clear stale value on mode switch
applyPriceModeUI(form, input.value);
updatePriceHint(form);
});
});
// Condition change updates the hint when in % mode
condInputs.forEach((input) => {
input.addEventListener('change', () => updatePriceHint(form));
});
// Live hint as user types
priceInput?.addEventListener('input', () => updatePriceHint(form));
// Reset — restore to $ mode
form.addEventListener('reset', () => {
setTimeout(() => {
applyPriceModeUI(form, 'dollar');
updatePriceHint(form);
}, 0);
});
});
}
// ── Sort dropdown ─────────────────────────────────────────────────────────
document.addEventListener('click', (e) => {
const sortBy = document.getElementById('sortBy');
const btn = e.target.closest('#sortBy [data-bs-toggle="dropdown"]');
const btn = e.target.closest('#sortBy [data-toggle="sort-dropdown"]');
if (btn) {
e.preventDefault();
e.stopPropagation();
@@ -121,7 +255,6 @@ import BackToTop from "./BackToTop.astro"
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
// Load with crossOrigin so toBlob() stays untainted
await new Promise((resolve) => {
const clean = new Image();
clean.crossOrigin = 'anonymous';
@@ -183,6 +316,20 @@ import BackToTop from "./BackToTop.astro"
}, 2000);
}
// ── Tab switching helper ──────────────────────────────────────────────────
function switchToRequestedTab() {
const tab = sessionStorage.getItem('openModalTab');
if (!tab) return;
sessionStorage.removeItem('openModalTab');
requestAnimationFrame(() => {
try {
const tabEl = document.querySelector(`#cardModal [data-bs-target="#${tab}"]`);
if (tabEl) bootstrap.Tab.getOrCreateInstance(tabEl).show();
} catch (e) {
}
});
}
// ── State ─────────────────────────────────────────────────────────────────
const cardIndex = [];
let currentCardId = null;
@@ -270,10 +417,17 @@ import BackToTop from "./BackToTop.astro"
if (modal._reconnectChartObserver) modal._reconnectChartObserver();
modal.querySelectorAll('[data-bs-toggle="tab"]').forEach(el => {
bootstrap.Tab.getInstance(el)?.dispose();
});
modal.innerHTML = html;
if (typeof htmx !== 'undefined') htmx.process(modal);
initInventoryForms(modal);
updateNavButtons(modal);
initChartAfterSwap(modal);
switchToRequestedTab();
};
if (document.startViewTransition && direction) {
@@ -358,8 +512,14 @@ import BackToTop from "./BackToTop.astro"
if (target._reconnectChartObserver) target._reconnectChartObserver();
target.querySelectorAll('[data-bs-toggle="tab"]').forEach(el => {
bootstrap.Tab.getInstance(el)?.dispose();
});
target.innerHTML = html;
if (typeof htmx !== 'undefined') htmx.process(target);
initInventoryForms(target);
const destImg = target.querySelector('img.card-image');
if (destImg) {
@@ -376,6 +536,7 @@ import BackToTop from "./BackToTop.astro"
await transition.finished;
updateNavButtons(target);
initChartAfterSwap(target);
switchToRequestedTab();
} catch (err) {
console.error('[card-modal] transition failed:', err);
@@ -391,18 +552,122 @@ import BackToTop from "./BackToTop.astro"
});
const cardModal = document.getElementById('cardModal');
// ── Delegated submit handler for inventory form ──────────────────────────
cardModal.addEventListener('submit', async (e) => {
const form = e.target.closest('[data-inventory-form]');
if (!form) return;
e.preventDefault();
if (!form.checkValidity()) { form.classList.add('was-validated'); return; }
const cardId = form.closest('[data-card-id]')?.dataset.cardId;
if (!cardId) return;
const submitBtn = form.querySelector('button[type="submit"]');
if (submitBtn) { submitBtn.disabled = true; submitBtn.textContent = 'Saving…'; }
// resolveFormPrice converts % → $ and strips priceMode before POSTing
const body = resolveFormPrice(form);
body.append('action', 'add');
body.append('cardId', cardId);
try {
const res = await fetch('/api/inventory', { method: 'POST', body });
const html = await res.text();
const invList = document.getElementById('inventoryEntryList');
if (invList) {
invList.innerHTML = html || '';
syncEmptyState(invList);
}
form.reset();
form.classList.remove('was-validated');
// reset fires our listener which restores $ mode UI
} catch {
// keep current inventory list state
} finally {
if (submitBtn) { submitBtn.disabled = false; submitBtn.textContent = 'Save to inventory'; }
}
});
// ── Delegated click handler for inventory entry buttons ─────────────────
cardModal.addEventListener('click', async (e) => {
const btn = e.target.closest('[data-inv-action]');
if (!btn) return;
const article = btn.closest('[data-inventory-id]');
if (!article) return;
const action = btn.dataset.invAction;
const inventoryId = article.dataset.inventoryId;
const cardId = article.dataset.cardId;
const qtyEl = article.querySelector('[data-inv-qty]');
let qty = Number(qtyEl?.textContent) || 1;
if (action === 'increment') {
qtyEl.textContent = ++qty;
return;
}
if (action === 'decrement') {
if (qty > 1) qtyEl.textContent = --qty;
return;
}
// update or remove — POST to API and reload inventory list
btn.disabled = true;
const body = new FormData();
body.append('cardId', cardId);
if (action === 'update') {
body.append('action', 'update');
body.append('inventoryId', inventoryId);
body.append('quantity', String(qty));
body.append('purchasePrice', article.dataset.purchasePrice);
body.append('note', article.dataset.note || '');
} else if (action === 'remove') {
body.append('action', 'remove');
body.append('inventoryId', inventoryId);
}
try {
const res = await fetch('/api/inventory', { method: 'POST', body });
const html = await res.text();
const invList = document.getElementById('inventoryEntryList');
if (invList) {
invList.innerHTML = html || '';
syncEmptyState(invList);
}
} catch {
// keep current state
} finally {
btn.disabled = false;
}
});
cardModal.addEventListener('shown.bs.modal', () => {
updateNavButtons(cardModal);
initChartAfterSwap(cardModal);
initInventoryForms(cardModal);
switchToRequestedTab();
});
cardModal.addEventListener('hidden.bs.modal', () => {
currentCardId = null;
updateNavButtons(null);
});
// ── AdSense re-init on infinite scroll ───────────────────────────────────
document.addEventListener('htmx:afterSwap', () => {
(window.adsbygoogle = window.adsbygoogle || []).push({});
document.addEventListener('DOMContentLoaded', () => {
initInventoryForms();
const pending = sessionStorage.getItem('pendingSearch');
if (pending) {
sessionStorage.removeItem('pendingSearch');
const input = document.getElementById('searchInput');
if (input) input.value = pending;
// The form's hx-trigger="load" will fire automatically on page load,
// picking up the pre-populated input value — no manual trigger needed.
}
});
})();