SteelBase/public/docs-historicos/SOLUCAO-FINAL-TIMING.md

Solução Final - Problema de Timing

Problema Identificado

Através dos logs do console, identificamos que:

1. ✅ Dados carregam corretamente - 39 cantoneiras
2. ✅ Função exibirCantoneiras() é chamada
3. ❌ MAS a tabela não é preenchida

Causa Raiz: TIMING

O problema é a ordem de execução:

1. getCantoneirasContent() chamada (linha 13)
2. Seção cantoneiras carregada (linha 41)  
3. Seção cantoneiras exibida (linha 52)
4. Carregando cantoneiras do cache (linha 660) ← TARDE DEMAIS!

A função carregarCantoneiras() está sendo chamada ANTES do HTML ser renderizado no DOM!

Soluções Aplicadas

1. Aumentar Timeout e Adicionar Retry

setTimeout(() => {
    if (sectionId === 'cantoneiras' && typeof carregarCantoneiras === 'function') {
        const tbody = document.getElementById('cantoneiras-tbody');
        if (tbody) {
            carregarCantoneiras();
        } else {
            // RETRY após 500ms
            setTimeout(() => {
                const tbody2 = document.getElementById('cantoneiras-tbody');
                if (tbody2) {
                    carregarCantoneiras();
                }
            }, 500);
        }
    }
}, 200); // Aumentado de 100ms para 200ms

2. Adicionar Função switchPerfilTab()

A função estava sendo chamada mas não existia:

function switchPerfilTab(index) {
    // Atualizar botões
    document.querySelectorAll('.tab-btn').forEach((btn, i) => {
        if (i === index) {
            btn.classList.add('active');
        } else {
            btn.classList.remove('active');
        }
    });
    
    // Atualizar conteúdo
    document.querySelectorAll('.tab-content').forEach((content, i) => {
        if (i === index) {
            content.classList.add('active');
        } else {
            content.classList.remove('active');
        }
    });
}

3. Adicionar Função calcularPrecoCantoneira()

Função para a calculadora de preços:

function calcularPrecoCantoneira() {
    const peso = parseFloat(document.getElementById('calc-peso')?.value) || 0;
    const comprimento = parseFloat(document.getElementById('calc-comprimento')?.value) || 0;
    const quantidade = parseInt(document.getElementById('calc-quantidade')?.value) || 0;
    const precoKg = parseFloat(document.getElementById('calc-preco-kg')?.value) || 0;
    
    // Cálculos...
    const pesoTotal = peso * comprimento * quantidade;
    const precoTotal = pesoTotal * precoKg;
    
    // Exibir resultado...
}

Como Testar

1. Limpar Cache

Ctrl+Shift+Delete → Limpar tudo

2. Hard Refresh

Ctrl+Shift+R (ou F5 várias vezes)

3. Abrir Console

F12 → Aba Console

4. Testar Cantoneiras

1. Clique em "Cantoneiras"

2. Aguarde 1 segundo

3. Verifique no console:

   🔧 Chamando carregarCantoneiras()
   📋 Elemento tbody encontrado: SIM
   📊 Carregando dados das cantoneiras...
   ✅ 39 cantoneiras carregadas
   📋 exibirCantoneiras() chamada com 39 itens
   ✅ Elemento tbody encontrado: <tbody>
   ✅ Gerando HTML para 39 cantoneiras...
   

4. A tabela deve aparecer com 39 linhas

5. Testar Tabs

1. Clique nas tabs: "Especificações", "Fabricantes", "Preços 2025", "Aplicações"
2. O conteúdo deve trocar
3. Verifique no console: "🔄 Trocando para tab X"

6. Testar Calculadora

1. Vá na tab "Preços 2025"
2. Preencha os campos
3. Clique em "Calcular Preço Total"
4. Deve mostrar o resultado

Se Ainda Não Funcionar

Verificar no Console:

Se aparecer:

❌ Elemento tbody não existe! Tentando novamente em 500ms...
✅ Elemento encontrado na segunda tentativa

Significa que o timeout de 200ms não foi suficiente. Nesse caso:

1. Aumentar o timeout inicial para 300ms ou 500ms
2. Ou usar MutationObserver para detectar quando o elemento é adicionado

Solução Alternativa: MutationObserver

Se o problema persistir, podemos usar um observer:

function aguardarElemento(id, callback) {
    const elemento = document.getElementById(id);
    if (elemento) {
        callback(elemento);
        return;
    }
    
    const observer = new MutationObserver(() => {
        const el = document.getElementById(id);
        if (el) {
            observer.disconnect();
            callback(el);
        }
    });
    
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
}

// Uso:
aguardarElemento('cantoneiras-tbody', () => {
    carregarCantoneiras();
});

Problemas Relacionados Resolvidos

1. ✅ Accordion não funciona - Função switchPerfilTab() criada
2. ✅ Calculadora não funciona - Função calcularPrecoCantoneira() criada
3. ✅ Timing do carregamento - Retry adicionado

Arquivos Modificados

1. app.js - Timeout aumentado + retry logic
2. js/sections/perfis-catalog.js - Funções switchPerfilTab() e calcularPrecoCantoneira() adicionadas

Próximos Passos

Após confirmar que as cantoneiras funcionam:

1. Implementar os outros 9 tipos de perfis
2. Usar o mesmo padrão de timing
3. Testar cada um individualmente