112 lines
6.4 KiB
Plaintext
112 lines
6.4 KiB
Plaintext
<%# Coluna "Veículos" — a lista INTEIRA visível, como no programa original.
|
||
Antes era um <select> com ‹ ›: resolvia o scroll de 72 carros, mas o operador
|
||
não conseguia VER o plano — via um carro por vez e perdia a noção de quantas
|
||
paradas cada um tem, que é justamente a conferência que ele faz antes de
|
||
mandar imprimir.
|
||
|
||
Adapta ao dispositivo (diretriz 3): no celular vira faixa horizontal, porque
|
||
72 itens empilhados empurrariam a tabela para fora da primeira tela; no
|
||
desktop é coluna com rolagem própria, do lado da tabela. %>
|
||
<div class="bg-[#111] border border-white/5 rounded-2xl p-4 space-y-3">
|
||
<div class="flex items-center justify-between">
|
||
<h2 class="text-white font-semibold text-sm">Veículos</h2>
|
||
<span class="text-xs text-gray-500"><%= @veiculos.size %> no plano</span>
|
||
</div>
|
||
|
||
<div class="flex lg:flex-col gap-2 overflow-x-auto lg:overflow-x-visible
|
||
lg:overflow-y-auto lg:max-h-[46vh] pb-1 lg:pb-0
|
||
lg:pr-1 [scrollbar-width:thin]">
|
||
<% @veiculos.each do |v| %>
|
||
<% atual = v.veiculo == @veiculo %>
|
||
<%# Link de verdade (não botão com JS): o veículo vive na query string, então
|
||
ele é endereçável, volta com o "voltar" do navegador e sobrevive a um F5. %>
|
||
<a href="<%= admin_romaneio_path(@romaneio, veiculo: v.veiculo, previa: (1 if @previa)) %>"
|
||
data-romaneio-target="itemVeiculo" data-veiculo="<%= v.veiculo %>"
|
||
<%= 'data-atual="1"'.html_safe if atual %>
|
||
class="shrink-0 lg:shrink flex items-center justify-between gap-3 min-h-[48px]
|
||
px-3 rounded-xl border transition-colors
|
||
<%= atual ? 'bg-[#f97316] border-orange-400 text-white font-semibold'
|
||
: 'bg-[#1a1a1a] border-white/10 text-gray-300 hover:border-orange-500 hover:text-white' %>">
|
||
<span class="whitespace-nowrap"><%= v.veiculo %></span>
|
||
<%# A contagem é o que o operador confere: carro sem parada ou com parada
|
||
demais é erro de plano, e some quando só um veículo aparece por vez. %>
|
||
<span class="text-xs px-2 py-0.5 rounded-lg
|
||
<%= atual ? 'bg-black/25' : 'bg-white/5 text-gray-400' %>">
|
||
<%= @romaneio.contagem_por_veiculo[v.veiculo].to_i %>
|
||
</span>
|
||
</a>
|
||
<% end %>
|
||
</div>
|
||
|
||
<%# Setas para andar na LISTA (a prévia tem as suas). Links de verdade pelo
|
||
mesmo motivo dos itens acima: o veículo mora na query string. %>
|
||
<div class="flex gap-2 pt-1">
|
||
<% nomes_v = @veiculos.map(&:veiculo) %>
|
||
<% pos_v = nomes_v.index(@veiculo) %>
|
||
<% ant_v = pos_v&.positive? ? nomes_v[pos_v - 1] : nil %>
|
||
<% prox_v = pos_v && pos_v < nomes_v.size - 1 ? nomes_v[pos_v + 1] : nil %>
|
||
<% base_v = 'flex-1 min-h-[48px] flex items-center justify-center rounded-xl border' %>
|
||
<% if ant_v %>
|
||
<a href="<%= admin_romaneio_path(@romaneio, veiculo: ant_v, previa: (1 if @previa)) %>" aria-label="Veículo anterior"
|
||
class="<%= base_v %> bg-[#1a1a1a] border-white/10 text-white hover:bg-[#242424]">‹</a>
|
||
<% else %>
|
||
<span class="<%= base_v %> bg-[#1a1a1a]/50 border-white/5 text-gray-600">‹</span>
|
||
<% end %>
|
||
<% if prox_v %>
|
||
<a href="<%= admin_romaneio_path(@romaneio, veiculo: prox_v, previa: (1 if @previa)) %>" aria-label="Próximo veículo"
|
||
class="<%= base_v %> bg-[#1a1a1a] border-white/10 text-white hover:bg-[#242424]">›</a>
|
||
<% else %>
|
||
<span class="<%= base_v %> bg-[#1a1a1a]/50 border-white/5 text-gray-600">›</span>
|
||
<% end %>
|
||
</div>
|
||
|
||
<div class="pt-4 mt-1 border-t border-white/5">
|
||
<%# "Motorista deste veículo — só na tela" não cabe numa linha na coluna
|
||
estreita; o complemento vai embaixo, como legenda, em vez de quebrar no
|
||
meio do travessão. %>
|
||
<label class="block text-sm font-medium text-gray-300 mb-1.5">
|
||
Motorista deste veículo
|
||
<span class="block text-xs text-gray-500 font-normal">só na tela, não sai impresso</span>
|
||
</label>
|
||
<% atual = @veiculos.find { |v| v.veiculo == @veiculo } %>
|
||
<input type="text" value="<%= atual&.motorista %>" placeholder="Quem leva este carro"
|
||
data-romaneio-target="motorista" data-action="change->romaneio#salvarMotorista"
|
||
class="w-full bg-[#1a1a1a] border border-white/10 rounded-xl px-3 py-3 text-white
|
||
placeholder-gray-600 focus:outline-none focus:border-orange-500 min-h-[48px]">
|
||
<p class="text-xs text-gray-500 mt-1.5">
|
||
A linha do rodapé é assinada à mão na retirada.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="space-y-3 pt-4 mt-4 border-t border-white/5">
|
||
<%# Link, não botão: a prévia aberta é a URL `?previa=1` (ver `_previa`),
|
||
então isto funciona com o JavaScript fora do ar — foi o botão daqui que
|
||
ficou morto três vezes seguidas. %>
|
||
<%= link_to admin_romaneio_path(@romaneio, veiculo: @veiculo, previa: 1),
|
||
class: 'w-full min-h-[48px] flex items-center justify-center gap-2 bg-[#1a1a1a]
|
||
hover:bg-[#242424] text-white border border-white/10 rounded-xl' do %>
|
||
<%= icone :visualizar, cor: nil, espaco: false %> Ver prévia do PDF
|
||
<% end %>
|
||
<%= link_to pdf_admin_romaneio_path(@romaneio, veiculo: @veiculo),
|
||
target: '_blank', rel: 'noopener',
|
||
class: 'w-full min-h-[48px] flex items-center justify-center gap-2 bg-[#1a1a1a]
|
||
hover:bg-[#242424] text-white border border-white/10 rounded-xl' do %>
|
||
<%= icone :baixar, cor: nil, espaco: false %> PDF deste veículo
|
||
<% end %>
|
||
<%# Rótulo em DUAS linhas de propósito. "PDF de TODOS os veículos" numa linha
|
||
só não cabe nos 260px da coluna: quebrava sozinho e deixava o ícone
|
||
pendurado num degrau ao lado do texto. Aqui a quebra é intencional — o
|
||
ícone fica centrado na altura e a contagem vira a segunda linha, que
|
||
ainda informa quantas folhas saem. %>
|
||
<%= link_to pdf_admin_romaneio_path(@romaneio),
|
||
class: 'w-full min-h-[56px] flex items-center justify-center gap-2.5 px-3 py-2
|
||
bg-[#f97316] hover:bg-orange-500 text-white rounded-xl text-left' do %>
|
||
<%= icone :baixar, cor: nil, espaco: false, classe: 'shrink-0' %>
|
||
<span class="leading-tight">
|
||
<span class="block font-semibold">PDF de todos</span>
|
||
<span class="block text-xs text-white/80"><%= @veiculos.size %> veículos, uma folha cada</span>
|
||
</span>
|
||
<% end %>
|
||
</div>
|
||
</div>
|