victor/Reem-Notas
SHA256
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Novo Campo de fotos da simpleroute

Browse Source
This commit is contained in:
victor
2026-07-20 22:23:49 -03:00
parent f6eda043a3
commit 94860dd5bc
3 changed files with 101 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
app/views/admin/edicao_lancamentos/show.html.erb
View File

@@ -234,14 +234,22 @@
// Etiqueta de cada tipo de imagem — o ADM precisa saber o que está olhando
// para julgar se a foto está errada.
// `cls` = etiqueta translúcida (foto em destaque, fundo escuro previsível).
// `txt` = só a cor do texto, usada na miniatura sobre fundo preto sólido —
// sobre foto clara a versão translúcida ficava ilegível.
const ROTULO_FOTO = {
fachada: { texto: 'Fachada', cls: 'bg-orange-500/20 text-orange-300 border-orange-500/40', txt: 'text-orange-300' },
entrega: { texto: 'Comprovante', cls: 'bg-blue-500/20 text-blue-300 border-blue-500/40', txt: 'text-blue-300' },
assinatura: { texto: 'Assinatura', cls: 'bg-purple-500/20 text-purple-300 border-purple-500/40', txt: 'text-purple-300' }
// Cor da etiqueta por CATEGORIA (cat vem do servidor). O texto do rótulo
// também vem pronto do servidor (f.rotulo), porque os campos de foto do
// SimpliRoute variam por conta. `cls` = etiqueta translúcida (foto grande em
// destaque); `txt` = só a cor do texto (miniatura, sobre fundo preto sólido —
// a versão translúcida some sobre foto clara).
const COR_CAT = {
fachada: { cls: 'bg-orange-500/20 text-orange-300 border-orange-500/40', txt: 'text-orange-300' },
prova: { cls: 'bg-emerald-500/20 text-emerald-300 border-emerald-500/40', txt: 'text-emerald-300' },
nf: { cls: 'bg-blue-500/20 text-blue-300 border-blue-500/40', txt: 'text-blue-300' },
termo: { cls: 'bg-amber-500/20 text-amber-300 border-amber-500/40', txt: 'text-amber-300' },
relatorio: { cls: 'bg-cyan-500/20 text-cyan-300 border-cyan-500/40', txt: 'text-cyan-300' },
assinatura: { cls: 'bg-purple-500/20 text-purple-300 border-purple-500/40', txt: 'text-purple-300' },
entrega: { cls: 'bg-sky-500/20 text-sky-300 border-sky-500/40', txt: 'text-sky-300' },
extra: { cls: 'bg-white/10 text-gray-300 border-white/20', txt: 'text-gray-300' }
};
const COR_PADRAO = COR_CAT.extra;
function renderFotos() {
const fotos = visita.fotos || [];
@@ -261,19 +269,18 @@
// Na miniatura a etiqueta é compacta e truncada (senão estoura a célula);
// o rótulo completo + origem aparecem no visualizador.
const figura = (f, i, destaque) => {
const r = ROTULO_FOTO[f.tipo] ||
{ texto: f.tipo, cls: 'bg-white/10 text-gray-300 border-white/20', txt: 'text-gray-300' };
const c = COR_CAT[f.cat] || COR_PADRAO;
const etiqueta = destaque
? '<figcaption class="absolute top-1.5 left-1.5 px-1.5 py-0.5 rounded text-[10px] font-bold uppercase ' +
'tracking-wide border ' + r.cls + '">' + esc(r.texto) + '</figcaption>' +
'tracking-wide border ' + c.cls + '">' + esc(f.rotulo) + '</figcaption>' +
'<span class="absolute bottom-1.5 right-1.5 px-1.5 py-0.5 rounded bg-black/70 text-gray-300 text-[10px]">' +
esc(f.origem) + '</span>'
: '<figcaption class="absolute top-1 left-1 right-1 px-1 py-0.5 rounded text-[9px] font-bold uppercase ' +
'tracking-tight truncate bg-black/80 ' + r.txt + '">' + esc(r.texto) + '</figcaption>';
'tracking-tight truncate bg-black/80 ' + c.txt + '">' + esc(f.rotulo) + '</figcaption>';
return '<figure class="relative group cursor-zoom-in" data-foto-idx="' + i + '" ' +
'title="' + esc(r.texto + ' · ' + f.origem) + ' — clique para ampliar">' +
'<img src="' + esc(f.url) + '" alt="' + esc(r.texto) + '" loading="lazy" ' +
'title="' + esc(f.rotulo + ' · ' + f.origem) + ' — clique para ampliar">' +
'<img src="' + esc(f.url) + '" alt="' + esc(f.rotulo) + '" loading="lazy" ' +
'class="w-full ' + (destaque ? 'h-52' : 'h-24') + ' object-cover rounded-xl border border-white/10 ' +
'group-hover:opacity-90 transition-opacity">' +
etiqueta +
@@ -310,10 +317,9 @@
const fotos = visita.fotos || [];
const f = fotos[fotoAtual];
if (!f) return;
const r = ROTULO_FOTO[f.tipo] || { texto: f.tipo };
document.getElementById('modal-foto-img').src = f.url;
document.getElementById('modal-foto-titulo').textContent =
r.texto + ' · ' + f.origem + ' (' + (fotoAtual + 1) + '/' + fotos.length + ')';
f.rotulo + ' · ' + f.origem + ' (' + (fotoAtual + 1) + '/' + fotos.length + ')';
document.getElementById('modal-foto-abrir').href = f.url;
}