← back to Gmc Viewer
public/index.html
112 lines
<!doctype html><html><head>
<script>
// Credential-safe fetch guard (fleet drop-in) — if this page is opened with
// credentials in the URL (a saved bookmark / Chrome-remembered basic-auth:
// https://user:pass@host/…), the browser poisons document.baseURI, so any
// relative or root-relative fetch('/api/…') throws "Request cannot be constructed
// from a URL that includes credentials" and callers silently fall to an empty
// state. Resolve every non-absolute request URL against the credential-free
// location instead of baseURI. Placed first so it wraps window.fetch before any
// app script runs. Ref: creds-in-url-fetch-guard-fleet-pattern.
(function () {
var _fetch = window.fetch.bind(window);
var cleanBase = function () { return location.origin + location.pathname; };
window.fetch = function (input, init) {
try {
if (typeof input === 'string' && !/^[a-z]+:\/\//i.test(input) && input.indexOf('//') !== 0) {
input = new URL(input, cleanBase()).href;
} else if (input instanceof Request && !/^[a-z]+:\/\//i.test(input.url)) {
input = new Request(new URL(input.url, cleanBase()).href, input);
}
} catch (_) { /* fall through to native */ }
return _fetch(input, init);
};
})();
</script><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Google Merchant — DW Catalog</title>
<style>
:root{--cols:6}
*{box-sizing:border-box}
body{margin:0;font:14px -apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#0f1115;color:#e7e9ee}
header{position:sticky;top:0;z-index:5;background:#161922;border-bottom:1px solid #262b38;padding:12px 16px}
h1{margin:0 0 8px;font-size:16px;font-weight:600;letter-spacing:.02em}
.bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip{background:#20252f;border:1px solid #2c3342;color:#cfd4de;border-radius:20px;padding:5px 12px;cursor:pointer;font-size:13px}
.chip.on{background:#2f6df6;border-color:#2f6df6;color:#fff}
.chip b{color:#fff;font-weight:700;margin-left:5px}
input[type=search]{background:#0f1115;border:1px solid #2c3342;color:#e7e9ee;border-radius:8px;padding:6px 10px;min-width:200px}
input[type=range]{vertical-align:middle}
.muted{color:#8b93a3;font-size:12px}
.grid{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:10px;padding:14px 16px}
.card{background:#161922;border:1px solid #232838;border-radius:10px;overflow:hidden;display:flex;flex-direction:column}
.card img{width:100%;aspect-ratio:1/1;object-fit:cover;background:#0b0d12}
.card .b{padding:7px 8px}
.t{font-size:12px;line-height:1.3;max-height:2.6em;overflow:hidden;color:#dfe3ea}
.v{color:#8b93a3;font-size:11px;margin-top:2px}
.price{font-weight:700;font-size:13px}
.price.s{color:#e0a93b}.price.r{color:#5fd08a}
.st{display:inline-block;font-size:10px;padding:1px 6px;border-radius:10px;margin-top:4px}
.st.active,.st.approved{background:#183a29;color:#5fd08a}.st.disapproved{background:#3a1a1a;color:#f08a8a}.st.pending{background:#3a331a;color:#e0c93b}.st.unknown{background:#232838;color:#8b93a3}
.load{grid-column:1/-1;text-align:center;padding:20px;color:#8b93a3}
</style> <link rel="stylesheet" href="/nav-agent/nav-agent.css"><!-- nav-agent -->
</head><body>
<header>
<h1>🛍️ Google Merchant — DW live catalog <span id="gen" class="muted"></span></h1>
<div class="bar">
<span class="chip" data-f="all" id="c-all">All<b>–</b></span>
<span class="chip" data-f="approved" id="c-approved">✅ Approved<b>–</b></span>
<span class="chip" data-f="disapproved" id="c-disapproved">⛔ Disapproved<b>–</b></span>
<span class="chip" data-f="pending" id="c-pending">⏳ Pending<b>–</b></span>
<span class="chip" data-f="real" id="c-real">💲 Real price<b>–</b></span>
<span class="chip" data-f="at425" id="c-at425">$4.25 sample<b>–</b></span>
<input type="search" id="q" placeholder="search title / vendor…">
<span class="muted">density</span><input type="range" id="dens" min="3" max="10" value="6">
<span class="chip" id="refresh">↻ Refresh</span>
<span class="muted" id="showing"></span>
</div>
</header>
<div class="grid" id="grid"><div class="load">loading…</div></div>
<script>
const $=s=>document.querySelector(s); let filter='all',q='';
// ── href-drill: filter state is URL-addressable (shareable + deep-link + back-button) ──
const DRILLABLE=new Set(['approved','disapproved','pending']); // statuses the /api/products filter supports
function qstr(over){ const f=(over&&'filter'in over)?over.filter:filter, qq=(over&&'q'in over)?over.q:q; const u=[]; if(f&&f!=='all')u.push('filter='+encodeURIComponent(f)); if(qq)u.push('q='+encodeURIComponent(qq)); return u.length?('?'+u.join('&')):location.pathname; }
function drillStatus(st,label){ return `<a class="st ${st} drill" data-filter="${st}" href="${qstr({filter:st})}" title="Show only ${st}">${label}</a>`; }
function readURL(){ const u=new URLSearchParams(location.search); filter=u.get('filter')||'all'; q=u.get('q')||''; const qe=$('#q'); if(qe)qe.value=q; document.querySelectorAll('.chip[data-f]').forEach(x=>x.classList.toggle('on',x.dataset.f===filter)); }
function writeURL(push){ history[push?'pushState':'replaceState']({},'',qstr()); }
const dens=$('#dens'); dens.oninput=()=>document.documentElement.style.setProperty('--cols',dens.value);
document.documentElement.style.setProperty('--cols',6);
async function summary(){
const r=await fetch('/api/summary').then(r=>r.json());
const s=r.summary||{};
$('#gen').textContent = r.generated_at? '· '+new Date(r.generated_at).toLocaleString()+(r.refreshing?' · refreshing…':'') : (r.refreshing?'· building…':'');
const set=(id,n)=>{const e=$(id); if(e)e.querySelector('b').textContent=(n??0).toLocaleString();};
set('#c-all',s.total);set('#c-approved',s.approved);set('#c-disapproved',s.disapproved);set('#c-pending',s.pending);set('#c-real',s.real_price);set('#c-at425',s.at_425);
if(r.refreshing) setTimeout(summary,4000);
}
async function load(){
$('#grid').innerHTML='<div class="load">loading…</div>';
const r=await fetch('/api/products?filter='+filter+'&q='+encodeURIComponent(q)+'&limit=800').then(r=>r.json());
$('#showing').textContent=r.count.toLocaleString()+' match'+(r.count===1?'':'es')+(r.count>800?' (showing 800)':'');
if(!r.items.length){$('#grid').innerHTML='<div class="load">no products</div>';return;}
$('#grid').innerHTML=r.items.map(i=>{
const s=Math.abs(i.price-4.25)<0.01?'s':'r';
const st=i.status||'unknown';
return `<div class="card">${i.image?`<img loading="lazy" src="${i.image}">`:'<div style="aspect-ratio:1/1;background:#0b0d12"></div>'}
<div class="b"><div class="t" title="${(i.title||'').replace(/"/g,'"')}">${i.title||'(untitled)'}</div>
<div class="v">${i.brand||''} ${i.country?'· '+i.country:''}</div>
<div class="price ${s}">$${(i.price||0).toFixed(2)}</div>
${DRILLABLE.has(st)?drillStatus(st,st+(i.issues&&i.issues.length?' · '+i.issues[0]:'')):`<span class="st ${st}">${st}${i.issues&&i.issues.length?' · '+i.issues[0]:''}</span>`}</div></div>`;
}).join('');
}
document.querySelectorAll('.chip[data-f]').forEach(c=>c.onclick=()=>{document.querySelectorAll('.chip[data-f]').forEach(x=>x.classList.remove('on'));c.classList.add('on');filter=c.dataset.f;writeURL(true);load();});
let qt; $('#q').oninput=e=>{clearTimeout(qt);q=e.target.value;qt=setTimeout(()=>{writeURL(false);load();},250);};
$('#refresh').onclick=async()=>{await fetch('/api/refresh');summary();};
// a card's status badge is an href-drill atom → filter the grid to that status + reflect into the URL
document.addEventListener('click',e=>{ const d=e.target.closest('a.drill[data-filter]'); if(!d)return; if(e.metaKey||e.ctrlKey||e.shiftKey||e.button===1)return; e.preventDefault();
filter=d.dataset.filter; q=''; const qe=$('#q'); if(qe)qe.value=''; document.querySelectorAll('.chip[data-f]').forEach(x=>x.classList.toggle('on',x.dataset.f===filter)); writeURL(true); load(); });
addEventListener('popstate',()=>{ readURL(); load(); }); // back/forward restores filter state
readURL(); summary(); load(); // land in the filter state carried by the URL
</script> <script src="/nav-agent/nav-agent.js" defer></script><!-- nav-agent -->
</body></html>