404 page created with random pokemon encounter. Add sample data to latest sales table and set up NM prices inside modal
This commit is contained in:
zach
@@ -1,6 +1,15 @@
|
||||
---
|
||||
import ebay from "/vendors/ebay.svg?raw";
|
||||
import SetIcon from '../../components/SetIcon.astro';
|
||||
import EnergyIcon from '../../components/EnergyIcon.astro';
|
||||
import RarityIcon from '../../components/RarityIcon.astro';
|
||||
import { db } from '../../db/index.ts';
|
||||
import { privateDecrypt } from "node:crypto";
|
||||
|
||||
import latestSales from '../../sampleData/latestsales.json';
|
||||
import chartdata from '../../sampleData/chartdata.json';
|
||||
|
||||
const priceData = chartdata;
|
||||
|
||||
export const partial = true;
|
||||
export const prerender = false;
|
||||
@@ -18,12 +27,43 @@ const card = await db.query.cards.findFirst({
|
||||
}
|
||||
});
|
||||
|
||||
const nearMint = await db.query.skus.findFirst({
|
||||
where: {
|
||||
productId: Number(productId),
|
||||
}
|
||||
});
|
||||
|
||||
const nearMintPrice = nearMint?.marketPrice ?? null;
|
||||
|
||||
const calculatedAt = new Date(nearMint?.calculatedAt);
|
||||
|
||||
function timeAgo(date) {
|
||||
const seconds = Math.floor((Date.now() - date) / 1000);
|
||||
|
||||
const intervals = {
|
||||
year: 31536000,
|
||||
month: 2592000,
|
||||
day: 86400,
|
||||
hour: 3600,
|
||||
minute: 60
|
||||
};
|
||||
|
||||
for (const [unit, value] of Object.entries(intervals)) {
|
||||
const count = Math.floor(seconds / value);
|
||||
if (count >= 1) return `${count} ${unit}${count > 1 ? "s" : ""} ago`;
|
||||
}
|
||||
|
||||
return "just now";
|
||||
}
|
||||
|
||||
---
|
||||
<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">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header border-0">
|
||||
<h4 class="card-title">{card?.productName} | <span class="text-secondary">{card?.number}</span> {card?.energyType}</h4>
|
||||
<div class="container-fluid">
|
||||
<span class="h4 card-title pe-2">{card?.productName}</span><span class="text-secondary ps-2 border-start">{card?.number}</span><span class="text-secondary ps-2">{nearMint?.variant}</span>
|
||||
</div>
|
||||
<button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body pt-0">
|
||||
@@ -31,10 +71,10 @@ const card = await db.query.cards.findFirst({
|
||||
<div class="card mb-2 border-0">
|
||||
<div class="row g-4">
|
||||
<div class="col-sm-12 col-md-3">
|
||||
<h6 class="text-secondary">Set name | Set Symbol</h6>
|
||||
<img src={`/cards/${card?.productId}.jpg`} class="card-image img-fluid rounded" alt="...">
|
||||
<p class="text-secondary">{card?.set?.setName}</p>
|
||||
<div class="position-relative d-inline-block"><img src={`/cards/${card?.productId}.jpg`} class="card-image img-fluid rounded" alt={card?.productName} onerror="this.onerror=null;this.src='/cards/noImage.webp'"><span class="position-absolute bottom-0 start-0 d-inline"><SetIcon set={card?.set?.setName} /></span><span class="position-absolute top-0 end-0 d-inline"><EnergyIcon energy={card?.energyType} /></span><span class="rarity-icon-large position-absolute bottom-0 end-0 d-inline"><RarityIcon rarity={card?.rarityName} /></span></div>
|
||||
<div class="d-flex flex-row justify-content-between mt-2">
|
||||
<div class="h6 text-secondary">Naoyo Kimura</div>
|
||||
<div class="p text-secondary">{card?.Artist}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-7">
|
||||
@@ -51,31 +91,49 @@ const card = await db.query.cards.findFirst({
|
||||
<div class="tab-content" id="nav-tabContent">
|
||||
<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="d-inline-flex justify-content-sm-evenly flex-row flex-md-column flex-wrap flex-md-nowrap mt-2 col-sm-4 col-md-3">
|
||||
<div class="dark-callout rounded p-2 mb-2">
|
||||
<h6>Market Price</h6>
|
||||
<p></p>
|
||||
<div class="mt-2 col-12 col-md-3 row row-cols-3 row-cols-md-1">
|
||||
<div class="col dark-callout rounded mb-1 py-2">
|
||||
<p class="h6">Market Price</p>
|
||||
<p class="py-0 mb-1">${nearMintPrice}</p>
|
||||
</div>
|
||||
<div class="dark-callout rounded p-2 mb-2">
|
||||
<h6>Lowest Price</h6>
|
||||
<p></p>
|
||||
<div class="col dark-callout rounded mb-1 py-2">
|
||||
<p class="h6">Lowest List</p>
|
||||
<p class="py-0 mb-1">${nearMint?.lowestPrice}</p>
|
||||
</div>
|
||||
<div class="dark-callout rounded p-2 mb-2">
|
||||
<h6>Highest Price</h6>
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="dark-callout rounded p-2 mb-2">
|
||||
<h6>Volatility</h6>
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="dark-callout rounded p-2 mb-2 flex-fill">
|
||||
<h6>Latest Sales</h6>
|
||||
<p></p>
|
||||
<div class="col dark-callout 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">
|
||||
<p class="h6">Low Volatility</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex flex-column mt-2 col-xs-8 col-md-9">
|
||||
<div class="dark-callout rounded p-2 pb-0 h-100">
|
||||
<h6>Placeholder for graph</h6>
|
||||
<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">
|
||||
<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">
|
||||
<p class="h6">Placeholder for graph</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -187,11 +245,11 @@ const card = await db.query.cards.findFirst({
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-2 mt-0 mt-md-5">
|
||||
<button type="button" class="btn btn-secondary mb-2 w-100"><img src="/vendors/tcgplayer.webp"> TCGPlayer</button>
|
||||
<button type="button" class="btn btn-secondary mb-2 w-100"><span set:html={ebay} /></button>
|
||||
<a class="btn btn-secondary mb-2 w-100" href={`https://www.tcgplayer.com/product/${card?.productId}`} target="_blank"><img src="/vendors/tcgplayer.webp"> TCGPlayer</a>
|
||||
<a class="btn btn-secondary mb-2 w-100" href={`https://www.ebay.com/sch/i.html?_nkw=${card?.productUrlName}+${card?.number}&LH_Sold=1&Graded=No&_dcat=183454${card?.productId}`} target="_blank"><span set:html={ebay} /></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-end my-0"><small class="text-body-secondary">Prices last updated</small></div>
|
||||
<div class="text-end my-0"><small class="text-body-secondary">Prices last updated: {timeAgo(calculatedAt)}</small></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user