Adiciona calendario na listagem de assembleias

src/main/webapp/cliente/assembleias.html

@@ -1 +1 @@
-<!doctype html><html lang="pt-BR"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Assembleia</title><link rel="stylesheet" href="/css/app.css"><script src="/js/auth.js"></script><script src="/js/util.js"></script><script src="/js/api.js"></script><script src="/js/layout.js"></script></head><body><main><div class="topbar"><h1>Assembleia</h1></div><section class="panel"><div class="section-head"><h2>Todas as assembleias</h2><div class="section-actions"><button class="search-icon-btn" type="button" onclick="alternarBuscaAssembleias()" aria-label="Buscar assembleias" title="Buscar"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7"></circle><path d="m16.5 16.5 4 4"></path></svg></button></div></div><div id="assembleia-search" class="search-strip hidden"><input id="assembleia-search-input" placeholder="Buscar por condominio, tipo, data, local ou status"></div><div class="table-wrap"><table><thead><tr><th>Condominio</th><th>Tipo</th><th>Data</th><th>Local</th><th>Status</th><th>Notificados</th><th></th></tr></thead><tbody id="rows"></tbody></table></div></section><section class="panel"><div class="section-head"><h2>Responsáveis pela assembleia</h2><div class="section-actions"><button class="btn" type="button" onclick="abrirNovoResponsavel()">Novo</button></div></div><div class="table-wrap"><table><thead><tr><th>Nome</th><th>WhatsApp</th><th>E-mail</th><th>Dias disponíveis</th><th>Status</th><th>Ações</th></tr></thead><tbody id="responsaveis-rows"></tbody></table></div></section><div id="responsavel-modal" class="modal hidden"><div class="modal-backdrop" onclick="fecharResponsavelModal()"></div><section class="modal-panel"><div class="modal-head"><h2 id="responsavel-modal-title">Responsável</h2><button class="btn secondary" type="button" onclick="fecharResponsavelModal()">Fechar</button></div><div id="responsavel-modal-body"></div></section></div></main><script>Layout.mount('empresa','assembleias');</script><script src="/cliente/assembleias.js"></script></body></html>
+<!doctype html><html lang="pt-BR"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Assembleia</title><link rel="stylesheet" href="/css/app.css"><script src="/js/auth.js"></script><script src="/js/util.js"></script><script src="/js/api.js"></script><script src="/js/layout.js"></script></head><body><main><div class="topbar"><h1>Assembleia</h1></div><section class="panel"><div class="section-head"><h2>Todas as assembleias</h2><div class="section-actions"><button class="search-icon-btn" type="button" onclick="alternarBuscaAssembleias()" aria-label="Buscar assembleias" title="Buscar"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7"></circle><path d="m16.5 16.5 4 4"></path></svg></button><button class="icon-btn calendar-open" type="button" onclick="abrirCalendarioAssembleias()" title="Calendário de assembleias" aria-label="Calendário de assembleias"></button></div></div><div id="assembleia-search" class="search-strip hidden"><input id="assembleia-search-input" placeholder="Buscar por condominio, tipo, data, local ou status"></div><div class="table-wrap"><table><thead><tr><th>Condominio</th><th>Tipo</th><th>Data</th><th>Local</th><th>Status</th><th>Notificados</th><th></th></tr></thead><tbody id="rows"></tbody></table></div></section><section class="panel"><div class="section-head"><h2>Responsáveis pela assembleia</h2><div class="section-actions"><button class="btn" type="button" onclick="abrirNovoResponsavel()">Novo</button></div></div><div class="table-wrap"><table><thead><tr><th>Nome</th><th>WhatsApp</th><th>E-mail</th><th>Dias disponíveis</th><th>Status</th><th>Ações</th></tr></thead><tbody id="responsaveis-rows"></tbody></table></div></section><div id="responsavel-modal" class="modal hidden"><div class="modal-backdrop" onclick="fecharResponsavelModal()"></div><section class="modal-panel"><div class="modal-head"><h2 id="responsavel-modal-title">Responsável</h2><button class="btn secondary" type="button" onclick="fecharResponsavelModal()">Fechar</button></div><div id="responsavel-modal-body"></div></section></div></main><script>Layout.mount('empresa','assembleias');</script><script src="/cliente/assembleias.js"></script></body></html>

src/main/webapp/cliente/assembleias.js

@@ -1,12 +1,15 @@
 const rows=document.querySelector('#rows'),responsaveisRows=document.querySelector('#responsaveis-rows'),modal=document.querySelector('#responsavel-modal'),modalTitle=document.querySelector('#responsavel-modal-title'),modalBody=document.querySelector('#responsavel-modal-body');
 let assembleias=[],responsaveis=[];
 const diasNomes=['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado'];
+let calMonth=new Date();
 
 function esc(v){return String(v??'').replace(/[&<>'"]/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;',"'":'&#39;','"':'&quot;'}[c]))}
 function termo(){return document.querySelector('#assembleia-search-input')?.value.trim().toLowerCase()||''}
 function contem(q,...vals){return !q||vals.some(v=>String(v??'').toLowerCase().includes(q))}
 function destinatariosLabel(a){return (a.destinatarios||[]).map(x=>x.nome+' ('+x.tipo+')').join(', ')||'-'}
 function diasLabel(v){return String(v||'').split(',').filter(x=>x!=='').map(x=>diasNomes[Number(x)]||x).join(', ')||'-'}
+function dateKey(v){const d=new Date(v);if(Number.isNaN(d.getTime()))return'';const pad=n=>String(n).padStart(2,'0');return d.getFullYear()+'-'+pad(d.getMonth()+1)+'-'+pad(d.getDate())}
+function monthLabel(d){return d.toLocaleDateString('pt-BR',{month:'long',year:'numeric'})}
 function formHtml(r={}){
   const dias=new Set(String(r.dias_semana||'').split(','));
   return `<form id="responsavel-form" class="modal-form"><input type="hidden" name="id" value="${r.id||''}"><div class="form-grid"><div class="field"><label>Nome</label><input name="nome" required value="${esc(r.nome||'')}"></div><div class="field"><label>WhatsApp</label><input name="telefone" value="${esc(r.telefone||'')}"></div><div class="field"><label>E-mail</label><input name="email" type="email" value="${esc(r.email||'')}"></div><div class="field"><label>Status</label><select name="status"><option value="ativo" ${r.status==='ativo'||!r.status?'selected':''}>Ativo</option><option value="inativo" ${r.status==='inativo'?'selected':''}>Inativo</option></select></div><div class="field field-wide"><label>Dias da semana</label><div class="check-grid">${diasNomes.map((d,i)=>`<label><input type="checkbox" name="dias" value="${i}" ${dias.has(String(i))?'checked':''}> ${d}</label>`).join('')}</div></div></div><div class="modal-actions"><button class="btn secondary" type="button" onclick="fecharResponsavelModal()">Cancelar</button><button class="btn">${r.id?'Salvar':'Cadastrar'}</button></div></form>`;
@@ -17,6 +20,8 @@ function renderAssembleias(){
   const lista=assembleias.filter(a=>contem(q,a.condominio_nome,a.tipo,a.data_hora,a.local,a.status,destinatariosLabel(a)));
   rows.innerHTML=lista.map(a=>`<tr><td><strong>${esc(a.condominio_nome||'-')}</strong></td><td>${esc(a.tipo)}</td><td>${Util.date(a.data_hora)}</td><td>${esc(a.local||'')}</td><td>${Util.badge(a.status)}</td><td>${esc(destinatariosLabel(a))}</td><td><a class="btn secondary" href="/cliente/condominio-detalhe.html?id=${a.condominio_id}">Abrir</a></td></tr>`).join('')||'<tr><td colspan="7">Nenhuma assembleia encontrada.</td></tr>';
 }
+function ensureCalendarModal(){let m=document.querySelector('#assembleia-calendar-modal');if(m)return m;document.body.insertAdjacentHTML('beforeend','<div id="assembleia-calendar-modal" class="modal hidden"><div class="modal-backdrop" onclick="fecharCalendarioAssembleias()"></div><section class="modal-panel calendar-modal"><div class="modal-head"><h2>Calendário de assembleias</h2><button class="btn secondary" type="button" onclick="fecharCalendarioAssembleias()">Fechar</button></div><div class="calendar-layout"><div><div class="calendar-toolbar"><button class="btn secondary" type="button" onclick="mudarMesCalendario(-1)">Anterior</button><strong id="calendar-title"></strong><button class="btn secondary" type="button" onclick="mudarMesCalendario(1)">Próximo</button></div><div id="calendar-grid" class="calendar-grid"></div></div><aside class="calendar-side"><h3 id="calendar-day-title">Selecione um dia</h3><div id="calendar-day-list" class="calendar-day-list"><p class="muted">Clique em um dia para ver as assembleias.</p></div></aside></div></section></div>');return document.querySelector('#assembleia-calendar-modal')}
+function renderCalendarioAssembleias(selected){ensureCalendarModal();const title=document.querySelector('#calendar-title'),grid=document.querySelector('#calendar-grid');title.textContent=monthLabel(calMonth);const y=calMonth.getFullYear(),m=calMonth.getMonth(),start=new Date(y,m,1-new Date(y,m,1).getDay()),todayKey=dateKey(new Date());let html=['Dom','Seg','Ter','Qua','Qui','Sex','Sáb'].map(x=>'<div class="calendar-weekday">'+x+'</div>').join('');for(let i=0;i<42;i++){const d=new Date(start);d.setDate(start.getDate()+i);const key=dateKey(d),items=assembleias.filter(a=>dateKey(a.data_hora)===key),classes=['calendar-day'];if(d.getMonth()!==m)classes.push('other');if(items.length)classes.push('busy');if(key===todayKey)classes.push('today');html+='<button type="button" class="'+classes.join(' ')+'" data-date="'+key+'"><span>'+d.getDate()+'</span>'+(items.length?'<b>'+items.length+'</b>':'')+'</button>'}grid.innerHTML=html;grid.querySelectorAll('.calendar-day').forEach(btn=>btn.onclick=()=>selecionarDiaCalendario(btn.dataset.date));if(selected)selecionarDiaCalendario(selected,false)}
 
 async function load(){
   try{
@@ -60,6 +65,10 @@ window.alternarBuscaAssembleias=()=>{
   strip.classList.toggle('hidden');
   if(!strip.classList.contains('hidden'))input.focus();
 };
+window.abrirCalendarioAssembleias=async()=>{try{if(!assembleias.length)await load();calMonth=new Date();ensureCalendarModal().classList.remove('hidden');renderCalendarioAssembleias()}catch(e){Util.toast(e.message,true)}};
+window.fecharCalendarioAssembleias=()=>document.querySelector('#assembleia-calendar-modal')?.classList.add('hidden');
+window.mudarMesCalendario=delta=>{calMonth=new Date(calMonth.getFullYear(),calMonth.getMonth()+delta,1);renderCalendarioAssembleias()};
+window.selecionarDiaCalendario=(key,mark=true)=>{if(mark)document.querySelectorAll('.calendar-day').forEach(x=>x.classList.toggle('selected',x.dataset.date===key));const list=document.querySelector('#calendar-day-list'),title=document.querySelector('#calendar-day-title'),items=assembleias.filter(a=>dateKey(a.data_hora)===key);const [yy,mm,dd]=key.split('-');title.textContent=dd+'/'+mm+'/'+yy;if(!items.length){list.innerHTML='<p class="muted">Nenhuma assembleia agendada neste dia.</p>';return;}list.innerHTML=items.map(a=>'<div class="calendar-event"><strong>'+esc(a.condominio_nome||'-')+'</strong><span>'+Util.date(a.data_hora)+'</span><span>'+esc(a.tipo)+' - '+esc(a.local||'-')+'</span><p>'+esc(destinatariosLabel(a))+'</p><a class="btn secondary" href="/cliente/condominio-detalhe.html?id='+a.condominio_id+'">Abrir condomínio</a></div>').join('')};
 window.abrirNovoResponsavel=()=>abrirResponsavel({});
 window.editarResponsavel=id=>{const r=responsaveis.find(x=>Number(x.id)===Number(id));if(r)abrirResponsavel(r)};
 window.fecharResponsavelModal=()=>{modal.classList.add('hidden');modalBody.innerHTML=''};