`public/index.html`

256 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>RIGO → Phillipe Romano Vinyls (internal)</title>
<style>
:root { --cols: 5; --bg:#101214; --card:#181b1e; --line:#2a2e33; --fg:#e8e6e1; --dim:#9aa0a6; --teal:#2dd4bf; }
* { box-sizing:border-box; margin:0; }
body { background:var(--bg); color:var(--fg); font:14px/1.45 -apple-system,'IBM Plex Sans',sans-serif; }
header { display:flex; gap:14px; align-items:center; padding:12px 18px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--bg); z-index:5; flex-wrap:wrap; }
header h1 { font-size:15px; font-weight:600; letter-spacing:.04em; }
header .pill { font-size:11px; color:var(--dim); border:1px solid var(--line); border-radius:999px; padding:2px 10px; }
main { display:grid; grid-template-columns: 250px 1fr; }
aside { border-right:1px solid var(--line); padding:14px; height:calc(100vh - 55px); overflow:auto; position:sticky; top:55px; }
aside input[type=search] { width:100%; background:var(--card); color:var(--fg); border:1px solid var(--line); border-radius:6px; padding:7px 10px; margin-bottom:12px; }
.facet h3 { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--dim); margin:10px 0 4px; cursor:pointer; user-select:none; }
.facet h3::before { content:'▸ '; } .facet.open h3::before { content:'▾ '; }
.facet table { width:100%; border-collapse:collapse; display:none; }
.facet.open table { display:table; }
.facet td { padding:2px 4px; font-size:12px; cursor:pointer; border-bottom:1px solid var(--line); }
.facet td.n { text-align:right; color:var(--dim); width:36px; }
.facet tr.on td { color:var(--teal); }
.controls { display:flex; gap:10px; align-items:center; }
select { background:var(--card); color:var(--fg); border:1px solid var(--line); border-radius:6px; padding:5px 8px; }
#grid { display:grid; grid-template-columns:repeat(var(--cols),1fr); gap:10px; padding:14px; align-content:start; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; overflow:hidden; cursor:pointer; }
.card img { width:100%; aspect-ratio:1; object-fit:cover; display:block; background:#000; }
.card .meta { padding:8px 10px; font-size:calc(10px + (6 - var(--cols)) * 1px); }
.card .pr { font-weight:600; }
.card .internal { color:var(--dim); }
.card .when { color:var(--dim); font-size:.85em; margin-top:3px; }
body.imgonly .meta { display:none; }
.count { color:var(--dim); font-size:12px; }
label.tog { font-size:12px; color:var(--dim); display:flex; gap:5px; align-items:center; cursor:pointer; }
/* ── drill atom: every data point is an href to its filtered view (deeper data) ── */
.drill { color:inherit; text-decoration:none; cursor:pointer; border-bottom:1px dotted transparent; }
.drill:hover { color:var(--teal); border-bottom-color:var(--teal); }

/* ── Grid / List toggle ── */
.vtoggle { display:flex; border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.vtoggle button { background:var(--card); color:var(--dim); border:none; padding:5px 11px; font:12px/1 inherit; cursor:pointer; letter-spacing:.04em; }
.vtoggle button.on { background:var(--teal); color:#0a1412; font-weight:700; }

/* ── List view ── */
#grid.list { display:block; }
#grid.list .card { display:flex; flex-direction:row; align-items:stretch; margin-bottom:6px; border-radius:6px; }
#grid.list .card img { width:64px; min-width:64px; height:64px; aspect-ratio:auto; object-fit:cover; }
#grid.list .card > div[style*="aspect-ratio"] { width:64px; min-width:64px; height:64px; aspect-ratio:auto; }
#grid.list .card .meta { flex:1; padding:6px 10px; font-size:12px; display:flex; flex-direction:column; justify-content:center; gap:2px; }

/* ── Fields menu ── */
.fieldmenu { position:relative; }
.fbtn { background:var(--card); color:var(--dim); border:1px solid var(--line); border-radius:6px; padding:5px 11px; font:12px/1 inherit; cursor:pointer; }
.fbtn:hover { border-color:var(--teal); color:var(--fg); }
.fpop { position:absolute; top:calc(100% + 6px); right:0; background:var(--card); border:1px solid var(--line); border-radius:8px; box-shadow:0 10px 28px #0006; padding:8px 4px; z-index:30; min-width:168px; }
.fpop[hidden] { display:none; }
.fpop label { display:flex; align-items:center; gap:8px; padding:5px 12px; font-size:12px; color:var(--dim); cursor:pointer; white-space:nowrap; }
.fpop label:hover { color:var(--fg); }
.fpop input { accent-color:var(--teal); }

/* ── Field-hide rules (grid mode only; list shows all) ── */
#grid:not(.list).hf-pr    .card .pr    { display:none; }
#grid:not(.list).hf-internal .card .internal { display:none; }
#grid:not(.list).hf-when  .card .when  { display:none; }
</style>
  <link rel="stylesheet" href="/nav-agent/nav-agent.css"><!-- nav-agent -->
</head>
<body>
<header>
  <h1>RIGO → Phillipe Romano Vinyls</h1>
  <span class="pill">INTERNAL — real vendor names visible</span>
  <span class="count" id="count"></span>
  <div class="controls" style="margin-left:auto">
    <select id="sort">
      <option value="newest">Newest</option>
      <option value="pattern">Pattern A→Z</option>
      <option value="pr">PR Name A→Z</option>
      <option value="sku">SKU A→Z</option>
      <option value="color">Color</option>
      <option value="collection">Collection A→Z</option>
      <option value="weight">Weight</option>
      <option value="backing">Backing A→Z</option>
      <option value="status">Status A→Z</option>
    </select>
    <input type="range" id="density" min="2" max="10" value="5" title="Density">
    <div class="vtoggle" id="viewToggle">
      <button id="vGrid" class="on" onclick="setView('grid')">▦ Grid</button>
      <button id="vList" onclick="setView('list')">☰ List</button>
    </div>
    <div class="fieldmenu">
      <button class="fbtn" id="fieldsBtn" onclick="toggleFieldsMenu(event)">Fields ▾</button>
      <div class="fpop" id="fpop" hidden>
        <label><input type="checkbox" data-rf="pr" checked> PR Name / Color</label>
        <label><input type="checkbox" data-rf="internal" checked> Internal / SKU</label>
        <label><input type="checkbox" data-rf="when" checked> Date</label>
      </div>
    </div>
    <label class="tog"><input type="checkbox" id="imgonly"> texture wall</label>
  </div>
</header>
<main>
  <aside>
    <input type="search" id="q" placeholder="Search pattern / color / SKU…">
    <div id="facets"></div>
  </aside>
  <div id="grid"></div>
</main>
<!-- href-to-deeper-data primitives (qstr / readURL / writeURL / drill / setF) — shared single source of truth -->
<input type="hidden" id="pattern">
<script src="/drill.js"></script>
<script>
let ALL = [], filters = {};
const FACET_FIELDS = [
  ['collection','RIGO Collection'], ['pr_collection_name','PR Collection'],
  ['weight_type','Weight'], ['backing','Backing'], ['match_type','Match'],
  ['color_name','Color'], ['status','Status'],
];
const $ = (s) => document.querySelector(s);
// ── Adapter: drill.js reads globals named FIELDS/FIL/esc/applyFilters; this viewer's real
//    names are FACET_FIELDS/filters/render. Alias them so the shared primitives resolve. ──
const FIELDS = FACET_FIELDS;      // [field, label] pairs — same shape drill.js expects
const FIL = filters;              // SAME object reference — writes via drill/setF hit filters
const esc = (s) => String(s==null?'':s).replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
function applyFilters(nav) { buildSelected(); render(); if (nav !== 'none') writeURL(nav === 'push'); }
const fmtDate = (d) => d ? new Date(d).toLocaleString(undefined,{year:'numeric',month:'short',day:'numeric',hour:'numeric',minute:'2-digit'}) : '';

async function boot() {
  const r = await fetch(location.origin + '/api/products');
  const j = await r.json();
  ALL = j.products;
  $('#count').textContent = j.count + ' SKUs · loaded ' + fmtDate(j.loadedAt);
  readURL();          // deep-link: seed FIL (=filters) + #q from the URL before first render
  buildFacets(); render();
}
function buildFacets() {
  const box = $('#facets'); box.innerHTML = '';
  for (const [field, label] of FACET_FIELDS) {
    const counts = {};
    for (const p of ALL) { const v = p[field] || '(none)'; counts[v] = (counts[v]||0)+1; }
    const div = document.createElement('div'); div.className = 'facet';
    div.innerHTML = `<h3>${esc(label)}</h3><table>` +
      Object.entries(counts).sort((a,b)=>b[1]-a[1]).map(([v,n]) => {
        // facet option = a REAL href to its filtered view (toggles this value on/off)
        const href = qstr({ ...FIL, [field]: (FIL[field]===String(v) ? '' : String(v)) }, $('#q').value.trim(), '');
        return `<tr data-f="${esc(field)}" data-v="${esc(v)}"><td><a class="drill" href="${href}" data-f="${esc(field)}" data-v="${esc(v)}">${esc(v)}</a></td><td class="n">${n}</td></tr>`;
      }).join('') + '</table>';
    div.querySelector('h3').onclick = () => div.classList.toggle('open');
    div.querySelectorAll('tr').forEach(tr => tr.onclick = (e) => {
      if (e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1) return; // let real href open new tab
      e.preventDefault();
      const f = tr.dataset.f, v = tr.dataset.v;
      if (filters[f] === v) delete filters[f]; else filters[f] = v;
      applyFilters('push');
    });
    box.appendChild(div);
  }
  buildSelected();
}
function buildSelected() {
  document.querySelectorAll('.facet tr').forEach(tr =>
    tr.classList.toggle('on', filters[tr.dataset.f] === tr.dataset.v));
}
function render() {
  const q = $('#q').value.toLowerCase();
  // empty-string filter values (set by drill.js when a filter is toggled off) count as inactive
  let rows = ALL.filter(p => Object.entries(filters).every(([f,v]) => !v || (p[f]||'(none)') === v));
  if (q) rows = rows.filter(p => [p.pattern_name,p.pr_pattern_name,p.color_name,p.mfr_sku,p.dw_sku].join(' ').toLowerCase().includes(q));
  const s = $('#sort').value;
  rows.sort((a,b) =>
    s==='newest' ? (b.created_at||'').localeCompare(a.created_at||'') :
    s==='pattern' ? (a.pattern_name||'').localeCompare(b.pattern_name||'') :
    s==='pr' ? (a.pr_pattern_name||'').localeCompare(b.pr_pattern_name||'') :
    s==='sku' ? (a.mfr_sku||'').localeCompare(b.mfr_sku||'') :
    s==='collection' ? (a.collection||'').localeCompare(b.collection||'') :
    s==='weight' ? (a.weight_type||'').localeCompare(b.weight_type||'') :
    s==='backing' ? (a.backing||'').localeCompare(b.backing||'') :
    s==='status' ? (a.status||'').localeCompare(b.status||'') :
    (a.color_name||'').localeCompare(b.color_name||''));
  $('#grid').innerHTML = rows.map(p => `
    <div class="card" title="${esc(p.mfr_sku)} · created ${p.created_at||''}">
      ${p.img ? `<img loading="lazy" src="${esc(p.img)}" onclick="window.open('${esc(p.product_url)}','_blank')" style="cursor:pointer">` : '<div style="aspect-ratio:1;background:#222"></div>'}
      <div class="meta">
        <div class="pr">${p.pr_pattern_name ? esc(p.pr_pattern_name) : '<i>unnamed</i>'} · ${drill('color_name',p.color_name,p.color_name)}</div>
        <div class="internal">${esc(p.pattern_name)} · ${esc(p.mfr_sku)} · ${drill('collection',p.collection,p.collection)}</div>
        <div class="internal">${p.dw_sku?esc(p.dw_sku):'no DW SKU'} · ${drill('pr_collection_name',p.pr_collection_name,p.pr_collection_name)} · ${drill('weight_type',p.weight_type,p.weight_type)}</div>
        <div class="internal">${drill('backing',p.backing,p.backing)}${p.match_type?' · '+drill('match_type',p.match_type,p.match_type):''}${p.status?' · '+drill('status',p.status,p.status):''}</div>
        <div class="when">🕓 ${fmtDate(p.created_at)}</div>
      </div>
    </div>`).join('');
  $('#count').textContent = rows.length + ' / ' + ALL.length + ' SKUs';
}
// ── delegated drill: plain click on a card atom filters in place; cmd/ctrl/shift/middle keeps the real href ──
$('#grid').addEventListener('click', (e) => {
  const d = e.target.closest('a.drill'); if (!d) return;
  if (e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1) return; // real href → new tab
  e.preventDefault();
  setF(d.dataset.filter, d.dataset.v); // setF (drill.js) sets FIL[k]=v then calls applyFilters('push')
});
let qt;
$('#q').oninput = () => { clearTimeout(qt); qt = setTimeout(() => applyFilters('push'), 300); };
$('#sort').onchange = () => { render(); localStorage.setItem('rigo.sort', $('#sort').value); };
$('#density').oninput = (e) => { document.documentElement.style.setProperty('--cols', e.target.value); localStorage.setItem('rigo.cols', e.target.value); };
$('#imgonly').onchange = (e) => document.body.classList.toggle('imgonly', e.target.checked);
if (localStorage.getItem('rigo.cols')) { $('#density').value = localStorage.getItem('rigo.cols'); document.documentElement.style.setProperty('--cols', $('#density').value); }
if (localStorage.getItem('rigo.sort')) $('#sort').value = localStorage.getItem('rigo.sort');

// ── Grid / List view toggle ──
const RIGO_FIELDS_DEFAULTS = { pr: true, internal: true, when: true };
function setView(v) {
  const g = $('#grid');
  g.classList.toggle('list', v === 'list');
  $('#vGrid').classList.toggle('on', v !== 'list');
  $('#vList').classList.toggle('on', v === 'list');
  localStorage.setItem('rigo.view', v);
}
(function initView() {
  const v = localStorage.getItem('rigo.view') || 'grid';
  setView(v);
})();

// ── Fields menu ──
function getFieldPrefs() {
  try { return Object.assign({}, RIGO_FIELDS_DEFAULTS, JSON.parse(localStorage.getItem('rigo.fields') || '{}')); }
  catch(e) { return Object.assign({}, RIGO_FIELDS_DEFAULTS); }
}
function applyFieldPrefs(prefs) {
  const g = $('#grid');
  for (const [k, on] of Object.entries(prefs)) {
    g.classList.toggle('hf-' + k, !on);
  }
  document.querySelectorAll('#fpop [data-rf]').forEach(cb => {
    cb.checked = !!prefs[cb.dataset.rf];
  });
}
function toggleFieldsMenu(e) {
  e.stopPropagation();
  const pop = $('#fpop');
  pop.hidden = !pop.hidden;
}
document.addEventListener('click', () => { const p = $('#fpop'); if (p) p.hidden = true; });
document.querySelectorAll('#fpop [data-rf]').forEach(cb => {
  cb.addEventListener('change', () => {
    const prefs = getFieldPrefs();
    prefs[cb.dataset.rf] = cb.checked;
    localStorage.setItem('rigo.fields', JSON.stringify(prefs));
    applyFieldPrefs(prefs);
  });
});
applyFieldPrefs(getFieldPrefs());
addEventListener('popstate', () => { readURL(); buildSelected(); render(); }); // back/forward → re-read URL
boot();
</script>
  <script src="/nav-agent/nav-agent.js" defer></script><!-- nav-agent -->
</body>
</html>