CRCP listings: stage price/units/year filters behind a Go button (apply on click or Enter, not per-keystroke)

6a61f29033f119cc6e246a9f41336387822d07e2 · 2026-08-17 16:18:14 -0700 · steve
Files touched

M public/mls.html
Diff

commit 6a61f29033f119cc6e246a9f41336387822d07e2
Author: steve <steve@designerwallcoverings.com>
Date:   Mon Aug 17 16:18:14 2026 -0700

    CRCP listings: stage price/units/year filters behind a Go button (apply on click or Enter, not per-keystroke)
---
 public/mls.html | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/public/mls.html b/public/mls.html
index 3b60f83..824a2ac 100644
--- a/public/mls.html
+++ b/public/mls.html
@@ -86,6 +86,7 @@
   .ftog.fdragging{opacity:.45;}
   .ftog.fdropT{box-shadow:inset 0 3px 0 var(--acc);} .ftog.fdropB{box-shadow:inset 0 -3px 0 var(--acc);}
   .minibtn{background:var(--card);color:var(--mut);border:1px solid var(--line);border-radius:7px;padding:4px 9px;font-size:11px;cursor:pointer;margin-right:5px;} .minibtn:hover{border-color:var(--blue);color:var(--ink);}
+  .gobtn{background:var(--acc);color:#04110a;border:none;border-radius:7px;padding:7px 18px;font-size:12px;font-weight:700;cursor:pointer;letter-spacing:.3px;} .gobtn:hover{filter:brightness(1.08);} .gobtn:active{transform:translateY(1px);}
   .wrap{flex:1 1 auto;min-width:0;}
   @media(max-width:820px){ .rail{display:none;} }
   .rail .rsec > h4 { cursor:pointer; display:flex; align-items:center; justify-content:space-between; user-select:none; }
@@ -144,7 +145,9 @@
   <div class="rsec"><h4>Brokerage <span style="font-size:10px;font-weight:400;color:var(--mut)">(listing broker)</span></h4><div class="chips" id="fFirm"></div></div>
   <div class="rsec"><h4>Price</h4><div class="row2"><div class="fld"><label>Min $</label><input type="number" id="pMin" placeholder="any" step="50000"></div><div class="fld"><label>Max $</label><input type="number" id="pMax" placeholder="any" step="50000"></div></div></div>
   <div class="rsec"><h4>Units / size</h4><div class="row2"><div class="fld"><label>Min units</label><input type="number" id="uMin" placeholder="any" min="0" step="1"></div><div class="fld"><label>Max units</label><input type="number" id="uMax" placeholder="any" min="0" step="1"></div></div>
-    <div class="row2" style="margin-top:8px"><div class="fld"><label>Built after</label><input type="number" id="yMin" placeholder="any" min="1900" max="2026" step="1"></div><div class="fld"><label>Built before</label><input type="number" id="yMax" placeholder="any" min="1900" max="2026" step="1"></div></div></div>
+    <div class="row2" style="margin-top:8px"><div class="fld"><label>Built after</label><input type="number" id="yMin" placeholder="any" min="1900" max="2026" step="1"></div><div class="fld"><label>Built before</label><input type="number" id="yMax" placeholder="any" min="1900" max="2026" step="1"></div></div>
+    <div style="display:flex;gap:8px;align-items:center;margin-top:10px"><button class="gobtn" id="applyBtn" title="Apply the price / units / year values (or press Enter)">▶ Go</button><button class="minibtn" id="clearNum" title="Clear price / units / year">Clear</button><span id="stagedFlag" style="font-size:10px;color:var(--warn);display:none">● unapplied</span></div>
+    <div style="font-size:10px;color:var(--mut);margin-top:6px">Set price / units / year, then hit <b>Go</b> (or press Enter).</div></div>
 </aside>
 <div class="wrap">
   <div class="statsbar" id="statsbar"></div>
@@ -577,12 +580,18 @@ $('#fStatus').addEventListener('click',e=>{const c=e.target.closest('.chip');if(
 $('#fCity').addEventListener('click',e=>{const c=e.target.closest('.chip');if(!c)return;tog(F.cities,c.dataset.cy);c.classList.toggle('active');render();});
 $('#fSource').addEventListener('click',e=>{const c=e.target.closest('.chip');if(!c)return;tog(F.source,c.dataset.so);c.classList.toggle('active');render();});
 $('#fFirm').addEventListener('click',e=>{const c=e.target.closest('.chip');if(!c)return;tog(F.firms,c.dataset.fm);c.classList.toggle('active');render();});
-$('#pMin').addEventListener('input',()=>{F.pmin=$('#pMin').value?+$('#pMin').value:null;render();});
-$('#pMax').addEventListener('input',()=>{F.pmax=$('#pMax').value?+$('#pMax').value:null;render();});
-$('#uMin').addEventListener('input',()=>{F.umin=$('#uMin').value?+$('#uMin').value:null;render();});
-$('#uMax').addEventListener('input',()=>{F.umax=$('#uMax').value?+$('#uMax').value:null;render();});
-$('#yMin').addEventListener('input',()=>{F.ymin=$('#yMin').value?+$('#yMin').value:null;render();});
-$('#yMax').addEventListener('input',()=>{F.ymax=$('#yMax').value?+$('#yMax').value:null;render();});
+// ── numeric range filters are STAGED — type the values, then hit Go (or press Enter) to apply ──
+const STAGE={pmin:null,pmax:null,umin:null,umax:null,ymin:null,ymax:null};
+const NUMFIELDS=[['pMin','pmin'],['pMax','pmax'],['uMin','umin'],['uMax','umax'],['yMin','ymin'],['yMax','ymax']];
+function stageDirty(){ return NUMFIELDS.some(([,k])=>STAGE[k]!==F[k]); }
+function markStaged(){ const f=$('#stagedFlag'); if(f) f.style.display=stageDirty()?'inline':'none'; }
+function applyStaged(){ NUMFIELDS.forEach(([,k])=>{ F[k]=STAGE[k]; }); markStaged(); render(); }
+NUMFIELDS.forEach(([id,k])=>{ const el=$('#'+id); if(!el) return;
+  el.addEventListener('input',()=>{ STAGE[k]=el.value?+el.value:null; markStaged(); });
+  el.addEventListener('keydown',e=>{ if(e.key==='Enter'){ e.preventDefault(); applyStaged(); } });
+});
+if($('#applyBtn')) $('#applyBtn').addEventListener('click',applyStaged);
+if($('#clearNum')) $('#clearNum').addEventListener('click',()=>{ NUMFIELDS.forEach(([id,k])=>{ const el=$('#'+id); if(el) el.value=''; STAGE[k]=null; F[k]=null; }); markStaged(); render(); });
 // (#fFields change is handled inside column-manager.js now — its onChange calls render)
 // ── panel drag-to-reorder columns (Steve rule: resort order here in the panel too) ──
 let pDragKey=null;
← b36a4de CRCP listings + just-listed: add Max units (and Units/size m · back to Commercialrealestate · CRCP listings: fix invisible Fields/columns panel text — rem d542e17 →