270 lines
15 KiB
HTML
270 lines
15 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>RecordGod — search & locate</title>
|
|
<script defer src="/nav.js?v=5"></script>
|
|
<style>
|
|
:root{--pink:#d10f7a;--hot:#ff2e93;--bg:#f4f5f7;--card:#ffffff;--ink:#1b1b22;--line:#e2e2ea;--mut:#5f5f6c;--ok:#1a8f54}
|
|
*{box-sizing:border-box}
|
|
html,body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 system-ui,sans-serif}
|
|
button{cursor:pointer;border:0;border-radius:8px;font:500 13px system-ui}
|
|
.ghost{background:#fff;color:#2a2a30;border:1px solid var(--line);padding:7px 10px}
|
|
.ghost:hover{background:#f3f3f6}.ghost:disabled{opacity:.4;cursor:default}
|
|
.ghost.on{background:#fdeef6;color:var(--pink);border-color:var(--pink)}
|
|
input,select{padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);font:15px system-ui}
|
|
input:focus,select:focus{outline:none;border-color:var(--pink)}
|
|
#gate{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--bg);z-index:50}
|
|
#gate .b{width:320px;text-align:center}#gate h1{color:var(--pink)}
|
|
#app{display:none;grid-template-columns:1.1fr 1.2fr;gap:16px;padding:16px;max-width:1340px;margin:0 auto}
|
|
.panel{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;box-shadow:0 1px 3px rgba(0,0,0,.05);margin-bottom:14px}
|
|
.bar{display:flex;gap:8px;align-items:center}
|
|
.res{display:flex;flex-direction:column;gap:6px;max-height:36vh;overflow:auto;margin-top:8px}
|
|
.ri{display:flex;gap:11px;align-items:center;padding:9px;border-radius:9px;cursor:pointer;border:1px solid transparent}
|
|
.ri:hover{background:#f5f5f8}.ri.sel{border-color:var(--pink);background:#fdeef6}
|
|
.ri img,.ri .ph{width:42px;height:42px;border-radius:6px;object-fit:cover;background:#ececf0;flex-shrink:0}
|
|
.ri .t{flex:1;min-width:0}.ri .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
|
|
.muted{color:var(--mut);font-size:12px}.pink{color:var(--pink)}.ok{color:var(--ok)}.oos{color:#c0392b}
|
|
.loc{display:inline-block;margin-top:2px;padding:1px 7px;border-radius:20px;background:#fdeef6;color:var(--pink);font-size:11px;font-weight:600}
|
|
.navhdr{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
|
|
.crumb{font-weight:600;flex:1}.crumb b{color:var(--pink)}
|
|
.lvl{display:flex;align-items:center;gap:6px}
|
|
#cv{width:100%;background:#fbfbfd;border:1px solid var(--line);border-radius:10px;display:block;cursor:pointer}
|
|
table{width:100%;border-collapse:collapse;font-size:13px}
|
|
td,th{padding:6px 5px;border-bottom:1px solid #eee;text-align:left}th{color:var(--mut);font-weight:500}
|
|
.legend{display:flex;gap:14px;margin-top:8px;font-size:11px;color:var(--mut);flex-wrap:wrap}
|
|
.sw{display:inline-block;width:11px;height:11px;border-radius:3px;vertical-align:-1px;margin-right:4px}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="gate"><div class="b"><h1>Record<b style="color:var(--pink)">God</b> · search</h1>
|
|
<div class="bar"><input id="tok" type="password" placeholder="admin token" style="flex:1"><button class="ghost" onclick="signin()">Enter</button></div>
|
|
<div id="gerr" class="muted"></div></div></div>
|
|
|
|
<div id="app">
|
|
<!-- LEFT: search + crate contents -->
|
|
<div>
|
|
<div class="panel">
|
|
<div class="bar">
|
|
<input id="q" placeholder="🔍 search title / artist / SKU — or scan" autocomplete="off" autofocus style="flex:1">
|
|
<button class="ghost" onclick="run()">Search</button>
|
|
</div>
|
|
<div class="muted" id="count" style="margin-top:6px">type to search — click a hit to locate it</div>
|
|
<div id="res" class="res"></div>
|
|
</div>
|
|
<div class="panel">
|
|
<div class="bar" style="justify-content:space-between">
|
|
<div><span id="ccName" class="muted">Crate contents</span> <span id="ccMeta" class="muted"></span></div>
|
|
</div>
|
|
<div id="ccList" style="max-height:34vh;overflow:auto;margin-top:8px"><div class="muted">pick a crate on the map →</div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- RIGHT: the Store → Rack navigator -->
|
|
<div class="panel">
|
|
<div class="navhdr">
|
|
<span class="crumb" id="crumb">Store map</span>
|
|
<select id="spaceSel" style="padding:6px 8px"></select>
|
|
<button class="ghost" id="backBtn" style="display:none" onclick="toStore()">◀ Store</button>
|
|
<span class="lvl" id="lvlCtl" style="display:none">
|
|
<button class="ghost" id="lvlPrev" onclick="stepLevel(-1)">◀</button>
|
|
<span id="lvlLabel" class="muted">Level</span>
|
|
<button class="ghost" id="lvlNext" onclick="stepLevel(1)">▶</button>
|
|
</span>
|
|
</div>
|
|
<canvas id="cv" width="560" height="560"></canvas>
|
|
<div class="legend" id="legend"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const $=s=>document.querySelector(s);
|
|
let TOKEN=localStorage.getItem('rg_token')||'';
|
|
const hdr=()=>({'Authorization':'Bearer '+TOKEN});
|
|
const get=u=>fetch(u,{headers:hdr()}).then(r=>r.json());
|
|
const money=n=>n==null?'—':'$'+Number(n).toFixed(2);
|
|
const esc=s=>(s||'').replace(/[&<>"]/g,c=>({'&':'&','<':'<','>':'>','"':'"'}[c]));
|
|
|
|
// ── facing convention (copied from WowPlatter production, see RECORDGOD_NAVIGATOR_PLAN §3) ──
|
|
const CELL=0.34;
|
|
function directionYaw(d){ d=(d||'').toLowerCase();
|
|
if(d==='back'||d==='south') return Math.PI;
|
|
if(d==='left'||d==='west') return Math.PI/2;
|
|
if(d==='right'||d==='east') return -Math.PI/2;
|
|
return 0; } // forward/front/north
|
|
const ARROW={forward:'↓',front:'↓',north:'↓',back:'↑',south:'↑',left:'←',west:'←',right:'→',east:'→'};
|
|
|
|
let ST={view:'store', space:null, racks:[], rack:null, level:1, crates:[], levels:[], selCrate:null, hit:[]};
|
|
|
|
async function signin(){
|
|
TOKEN=$('#tok').value.trim();
|
|
if(!(await fetch('/admin/stats',{headers:hdr()})).ok){ $('#gerr').textContent='invalid token'; return; }
|
|
localStorage.setItem('rg_token',TOKEN);
|
|
$('#gate').style.display='none'; $('#app').style.display='grid';
|
|
$('#q').focus(); await loadSpaces(); toStore();
|
|
}
|
|
|
|
async function loadSpaces(){
|
|
const d=await get('/nav/spaces');
|
|
$('#spaceSel').innerHTML=(d.spaces||[]).map(s=>`<option value="${s.id}">${esc(s.name||('Space '+s.id))}${s.is_default?' (default)':''}</option>`).join('');
|
|
$('#spaceSel').onchange=()=>toStore();
|
|
}
|
|
|
|
// ── STORE VIEW ──
|
|
async function toStore(){
|
|
ST.view='store'; ST.rack=null; ST.selCrate=null;
|
|
$('#backBtn').style.display='none'; $('#lvlCtl').style.display='none';
|
|
$('#crumb').textContent='Store map';
|
|
const sid=$('#spaceSel').value;
|
|
const d=await get('/nav/store-layout'+(sid?('?space_id='+sid):''));
|
|
ST.space=d.space; ST.racks=d.racks||[];
|
|
$('#legend').innerHTML='<span><i class="sw" style="background:#8bc34a"></i>rack — click to open</span>';
|
|
drawStore();
|
|
}
|
|
function drawStore(){
|
|
const cv=$('#cv'), g=cv.getContext('2d'), W=cv.width, H=cv.height;
|
|
g.clearRect(0,0,W,H); g.fillStyle='#fbfbfd'; g.fillRect(0,0,W,H);
|
|
ST.hit=[];
|
|
if(!ST.racks.length){ g.fillStyle='#888'; g.font='14px system-ui'; g.textAlign='center'; g.fillText('No racks in this space',W/2,H/2); return; }
|
|
// bounds over racks (pos ± half-dims) → fit
|
|
let minX=1e9,maxX=-1e9,minZ=1e9,maxZ=-1e9;
|
|
ST.racks.forEach(r=>{ const hw=(r.w||0.5)/2, hd=(r.d||0.5)/2;
|
|
minX=Math.min(minX,r.x-hw); maxX=Math.max(maxX,r.x+hw); minZ=Math.min(minZ,r.z-hd); maxZ=Math.max(maxZ,r.z+hd); });
|
|
const pad=34, sc=Math.min((W-2*pad)/((maxX-minX)||1),(H-2*pad)/((maxZ-minZ)||1));
|
|
const X=x=>pad+(x-minX)*sc, Y=z=>pad+(z-minZ)*sc;
|
|
ST.racks.forEach(r=>{
|
|
const yaw=directionYaw(r.direction)+(r.rot||0)*Math.PI/180;
|
|
const hw=(r.w||0.5)/2*sc, hd=(r.d||0.5)/2*sc, cx=X(r.x), cy=Y(r.z);
|
|
const cos=Math.cos(yaw), sin=Math.sin(yaw);
|
|
const corners=[[-hw,-hd],[hw,-hd],[hw,hd],[-hw,hd]].map(([px,pz])=>[cx+px*cos-pz*sin, cy+px*sin+pz*cos]);
|
|
g.beginPath(); g.moveTo(corners[0][0],corners[0][1]); corners.slice(1).forEach(c=>g.lineTo(c[0],c[1])); g.closePath();
|
|
g.fillStyle=r.items? '#8bc34a':'#cfe3b0'; g.fill(); g.strokeStyle='#558b2f'; g.lineWidth=1.5; g.stroke();
|
|
g.fillStyle='#1b1b22'; g.font='bold 10px system-ui'; g.textAlign='center'; g.textBaseline='middle';
|
|
const lbl=(r.name||('Rack '+r.id)); g.fillText(lbl.length>15?lbl.slice(0,14)+'…':lbl, cx, cy-(r.items?5:0));
|
|
if(r.items){ g.fillStyle='#3a3a3a'; g.font='9px system-ui'; g.fillText(r.items+' items', cx, cy+7); }
|
|
ST.hit.push({type:'rack', id:r.id, cx, cy, r:Math.max(hw,hd)+4});
|
|
});
|
|
}
|
|
|
|
// ── RACK VIEW ──
|
|
async function openRack(id, focusCrate){
|
|
const d=await get('/nav/rack/'+id);
|
|
ST.view='rack'; ST.rack=d.rack; ST.crates=d.crates||[]; ST.levels=d.levels||[];
|
|
// default to the level holding the most crates (or the focus crate's level)
|
|
const byLvl={}; ST.crates.forEach(c=>{ const l=c.level==null?1:c.level; byLvl[l]=(byLvl[l]||0)+1; });
|
|
ST.level = focusCrate!=null ? (ST.crates.find(c=>c.id===focusCrate)?.level ?? 1)
|
|
: (+Object.keys(byLvl).sort((a,b)=>byLvl[b]-byLvl[a])[0] || 1);
|
|
ST.selCrate=focusCrate||null;
|
|
$('#backBtn').style.display='';
|
|
$('#crumb').innerHTML='Store / <b>'+esc(ST.rack.name||('Rack '+ST.rack.id))+'</b>';
|
|
drawRack();
|
|
}
|
|
function levelMeta(){
|
|
const lv=ST.rack.levels||1;
|
|
const cur=ST.level, label=lv>1?`Level ${cur} of ${lv}${cur===1?' (BOTTOM)':(cur===lv?' (TOP)':'')}`:'Single level';
|
|
return {lv, label};
|
|
}
|
|
function drawRack(){
|
|
const {lv,label}=levelMeta();
|
|
$('#lvlCtl').style.display = lv>1?'inline-flex':'none';
|
|
$('#lvlLabel').textContent=label; $('#lvlPrev').disabled=ST.level<=1; $('#lvlNext').disabled=ST.level>=lv;
|
|
$('#legend').innerHTML='<span><i class="sw" style="background:#9ecbff"></i>crate</span><span>↑↓←→ = crate facing · BACK/FRONT = rack frame · green=items</span>';
|
|
const cv=$('#cv'), g=cv.getContext('2d'), W=cv.width, H=cv.height;
|
|
g.clearRect(0,0,W,H); g.fillStyle='#fbfbfd'; g.fillRect(0,0,W,H);
|
|
ST.hit=[];
|
|
const rw=ST.rack.w||1.7, rd=ST.rack.d||0.7;
|
|
const cols=Math.max(1,Math.floor(rw/CELL)), rows=Math.max(1,Math.round(rd/CELL));
|
|
const pad=42, sc=0.92*Math.min((W-2*pad)/rw,(H-2*pad)/rd);
|
|
const cW=rw*sc, cH=rd*sc, oX=(W-cW)/2, oY=(H-cH)/2, cellW=cW/cols, cellH=cH/rows;
|
|
// boundary
|
|
g.fillStyle='#fff'; g.strokeStyle='#222'; g.lineWidth=3; g.beginPath(); g.rect(oX,oY,cW,cH); g.fill(); g.stroke();
|
|
// edge labels (viewRot 0: BACK top, FRONT bottom, L left, R right)
|
|
g.fillStyle='#888'; g.font='11px system-ui'; g.textAlign='center';
|
|
g.fillText('BACK',oX+cW/2,oY-8); g.fillText('FRONT',oX+cW/2,oY+cH+16);
|
|
g.save(); g.translate(oX-10,oY+cH/2); g.rotate(-Math.PI/2); g.fillText('L',0,0); g.restore();
|
|
g.save(); g.translate(oX+cW+12,oY+cH/2); g.rotate(Math.PI/2); g.fillText('R',0,0); g.restore();
|
|
// grid
|
|
g.strokeStyle='#eee'; g.lineWidth=1;
|
|
for(let i=1;i<cols;i++){ g.beginPath(); g.moveTo(oX+i*cellW,oY); g.lineTo(oX+i*cellW,oY+cH); g.stroke(); }
|
|
for(let i=1;i<rows;i++){ g.beginPath(); g.moveTo(oX,oY+i*cellH); g.lineTo(oX+cW,oY+i*cellH); g.stroke(); }
|
|
// crates on the current level (fall back: crates with null level show on level 1)
|
|
const here=ST.crates.filter(c=>(c.level==null?1:c.level)===ST.level);
|
|
let autoSlot=0;
|
|
here.forEach(c=>{
|
|
let slot=c.slot; if(!slot||slot<1){ autoSlot++; slot=autoSlot; } // ponytail: place slotless crates sequentially
|
|
const idx=slot-1, col=idx%cols, row=Math.floor(idx/cols);
|
|
if(row>=rows) return;
|
|
const x=oX+col*cellW+3, y=oY+row*cellH+3, w=cellW-6, h=cellH-6;
|
|
const sel=ST.selCrate===c.id;
|
|
g.fillStyle=sel?'rgba(255,46,147,.30)':'rgba(30,144,255,.16)';
|
|
g.strokeStyle=sel?'#d10f7a':'#1e90ff'; g.lineWidth=sel?3:1.5;
|
|
g.beginPath(); g.rect(x,y,w,h); g.fill(); g.stroke();
|
|
g.fillStyle='#1b1b22'; g.font='bold 10px system-ui'; g.textAlign='center'; g.textBaseline='top';
|
|
g.fillText('#'+c.id, x+w/2, y+4);
|
|
const gl=(c.label_text||c.crate_purpose||'').toString().split(',')[0].slice(0,12);
|
|
g.fillStyle='#555'; g.font='9px system-ui'; g.fillText(gl||'—', x+w/2, y+16);
|
|
// facing arrow (big, centre-bottom)
|
|
g.fillStyle=sel?'#d10f7a':'#1e90ff'; g.font='bold 20px system-ui'; g.textBaseline='middle';
|
|
g.fillText(ARROW[(c.direction||'').toLowerCase()]||'•', x+w/2, y+h-13);
|
|
// slot number top-right, item count bottom-left
|
|
g.fillStyle='#1a8f54'; g.font='9px system-ui'; g.textAlign='right'; g.textBaseline='top';
|
|
g.fillText(slot, x+w-3, y+3);
|
|
g.fillStyle='#888'; g.textAlign='left'; g.fillText((c.items||0), x+3, y+h-12);
|
|
ST.hit.push({type:'crate', id:c.id, x, y, w, h});
|
|
});
|
|
}
|
|
function stepLevel(d){ ST.level=Math.max(1,Math.min(ST.rack.levels||1, ST.level+d)); drawRack(); }
|
|
|
|
// ── crate contents ──
|
|
async function loadCrate(id){
|
|
ST.selCrate=id; if(ST.view==='rack') drawRack();
|
|
const d=await get('/nav/crate/'+id); const c=d.crate;
|
|
$('#ccName').innerHTML='📦 '+esc(c.label_text||c.name||('Crate '+c.id));
|
|
$('#ccName').className='pink';
|
|
$('#ccMeta').textContent=`· ${c.rack_name||''} L${c.level??'?'} slot ${c.slot??'?'} · ${d.items.length} items`;
|
|
$('#ccList').innerHTML=d.items.length? '<table><thead><tr><th>Slot</th><th>Title</th><th>Artist</th><th>Price</th></tr></thead><tbody>'+
|
|
d.items.map(i=>`<tr><td>${i.slot??'—'}</td><td>${esc(i.title||i.sku)}${i.in_stock?'':' <span class="oos">sold</span>'}</td><td class="muted">${esc(i.artist||'')}</td><td class="pink">${money(i.price)}</td></tr>`).join('')+'</tbody></table>'
|
|
: '<div class="muted">empty crate</div>';
|
|
}
|
|
|
|
// ── canvas clicks ──
|
|
$('#cv').addEventListener('click',e=>{
|
|
const r=$('#cv').getBoundingClientRect(), sx=$('#cv').width/r.width, sy=$('#cv').height/r.height;
|
|
const mx=(e.clientX-r.left)*sx, my=(e.clientY-r.top)*sy;
|
|
if(ST.view==='store'){
|
|
let best=null,bd=1e9; for(const h of ST.hit){ const dd=Math.hypot(mx-h.cx,my-h.cy); if(dd<h.r&&dd<bd){bd=dd;best=h;} }
|
|
if(best) openRack(best.id);
|
|
} else {
|
|
for(const h of ST.hit){ if(mx>=h.x&&mx<=h.x+h.w&&my>=h.y&&my<=h.y+h.h){ loadCrate(h.id); return; } }
|
|
}
|
|
});
|
|
|
|
// ── search → locate ──
|
|
let st;
|
|
$('#q').addEventListener('input',e=>{ clearTimeout(st); st=setTimeout(run,200); });
|
|
$('#q').addEventListener('keydown',e=>{ if(e.key==='Enter'){clearTimeout(st);run();} });
|
|
async function run(){
|
|
const q=$('#q').value.trim();
|
|
if(!q){ $('#res').innerHTML=''; $('#count').textContent='type to search — click a hit to locate it'; return; }
|
|
const d=await get('/admin/inventory?q='+encodeURIComponent(q));
|
|
$('#count').textContent=`${d.total} match${d.total===1?'':'es'} — click to locate`;
|
|
$('#res').innerHTML=(d.items||[]).map(it=>`<div class="ri" onclick='locate(${it.crate_id||'null'})'>
|
|
${it.thumb?`<img src="${it.thumb}">`:'<span class=ph></span>'}
|
|
<div class="t"><div class="nm">${esc(it.title||it.sku)}</div>
|
|
<div class="muted">${esc(it.artist||'')} ${it.condition?'· '+esc(it.condition):''} · <b class="${it.in_stock?'pink':'oos'}">${money(it.price)}</b></div>
|
|
${it.crate?`<span class="loc">📍 ${esc(it.crate)}</span>`:'<span class="muted">· no bin</span>'}</div></div>`).join('')
|
|
|| '<div class="muted" style="padding:8px">no match anywhere in the store</div>';
|
|
}
|
|
async function locate(crateId){
|
|
if(!crateId){ alert('That item has no bin assigned yet.'); return; }
|
|
const d=await get('/nav/crate/'+crateId); const c=d.crate;
|
|
if(c.rack_id){ await openRack(c.rack_id, crateId); }
|
|
loadCrate(crateId);
|
|
}
|
|
|
|
if(TOKEN){ $('#tok').value=TOKEN; signin(); }
|
|
</script>
|
|
</body>
|
|
</html>
|