Corrigindo output truncado do Garatujas e adicionando rotas de Historias/Musicas
This commit is contained in:
+370
@@ -2287,6 +2287,8 @@ const initApp = () => {
|
||||
}
|
||||
if (btn.id === 'barBtnEstudio') return; // Manipulado separadamente
|
||||
if (btn.id === 'barBtnComics') return; // Manipulado separadamente
|
||||
if (btn.id === 'barBtnMusica') return;
|
||||
if (btn.id === 'barBtnHistoria') return;
|
||||
|
||||
const mode = btn.dataset.mode;
|
||||
const text = userInput.value.trim();
|
||||
@@ -5729,6 +5731,374 @@ window.toggleCustomAudio = (btn) => {
|
||||
timeSpan.textContent = '0:00';
|
||||
};
|
||||
};
|
||||
// ============================================================
|
||||
// MUSICANDO IDEIAS
|
||||
// ============================================================
|
||||
const barBtnMusica = document.getElementById('barBtnMusica');
|
||||
const musicaModal = document.getElementById('musicaModal');
|
||||
const btnCloseMusicaModal = document.getElementById('btnCloseMusicaModal');
|
||||
const btnOpenMusicaHistory = document.getElementById('btnOpenMusicaHistory');
|
||||
const musicaHistoryModal = document.getElementById('musicaHistoryModal');
|
||||
const btnCloseMusicaHistory = document.getElementById('btnCloseMusicaHistory');
|
||||
|
||||
const musicaFaixaEtaria = document.getElementById('musicaFaixaEtaria');
|
||||
const musicaRitmo = document.getElementById('musicaRitmo');
|
||||
const musicaTemaInput = document.getElementById('musicaTemaInput');
|
||||
const btnGenerateMusica = document.getElementById('btnGenerateMusica');
|
||||
|
||||
const musicaGenerateLoader = document.getElementById('musicaGenerateLoader');
|
||||
const musicaResultArea = document.getElementById('musicaResultArea');
|
||||
const musicaTextOutput = document.getElementById('musicaTextOutput');
|
||||
const btnCopyMusica = document.getElementById('btnCopyMusica');
|
||||
const btnDownloadMusicaPdf = document.getElementById('btnDownloadMusicaPdf');
|
||||
|
||||
let currentMusicaEstrofes = 3;
|
||||
let currentMusica = '';
|
||||
|
||||
document.querySelectorAll('.btn-musica-estrofes').forEach(btn => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
document.querySelectorAll('.btn-musica-estrofes').forEach(b => b.classList.remove('active'));
|
||||
e.target.classList.add('active');
|
||||
currentMusicaEstrofes = parseInt(e.target.dataset.estrofes);
|
||||
});
|
||||
});
|
||||
|
||||
if (barBtnMusica) {
|
||||
barBtnMusica.addEventListener('click', () => {
|
||||
musicaModal.style.display = 'flex';
|
||||
musicaTemaInput.value = '';
|
||||
musicaResultArea.style.display = 'none';
|
||||
musicaGenerateLoader.style.display = 'none';
|
||||
btnGenerateMusica.disabled = false;
|
||||
currentMusica = '';
|
||||
});
|
||||
}
|
||||
|
||||
if (btnCloseMusicaModal) musicaModal.addEventListener('click', (e) => { if(e.target === musicaModal) musicaModal.style.display = 'none'; });
|
||||
if (btnCloseMusicaModal) btnCloseMusicaModal.addEventListener('click', () => musicaModal.style.display = 'none');
|
||||
|
||||
if (btnOpenMusicaHistory) {
|
||||
btnOpenMusicaHistory.addEventListener('click', () => {
|
||||
musicaHistoryModal.style.display = 'flex';
|
||||
loadMusicaHistory();
|
||||
});
|
||||
}
|
||||
if (btnCloseMusicaHistory) btnCloseMusicaHistory.addEventListener('click', () => musicaHistoryModal.style.display = 'none');
|
||||
musicaHistoryModal.addEventListener('click', (e) => { if(e.target === musicaHistoryModal) musicaHistoryModal.style.display = 'none'; });
|
||||
|
||||
if (btnGenerateMusica) {
|
||||
btnGenerateMusica.addEventListener('click', async () => {
|
||||
const tema = musicaTemaInput.value.trim();
|
||||
if (!tema) {
|
||||
showToast('Por favor, informe o tema da música.', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
btnGenerateMusica.disabled = true;
|
||||
musicaResultArea.style.display = 'none';
|
||||
musicaGenerateLoader.style.display = 'flex';
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/musicas/generate', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
faixaEtaria: musicaFaixaEtaria.value,
|
||||
estrofes: currentMusicaEstrofes,
|
||||
ritmo: musicaRitmo.value,
|
||||
tema: tema
|
||||
})
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
currentMusica = data.musica;
|
||||
musicaTextOutput.innerHTML = window.marked ? marked.parse(currentMusica) : currentMusica;
|
||||
musicaResultArea.style.display = 'flex';
|
||||
} else {
|
||||
showToast(data.error || 'Erro ao gerar música.', 'error');
|
||||
}
|
||||
} catch (err) {
|
||||
showToast('Erro de conexão.', 'error');
|
||||
} finally {
|
||||
musicaGenerateLoader.style.display = 'none';
|
||||
btnGenerateMusica.disabled = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (btnCopyMusica) {
|
||||
btnCopyMusica.addEventListener('click', () => {
|
||||
if (currentMusica) {
|
||||
navigator.clipboard.writeText(currentMusica);
|
||||
showToast('Música copiada para a área de transferência!', 'success');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (btnDownloadMusicaPdf) {
|
||||
btnDownloadMusicaPdf.addEventListener('click', () => {
|
||||
if (!currentMusica) return;
|
||||
const printWindow = window.open('', '_blank');
|
||||
printWindow.document.write(`
|
||||
<html>
|
||||
<head>
|
||||
<title>Música - Assistente PedaGog</title>
|
||||
<style>
|
||||
body { font-family: 'Outfit', 'Inter', sans-serif; padding: 40px; color: #333; line-height: 1.6; }
|
||||
h1, h2, h3 { color: #10b981; margin-top: 24px; margin-bottom: 12px; }
|
||||
@media print { body { padding: 0; } button { display: none; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div style="max-width: 800px; margin: 0 auto;">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #e2e8f0; padding-bottom: 10px; margin-bottom: 20px;">
|
||||
<h1 style="margin: 0;">🎵 Música Pedagógica</h1>
|
||||
<button onclick="window.print()" style="background: #10b981; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-weight: bold;">Imprimir / PDF</button>
|
||||
</div>
|
||||
<div>${window.marked ? marked.parse(currentMusica) : currentMusica}</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
`);
|
||||
printWindow.document.close();
|
||||
});
|
||||
}
|
||||
|
||||
async function loadMusicaHistory() {
|
||||
const listContainer = document.getElementById('musicaHistoryList');
|
||||
if (!listContainer) return;
|
||||
listContainer.innerHTML = '<p style="text-align:center; color:var(--text-secondary);">Carregando...</p>';
|
||||
try {
|
||||
const response = await fetch('/api/musicas/list');
|
||||
const data = await response.json();
|
||||
if (data && data.length > 0) {
|
||||
listContainer.innerHTML = '';
|
||||
data.forEach(item => {
|
||||
const date = new Date(item.created_at).toLocaleString('pt-BR');
|
||||
const div = document.createElement('div');
|
||||
div.className = 'history-item-card';
|
||||
div.style.cssText = 'background: rgba(255,255,255,0.02); padding: 14px; border-radius: 8px; border: 1px solid var(--border-light); display: flex; flex-direction: column; gap: 8px; cursor: pointer; position: relative;';
|
||||
div.innerHTML = `
|
||||
<div style="display: flex; justify-content: space-between; align-items: flex-start; padding-right: 30px;">
|
||||
<strong style="color: var(--brand-green); font-size: 0.95rem;">${item.faixa_etaria} - ${item.ritmo}</strong>
|
||||
<span style="font-size: 0.75rem; color: var(--text-secondary);">${date}</span>
|
||||
</div>
|
||||
<p style="margin: 0; font-size: 0.85rem; color: var(--text-primary); opacity: 0.9;">Tema: ${item.tema}</p>
|
||||
<button class="btn-delete-musica" data-id="${item.id}" style="position: absolute; top: 12px; right: 12px; background: transparent; border: none; color: #ef4444; cursor: pointer; font-size: 1.1rem; padding: 4px; border-radius: 4px;" title="Excluir">🗑️</button>
|
||||
`;
|
||||
div.addEventListener('click', async (e) => {
|
||||
if (e.target.closest('.btn-delete-musica')) {
|
||||
e.stopPropagation();
|
||||
if (confirm('Tem certeza que deseja excluir?')) {
|
||||
try {
|
||||
const delRes = await fetch(`/api/musicas/${item.id}`, { method: 'DELETE' });
|
||||
if (delRes.ok) { showToast('Música excluída.', 'success'); loadMusicaHistory(); }
|
||||
} catch (err) { showToast('Erro ao excluir.', 'error'); }
|
||||
}
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const res = await fetch(`/api/musicas/${item.id}`);
|
||||
const detail = await res.json();
|
||||
if (res.ok) {
|
||||
currentMusica = detail.musica;
|
||||
musicaTextOutput.innerHTML = window.marked ? marked.parse(currentMusica) : currentMusica;
|
||||
musicaResultArea.style.display = 'flex';
|
||||
musicaHistoryModal.style.display = 'none';
|
||||
}
|
||||
} catch (err) { showToast('Erro ao carregar.', 'error'); }
|
||||
});
|
||||
listContainer.appendChild(div);
|
||||
});
|
||||
} else {
|
||||
listContainer.innerHTML = '<p style="text-align:center; color:var(--text-secondary);">Nenhum histórico.</p>';
|
||||
}
|
||||
} catch (err) { listContainer.innerHTML = '<p style="text-align:center; color:#ef4444;">Erro ao carregar.</p>'; }
|
||||
}
|
||||
|
||||
|
||||
// ============================================================
|
||||
// INVENTANDO HISTORIAS
|
||||
// ============================================================
|
||||
const barBtnHistoria = document.getElementById('barBtnHistoria');
|
||||
const historiaModal = document.getElementById('historiaModal');
|
||||
const btnCloseHistoriaModal = document.getElementById('btnCloseHistoriaModal');
|
||||
const btnOpenHistoriaHistory = document.getElementById('btnOpenHistoriaHistory');
|
||||
const historiaHistoryModal = document.getElementById('historiaHistoryModal');
|
||||
const btnCloseHistoriaHistory = document.getElementById('btnCloseHistoriaHistory');
|
||||
|
||||
const historiaFaixaEtaria = document.getElementById('historiaFaixaEtaria');
|
||||
const historiaParagrafos = document.getElementById('historiaParagrafos');
|
||||
const historiaPersonagens = document.getElementById('historiaPersonagens');
|
||||
const historiaEstilo = document.getElementById('historiaEstilo');
|
||||
const historiaTemaInput = document.getElementById('historiaTemaInput');
|
||||
const btnGenerateHistoria = document.getElementById('btnGenerateHistoria');
|
||||
|
||||
const historiaGenerateLoader = document.getElementById('historiaGenerateLoader');
|
||||
const historiaResultArea = document.getElementById('historiaResultArea');
|
||||
const historiaTextOutput = document.getElementById('historiaTextOutput');
|
||||
const btnCopyHistoria = document.getElementById('btnCopyHistoria');
|
||||
const btnDownloadHistoriaPdf = document.getElementById('btnDownloadHistoriaPdf');
|
||||
|
||||
let currentHistoria = '';
|
||||
|
||||
if (barBtnHistoria) {
|
||||
barBtnHistoria.addEventListener('click', () => {
|
||||
historiaModal.style.display = 'flex';
|
||||
historiaTemaInput.value = '';
|
||||
historiaResultArea.style.display = 'none';
|
||||
historiaGenerateLoader.style.display = 'none';
|
||||
btnGenerateHistoria.disabled = false;
|
||||
currentHistoria = '';
|
||||
});
|
||||
}
|
||||
|
||||
if (btnCloseHistoriaModal) historiaModal.addEventListener('click', (e) => { if(e.target === historiaModal) historiaModal.style.display = 'none'; });
|
||||
if (btnCloseHistoriaModal) btnCloseHistoriaModal.addEventListener('click', () => historiaModal.style.display = 'none');
|
||||
|
||||
if (btnOpenHistoriaHistory) {
|
||||
btnOpenHistoriaHistory.addEventListener('click', () => {
|
||||
historiaHistoryModal.style.display = 'flex';
|
||||
loadHistoriaHistory();
|
||||
});
|
||||
}
|
||||
if (btnCloseHistoriaHistory) btnCloseHistoriaHistory.addEventListener('click', () => historiaHistoryModal.style.display = 'none');
|
||||
historiaHistoryModal.addEventListener('click', (e) => { if(e.target === historiaHistoryModal) historiaHistoryModal.style.display = 'none'; });
|
||||
|
||||
if (btnGenerateHistoria) {
|
||||
btnGenerateHistoria.addEventListener('click', async () => {
|
||||
const tema = historiaTemaInput.value.trim();
|
||||
if (!tema) {
|
||||
showToast('Por favor, informe o tema da história.', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
btnGenerateHistoria.disabled = true;
|
||||
historiaResultArea.style.display = 'none';
|
||||
historiaGenerateLoader.style.display = 'flex';
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/historias/generate', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
faixaEtaria: historiaFaixaEtaria.value,
|
||||
paragrafos: historiaParagrafos.value,
|
||||
personagens: historiaPersonagens.value,
|
||||
estilo: historiaEstilo.value,
|
||||
tema: tema
|
||||
})
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
currentHistoria = data.historia;
|
||||
historiaTextOutput.innerHTML = window.marked ? marked.parse(currentHistoria) : currentHistoria;
|
||||
historiaResultArea.style.display = 'flex';
|
||||
} else {
|
||||
showToast(data.error || 'Erro ao inventar história.', 'error');
|
||||
}
|
||||
} catch (err) {
|
||||
showToast('Erro de conexão.', 'error');
|
||||
} finally {
|
||||
historiaGenerateLoader.style.display = 'none';
|
||||
btnGenerateHistoria.disabled = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (btnCopyHistoria) {
|
||||
btnCopyHistoria.addEventListener('click', () => {
|
||||
if (currentHistoria) {
|
||||
navigator.clipboard.writeText(currentHistoria);
|
||||
showToast('História copiada para a área de transferência!', 'success');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (btnDownloadHistoriaPdf) {
|
||||
btnDownloadHistoriaPdf.addEventListener('click', () => {
|
||||
if (!currentHistoria) return;
|
||||
const printWindow = window.open('', '_blank');
|
||||
printWindow.document.write(`
|
||||
<html>
|
||||
<head>
|
||||
<title>História - Assistente PedaGog</title>
|
||||
<style>
|
||||
body { font-family: 'Outfit', 'Inter', sans-serif; padding: 40px; color: #333; line-height: 1.6; }
|
||||
h1, h2, h3 { color: #10b981; margin-top: 24px; margin-bottom: 12px; }
|
||||
@media print { body { padding: 0; } button { display: none; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div style="max-width: 800px; margin: 0 auto;">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #e2e8f0; padding-bottom: 10px; margin-bottom: 20px;">
|
||||
<h1 style="margin: 0;">✍️ História Pedagógica</h1>
|
||||
<button onclick="window.print()" style="background: #10b981; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-weight: bold;">Imprimir / PDF</button>
|
||||
</div>
|
||||
<div>${window.marked ? marked.parse(currentHistoria) : currentHistoria}</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
`);
|
||||
printWindow.document.close();
|
||||
});
|
||||
}
|
||||
|
||||
async function loadHistoriaHistory() {
|
||||
const listContainer = document.getElementById('historiaHistoryList');
|
||||
if (!listContainer) return;
|
||||
listContainer.innerHTML = '<p style="text-align:center; color:var(--text-secondary);">Carregando...</p>';
|
||||
try {
|
||||
const response = await fetch('/api/historias/list');
|
||||
const data = await response.json();
|
||||
if (data && data.length > 0) {
|
||||
listContainer.innerHTML = '';
|
||||
data.forEach(item => {
|
||||
const date = new Date(item.created_at).toLocaleString('pt-BR');
|
||||
const div = document.createElement('div');
|
||||
div.className = 'history-item-card';
|
||||
div.style.cssText = 'background: rgba(255,255,255,0.02); padding: 14px; border-radius: 8px; border: 1px solid var(--border-light); display: flex; flex-direction: column; gap: 8px; cursor: pointer; position: relative;';
|
||||
div.innerHTML = `
|
||||
<div style="display: flex; justify-content: space-between; align-items: flex-start; padding-right: 30px;">
|
||||
<strong style="color: var(--brand-green); font-size: 0.95rem;">${item.faixa_etaria} (${item.estilo})</strong>
|
||||
<span style="font-size: 0.75rem; color: var(--text-secondary);">${date}</span>
|
||||
</div>
|
||||
<p style="margin: 0; font-size: 0.85rem; color: var(--text-primary); opacity: 0.9;">Tema: ${item.tema}</p>
|
||||
<button class="btn-delete-historia" data-id="${item.id}" style="position: absolute; top: 12px; right: 12px; background: transparent; border: none; color: #ef4444; cursor: pointer; font-size: 1.1rem; padding: 4px; border-radius: 4px;" title="Excluir">🗑️</button>
|
||||
`;
|
||||
div.addEventListener('click', async (e) => {
|
||||
if (e.target.closest('.btn-delete-historia')) {
|
||||
e.stopPropagation();
|
||||
if (confirm('Tem certeza que deseja excluir?')) {
|
||||
try {
|
||||
const delRes = await fetch(`/api/historias/${item.id}`, { method: 'DELETE' });
|
||||
if (delRes.ok) { showToast('História excluída.', 'success'); loadHistoriaHistory(); }
|
||||
} catch (err) { showToast('Erro ao excluir.', 'error'); }
|
||||
}
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const res = await fetch(`/api/historias/${item.id}`);
|
||||
const detail = await res.json();
|
||||
if (res.ok) {
|
||||
currentHistoria = detail.historia;
|
||||
historiaTextOutput.innerHTML = window.marked ? marked.parse(currentHistoria) : currentHistoria;
|
||||
historiaResultArea.style.display = 'flex';
|
||||
historiaHistoryModal.style.display = 'none';
|
||||
}
|
||||
} catch (err) { showToast('Erro ao carregar.', 'error'); }
|
||||
});
|
||||
listContainer.appendChild(div);
|
||||
});
|
||||
} else {
|
||||
listContainer.innerHTML = '<p style="text-align:center; color:var(--text-secondary);">Nenhum histórico.</p>';
|
||||
}
|
||||
} catch (err) { listContainer.innerHTML = '<p style="text-align:center; color:#ef4444;">Erro ao carregar.</p>'; }
|
||||
}
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', initApp);
|
||||
|
||||
Reference in New Issue
Block a user