📋
Sequência de entrega
```
O card novo vai entre o `` (que fecha o bloco do resumo) e o `
` da sequência.
- [ ] **Verificar sintaxe**
```bash
cd /home/goldie/www/genesis
php -l componentes/Missoes/Logistica/sinais/Edicaorota/html/editar_rota.php
```
Esperado: `No syntax errors detected`
- [ ] **Commit**
```bash
cd /home/goldie/www/genesis
git add componentes/Missoes/Logistica/sinais/Edicaorota/html/editar_rota.php
git commit -m "feat(edicaorota): show observacao_operador card in driver route edit view"
```
---
### Task 7: Sub-modal HTML + CSS em `central.php`
**Files:**
- Modify: `componentes/Missoes/Logistica/sinais/Central/html/central.php`
**Parte A — ícone no header do modal de liberação**
- [ ] **Adicionar botão de bloco de notas no header**
Localizar a linha (≈2683–2685):
```html
```
Substituir por:
```html
```
**Parte B — sub-modal HTML**
- [ ] **Adicionar sub-modal após o fechamento do `#liberar-motorista-modal`**
Localizar (≈linha 2733):
```html
```
(a linha que fecha o `#liberar-motorista-modal`)
Inserir imediatamente após:
```html
```
**Parte C — CSS**
- [ ] **Adicionar CSS no bloco `` logo após as regras `.g-liberar-modal-*`). Inserir antes desse ``:
```css
/* Header: flex para alinhar título + ações (ícone obs + fechar) */
.g-liberar-modal-header-acoes {
display: flex;
align-items: center;
gap: 4px;
margin-left: auto;
}
/* Botão de observação — ícone discreto, fica âmbar quando há texto salvo */
.g-liberar-obs-btn {
background: transparent;
border: 1px solid transparent;
border-radius: 0.5rem;
color: rgba(255, 255, 255, 0.45);
font-size: 1.1rem;
padding: 0.4rem 0.5rem;
cursor: pointer;
transition: color 0.2s, border-color 0.2s, background 0.2s;
display: inline-flex;
align-items: center;
justify-content: center;
}
.g-liberar-obs-btn:hover {
color: #fbbf24;
border-color: rgba(251, 191, 36, 0.4);
background: rgba(251, 191, 36, 0.08);
}
.g-liberar-obs-btn.com-obs {
color: #fbbf24;
border-color: rgba(251, 191, 36, 0.5);
background: rgba(251, 191, 36, 0.1);
}
/* Sub-modal card */
.g-liberar-obs-card {
background: linear-gradient(145deg, rgba(15, 12, 41, 0.99) 0%, rgba(26, 20, 53, 0.99) 100%);
backdrop-filter: blur(12px);
border: 1px solid rgba(251, 191, 36, 0.3);
border-radius: 1.25rem;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(251, 191, 36, 0.06);
overflow: hidden;
}
.g-liberar-obs-header {
padding: 1rem 1.5rem 0.55rem;
border-bottom: 1px solid rgba(251, 191, 36, 0.18);
}
.g-liberar-obs-titulo {
margin: 0;
font-size: 1.1rem;
font-weight: 700;
color: #ffffff;
display: flex;
align-items: center;
gap: 0.5rem;
}
.g-liberar-obs-titulo i { color: #fbbf24; }
.g-liberar-obs-footer {
border-top: 1px solid rgba(139, 92, 246, 0.15);
}
.g-liberar-obs-textarea {
background: rgba(15, 12, 41, 0.6);
border: 1px solid rgba(139, 92, 246, 0.3);
border-radius: 0.625rem;
color: #f1f5f9;
font-size: 0.95rem;
line-height: 1.5;
padding: 10px 12px;
resize: vertical;
min-height: 100px;
transition: border-color 0.2s, box-shadow 0.2s;
}
.g-liberar-obs-textarea::placeholder { color: rgba(196, 181, 253, 0.4); }
.g-liberar-obs-textarea:focus {
outline: none;
border-color: #fbbf24;
box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.15);
}
```
- [ ] **Verificar sintaxe PHP**
```bash
cd /home/goldie/www/genesis
php -l componentes/Missoes/Logistica/sinais/Central/html/central.php
```
Esperado: `No syntax errors detected`
- [ ] **Commit**
```bash
cd /home/goldie/www/genesis
git add componentes/Missoes/Logistica/sinais/Central/html/central.php
git commit -m "feat(edicaorota): add observation sub-modal HTML and CSS to liberation modal"
```
---
### Task 8: JS — estado, sub-modal e payload em `central.php`
**Files:**
- Modify: `componentes/Missoes/Logistica/sinais/Central/html/central.php`
**Parte A — variável de estado**
- [ ] **Adicionar `liberarMotoristaObservacao` junto com as outras variáveis de estado**
Localizar (≈linha 4543):
```js
let liberarMotoristaIti = null;
let enviadoExibirTela = false;
```
Adicionar logo após:
```js
let liberarMotoristaObservacao = '';
```
**Parte B — resetar observação ao abrir e ao fechar modal**
- [ ] **Resetar no handler de abertura do modal**
Localizar (≈linha 5027):
```js
enviadoExibirTela = false;
resetBotaoLiberar();
```
Adicionar logo após `resetBotaoLiberar();`:
```js
liberarMotoristaObservacao = '';
$('#liberar-motorista-obs-btn').removeClass('com-obs');
```
- [ ] **Resetar no handler de fechar/cancelar**
Localizar (≈linha 5038):
```js
$(document).on('click', '#liberar-motorista-fechar, #liberar-motorista-cancelar', function () {
$('#liberar-motorista-modal').addClass('hidden');
enviadoExibirTela = false;
resetBotaoLiberar();
});
```
Substituir por:
```js
$(document).on('click', '#liberar-motorista-fechar, #liberar-motorista-cancelar', function () {
$('#liberar-motorista-modal').addClass('hidden');
enviadoExibirTela = false;
liberarMotoristaObservacao = '';
$('#liberar-motorista-obs-btn').removeClass('com-obs');
resetBotaoLiberar();
});
```
**Parte C — handlers do sub-modal**
- [ ] **Adicionar handlers do sub-modal após o handler de fechar (após linha ~5042)**
Inserir após o handler `#liberar-motorista-fechar, #liberar-motorista-cancelar`:
```js
// ----- Sub-modal de observação -----
function atualizarContadorObs() {
const len = ($('#liberar-obs-textarea').val() || '').length;
$('#liberar-obs-contador').text((500 - len) + ' restantes');
}
$(document).on('click', '#liberar-motorista-obs-btn', function () {
$('#liberar-obs-textarea').val(liberarMotoristaObservacao);
atualizarContadorObs();
$('#liberar-obs-modal').removeClass('hidden');
setTimeout(() => $('#liberar-obs-textarea').focus(), 50);
});
$(document).on('input', '#liberar-obs-textarea', atualizarContadorObs);
$(document).on('click', '#liberar-obs-cancelar', function () {
$('#liberar-obs-modal').addClass('hidden');
});
$(document).on('click', '#liberar-obs-salvar', function () {
const val = ($('#liberar-obs-textarea').val() || '').trim().substring(0, 500);
liberarMotoristaObservacao = val;
$('#liberar-motorista-obs-btn').toggleClass('com-obs', val !== '');
$('#liberar-obs-modal').addClass('hidden');
});
```
**Parte D — incluir `observacao_operador` no payload da API**
- [ ] **Adicionar campo ao body antes da chamada `api('POST', '/api/v1/edicao-rota', body)`**
Localizar (≈linha 5165):
```js
if (partidaSnap) Object.assign(body, partidaSnap);
const criar = await api('POST', '/api/v1/edicao-rota', body);
```
Substituir por:
```js
if (partidaSnap) Object.assign(body, partidaSnap);
if (liberarMotoristaObservacao.trim()) {
body.observacao_operador = liberarMotoristaObservacao.trim();
}
const criar = await api('POST', '/api/v1/edicao-rota', body);
```
- [ ] **Verificar sintaxe PHP**
```bash
cd /home/goldie/www/genesis
php -l componentes/Missoes/Logistica/sinais/Central/html/central.php
```
Esperado: `No syntax errors detected`
- [ ] **Commit**
```bash
cd /home/goldie/www/genesis
git add componentes/Missoes/Logistica/sinais/Central/html/central.php
git commit -m "feat(edicaorota): JS state and payload for observacao_operador in liberation modal"
```
---
## Self-Review
### 1. Cobertura da spec
| Requisito da spec | Task |
|---|---|
| Migration `observacao_operador VARCHAR(500) NULL` | Task 1 |
| Validação max 500 chars no Validator | Task 2 |
| Laboratório salva o campo | Task 3 |
| Controller passa campo para view | Task 4 |
| CSS do card no motorista | Task 5 |
| Card HTML entre "Planejamento da Rota" e "Sequência de entrega" | Task 6 |
| Ícone de bloco de notas no modal de liberação | Task 7 |
| Sub-modal HTML + CSS com textarea e contador | Task 7 |
| JS: abrir sub-modal pré-preenchido | Task 8 |
| JS: salvar texto em memória, ícone âmbar | Task 8 |
| JS: resetar ao fechar modal de liberação | Task 8 |
| JS: enviar `observacao_operador` no payload | Task 8 |
| Observação persiste no reenvio (já salva na criação) | coberto implicitamente — reenvio não modifica o registro |
### 2. Consistência de tipos/nomes
- `liberarMotoristaObservacao` — declarada em Task 8A, usada em 8B, 8C, 8D. ✅
- `#liberar-obs-modal`, `#liberar-obs-textarea`, `#liberar-obs-contador`, `#liberar-obs-salvar`, `#liberar-obs-cancelar` — definidos em Task 7B, referenciados em Task 8C. ✅
- `#liberar-motorista-obs-btn` — definido em Task 7A, referenciado em 8B e 8C. ✅
- `obs-operador-card`, `obs-operador-texto` — CSS em Task 5, HTML em Task 6. ✅
- `observacao_operador` — coluna (Task 1), validator (Task 2), lab (Task 3), controller (Task 4), view (Task 6). ✅