`public/events.html`

35 lines
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BubbesBlock — Block Events</title><link rel="stylesheet" href="/styles.css" />
</head><body>
<div id="hdr"></div>
<div class="wrap"><div id="left"></div><main class="col-center" id="main"></main><div id="right"></div></div>
<script>window.__bbAutoInit = false;</script>
<script src="/chrome.js"></script><script src="/app.js"></script>
<script>
function tile(e){
  return `<div class="tile" data-ev="${e.id}">
    <span class="lg" style="background:var(--green)">${e.emoji||'📅'}</span>
    <div class="main"><b>${e.title}</b><div class="meta2">${e.when_label} · ${e.location} · <span class="going">${e.going} going</span></div>
      <div class="meta2" style="margin-top:4px">${e.body||''}</div></div>
    <div class="act"><button class="${e.youGoing?'on':''}" data-ev-btn="${e.id}">${e.youGoing?'Going ✓':'RSVP'}</button></div>
  </div>`;
}
Promise.all([fetch('/api/me',{credentials:'same-origin'}).then(r=>r.json()), fetch('/api/events',{credentials:'same-origin'}).then(r=>r.json())]).then(([m,d])=>{
  document.getElementById('hdr').innerHTML=topbar(m.me);
  document.getElementById('left').innerHTML=leftRail(m.me);
  document.getElementById('right').innerHTML=rightRail(m.me);
  document.getElementById('main').innerHTML='<div class="listhd">🎉 Block Events</div>'+(d.events||[]).map(tile).join('');
  BB.init();
});
document.addEventListener('click', async e=>{
  const b=e.target.closest('[data-ev-btn]'); if(!b) return;
  if(!(await BB.ensureAuth())) return;
  try{ const r=await BB.api.post(`/api/events/${b.dataset.evBtn}/rsvp`,{});
    b.classList.toggle('on',r.going); b.textContent=r.going?'Going ✓':'RSVP';
    const g=b.closest('.tile').querySelector('.going'); if(g) g.textContent=r.count+' going';
  }catch{ BB.toast('Try again'); }
});
</script></body></html>