🚀 Auto-deploy: Camila atualizado em 06/06/2026 21:07:19

2026-06-06 21:07:19 +00:00
parent 8ce48af127
commit 852713db00
3 changed files with 780 additions and 1 deletions
@@ -6785,5 +6785,410 @@ document.addEventListener('DOMContentLoaded', () => {
    btnCloseMindLabHistory.addEventListener('click', () => {
      mindLabHistoryModal.style.display = 'none';
    });
+    });
+  }
+
+  // ============================================================
+  // CRIAR CARTAZES
+  // ============================================================
+  const barBtnCartazes = document.getElementById('barBtnCartazes');
+  const cartazesModal = document.getElementById('cartazesModal');
+  const btnCloseCartazesModal = document.getElementById('btnCloseCartazesModal');
+
+  const tabCartazesCriar = document.getElementById('tabCartazesCriar');
+  const tabCartazesHistorico = document.getElementById('tabCartazesHistorico');
+  const panelCartazesCriar = document.getElementById('panelCartazesCriar');
+  const panelCartazesHistorico = document.getElementById('panelCartazesHistorico');
+
+  const cartazTituloInput = document.getElementById('cartazTituloInput');
+  const cartazTemaInput = document.getElementById('cartazTemaInput');
+  const cartazLayoutSelect = document.getElementById('cartazLayoutSelect');
+  const cartazBgColor = document.getElementById('cartazBgColor');
+  const cartazTextColor = document.getElementById('cartazTextColor');
+  const cartazFontSelect = document.getElementById('cartazFontSelect');
+  const cartazBorderSelect = document.getElementById('cartazBorderSelect');
+  const cartazPromptImagem = document.getElementById('cartazPromptImagem');
+  const btnGenerateCartaz = document.getElementById('btnGenerateCartaz');
+  const cartazGenerateLoader = document.getElementById('cartazGenerateLoader');
+
+  const btnEditCartazToggle = document.getElementById('btnEditCartazToggle');
+  const btnPrintCartaz = document.getElementById('btnPrintCartaz');
+  const cartazEditArea = document.getElementById('cartazEditArea');
+  const cartazHtmlEditor = document.getElementById('cartazHtmlEditor');
+  const btnUpdateCartazPreview = document.getElementById('btnUpdateCartazPreview');
+
+  const cartazPrintableArea = document.getElementById('cartazPrintableArea');
+  const cartazPreviewTitle = document.getElementById('cartazPreviewTitle');
+  const cartazPreviewContent = document.getElementById('cartazPreviewContent');
+  const cartazPreviewImageContainer = document.getElementById('cartazPreviewImageContainer');
+  const cartazPreviewImage = document.getElementById('cartazPreviewImage');
+
+  const cartazesHistoryContainer = document.getElementById('cartazesHistoryContainer');
+  const cartazesNoData = document.getElementById('cartazesNoData');
+
+  let activeCartazData = null;
+
+  // Toggle Modal
+  if (barBtnCartazes) {
+    barBtnCartazes.addEventListener('click', () => {
+      cartazesModal.style.display = 'flex';
+      switchCartazTab('criar');
+    });
+  }
+
+  if (btnCloseCartazesModal) {
+    btnCloseCartazesModal.addEventListener('click', () => {
+      cartazesModal.style.display = 'none';
+    });
+  }
+
+  cartazesModal.addEventListener('click', (e) => {
+    if (e.target === cartazesModal) cartazesModal.style.display = 'none';
+  });
+
+  // Switch Tab
+  function switchCartazTab(tab) {
+    if (tab === 'criar') {
+      tabCartazesCriar.classList.add('active');
+      tabCartazesHistorico.classList.remove('active');
+      panelCartazesCriar.style.display = 'flex';
+      panelCartazesHistorico.style.display = 'none';
+      
+      tabCartazesCriar.style.color = 'var(--text-primary)';
+      tabCartazesHistorico.style.color = 'var(--text-secondary)';
+    } else {
+      tabCartazesCriar.classList.remove('active');
+      tabCartazesHistorico.classList.add('active');
+      panelCartazesCriar.style.display = 'none';
+      panelCartazesHistorico.style.display = 'flex';
+      
+      tabCartazesCriar.style.color = 'var(--text-secondary)';
+      tabCartazesHistorico.style.color = 'var(--text-primary)';
+      loadCartazesHistory();
+    }
+  }
+
+  if (tabCartazesCriar) tabCartazesCriar.addEventListener('click', () => switchCartazTab('criar'));
+  if (tabCartazesHistorico) tabCartazesHistorico.addEventListener('click', () => switchCartazTab('historico'));
+
+  // Live Style Updates
+  function updateLivePreview() {
+    const bg = cartazBgColor.value;
+    const text = cartazTextColor.value;
+    const font = cartazFontSelect.value;
+    const border = cartazBorderSelect.value;
+    const title = cartazTituloInput.value.trim() || 'Título do Cartaz';
+
+    cartazPrintableArea.style.backgroundColor = bg;
+    cartazPrintableArea.style.color = text;
+    cartazPrintableArea.style.fontFamily = font;
+    cartazPreviewTitle.textContent = title;
+    cartazPreviewTitle.style.borderColor = text;
+
+    if (border === 'none') {
+      cartazPrintableArea.style.border = 'none';
+    } else {
+      cartazPrintableArea.style.border = `${border} ${text}`;
+    }
+  }
+
+  [cartazBgColor, cartazTextColor, cartazFontSelect, cartazBorderSelect, cartazTituloInput].forEach(elem => {
+    if (elem) elem.addEventListener('input', updateLivePreview);
+  });
+
+  // Preset Palettes
+  document.querySelectorAll('.btn-palette-preset').forEach(btn => {
+    btn.addEventListener('click', (e) => {
+      const bg = e.target.dataset.bg;
+      const text = e.target.dataset.text;
+      cartazBgColor.value = bg;
+      cartazTextColor.value = text;
+      updateLivePreview();
+    });
+  });
+
+  // Toggle HTML Editor
+  if (btnEditCartazToggle) {
+    btnEditCartazToggle.addEventListener('click', () => {
+      if (cartazEditArea.style.display === 'none') {
+        cartazEditArea.style.display = 'flex';
+        btnEditCartazToggle.textContent = '👁️ Ocultar Editor';
+      } else {
+        cartazEditArea.style.display = 'none';
+        btnEditCartazToggle.textContent = '✏️ Editar Conteúdo';
+      }
+    });
+  }
+
+  // Update from Editor
+  if (btnUpdateCartazPreview) {
+    btnUpdateCartazPreview.addEventListener('click', () => {
+      cartazPreviewContent.innerHTML = cartazHtmlEditor.value;
+    });
+  }
+
+  // Generate Poster
+  if (btnGenerateCartaz) {
+    btnGenerateCartaz.addEventListener('click', async () => {
+      const titulo = cartazTituloInput.value.trim();
+      const tema = cartazTemaInput.value.trim();
+      const layout = cartazLayoutSelect.value;
+      const promptImagem = cartazPromptImagem.value.trim();
+
+      if (!titulo || !tema) {
+        showToast('Por favor, defina o Título e o Tema do Cartaz.', 'error');
+        return;
+      }
+
+      btnGenerateCartaz.disabled = true;
+      cartazGenerateLoader.style.display = 'flex';
+
+      try {
+        const res = await fetch('/api/cartazes/generate', {
+          method: 'POST',
+          headers: { 
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${localStorage.getItem('token')}`
+          },
+          body: JSON.stringify({
+            titulo,
+            tema,
+            corFundo: cartazBgColor.value,
+            corTexto: cartazTextColor.value,
+            layout,
+            promptImagem
+          })
+        });
+
+        const data = await res.json();
+        if (res.ok) {
+          activeCartazData = data;
+          
+          // Preencher Preview
+          cartazPreviewContent.innerHTML = data.conteudo;
+          cartazHtmlEditor.value = data.conteudo;
+          
+          if (data.imagemUrl) {
+            cartazPreviewImage.src = data.imagemUrl;
+            cartazPreviewImageContainer.style.display = 'block';
+          } else {
+            cartazPreviewImageContainer.style.display = 'none';
+          }
+
+          updateLivePreview();
+          showToast('Cartaz criado e salvo com sucesso!', 'success');
+        } else {
+          showToast(data.error || 'Erro ao gerar cartaz.', 'error');
+        }
+      } catch (err) {
+        console.error(err);
+        showToast('Erro ao se conectar com o servidor.', 'error');
+      } finally {
+        btnGenerateCartaz.disabled = false;
+        cartazGenerateLoader.style.display = 'none';
+      }
+    });
+  }
+
+  // Print Poster
+  if (btnPrintCartaz) {
+    btnPrintCartaz.addEventListener('click', () => {
+      const title = cartazTituloInput.value.trim() || 'Cartaz Pedagógico';
+      const bg = cartazBgColor.value;
+      const text = cartazTextColor.value;
+      const font = cartazFontSelect.value;
+      const border = cartazBorderSelect.value;
+      const imgContainerHtml = cartazPreviewImageContainer.style.display === 'block' 
+        ? `<div style="width: 100%; margin-bottom: 20px; border-radius: 8px; overflow: hidden; max-height: 350px; border: 2px solid rgba(0,0,0,0.1);"><img src="${cartazPreviewImage.src}" style="width: 100%; height: 100%; object-fit: cover;"></div>`
+        : '';
+
+      const printWindow = window.open('', '_blank');
+      printWindow.document.write(`
+        <html>
+        <head>
+          <title>${title} - PedaGog</title>
+          <link rel="preconnect" href="https://fonts.googleapis.com">
+          <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+          <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&family=Caveat:wght@400;700&family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Outfit:wght@400;600;700&display=swap" rel="stylesheet">
+          <style>
+            body { 
+              font-family: ${font}; 
+              margin: 0; 
+              padding: 40px; 
+              background-color: #f7fafc; 
+              display: flex; 
+              justify-content: center; 
+              align-items: center; 
+              min-height: 100vh;
+            }
+            .cartaz-frame {
+              background-color: ${bg};
+              color: ${text};
+              padding: 50px;
+              border-radius: 16px;
+              width: 100%;
+              max-width: 800px;
+              box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+              box-sizing: border-box;
+              border: ${border === 'none' ? 'none' : `${border} ${text}`};
+            }
+            h1 {
+              text-align: center;
+              margin-top: 0;
+              font-size: 3rem;
+              border-bottom: 3px solid ${text};
+              padding-bottom: 16px;
+              margin-bottom: 30px;
+            }
+            .content-area {
+              font-size: 1.4rem;
+              line-height: 1.8;
+            }
+            ul {
+              margin-left: 20px;
+            }
+            li {
+              margin-bottom: 12px;
+            }
+            @media print {
+              body { background: transparent; padding: 0; }
+              .cartaz-frame { box-shadow: none; border-radius: 0; max-width: 100%; width: 100%; height: 100%; padding: 30px; }
+              button { display: none; }
+            }
+          </style>
+        </head>
+        <body>
+          <div class="cartaz-frame">
+            <h1>${title}</h1>
+            ${imgContainerHtml}
+            <div class="content-area">
+              ${cartazPreviewContent.innerHTML}
+            </div>
+          </div>
+          <script>
+            window.onload = function() {
+              window.print();
+            }
+          <\/script>
+        </body>
+        </html>
+      `);
+      printWindow.document.close();
+    });
+  }
+
+  // Load History list
+  async function loadCartazesHistory() {
+    if (!cartazesHistoryContainer) return;
+    cartazesHistoryContainer.innerHTML = '<div style="text-align: center; color: var(--text-secondary); padding: 20px;">Carregando histórico...</div>';
+    
+    try {
+      const res = await fetch('/api/cartazes/list', {
+        headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }
+      });
+      const data = await res.json();
+      cartazesHistoryContainer.innerHTML = '';
+      
+      if (!data || data.length === 0) {
+        cartazesNoData.style.display = 'block';
+        return;
+      }
+      cartazesNoData.style.display = 'none';
+
+      data.forEach(item => {
+        const card = document.createElement('div');
+        card.style.background = 'var(--bg-tertiary)';
+        card.style.border = '1px solid var(--border-light)';
+        card.style.borderRadius = '10px';
+        card.style.padding = '16px';
+        card.style.display = 'flex';
+        card.style.flexDirection = 'column';
+        card.style.justifyContent = 'space-between';
+        card.style.gap = '12px';
+        card.style.boxShadow = '0 4px 6px rgba(0,0,0,0.1)';
+
+        const thumbnail = item.imagemUrl 
+          ? `<div style="height: 120px; overflow:hidden; border-radius: 6px; border: 1px solid var(--border-light); margin-bottom: 6px;">
+               <img src="${item.imagemUrl}" style="width:100%; height:100%; object-fit:cover;">
+             </div>`
+          : `<div style="height: 120px; border-radius: 6px; background: ${item.corFundo || '#fff9eb'}; color: ${item.corTexto || '#2d3748'}; display:flex; align-items:center; justify-content:center; border: 1px solid var(--border-light); margin-bottom: 6px; font-weight: bold; font-size: 0.8rem; overflow: hidden; padding: 10px; text-align:center;">
+               ${item.titulo}
+             </div>`;
+
+        card.innerHTML = `
+          <div>
+            ${thumbnail}
+            <h5 style="margin: 0; font-size: 1rem; color: var(--text-primary); font-family: 'Outfit', sans-serif;">${item.titulo}</h5>
+            <p style="margin: 4px 0 0 0; font-size: 0.8rem; color: var(--text-secondary);">Foco: ${item.tema}</p>
+            <span style="font-size: 0.75rem; color: var(--text-muted); display: block; margin-top: 6px;">Layout: ${item.layout.toUpperCase()}</span>
+          </div>
+          <div style="display: flex; gap: 8px; justify-content: flex-end; border-top: 1px solid var(--border-light); padding-top: 10px;">
+            <button class="btn-ver-cartaz btn-secondary" data-id="${item.id}" style="padding: 6px 12px; font-size: 0.8rem; border-radius: 6px; cursor: pointer; background: rgba(59, 130, 246, 0.1); border-color: rgba(59, 130, 246, 0.3); color: #60a5fa;">Ver / Editar</button>
+            <button class="btn-del-cartaz btn-secondary" data-id="${item.id}" style="padding: 6px 12px; font-size: 0.8rem; border-radius: 6px; cursor: pointer; color: #ef4444; border-color: rgba(239, 68, 68, 0.3);">🗑️</button>
+          </div>
+        `;
+        cartazesHistoryContainer.appendChild(card);
+      });
+
+      // Bind Ver/Editar Buttons
+      document.querySelectorAll('.btn-ver-cartaz').forEach(btn => {
+        btn.addEventListener('click', async (e) => {
+          const id = e.target.dataset.id;
+          try {
+            const r = await fetch(`/api/cartazes/${id}`, {
+              headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }
+            });
+            const poster = await r.json();
+            
+            // Set Inputs
+            cartazTituloInput.value = poster.titulo;
+            cartazTemaInput.value = poster.tema;
+            cartazLayoutSelect.value = poster.layout;
+            cartazBgColor.value = poster.corFundo;
+            cartazTextColor.value = poster.corTexto;
+            cartazHtmlEditor.value = poster.conteudo;
+            cartazPreviewContent.innerHTML = poster.conteudo;
+
+            if (poster.imagemUrl) {
+              cartazPreviewImage.src = poster.imagemUrl;
+              cartazPreviewImageContainer.style.display = 'block';
+            } else {
+              cartazPreviewImageContainer.style.display = 'none';
+            }
+
+            updateLivePreview();
+            switchCartazTab('criar');
+          } catch (err) {
+            showToast('Erro ao carregar cartaz.', 'error');
+          }
+        });
+      });
+
+      // Bind Delete Buttons
+      document.querySelectorAll('.btn-del-cartaz').forEach(btn => {
+        btn.addEventListener('click', async (e) => {
+          if (!confirm('Tem certeza que deseja apagar este cartaz?')) return;
+          const id = e.target.dataset.id;
+          try {
+            const r = await fetch(`/api/cartazes/${id}`, {
+              method: 'DELETE',
+              headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }
+            });
+            if (r.ok) {
+              showToast('Cartaz deletado com sucesso.', 'success');
+              loadCartazesHistory();
+            } else {
+              showToast('Erro ao deletar cartaz.', 'error');
+            }
+          } catch (err) {
+            showToast('Erro de conexão ao deletar cartaz.', 'error');
+          }
+        });
+      });
+
+    } catch (err) {
+      console.error(err);
+      cartazesHistoryContainer.innerHTML = '<div style="color: #ef4444; padding: 20px;">Erro ao carregar histórico de cartazes.</div>';
+    }
  }
 });