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

[chore] move cards to htmx post

Browse Source
This commit is contained in:
Thad Miller
2026-02-22 11:00:30 -05:00
parent b7679168ae
commit bdcf90b0d9
7 changed files with 60 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/CardGrid.astro
View File

@@ -4,11 +4,10 @@
<div class="row mb-5">
<div class="col-md-3 display-sm-none">
<div class="h5 d-none">Inventory management placeholder</div>
<div class="h5">Inventory management placeholder</div>
</div>
<div class="col-sm-12 col-md-9 mt-0">
<div class="row g-xxl-3 g-2 row-cols-2 row-cols-lg-3 row-cols-xl-4">
<slot name="Card">
<div id="cardGrid" class="row g-xxl-3 g-2 row-cols-2 row-cols-lg-3 row-cols-xl-4">
</div>
</div>
</div>

7
src/components/StickyFilter.astro
View File

@@ -1,14 +1,13 @@
---
import '/src/assets/css/main.scss';
const { query } = Astro.props;
---
<div class="sticky border-bottom">
<div class="container">
<form method="GET">
<form hx-post="/partials/cards" hx-target="#cardGrid" hx-trigger="load, submit">
<div class="d-flex justify-content-between">
<div class="my-2 flex-grow-1 me-2">
<input type="text" name="q" class="form-control w-100 search-box" placeholder="Search cards..." value={query} />
<input type="text" name="q" class="form-control w-100 search-box" placeholder="Search cards..." />
</div>
<div class="my-2">
<input type="submit" class="w-100 search-button" value="Search" />

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

@@ -35,9 +35,11 @@ const nearMint = await db.query.skus.findFirst({
const nearMintPrice = nearMint?.marketPrice ?? null;
const calculatedAt = new Date(nearMint?.calculatedAt);
const calculatedAt = new Date(nearMint?.calculatedAt || 0);
function timeAgo(date: any) {
if (date==0) return "never";
function timeAgo(date) {
const seconds = Math.floor((Date.now() - date) / 1000);
const intervals = {

38
src/components/Card.astro → src/pages/partials/cards.astro
View File

@@ -1,14 +1,18 @@
---
//import { eq } from 'drizzle-orm';
import { isConditionalExpression } from 'typescript';
import { client } from '../db/typesense.ts';
import { db } from '../db';
//import * as schema from '../db/schema.ts';
import RarityIcon from './RarityIcon.astro';
import { client } from '../../db/typesense.ts';
import { db } from '../../db';
import RarityIcon from '../../components/RarityIcon.astro';
const { query } = Astro.props;
export const prerender = false;
// get the query from post request using form data
const formData = await Astro.request.formData();
const query = formData.get('q')?.toString() || '';
// use typesense to search for cards matching the query and return the productIds of the results
const searchResults = await client.collections('cards').documents().search({
q: query,
filter_by: 'sealed:false',
query_by: 'productLineName,productName,setName,number,rarityName',
per_page: 250,
});
@@ -23,19 +27,15 @@ const pokemon = await db.query.cards.findMany({
}
});
// format price to 2 decimal places (or 0 if price >=100) and adds a $ sign, if the price is null it returns "–"
const formatPrice = (price:any) => {
if (price === null) {
return "–";
}
if (price === null) return "–";
price = Number(price);
if (price >= 99.99) {
return `${Math.round(price)}`;
}
return `${price.toFixed(2)}`;
if (price > 99.99) return `$${Math.round(price)}`;
return `$${price.toFixed(2)}`;
};
const order = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Played", "Damaged"];
const conditionOrder = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Played", "Damaged"];
---
{pokemon.map((card) => (
<div class="col">
@@ -45,14 +45,14 @@ const order = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Play
<div class="row row-cols-5 gx-1 price-row mb-2">
{card.prices
.slice()
.sort((a, b) => order.indexOf(a.condition) - order.indexOf(b.condition))
.sort((a, b) => conditionOrder.indexOf(a.condition) - conditionOrder.indexOf(b.condition))
.filter((price, index, arr) =>
arr.findIndex(p => p.condition === price.condition) === index
)
.map((price) => (
<div class="col price-label ps-1">
{price.condition.split(' ').map((w) => w[0]).join('')}
<br />${formatPrice(price.marketPrice)}
<br />{formatPrice(price.marketPrice)}
</div>
))}
</div>
@@ -63,4 +63,4 @@ const order = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Play
<span class="ps-2 small-icon"><RarityIcon rarity={card.rarityName} /></span>
</div>
</div>
))}
))}

13
src/pages/pokemon.astro
View File

@@ -1,25 +1,18 @@
---
import Layout from '../layouts/Main.astro';
import CardGrid from "../components/CardGrid.astro";
import Card from "../components/Card.astro";
import StickyFilter from '../components/StickyFilter.astro';
export const prerender = false;
// super dirty form retrieval
// TODO: need to prevent XSS here
const searchParams = Astro.url.searchParams;
const query = searchParams.get('q') || '*';
---
<Layout>
<StickyFilter query={ query } />
<StickyFilter />
<div class="container">
<h1 class="my-5">Rigid's app thing</h1>
<CardGrid>
<Card slot="Card" query={query}></Card>
</CardGrid>
<CardGrid />
<div class="modal fade card-modal" id="cardModal" tabindex="-1" aria-labelledby="cardModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-fullscreen-md-down modal-xl">