← back to Nationalrealestate
public/commercial-feed.html
214 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' rx='3' fill='%230a0d13'/%3E%3Ctext x='8' y='12' font-size='10' text-anchor='middle' fill='%23c8a24b'%3ECR%3C/text%3E%3C/svg%3E">
<title>USRealEstate — LA Commercial Feed</title>
<style>
:root{--bg:#0a0d13;--panel:#11151d;--line:#222936;--fg:#e8ecf2;--muted:#8a93a3;--gold:#c8a24b;}
*{box-sizing:border-box;}
html,body{margin:0;background:var(--bg);color:var(--fg);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;}
#topbar{display:flex;align-items:center;gap:14px;padding:10px 18px;background:rgba(17,21,29,.94);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;backdrop-filter:blur(6px);}
.brand{font-size:16px;font-weight:700;white-space:nowrap;} .brand b{color:var(--gold);}
nav{display:flex;gap:14px;font-size:13px;} nav a{color:var(--muted);text-decoration:none;} nav a:hover,nav a.active{color:var(--gold);}
main{padding:16px 18px 60px;max-width:960px;margin:0 auto;}
.lede{color:var(--muted);font-size:13px;line-height:1.5;margin:6px 0 16px;}
#controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px;}
#seg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:8px;overflow:hidden;}
#seg button{background:var(--panel);color:var(--muted);border:0;border-right:1px solid var(--line);padding:7px 11px;font-size:12px;cursor:pointer;}
#seg button:last-child{border-right:0;} #seg button.active{background:var(--gold);color:var(--bg);font-weight:700;}
select{background:var(--panel);color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-size:13px;}
.item{display:flex;gap:14px;padding:14px 12px;border-bottom:1px solid var(--line);}
.item .date{min-width:92px;font-size:12px;color:var(--gold);font-weight:600;padding-top:2px;}
.item .body{flex:1;}
.item .hl{font-size:15px;font-weight:600;line-height:1.3;}
.item .meta{font-size:12px;color:var(--muted);margin-top:4px;display:flex;flex-wrap:wrap;gap:10px;}
.item .brief{font-size:13px;color:#c3ccd8;margin-top:6px;line-height:1.4;font-style:italic;}
.tag{font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--gold);border:1px solid var(--line);border-radius:5px;padding:1px 6px;}
.val{color:var(--fg);font-weight:600;}
/* featured stories */
#featured{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;margin:4px 0 24px;}
.story{background:linear-gradient(160deg,#141a24,#0d1119);border:1px solid var(--line);border-radius:10px;padding:14px;}
.story .h{font-size:14px;font-weight:700;line-height:1.3;} .story .h b{color:var(--gold);}
.story .b{font-size:13px;color:#c3ccd8;margin-top:7px;line-height:1.45;}
.story .f{font-size:11px;color:var(--muted);margin-top:8px;}
#loading{padding:40px;text-align:center;color:var(--muted);}
/* view segment toggle */
.cg-seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;}
.cg-seg button{background:var(--panel);color:var(--muted);border:0;border-right:1px solid var(--line);padding:7px 9px;font:12px inherit;cursor:pointer;}
.cg-seg button:last-child{border-right:0;}
.cg-seg button.active{background:var(--gold);color:var(--bg);font-weight:700;}
/* GRID view: cards */
#feed.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;}
#feed.grid .item{flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:10px;background:linear-gradient(160deg,#141a24,#0d1119);}
#feed.grid .item .date{min-width:0;}
/* TABLE view: dense all-columns spreadsheet with click-to-sort headers */
#feed.table{display:block;}
table.feedtbl{border-collapse:collapse;width:100%;font-size:13px;font-variant-numeric:tabular-nums;}
table.feedtbl thead th{position:sticky;top:57px;z-index:5;background:#0d1119;border-bottom:1px solid var(--line);color:var(--muted);
text-align:left;padding:7px 10px;font-weight:600;white-space:nowrap;cursor:pointer;}
table.feedtbl thead th:hover{color:var(--gold);} table.feedtbl thead th.sorted{color:var(--gold);}
table.feedtbl thead th.num{text-align:right;}
table.feedtbl tbody td{border-bottom:1px solid var(--line);padding:6px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px;}
table.feedtbl tbody td.num{text-align:right;}
table.feedtbl tbody tr{cursor:pointer;} table.feedtbl tbody tr:hover{background:#141a24;}
</style>
<link rel="stylesheet" href="/nav-drawer.css">
<link rel="stylesheet" href="/geo-search.css">
</head>
<body>
<div id="topbar">
<div class="brand"><b>USRealEstate</b> — LA Commercial Feed</div>
<nav>
<a href="/">Map</a><a href="/markets.html">Markets</a>
<a href="/commercial.html">Commercial</a>
<a href="/commercial-feed.html" class="active">Feed</a>
<a href="/commercial-brokers.html">Brokers</a>
</nav>
</div>
<main>
<p class="lede">Recently recorded commercial & industrial activity across Los Angeles County, newest first —
sourced from the LA County Assessor roll. Figures shown are <b>assessed value</b> and the <b>last recorded
transfer date</b>; market sale prices are not in the public roll (they arrive with the commercial listings feed).</p>
<div id="controls">
<div id="seg"></div>
<select id="city"><option value="">All LA cities</option></select>
<select id="sort" title="Sort recorded activity">
<option value="recording_date:desc">Recorded newest</option>
<option value="recording_date:asc">Recorded oldest</option>
<option value="assessed_total:desc">Assessed ↓</option>
<option value="assessed_total:asc">Assessed ↑</option>
<option value="address:asc">Address A→Z</option>
<option value="address:desc">Address Z→A</option>
<option value="city:asc">City A→Z</option>
<option value="type:asc">Type A→Z</option>
<option value="use_desc:asc">Use A→Z</option>
<option value="sqft:desc">SqFt ↓</option>
<option value="sqft:asc">SqFt ↑</option>
<option value="year_built:desc">Built newest</option>
<option value="year_built:asc">Built oldest</option>
</select>
<span class="cg-seg" id="viewseg">
<button data-view="grid" title="Grid">▦ Grid</button>
<button data-view="list" class="active" title="List">☰ List</button>
<button data-view="table" title="Table">▤ Table</button>
</span>
</div>
<h3 style="font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:6px 0 8px;">Featured Assets</h3>
<div id="featured"></div>
<h3 style="font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:6px 0 8px;">Recorded Activity</h3>
<div id="feed"></div>
<div id="loading">Loading…</div>
</main>
<script>
const $=s=>document.querySelector(s), usd=n=>n==null?'—':'$'+Number(n).toLocaleString();
const esc=s=>(s==null?'':String(s)).replace(/[&<>"]/g,c=>({'&':'&','<':'<','>':'>','"':'"'}[c]));
const state={type:'',city:'',sort:localStorage.getItem('cfeed:sort')||'recording_date:desc'};
let VIEW=localStorage.getItem('cfeed:view')||'list'; // grid | list | table
const sortParts=()=>{const [k,d]=state.sort.split(':');return {sort:k,order:(d==='desc'?'desc':'asc')};};
function dstr(d){if(!d) return '—'; const dt=new Date(d);return dt.toLocaleDateString(undefined,{year:'numeric',month:'short',day:'numeric'});}
function propUrl(ain){return '/commercial-property.html?ain='+encodeURIComponent(ain);}
async function j(u){const r=await fetch(u);return r.json();}
async function loadTypes(){
const d=await j('/api/commercial/types');
const seg=$('#seg');
seg.innerHTML=`<button data-t="" class="active">All</button>`+
d.types.filter(t=>t.count).map(t=>`<button data-t="${t.key}">${t.label}</button>`).join('');
seg.querySelectorAll('button').forEach(b=>b.onclick=()=>{
seg.querySelectorAll('button').forEach(x=>x.classList.remove('active'));
b.classList.add('active'); state.type=b.dataset.t; load();});
}
async function loadCities(){
const d=await j('/api/commercial/cities');
$('#city').innerHTML='<option value="">All LA cities</option>'+
d.cities.map(c=>`<option value="${c.city}">${c.city} (${c.count.toLocaleString()})</option>`).join('');
$('#city').onchange=()=>{state.city=$('#city').value;load();};
}
async function loadFeatured(){
const p=new URLSearchParams({limit:9});
if(state.type)p.set('type',state.type); if(state.city)p.set('city',state.city);
const d=await j('/api/commercial/marquee?'+p);
$('#featured').innerHTML=d.results.map(r=>`<div class="story" style="cursor:pointer" onclick="location.href='/commercial-property.html?ain='+encodeURIComponent('${r.ain}')">
<div class="h"><b>${usd(r.assessed_total)}</b> · ${r.type_label}</div>
<div class="b">${r.brief ? r.brief : `${r.address||''}${r.city?', '+r.city:''} — ${r.use_desc||''}.`}</div>
<div class="f">${r.address||''}${r.city?', '+r.city:''}</div>
</div>`).join('');
}
let ROWS=[];
async function load(){
$('#loading').style.display='block';
loadFeatured();
const sp=sortParts();
const p=new URLSearchParams({limit:80, sort:sp.sort, order:sp.order});
if(state.type)p.set('type',state.type); if(state.city)p.set('city',state.city);
const d=await j('/api/commercial/feed?'+p);
ROWS=d.results||[];
renderFeed();
$('#loading').style.display='none';
}
// grid/list render (list = the editorial default; grid = card variant, same markup)
function itemHtml(r){
return `<div class="item" onclick="location.href='${propUrl(r.ain)}'">
<div class="date">${dstr(r.recording_date)}</div>
<div class="body">
<div class="hl">${esc(r.address)||'—'}${r.city?`, ${esc(r.city)}`:''}</div>
<div class="meta">
<span class="tag">${esc(r.type_label)}</span>
<span>${esc(r.use_desc)||''}</span>
<span class="val">Assessed ${usd(r.assessed_total)}</span>
${r.sqft?`<span>${Number(r.sqft).toLocaleString()} sqft</span>`:''}
${r.year_built?`<span>built ${r.year_built}</span>`:''}
</div>
${r.brief?`<div class="brief">${esc(r.brief)}</div>`:''}
</div></div>`;
}
// table: dense all-columns spreadsheet, click-to-sort headers -> ?sort=&order=
const FTBL=[['recording_date','Recorded'],['address','Address'],['city','City'],['type','Type'],
['use_desc','Use'],['assessed_total','Assessed','num'],['sqft','SqFt','num'],['year_built','Built','num']];
function tableHtml(){
const [sk,sd]=state.sort.split(':'); const arr=k=>k===sk?(sd==='desc'?' ▾':' ▴'):'';
let h='<table class="feedtbl"><thead><tr>'+
FTBL.map(([k,l,n])=>`<th data-k="${k}" class="${n?'num':''}${k===sk?' sorted':''}">${esc(l)}${arr(k)}</th>`).join('')+
'</tr></thead><tbody>';
for(const r of ROWS){
h+=`<tr onclick="location.href='${propUrl(r.ain)}'">`+
`<td>${dstr(r.recording_date)}</td>`+
`<td>${esc(r.address)||'—'}</td>`+
`<td>${esc(r.city)||'—'}</td>`+
`<td>${esc(r.type_label)||'—'}</td>`+
`<td>${esc(r.use_desc)||'—'}</td>`+
`<td class="num">${usd(r.assessed_total)}</td>`+
`<td class="num">${r.sqft?Number(r.sqft).toLocaleString():'—'}</td>`+
`<td class="num">${r.year_built||'—'}</td>`+
`</tr>`;
}
return h+'</tbody></table>';
}
function renderFeed(){
const el=$('#feed');
$('#viewseg').querySelectorAll('button').forEach(b=>b.classList.toggle('active',b.dataset.view===VIEW));
if(!ROWS.length){ el.className=''; el.innerHTML='<div style="padding:30px;color:var(--muted)">No recorded activity for this filter.</div>'; return; }
if(VIEW==='table'){ el.className='table'; el.innerHTML=tableHtml();
el.querySelectorAll('thead th[data-k]').forEach(th=>th.onclick=()=>{
const k=th.dataset.k; const [ck,cd]=state.sort.split(':');
state.sort=(k===ck)?`${k}:${cd==='asc'?'desc':'asc'}`:`${k}:asc`;
localStorage.setItem('cfeed:sort',state.sort); $('#sort').value=state.sort; load();
});
return;
}
el.className=(VIEW==='grid'?'grid':'');
el.innerHTML=ROWS.map(itemHtml).join('');
}
$('#sort').onchange=e=>{ state.sort=e.target.value; localStorage.setItem('cfeed:sort',state.sort); load(); };
$('#viewseg').querySelectorAll('button').forEach(b=>b.onclick=()=>{ VIEW=b.dataset.view; localStorage.setItem('cfeed:view',VIEW); renderFeed(); });
(async()=>{ $('#sort').value=state.sort; await loadTypes(); await loadCities(); await load(); })();
</script>
<script src="/nav-drawer.js"></script>
<script src="/geo-search.js"></script>
</body>
</html>