Initial commit SteelBase - Oficiais e Funcionando
This commit is contained in:
Marcos
270
teste-cantoneiras.html
Normal file
270
teste-cantoneiras.html
Normal file
@@ -0,0 +1,270 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user