72 lines
2.0 KiB
JavaScript
72 lines
2.0 KiB
JavaScript
const $ = (sel) => document.querySelector(sel);
|
|
const $$ = (sel) => Array.from(document.querySelectorAll(sel));
|
|
|
|
const playerInput = $('#player');
|
|
const resultsEl = $('#results');
|
|
const searchBtn = $('#searchBtn');
|
|
|
|
async function fetchJSON(url) {
|
|
const res = await fetch(url);
|
|
if (!res.ok) throw new Error(`Request failed ${res.status}`);
|
|
return res.json();
|
|
}
|
|
|
|
|
|
async function search() {
|
|
resultsEl.innerHTML = '';
|
|
const player = playerInput.value.trim();
|
|
if (!player) {
|
|
resultsEl.innerHTML = `<div class="empty">Enter a player name to search.</div>`;
|
|
return;
|
|
}
|
|
|
|
const params = new URLSearchParams();
|
|
params.set('player', player);
|
|
|
|
try {
|
|
const data = await fetchJSON(`/api/ebay/search?${params.toString()}`);
|
|
renderResults(data.results || []);
|
|
} catch (e) {
|
|
console.error(e);
|
|
resultsEl.innerHTML = `<div class="empty">Something went wrong. Try again.</div>`;
|
|
}
|
|
}
|
|
|
|
function renderResults(items) {
|
|
if (!items.length) {
|
|
resultsEl.innerHTML = `<div class="empty">No cards found. Try adjusting filters or the name.</div>`;
|
|
return;
|
|
}
|
|
|
|
const tpl = document.getElementById('card-template');
|
|
items.forEach(c => {
|
|
const node = tpl.content.firstElementChild.cloneNode(true);
|
|
const img = node.querySelector('.card-img');
|
|
img.src = c.image || '';
|
|
img.alt = c.title || 'Listing image';
|
|
const title = node.querySelector('.player');
|
|
title.textContent = c.title || 'Sold listing';
|
|
const price = (c.price ? `${c.currency || ''} ${Number(c.price).toFixed(2)}` : '');
|
|
const ended = (c.ended ? new Date(c.ended).toLocaleString() : '');
|
|
node.querySelector('.secondary').textContent = [price, ended].filter(Boolean).join(' • ');
|
|
// Wrap card with link to eBay
|
|
node.addEventListener('click', () => {
|
|
if (c.url) window.open(c.url, '_blank');
|
|
});
|
|
resultsEl.appendChild(node);
|
|
});
|
|
}
|
|
|
|
searchBtn.addEventListener('click', () => {
|
|
search();
|
|
});
|
|
|
|
// Press Enter to search
|
|
playerInput.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Enter') {
|
|
e.preventDefault();
|
|
search();
|
|
}
|
|
});
|
|
|