added local assets for 404 page shenanigans, added pokedex header, and continued to add set icon mappings
This commit is contained in:
zach
@@ -58,6 +58,25 @@ function timeAgo(date: any) {
|
||||
return "just now";
|
||||
}
|
||||
|
||||
function getPriceVolatility({ current, low, high }) {
|
||||
if (!current || !low || !high) return "—";
|
||||
|
||||
const range = high - low;
|
||||
if (range <= 0) return "Low";
|
||||
|
||||
const position = (current - low) / range;
|
||||
|
||||
if (position > 0.75) return "High";
|
||||
if (position < 0.46 || position > 0.74) return "Medium";
|
||||
return "Low";
|
||||
}
|
||||
|
||||
const volatility = getPriceVolatility({
|
||||
current: nearMintPrice,
|
||||
low: nearMint?.lowestPrice,
|
||||
high: nearMint?.highestPrice
|
||||
});
|
||||
|
||||
---
|
||||
<div class="modal-dialog modal-dialog-centered modal-fullscreen-md-down modal-xl">
|
||||
<div class="modal-dialog modal-dialog-centered modal-fullscreen-md-down modal-xl">
|
||||
@@ -80,61 +99,53 @@ function timeAgo(date: any) {
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-7">
|
||||
<nav>
|
||||
<div class="nav nav-tabs nav-sm-fill border-0" id="nav-tab" role="tablist">
|
||||
<button class="nav-link nm active" id="nav-nm" data-bs-toggle="tab" data-bs-target="#nav-nm" type="button" role="tab" aria-controls="nav-nm" aria-selected="true"><span class="d-none d-md-inline">Near Mint</span><span class="d-md-none">NM</span></button>
|
||||
<button class="nav-link lp" id="nav-lp" data-bs-toggle="tab" data-bs-target="#nav-lp" type="button" role="tab" aria-controls="nav-lp" aria-selected="false"><span class="d-none d-md-inline">Lightly Played</span><span class="d-md-none">LP</span></button>
|
||||
<button class="nav-link mp" id="nav-mp" data-bs-toggle="tab" data-bs-target="#nav-mp" type="button" role="tab" aria-controls="nav-mp" aria-selected="false"><span class="d-none d-md-inline">Moderately Played</span><span class="d-md-none">MP</span></button>
|
||||
<button class="nav-link hp" id="nav-hp" data-bs-toggle="tab" data-bs-target="#nav-hp" type="button" role="tab" aria-controls="nav-hp" aria-selected="false"><span class="d-none d-md-inline">Heavily Played</span><span class="d-md-none">HP</span></button>
|
||||
<button class="nav-link dmg" id="nav-dmg" data-bs-toggle="tab" data-bs-target="#nav-dmg" type="button" role="tab" aria-controls="nav-dmg" aria-selected="false"><span class="d-none d-md-inline">Damaged</span><span class="d-md-none">DMG</span></button>
|
||||
<button class="nav-link vendor" id="nav-vendor" data-bs-toggle="tab" data-bs-target="#nav-vendor" type="button" role="tab" aria-controls="nav-vendor" aria-selected="false"><span class="d-none d-md-inline">Inventory</span><span class="d-md-none">+/-</span></button>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="tab-content" id="nav-tabContent">
|
||||
<ul class="nav nav-tabs nav-sm-fill border-0" id="myTab" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link nm active" id="nm-tab" data-bs-toggle="tab" data-bs-target="#nav-nm" type="button" role="tab" aria-controls="nav-nm" aria-selected="true"><span class="d-none d-md-inline">Near Mint</span><span class="d-md-none">NM</span></button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link lp" id="lp-tab" data-bs-toggle="tab" data-bs-target="#nav-lp" type="button" role="tab" aria-controls="nav-lp" aria-selected="false"><span class="d-none d-md-inline">Lightly Played</span><span class="d-md-none">LP</span></button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link mp" id="mp-tab" data-bs-toggle="tab" data-bs-target="#nav-mp" type="button" role="tab" aria-controls="nav-mp" aria-selected="false"><span class="d-none d-md-inline">Moderately Played</span><span class="d-md-none">MP</span></button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link hp" id="hp-tab" data-bs-toggle="tab" data-bs-target="#nav-hp" type="button" role="tab" aria-controls="nav-hp" aria-selected="false"><span class="d-none d-md-inline">Heavily Played</span><span class="d-md-none">HP</span></button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link dmg" id="dmg-tab" data-bs-toggle="tab" data-bs-target="#nav-dmg" type="button" role="tab" aria-controls="nav-dmg" aria-selected="false"><span class="d-none d-md-inline">Damaged</span><span class="d-md-none">DMG</span></button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link vendor" id="vendor-tab" data-bs-toggle="tab" data-bs-target="#nav-vendor" type="button" role="tab" aria-controls="nav-vendor" aria-selected="false"><span class="d-none d-md-inline">Inventory</span><span class="d-md-none">+/-</span></button>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content" id="myTabContent">
|
||||
<div class="tab-pane fade show active" id="nav-nm" role="tabpanel" aria-labelledby="nav-nm" tabindex="0">
|
||||
<div class="row g-2 mt-2">
|
||||
<div class="mt-2 col-12 col-md-3 row row-cols-3 row-cols-md-1">
|
||||
<div class="col dark-callout price-area rounded mb-1 py-2">
|
||||
<div class="col alert alert-secondary price-area rounded mb-1 py-2">
|
||||
<p class="h6">Market Price</p>
|
||||
<p class="py-0 mb-1">${nearMintPrice}</p>
|
||||
</div>
|
||||
<div class="col dark-callout price-area rounded mb-1 py-2">
|
||||
<div class="col alert alert-secondary price-area rounded mb-1 py-2">
|
||||
<p class="h6">Lowest List</p>
|
||||
<p class="py-0 mb-1">${nearMint?.lowestPrice}</p>
|
||||
</div>
|
||||
<div class="col dark-callout price-area rounded mb-1 py-2">
|
||||
<div class="col alert alert-secondary price-area rounded mb-1 py-2">
|
||||
<p class="h6">Highest List</p>
|
||||
<p class="py-0 mb-1">${nearMint?.highestPrice}</p>
|
||||
</div>
|
||||
<div class="col-12 alert alert-success mb-1 py-2 d-none">
|
||||
<p class="h6">Low Volatility</p>
|
||||
<div class="col-12 mb-1 py-2 alert alert-secondary rounded" id="volatilityContainer" role="alert">
|
||||
<p class="h6">Volatility</p>
|
||||
<p class="py-0 mb-1" id="volatility">{volatility}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex flex-column mt-2 col-12 col-md-9">
|
||||
<div class="dark-callout rounded table-responsive pt-1 ps-2 mb-1">
|
||||
<div class="alert alert-secondary rounded table-responsive mb-1 py-2">
|
||||
<p class="h6">Latest Sales</p>
|
||||
<table class="table small table-dark table-sm table-striped table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Date</th>
|
||||
<th scope="col">Price</th>
|
||||
<th scope="col">Condition</th>
|
||||
<th scope="col">Title</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{latestSales.data.map(sale => (
|
||||
<tr>
|
||||
<td>{new Date(sale.orderDate).toLocaleDateString()}</td>
|
||||
<td>${sale.purchasePrice}</td>
|
||||
<td>{sale.condition}</td>
|
||||
<td>{sale.title}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
<div class="dark-callout rounded p-2 mb-0 flex-fill">
|
||||
<div class="alert alert-secondary rounded mb-1 py-2 ">
|
||||
<p class="h6">Placeholder for graph</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -143,23 +154,23 @@ function timeAgo(date: any) {
|
||||
<div class="tab-pane fade" id="nav-lp" role="tabpanel" aria-labelledby="nav-lp" tabindex="0">
|
||||
<div class="row g-2 mt-2">
|
||||
<div class="d-flex flex-column mt-2 col-3">
|
||||
<div class="dark-callout rounded p-2 mb-2">
|
||||
<div class="alert alert-secondary rounded p-2 mb-2">
|
||||
<h6>Market Price</h6>
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="dark-callout rounded p-2 mb-2">
|
||||
<div class="alert alert-secondary rounded p-2 mb-2">
|
||||
<h6>Lowest Price</h6>
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="dark-callout rounded p-2 mb-2">
|
||||
<div class="alert alert-secondary rounded p-2 mb-2">
|
||||
<h6>Highest Price</h6>
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="dark-callout rounded p-2 mb-2">
|
||||
<div class="alert alert-secondary rounded p-2 mb-2">
|
||||
<h6>Volatility</h6>
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="dark-callout rounded p-2 mb-2 flex-fill">
|
||||
<div class="alert alert-secondary rounded p-2 mb-2 flex-fill">
|
||||
<h6>Latest Sales</h6>
|
||||
<p></p>
|
||||
</div>
|
||||
@@ -169,23 +180,23 @@ function timeAgo(date: any) {
|
||||
<div class="tab-pane fade" id="nav-mp" role="tabpanel" aria-labelledby="nav-mp" tabindex="0">
|
||||
<div class="row g-2 mt-2">
|
||||
<div class="d-flex flex-column mt-2 col-3">
|
||||
<div class="dark-callout rounded p-2 mb-2">
|
||||
<div class="alert alert-secondary rounded p-2 mb-2">
|
||||
<h6>Market Price</h6>
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="dark-callout rounded p-2 mb-2">
|
||||
<div class="alert alert-secondary rounded p-2 mb-2">
|
||||
<h6>Lowest Price</h6>
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="dark-callout rounded p-2 mb-2">
|
||||
<div class="alert alert-secondary rounded p-2 mb-2">
|
||||
<h6>Highest Price</h6>
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="dark-callout rounded p-2 mb-2">
|
||||
<div class="alert alert-secondary rounded p-2 mb-2">
|
||||
<h6>Volatility</h6>
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="dark-callout rounded p-2 mb-2 flex-fill">
|
||||
<div class="alert alert-secondary rounded p-2 mb-2 flex-fill">
|
||||
<h6>Latest Sales</h6>
|
||||
<p></p>
|
||||
</div>
|
||||
@@ -195,23 +206,23 @@ function timeAgo(date: any) {
|
||||
<div class="tab-pane fade" id="nav-hp" role="tabpanel" aria-labelledby="nav-hp" tabindex="0">
|
||||
<div class="row g-2 mt-2">
|
||||
<div class="d-flex flex-column mt-2 col-3">
|
||||
<div class="dark-callout rounded p-2 mb-2">
|
||||
<div class="alert alert-secondary rounded p-2 mb-2">
|
||||
<h6>Market Price</h6>
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="dark-callout rounded p-2 mb-2">
|
||||
<div class="alert alert-secondary rounded p-2 mb-2">
|
||||
<h6>Lowest Price</h6>
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="dark-callout rounded p-2 mb-2">
|
||||
<div class="alert alert-secondary rounded p-2 mb-2">
|
||||
<h6>Highest Price</h6>
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="dark-callout rounded p-2 mb-2">
|
||||
<div class="alert alert-secondary rounded p-2 mb-2">
|
||||
<h6>Volatility</h6>
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="dark-callout rounded p-2 mb-2 flex-fill">
|
||||
<div class="alert alert-secondary rounded p-2 mb-2 flex-fill">
|
||||
<h6>Latest Sales</h6>
|
||||
<p></p>
|
||||
</div>
|
||||
@@ -221,29 +232,55 @@ function timeAgo(date: any) {
|
||||
<div class="tab-pane fade" id="nav-dmg" role="tabpanel" aria-labelledby="nav-dmg" tabindex="0">
|
||||
<div class="row g-2 mt-2">
|
||||
<div class="d-flex flex-column mt-2 col-3">
|
||||
<div class="dark-callout rounded p-2 mb-2">
|
||||
<div class="alert alert-secondary rounded p-2 mb-2">
|
||||
<h6>Market Price</h6>
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="dark-callout rounded p-2 mb-2">
|
||||
<div class="alert alert-secondary rounded p-2 mb-2">
|
||||
<h6>Lowest Price</h6>
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="dark-callout rounded p-2 mb-2">
|
||||
<div class="alert alert-secondary rounded p-2 mb-2">
|
||||
<h6>Highest Price</h6>
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="dark-callout rounded p-2 mb-2">
|
||||
<div class="alert alert-secondary rounded p-2 mb-2">
|
||||
<h6>Volatility</h6>
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="dark-callout rounded p-2 mb-2 flex-fill">
|
||||
<div class="alert alert-secondary rounded p-2 mb-2 flex-fill">
|
||||
<h6>Latest Sales</h6>
|
||||
<p></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="nav-vendor" role="tabpanel" aria-labelledby="nav-vendor" tabindex="0">
|
||||
<div class="row g-2 mt-2">
|
||||
<div class="d-flex flex-column mt-2 col-3">
|
||||
<div class="alert alert-secondary rounded p-2 mb-2">
|
||||
<h6>Market Price</h6>
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="alert alert-secondary rounded p-2 mb-2">
|
||||
<h6>Lowest Price</h6>
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="alert alert-secondary rounded p-2 mb-2">
|
||||
<h6>Highest Price</h6>
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="alert alert-secondary rounded p-2 mb-2">
|
||||
<h6>Volatility</h6>
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="alert alert-secondary rounded p-2 mb-2 flex-fill">
|
||||
<h6>Latest Sales</h6>
|
||||
<p></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-2 mt-0 mt-md-5">
|
||||
@@ -259,3 +296,23 @@ function timeAgo(date: any) {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const volDiv = document.getElementById("volatility");
|
||||
const parent = volDiv.parentElement;
|
||||
|
||||
// Define the mapping of text → class
|
||||
const classMap = {
|
||||
"Low": "alert-success",
|
||||
"Medium": "alert-warning",
|
||||
"High": "alert-danger"
|
||||
};
|
||||
|
||||
// Get the current text of the div
|
||||
const text = volDiv.textContent.trim();
|
||||
|
||||
// Apply class if the text matches
|
||||
if (classMap[text]) {
|
||||
parent.classList.add(classMap[text]);
|
||||
}
|
||||
</script>
|
||||
@@ -49,6 +49,9 @@ const conditionOrder = ["Near Mint", "Lightly Played", "Moderately Played", "Hea
|
||||
}
|
||||
{pokemon.map((card) => (
|
||||
<div class="col">
|
||||
<div class="inventory-button position-relative float-end shadow-filter text-center d-none">
|
||||
<div class="inventory-label pt-2">+/-</div>
|
||||
</div>
|
||||
<div hx-get={`/partials/card-modal?productId=${card.productId}`} hx-target="#cardModal" hx-trigger="click" data-bs-toggle="modal" data-bs-target="#cardModal">
|
||||
<img src={`/cards/${card.productId}.jpg`} alt={card.productName} loading="lazy" decoding="async" class="img-fluid rounded-3 mb-2 card-image w-100" onerror="this.onerror=null;this.src='/cards/noImage.webp'"/>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user