SteelBase/public/docs-historicos/DEBUG-CANTONEIRAS.md

🐛 Debug - Cantoneiras Não Carregam

🔍 Checklist de Verificação

1. Abrir Console do Navegador

Pressione F12 e vá para a aba "Console"

2. Verificar Mensagens de Inicialização

Ao carregar a página, você deve ver:

✅ Data Manager carregado e disponível globalmente
🗄️ Inicializando Data Manager v1.0.0
📥 Cache vazio ou desatualizado. Carregando dados...
🔄 Iniciando atualização completa dos dados...
📊 Carregando Cantoneiras...
✅ Cantoneiras: 39 itens carregados

Se NÃO ver essas mensagens:

• ❌ Scripts não foram carregados corretamente
• ❌ Verifique se os arquivos existem em js/database/

3. Acessar Menu Cantoneiras

Clique em: MATERIAIS → Catálogo de Perfis → Cantoneiras

No console, você deve ver:

📊 carregarCantoneiras() - INICIANDO
🔍 Verificando disponibilidade:
  - carregarCantoneirasV2: function
  - window.dataManager: object
  - exibirCantoneirasV2: function
✅ Usando Data Manager V2
🔧 carregarCantoneirasV2() - Nova versão com Data Manager
✅ Elemento tbody encontrado
📊 Carregando cantoneiras do banco de dados...
✅ 39 cantoneiras carregadas do Data Manager
📋 Exibindo 39 cantoneiras na tabela
✅ Tabela atualizada com sucesso

4. Verificar Erros Comuns

Erro: "dataManager não existe"

Causa: Script não carregado ou erro de inicialização
Solução:

// No console, execute:
console.log('Data Manager:', window.dataManager);
console.log('Funções V2:', typeof carregarCantoneirasV2);

Se retornar undefined, recarregue a página com Ctrl + F5

Erro: "cantoneiras-tbody não encontrado"

Causa: Elemento HTML não existe ou timing incorreto
Solução:

// No console, execute:
console.log('Tbody:', document.getElementById('cantoneiras-tbody'));

Se retornar null, o HTML não foi renderizado ainda.

Erro: "HTTP 404" ao carregar CSV

Causa: Arquivo CSV não existe
Solução: Verificar se existe BD/perfis/cantoneiras_brasil_completo.csv

Erro: "Parsing error" no CSV

Causa: Formato do CSV incorreto
Solução: Verificar se CSV tem cabeçalho correto

---

🔧 Testes Manuais no Console

Teste 1: Verificar Data Manager

// Copie e cole no console:
console.log('=== TESTE DATA MANAGER ===');
console.log('1. Data Manager existe?', !!window.dataManager);
console.log('2. Versão:', window.dataManager?.version);
console.log('3. Stats:', window.dataManager?.getCacheStats());

Resultado esperado:

=== TESTE DATA MANAGER ===
1. Data Manager existe? true
2. Versão: 1.0.0
3. Stats: {version: "1.0.0", hasCache: true, ...}

Teste 2: Verificar Funções V2

console.log('=== TESTE FUNÇÕES V2 ===');
console.log('1. carregarCantoneirasV2:', typeof carregarCantoneirasV2);
console.log('2. exibirCantoneirasV2:', typeof exibirCantoneirasV2);
console.log('3. filtrarCantoneirasV2:', typeof filtrarCantoneirasV2);

Resultado esperado:

=== TESTE FUNÇÕES V2 ===
1. carregarCantoneirasV2: function
2. exibirCantoneirasV2: function
3. filtrarCantoneirasV2: function

Teste 3: Carregar Dados Manualmente

// Forçar carregamento:
await window.dataManager.getData('cantoneiras').then(dados => {
    console.log('✅ Dados carregados:', dados.length, 'itens');
    console.log('Primeiro item:', dados[0]);
});

Resultado esperado:

✅ Dados carregados: 39 itens
Primeiro item: {id: "l25_25_3", nome: "L25x25x3", ...}

Teste 4: Exibir na Tabela Manualmente

// Carregar e exibir:
await carregarCantoneirasV2();

Resultado esperado:

• Tabela preenchida com 39 linhas
• Dados visíveis

---

🚨 Soluções Rápidas

Solução 1: Recarregar Scripts

// No console:
location.reload(true); // Força reload sem cache

Solução 2: Limpar Cache e Recarregar

// No console:
localStorage.clear();
location.reload();

Solução 3: Forçar Atualização de Dados

// No console:
await window.dataManager.updateAllData();

Solução 4: Carregar Método Legado

// No console:
async function carregarLegado() {
    const response = await fetch('BD/perfis/cantoneiras_brasil_completo.csv');
    const csvText = await response.text();
    const linhas = csvText.trim().split('\n');
    
    const dados = [];
    for (let i = 1; i < linhas.length; i++) {
        const linha = linhas[i].trim();
        if (!linha) continue;
        
        const colunas = linha.split(',');
        if (colunas.length >= 9) {
            dados.push({
                id: colunas[0].trim(),
                nome: colunas[1].trim(),
                lado_mm: parseFloat(colunas[2]),
                espessura_mm: parseFloat(colunas[3]),
                peso_kg_m: parseFloat(colunas[4]),
                area_cm2: parseFloat(colunas[5]),
                momento_inercia_cm4: parseFloat(colunas[6]),
                raio_giracao_cm: parseFloat(colunas[7]),
                tipo: colunas[8].trim()
            });
        }
    }
    
    console.log('✅ Carregado:', dados.length, 'cantoneiras');
    
    // Exibir na tabela
    const tbody = document.getElementById('cantoneiras-tbody');
    if (tbody) {
        tbody.innerHTML = dados.map(item => `
            <tr>
                <td><strong>${item.nome}</strong></td>
                <td>${item.lado_mm}</td>
                <td>${item.espessura_mm}</td>
                <td>${item.peso_kg_m.toFixed(2)}</td>
                <td>${item.area_cm2.toFixed(2)}</td>
                <td>${item.momento_inercia_cm4.toFixed(2)}</td>
                <td>${item.raio_giracao_cm.toFixed(2)}</td>
                <td><span class="badge">${item.tipo}</span></td>
                <td><button class="btn btn-sm">Ver</button></td>
            </tr>
        `).join('');
        console.log('✅ Tabela preenchida!');
    } else {
        console.error('❌ Elemento tbody não encontrado!');
    }
}

// Executar:
await carregarLegado();

---

📋 Checklist de Arquivos

Verifique se estes arquivos existem:

• js/database/data-manager.js
• js/database/perfis-loader.js
• js/database/admin-panel.js
• BD/perfis/cantoneiras_brasil_completo.csv

Verificar no Console:

// Verificar se scripts foram carregados:
console.log('Scripts carregados:');
console.log('- data-manager.js:', !!window.dataManager);
console.log('- perfis-loader.js:', typeof carregarCantoneirasV2);
console.log('- admin-panel.js:', typeof abrirPainelDados);

---

🎯 Ordem de Carregamento Correta

No index.html, os scripts devem estar nesta ordem:

<!-- 1. Data Manager (PRIMEIRO) -->
<script src="js/database/data-manager.js"></script>

<!-- 2. Perfis Loader (SEGUNDO) -->
<script src="js/database/perfis-loader.js"></script>

<!-- 3. Admin Panel (TERCEIRO) -->
<script src="js/database/admin-panel.js"></script>

<!-- 4. App.js (QUARTO) -->
<script src="app.js"></script>

<!-- 5. Perfis Catalog (QUINTO) -->
<script src="js/sections/perfis-catalog.js"></script>

---

🔍 Debug Avançado

Ativar Logs Detalhados:

// No console, antes de carregar cantoneiras:
window.DEBUG_MODE = true;

Verificar Ordem de Execução:

console.log('=== ORDEM DE CARREGAMENTO ===');
console.log('1. Data Manager:', !!window.dataManager);
console.log('2. Perfis Loader:', typeof carregarCantoneirasV2);
console.log('3. Admin Panel:', typeof abrirPainelDados);
console.log('4. App.js:', typeof showSection);
console.log('5. Perfis Catalog:', typeof getCantoneirasContent);

Verificar Timing:

// Medir tempo de carregamento:
console.time('Carregamento Cantoneiras');
await carregarCantoneiras();
console.timeEnd('Carregamento Cantoneiras');

---

✅ Resultado Esperado

Quando tudo estiver funcionando, você verá:

1. No Console:

   • ✅ Mensagens de inicialização
   • ✅ Dados carregados
   • ✅ Tabela atualizada
   • ❌ Nenhum erro

2. Na Tela:

   • ✅ Tabela com 39 cantoneiras
   • ✅ Dados corretos (nome, dimensões, peso)
   • ✅ Badges coloridos
   • ✅ Botões funcionando

3. No Header:

   • ✅ Badge mostra "✅ Cache Ativo"
   • ✅ Botão 🗄️ Dados visível

---

📞 Se Nada Funcionar

Execute este comando no console para diagnóstico completo:

console.log('=== DIAGNÓSTICO COMPLETO ===');
console.log('\n1. SCRIPTS:');
console.log('  Data Manager:', !!window.dataManager);
console.log('  Perfis Loader:', typeof carregarCantoneirasV2);
console.log('  Admin Panel:', typeof abrirPainelDados);

console.log('\n2. ELEMENTOS HTML:');
console.log('  tbody:', !!document.getElementById('cantoneiras-tbody'));
console.log('  badge:', !!document.getElementById('cache-status-badge'));
console.log('  fab:', !!document.querySelector('.fab-data-admin'));

console.log('\n3. CACHE:');
const stats = window.dataManager?.getCacheStats();
console.log('  Tem cache?', stats?.hasCache);
console.log('  Cantoneiras:', stats?.types?.cantoneiras);

console.log('\n4. ARQUIVOS:');
fetch('BD/perfis/cantoneiras_brasil_completo.csv')
    .then(r => console.log('  CSV existe?', r.ok))
    .catch(e => console.log('  CSV erro:', e.message));

console.log('\n5. FUNÇÕES:');
console.log('  carregarCantoneiras:', typeof carregarCantoneiras);
console.log('  exibirCantoneiras:', typeof exibirCantoneiras);
console.log('  filtrarCantoneiras:', typeof filtrarCantoneiras);

Copie o resultado e me envie para análise!

---

Boa sorte com o debug! 🐛🔧