guilhermemfbastos/CodeSearch_Engine

1/**2 * CodeSearch Engine - Logic Controller3 * Responsável por conectar a UI ao Backend FastAPI4 */5 6let localCache = [];7let debounceTimer;8 9// 1. Função de Busca com Debounce (para não travar seu PC de 4GB)10function handleSearch() {11    clearTimeout(debounceTimer);12    debounceTimer = setTimeout(() => {13        refreshData();14    }, 500); // Espera 500ms após parar de digitar15}16 17// 2. Busca os dados no Backend18async function refreshData() {19    const query = document.getElementById('search-input').value;20    const resultsContainer = document.getElementById('results-list');21    const statsEl = document.getElementById('total-db');22    const logsEl = document.getElementById('logs');23 24    try {25        const response = await fetch(`/api/data?q=${encodeURIComponent(query)}`);26        const data = await response.json();27 28        // Atualiza estatísticas e logs29        if (statsEl) statsEl.innerText = data.total.toLocaleString();30        if (logsEl) {31            logsEl.innerHTML = data.logs.map(log => `32                <div class="log-item ${log.includes('✅') ? 'success' : ''}">${log}</div>33            `).join('');34        }35 36        localCache = data.results;37        renderResults(resultsContainer);38 39    } catch (error) {40        console.error("Erro ao conectar com o backend:", error);41    }42}43 44// 3. Renderiza os cards na tela45function renderResults(container) {46    if (localCache.length === 0) {47        container.innerHTML = `<div class="empty-state">O Pato ainda não encontrou nada para essa busca... 🦆</div>`;48        return;49    }50 51    container.innerHTML = localCache.map((item, i) => `52        <div class="card-item" id="snippet-${i}">53            <div class="card-header" onclick="toggleCodeBlock(${i})">54                <div class="info">55                    <span class="badge">${item.language.toUpperCase()}</span>56                    <h3 class="title">${item.title}</h3>57                    <p class="url">${item.source_url}</p>58                </div>59                <button class="btn-copy" onclick="event.stopPropagation(); copyToClipboard(${i}, this)">60                    COPIAR61                </button>62            </div>63            <div id="code-area-${i}" class="code-body hidden">64                <pre class="language-${item.language}"><code class="language-${item.language}">${escapeHTML(item.code)}</code></pre>65            </div>66        </div>67    `).join('');68 69    // Aciona o highlight do Prism.js se estiver presente70    if (window.Prism) Prism.highlightAll();71}72 73// 4. Funções Utilitárias74function toggleCodeBlock(index) {75    const element = document.getElementById(`code-area-${index}`);76    if (element) element.classList.toggle('hidden');77}78 79function copyToClipboard(index, button) {80    const snippet = localCache[index];81    if (!snippet) return;82 83    navigator.clipboard.writeText(snippet.code).then(() => {84        const originalText = button.innerText;85        button.innerText = "COPIADO!";86        button.classList.add('success');87        setTimeout(() => {88            button.innerText = originalText;89            button.classList.remove('success');90        }, 2000);91    });92}93 94function escapeHTML(str) {95    return str.replace(/[&<>"']/g, m => ({96        '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'97    })[m]);98}99 100// Inicialização automática101window.onload = () => {102    refreshData();103    setInterval(refreshData, 5000); // Atualiza estatísticas e logs a cada 5s104    105    // Adiciona evento ao input de busca106    const input = document.getElementById('search-input');107    if (input) input.addEventListener('input', handleSearch);108};