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

[wip] bugs to work out, but backend should support inventory

Browse Source
This commit is contained in:
Thad Miller
2026-04-02 19:24:51 -04:00
parent 38f041d86f
commit 3be17fe84c
8 changed files with 240 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
src/pages/partials/card-modal.astro
View File

@@ -169,7 +169,6 @@ const altSearchUrl = (card: any) => {
return `https://alt.xyz/browse?query=${encodeURIComponent(card?.productUrlName)}+${encodeURIComponent(card?.set?.setUrlName)}+${encodeURIComponent(card?.number)}&sortBy=newest_first`;
};
---
<div class="modal-dialog modal-dialog-centered modal-fullscreen-md-down modal-xl">
<div class="modal-content" data-card-id={card?.cardId}>
<div class="modal-header border-0">
@@ -496,105 +495,22 @@ const altSearchUrl = (card: any) => {
<div class="alert alert-dark border-0 rounded-4 d-none" id="inventoryEmptyState">
<div class="fw-medium mb-1">No inventory entries yet</div>
<div class="text-secondary small">
Once you add copies of this card, they’ll show up here.
Once you add copies of this card, they'll show up here.
</div>
</div>
<!-- Inventory list -->
<div class="d-flex flex-column gap-3" id="inventoryEntryList">
<!-- Inventory card -->
<article class="border rounded-4 p-2 bg-body-tertiary inventory-entry-card">
<div class="d-flex flex-column gap-2">
<!-- Top row -->
<div class="d-flex justify-content-between align-items-start gap-3">
<div class="min-w-0 flex-grow-1">
<div class="fw-semibold fs-5 text-body mb-1">Near Mint</div>
</div>
</div>
<!-- Middle row -->
<div class="row g-2">
<div class="col-4">
<div class="small text-secondary">Purchase price</div>
<div class="fs-5 fw-semibold">$8.50</div>
</div>
<div class="col-4">
<div class="small text-secondary">Market price</div>
<div class="fs-5 text-success">$10.25</div>
</div>
<div class="col-4">
<div class="small text-secondary">Gain / loss</div>
<div class="fs-5 fw-semibold text-success">+$1.75</div>
</div>
</div>
<!-- Bottom row -->
<div class="d-flex justify-content-between align-items-center gap-3 flex-wrap">
<div class="d-flex align-items-center gap-2">
<span class="small text-secondary">Qty</span>
<div class="btn-group" role="group" aria-label="Quantity controls">
<button type="button" class="btn btn-outline-secondary btn-sm">−</button>
<button type="button" class="btn btn-outline-secondary btn-sm" tabindex="-1">2</button>
<button type="button" class="btn btn-outline-secondary btn-sm">+</button>
</div>
</div>
<div class="d-flex align-items-center gap-2 flex-wrap">
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
<button type="button" class="btn btn-sm btn-outline-danger">Remove</button>
</div>
</div>
</div>
</article>
<!-- Inventory card -->
<article class="border rounded-4 p-2 bg-body-tertiary inventory-entry-card">
<div class="d-flex flex-column gap-2">
<!-- Top row -->
<div class="d-flex justify-content-between align-items-start gap-3">
<div class="min-w-0 flex-grow-1">
<div class="fw-semibold fs-5 text-body mb-1">Lightly Played</div>
</div>
</div>
<div class="row g-2">
<div class="col-4">
<div class="small text-secondary">Purchase price</div>
<div class="fs-5 fw-semibold">$6.00</div>
</div>
<div class="col-4">
<div class="small text-secondary">Market price</div>
<div class="fs-5 text-success">$8.00</div>
</div>
<div class="col-4">
<div class="small text-secondary">Gain / loss</div>
<div class="fs-5 fw-semibold text-success">+$4.00</div>
</div>
</div>
<div class="d-flex justify-content-between align-items-center gap-3 flex-wrap">
<div class="d-flex align-items-center gap-2">
<span class="small text-secondary">Qty</span>
<div class="btn-group" role="group" aria-label="Quantity controls">
<button type="button" class="btn btn-outline-secondary btn-sm">−</button>
<button type="button" class="btn btn-outline-secondary btn-sm" tabindex="-1">2</button>
<button type="button" class="btn btn-outline-secondary btn-sm">+</button>
</div>
</div>
<div class="d-flex align-items-center gap-2 flex-wrap">
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
<button type="button" class="btn btn-sm btn-outline-danger">Remove</button>
</div>
</div>
</div>
</article>
<div class="d-flex flex-column gap-3" id="inventoryEntryList" hx-post="/api/inventory" hx-trigger="intersect once" hx-target="this" hx-vals=`{"cardId": ${cardId}}`>
<span>Loading...</span>
</div>
<script is:inline>
console.log('Setting up inventory tooltips');
document.addEventListener('DOMContentLoaded', () => {
console.log('Initializing tooltips');
htmx.process(document.getElementById('inventoryEntryList'));
console.log('Tooltips initialized');
});
</script>
</div>
</div>
</div>

5
src/pages/partials/cards.astro
View File

@@ -234,6 +234,8 @@ const facets = searchResults.results.slice(1).map((result: any) => {
}
</div>
<script define:vars={{ totalHits, filters, facets }} is:inline>
import { c } from "@clerk/shared/index-Cx9VOot7";
// Filter the facet values to make things like Set easier to find
const facetfilters = document.querySelectorAll('.facet-filter');
@@ -260,7 +262,8 @@ const facets = searchResults.results.slice(1).map((result: any) => {
document.getElementById('searchform').dispatchEvent(new Event('submit', {bubbles:true, cancelable:true}));
}
document.getElementById('clear-filters').addEventListener('click', (e) => clearAllFilters(e));
document.getElementById('clear-all-filters').addEventListener('click', (e) => clearAllFilters(e));
const clearAllBtn = document.getElementById('clear-all-filters');
if (clearAllBtn) clearAllBtn.addEventListener('click', (e) => clearAllFilters(e));
// Remove single facet value
for (const li of document.querySelectorAll('.remove-filter')) {