Files
SteelBase/public/docs-historicos/AJUDA-DINAMICA-ABAS.md

253 lines
7.0 KiB
Markdown
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# ✅ Sistema de Ajuda Dinâmica por Aba - IMPLEMENTADO
## Problema Resolvido
Antes, o ícone de ajuda (?) nos menus **SOLDAGEM** e **CONEXÕES** mostrava apenas informações da primeira aba, mesmo quando o usuário navegava para outras abas.
## Solução Implementada
Agora cada aba tem seu próprio conteúdo de ajuda específico que é atualizado automaticamente quando o usuário troca de aba.
---
## 📋 MENU SOLDAGEM - 6 Abas com Ajuda Individual
### Ícone Principal (ao abrir SOLDAGEM)
- **ID:** `preaquecimento`
- **Conteúdo:** Informações sobre Pré-Aquecimento AWS D1.1
### Abas e seus Conteúdos de Ajuda:
1. **🌡️ Pré-Aquecimento**
- **ID:** `preaquecimento`
- **Ajuda:** Cálculo de temperatura mínima, CEV, espessura, restrição
- **Normas:** AWS D1.1, NBR 8800
2. **⚡ Filete**
- **ID:** `filete`
- **Ajuda:** Dimensionamento de soldas de filete, perna necessária
- **Normas:** AWS D1.1, NBR 8800
3. **🔥 Energia**
- **ID:** `energia`
- **Ajuda:** Heat Input, controle de resfriamento, voltagem/corrente
- **Normas:** AWS D1.1, ISO 17663
4. **📊 Consumo**
- **ID:** `consumo-eletrodo`
- **Ajuda:** Cálculo de consumo de eletrodos, perdas, eficiência
- **Normas:** AWS Welding Handbook
5. **🔄 Sequência**
- **ID:** `sequencia-soldagem`
- **Ajuda:** Ordem de soldagem, controle de distorções
- **Normas:** AWS D1.1
6. **📋 Padrões**
- **ID:** `padroes-soldagem`
- **Ajuda:** Normas, símbolos, qualificação, inspeção
- **Normas:** AWS D1.1, ASME IX, NBR 8800
---
## 🔩 MENU CONEXÕES (Parafusos) - 5 Abas com Ajuda Individual
### Ícone Principal (ao abrir PARAFUSOS)
- **ID:** `parafusos-cisalhamento`
- **Conteúdo:** Informações sobre Cisalhamento de Parafusos
### Abas e seus Conteúdos de Ajuda:
1. **1⃣ Cisalhamento**
- **ID:** `parafusos-cisalhamento`
- **Ajuda:** Resistência ao cisalhamento, planos de corte, A325/A490
- **Normas:** NBR 8800, AISC 360
2. **2⃣ Esmagamento**
- **ID:** `parafusos-esmagamento`
- **Ajuda:** Bearing, distância de borda, espaçamento
- **Normas:** NBR 8800, AISC 360
3. **3⃣ Bloco**
- **ID:** `parafusos-bloco`
- **Ajuda:** Ruptura em bloco, área líquida, cisalhamento + tração
- **Normas:** AISC 360, NBR 8800
4. **4⃣ Layout**
- **ID:** `layout`
- **Ajuda:** Layout de furação (já existia)
- **Normas:** AISC, NBR 8800
5. **5⃣ vs Solda**
- **ID:** `parafuso-vs-solda`
- **Ajuda:** Comparação parafuso vs solda (já existia)
- **Normas:** AWS D1.1, NBR 8800
---
## 🔧 Como Funciona Tecnicamente
### 1. Função `switchWeldTab(index)` - SOLDAGEM
```javascript
function switchWeldTab(index) {
// ... código de troca de aba ...
// Atualiza botão de ajuda para a aba ativa
const tabIds = ['preaquecimento', 'filete', 'energia', 'consumo-eletrodo', 'sequencia-soldagem', 'padroes-soldagem'];
addHelpButton(tabIds[index]);
}
```
### 2. Função `switchTab(tabIndex)` - PARAFUSOS
```javascript
function switchTab(tabIndex) {
// ... código de troca de aba ...
// Atualiza botão de ajuda para a aba ativa
const tabIds = ['parafusos-cisalhamento', 'parafusos-esmagamento', 'parafusos-bloco', 'layout', 'parafuso-vs-solda'];
if (tabIds[tabIndex]) {
addHelpButton(tabIds[tabIndex]);
}
}
```
### 3. Função `showSection(sectionId)` - Carregamento Inicial
```javascript
function showSection(sectionId) {
// ... código de carregamento ...
setTimeout(() => {
// Para seções com abas, mostra ajuda da primeira aba
if (sectionId === 'preaquecimento') {
addHelpButton('preaquecimento'); // Primeira aba de SOLDAGEM
} else if (sectionId === 'parafusos') {
addHelpButton('parafusos-cisalhamento'); // Primeira aba de PARAFUSOS
} else {
addHelpButton(sectionId);
}
}, 100);
}
```
---
## 📚 Conteúdo de Ajuda Adicionado
### Cada entrada no `ajudaDatabase` contém:
- **titulo:** Título da ferramenta
- **oQueE:** Definição técnica
- **paraQueServe:** Objetivo e aplicação
- **quandoUsar:** Situações de uso
- **avisos:** Lista de alertas importantes (4-6 itens)
- **campos:** Array de campos com:
- nome
- unidade
- significado
- intervalo típico
- dica prática
- **resultados:** HTML com fórmulas e interpretação
- **referencias:** Array de normas e documentos
- **manualRelacionado:** Links para manual técnico
---
## ✅ Resultado Final
### Experiência do Usuário:
1. **Usuário abre SOLDAGEM**
- Vê ícone (?) no canto superior direito
- Clica: vê ajuda sobre **Pré-Aquecimento**
2. **Usuário clica na aba "Filete"**
- Ícone (?) continua visível
- Clica: vê ajuda sobre **Soldas de Filete**
3. **Usuário clica na aba "Energia"**
- Ícone (?) continua visível
- Clica: vê ajuda sobre **Heat Input**
4. **E assim por diante...**
### Benefícios:
**Ajuda contextual** - sempre relevante à aba atual
**Sem confusão** - usuário vê informação correta
**Profissional** - cada ferramenta tem documentação completa
**Educativo** - usuário aprende sobre cada cálculo
**Completo** - 11 novas entradas de ajuda adicionadas
---
## 🎯 Ferramentas com Ajuda Completa
### Total: **32 ferramentas** com ajuda individual
#### MATERIAIS (4)
- ✅ CEV Avançado
- ✅ Seletor de Aço
- ✅ Equivalências
- ✅ Comparativo
#### CONEXÕES (5)
- ✅ Cisalhamento de Parafusos
- ✅ Esmagamento (Bearing)
- ✅ Ruptura em Bloco
- ✅ Layout de Furação
- ✅ Parafuso vs Solda
#### SOLDAGEM (6)
- ✅ Pré-Aquecimento
- ✅ Filete
- ✅ Energia (Heat Input)
- ✅ Consumo de Eletrodos
- ✅ Sequência de Soldagem
- ✅ Padrões e Normas
#### ENSAIOS (4)
- ✅ Dureza
- ✅ Charpy
- ✅ Certificado
- ✅ Ultrassom
#### PINTURA (6)
- ✅ Área de Pintura
- ✅ Consumo de Tinta
- ✅ Galvanização
- ✅ Custo de Pintura
- ✅ Secagem
- ✅ Inspeção
#### ORÇAMENTO (3)
- ✅ Orçamento Detalhado
- ✅ Peso e Rigging
- ✅ Referências Técnicas
---
## 🧪 Como Testar
1. Abra o aplicativo: `http://localhost:8000`
2. Clique em **SOLDAGEM** no menu lateral
3. Observe o ícone (?) no canto superior direito
4. Clique no (?): deve mostrar ajuda sobre **Pré-Aquecimento**
5. Clique na aba **Filete**
6. Clique no (?): deve mostrar ajuda sobre **Soldas de Filete**
7. Repita para todas as 6 abas de SOLDAGEM
8. Faça o mesmo teste para **CONEXÕES** (5 abas)
---
## 📝 Arquivos Modificados
- **app.js**
- Adicionado 11 novas entradas no `ajudaDatabase`
- Modificado `switchWeldTab()` para atualizar ajuda
- Modificado `switchTab()` para atualizar ajuda
- Modificado `showSection()` para carregar ajuda da primeira aba
---
**Desenvolvido com ❤️ para AÇO CALC PRO v7.5**