271 lines
10 KiB
HTML
271 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="pt-BR">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Teste Cantoneiras</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
padding: 20px;
|
|
background: #1a1a1a;
|
|
color: #fff;
|
|
}
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-top: 20px;
|
|
}
|
|
th, td {
|
|
border: 1px solid #444;
|
|
padding: 12px;
|
|
text-align: left;
|
|
}
|
|
th {
|
|
background: #2a2a2a;
|
|
}
|
|
tr:hover {
|
|
background: #2a2a2a;
|
|
}
|
|
.badge {
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
}
|
|
.badge-info { background: #3b82f6; }
|
|
.badge-success { background: #22c55e; }
|
|
.badge-warning { background: #f59e0b; }
|
|
.badge-error { background: #ef4444; }
|
|
#status {
|
|
padding: 12px;
|
|
background: #2a2a2a;
|
|
border-radius: 8px;
|
|
margin-bottom: 20px;
|
|
}
|
|
button {
|
|
padding: 10px 20px;
|
|
background: #3b82f6;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
margin-right: 10px;
|
|
}
|
|
button:hover {
|
|
background: #2563eb;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>🔧 Teste de Carregamento - Cantoneiras</h1>
|
|
|
|
<div id="status">
|
|
<strong>Status:</strong> <span id="status-text">Aguardando...</span>
|
|
</div>
|
|
|
|
<div>
|
|
<button onclick="testarCarregamento()">🔄 Testar Carregamento</button>
|
|
<button onclick="limparTabela()">🗑️ Limpar Tabela</button>
|
|
<button onclick="verificarArquivo()">📄 Verificar CSV</button>
|
|
</div>
|
|
|
|
<h2>📊 Tabela de Cantoneiras</h2>
|
|
<div style="overflow-x: auto;">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Nome</th>
|
|
<th>Lado (mm)</th>
|
|
<th>Espessura (mm)</th>
|
|
<th>Peso (kg/m)</th>
|
|
<th>Área (cm²)</th>
|
|
<th>Momento Inércia (cm⁴)</th>
|
|
<th>Raio Giração (cm)</th>
|
|
<th>Tipo</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="tabela-tbody">
|
|
<tr>
|
|
<td colspan="9" style="text-align: center; padding: 40px;">
|
|
Clique em "Testar Carregamento" para carregar os dados
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div id="debug" style="margin-top: 20px; padding: 12px; background: #000; border-radius: 8px; font-family: monospace; font-size: 12px;">
|
|
<strong>Console de Debug:</strong>
|
|
<div id="debug-log"></div>
|
|
</div>
|
|
|
|
<script>
|
|
function log(msg) {
|
|
const debugLog = document.getElementById('debug-log');
|
|
const time = new Date().toLocaleTimeString();
|
|
debugLog.innerHTML += `<div>[${time}] ${msg}</div>`;
|
|
console.log(msg);
|
|
}
|
|
|
|
function setStatus(text, color = '#fff') {
|
|
document.getElementById('status-text').textContent = text;
|
|
document.getElementById('status-text').style.color = color;
|
|
}
|
|
|
|
function getBadgeColor(tipo) {
|
|
const cores = {
|
|
'Pequena': 'info',
|
|
'Média': 'success',
|
|
'Grande': 'warning',
|
|
'Muito Grande': 'warning',
|
|
'Extra-Grande': 'error',
|
|
'Massiva': 'error'
|
|
};
|
|
return cores[tipo] || 'info';
|
|
}
|
|
|
|
async function verificarArquivo() {
|
|
log('🔍 Verificando arquivo CSV...');
|
|
setStatus('Verificando arquivo...', '#f59e0b');
|
|
|
|
try {
|
|
const response = await fetch('BD/perfis/cantoneiras_brasil_completo.csv');
|
|
log(`📡 Status HTTP: ${response.status} ${response.statusText}`);
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
|
}
|
|
|
|
const csvText = await response.text();
|
|
const linhas = csvText.trim().split('\n');
|
|
|
|
log(`✅ Arquivo encontrado!`);
|
|
log(`📊 Total de linhas: ${linhas.length}`);
|
|
log(`📋 Cabeçalho: ${linhas[0]}`);
|
|
log(`📋 Primeira linha de dados: ${linhas[1]}`);
|
|
|
|
setStatus(`Arquivo OK - ${linhas.length - 1} registros`, '#22c55e');
|
|
|
|
} catch (error) {
|
|
log(`❌ Erro: ${error.message}`);
|
|
setStatus(`Erro: ${error.message}`, '#ef4444');
|
|
}
|
|
}
|
|
|
|
async function testarCarregamento() {
|
|
log('🚀 Iniciando teste de carregamento...');
|
|
setStatus('Carregando...', '#f59e0b');
|
|
|
|
const tbody = document.getElementById('tabela-tbody');
|
|
tbody.innerHTML = '<tr><td colspan="9" style="text-align: center;">⏳ Carregando dados...</td></tr>';
|
|
|
|
try {
|
|
// 1. Buscar CSV
|
|
log('📥 Buscando arquivo CSV...');
|
|
const response = await fetch('BD/perfis/cantoneiras_brasil_completo.csv');
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
|
}
|
|
|
|
log('✅ Arquivo recebido');
|
|
|
|
// 2. Ler conteúdo
|
|
const csvText = await response.text();
|
|
log(`📄 Tamanho do arquivo: ${csvText.length} bytes`);
|
|
|
|
// 3. Processar linhas
|
|
const linhas = csvText.trim().split('\n');
|
|
log(`📊 Total de linhas: ${linhas.length}`);
|
|
|
|
if (linhas.length < 2) {
|
|
throw new Error('Arquivo CSV vazio ou inválido');
|
|
}
|
|
|
|
// 4. Processar dados
|
|
const dados = [];
|
|
const cabecalho = linhas[0].split(',');
|
|
log(`📋 Cabeçalho: ${cabecalho.join(', ')}`);
|
|
|
|
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()
|
|
});
|
|
}
|
|
}
|
|
|
|
log(`✅ Processados: ${dados.length} registros`);
|
|
log(`📋 Primeiro registro: ${JSON.stringify(dados[0])}`);
|
|
|
|
// 5. Exibir na tabela
|
|
if (dados.length === 0) {
|
|
tbody.innerHTML = '<tr><td colspan="9" style="text-align: center; color: #ef4444;">❌ Nenhum dado encontrado</td></tr>';
|
|
setStatus('Nenhum dado encontrado', '#ef4444');
|
|
return;
|
|
}
|
|
|
|
log('🎨 Gerando HTML da tabela...');
|
|
const html = dados.map(item => `
|
|
<tr>
|
|
<td>${item.id}</td>
|
|
<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 badge-${getBadgeColor(item.tipo)}">${item.tipo}</span></td>
|
|
</tr>
|
|
`).join('');
|
|
|
|
tbody.innerHTML = html;
|
|
|
|
log(`✅ Tabela preenchida com ${dados.length} registros`);
|
|
setStatus(`✅ ${dados.length} cantoneiras carregadas`, '#22c55e');
|
|
|
|
} catch (error) {
|
|
log(`❌ ERRO: ${error.message}`);
|
|
log(`Stack: ${error.stack}`);
|
|
tbody.innerHTML = `
|
|
<tr>
|
|
<td colspan="9" style="text-align: center; padding: 20px; color: #ef4444;">
|
|
❌ Erro ao carregar dados: ${error.message}
|
|
</td>
|
|
</tr>
|
|
`;
|
|
setStatus(`Erro: ${error.message}`, '#ef4444');
|
|
}
|
|
}
|
|
|
|
function limparTabela() {
|
|
document.getElementById('tabela-tbody').innerHTML = '<tr><td colspan="9" style="text-align: center;">Tabela limpa</td></tr>';
|
|
document.getElementById('debug-log').innerHTML = '';
|
|
setStatus('Aguardando...', '#fff');
|
|
log('🗑️ Tabela e log limpos');
|
|
}
|
|
|
|
// Carregar automaticamente ao abrir a página
|
|
window.addEventListener('load', () => {
|
|
log('🌐 Página carregada');
|
|
log('📍 URL atual: ' + window.location.href);
|
|
log('📂 Caminho do CSV: BD/perfis/cantoneiras_brasil_completo.csv');
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|