primeira versão do e-li-nps construido com IA
This commit is contained in:
commit
06950d6e2c
34 changed files with 2524 additions and 0 deletions
7
web/templates/edit_block.html
Normal file
7
web/templates/edit_block.html
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
{{define "edit_block.html"}}
|
||||
<p class="eli-nps-sub">Nota atual: {{if .Reg.Nota}}{{.Reg.Nota}}{{else}}(sem nota){{end}}</p>
|
||||
{{template "nota_block.html" .}}
|
||||
{{if .Reg.Nota}}
|
||||
{{template "justificativa_block.html" .}}
|
||||
{{end}}
|
||||
{{end}}
|
||||
18
web/templates/form_inner.html
Normal file
18
web/templates/form_inner.html
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
{{define "form_inner.html"}}
|
||||
{{/* This block can be swapped by HTMX (target #eli-nps-modal-body) */}}
|
||||
{{if eq .Reg.Status "respondido"}}
|
||||
<div class="eli-nps-ok">
|
||||
<p class="eli-nps-title">Obrigado!</p>
|
||||
<p class="eli-nps-sub">Sua resposta foi registrada. Você pode editar se quiser.</p>
|
||||
{{template "edit_block.html" .}}
|
||||
</div>
|
||||
{{else}}
|
||||
<p class="eli-nps-title">De 1 a 10, quanto você recomenda {{if .Reg.ProdutoNome}}{{.Reg.ProdutoNome}}{{else}}{{produtoLabel .Produto}}{{end}} para um amigo?</p>
|
||||
{{template "nota_block.html" .}}
|
||||
{{if .Reg.Nota}}
|
||||
{{template "justificativa_block.html" .}}
|
||||
{{end}}
|
||||
{{end}}
|
||||
|
||||
<p class="eli-nps-foot">e-li.nps • produto: {{if .Reg.ProdutoNome}}{{.Reg.ProdutoNome}}{{else}}{{.Produto}}{{end}} • id: {{.ID}}</p>
|
||||
{{end}}
|
||||
117
web/templates/form_page.html
Normal file
117
web/templates/form_page.html
Normal file
|
|
@ -0,0 +1,117 @@
|
|||
{{define "form_page.html"}}
|
||||
<!doctype html>
|
||||
<html lang="pt-br">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>e-li.nps</title>
|
||||
{{/*
|
||||
Importante: evitamos SRI aqui porque o hash pode mudar entre CDNs/builds.
|
||||
Servimos arquivos locais para garantir estabilidade do widget.
|
||||
*/}}
|
||||
<script src="/static/vendor/htmx.min.js"></script>
|
||||
<script src="/static/vendor/json-enc.js"></script>
|
||||
<style>
|
||||
.eli-nps-wrap{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#111;margin:0;padding:0;}
|
||||
.eli-nps-card{max-width:520px;margin:0 auto;padding:16px;}
|
||||
.eli-nps-title{font-size:18px;font-weight:700;margin:0 0 8px;}
|
||||
.eli-nps-sub{margin:0 0 12px;color:#444;font-size:14px;}
|
||||
.eli-nps-scale{display:grid;grid-template-columns:repeat(10,1fr);gap:8px;margin:12px 0;}
|
||||
/*
|
||||
Botões de nota (1–10) com escala vermelho → verde.
|
||||
Importante: a cor base é determinada pelo valor; quando selecionado,
|
||||
o botão ganha destaque (borda/sombra) mas mantém a cor.
|
||||
*/
|
||||
.eli-nps-btn{
|
||||
border:1px solid #ddd;
|
||||
background:#fff;
|
||||
border-radius:8px;
|
||||
padding:10px 0;
|
||||
cursor:pointer;
|
||||
font-weight:700;
|
||||
color:#111;
|
||||
transition:
|
||||
transform 80ms ease,
|
||||
box-shadow 120ms ease,
|
||||
border-color 120ms ease,
|
||||
background-color 120ms ease,
|
||||
color 120ms ease;
|
||||
}
|
||||
|
||||
/*
|
||||
Base mais “clara” (pastel) e destaque mais “forte” no hover/seleção.
|
||||
Isso evita começar chamativo demais, mas deixa bem evidente ao interagir.
|
||||
*/
|
||||
.eli-nps-btn:hover,
|
||||
.eli-nps-btn-selected{transform:translateY(-1px);box-shadow:0 6px 14px rgba(0,0,0,.14);border-color:#111;}
|
||||
.eli-nps-btn:active{transform:translateY(0) scale(0.98);}
|
||||
|
||||
/*
|
||||
Paleta por grupo:
|
||||
- 1 a 6: tons de vermelho
|
||||
- 7 e 8: tons de amarelo
|
||||
- 9 e 10: tons de verde
|
||||
*/
|
||||
|
||||
/* 1–6 (vermelho) */
|
||||
.eli-nps-btn-1{background:#ffebee;border-color:#ffcdd2;}
|
||||
.eli-nps-btn-1:hover,.eli-nps-btn-1.eli-nps-btn-selected{background:#ef5350;color:#fff;border-color:#ef5350;}
|
||||
|
||||
.eli-nps-btn-2{background:#ffebee;border-color:#ffcdd2;}
|
||||
.eli-nps-btn-2:hover,.eli-nps-btn-2.eli-nps-btn-selected{background:#e53935;color:#fff;border-color:#e53935;}
|
||||
|
||||
.eli-nps-btn-3{background:#ffebee;border-color:#ffcdd2;}
|
||||
.eli-nps-btn-3:hover,.eli-nps-btn-3.eli-nps-btn-selected{background:#d32f2f;color:#fff;border-color:#d32f2f;}
|
||||
|
||||
.eli-nps-btn-4{background:#ffebee;border-color:#ffcdd2;}
|
||||
.eli-nps-btn-4:hover,.eli-nps-btn-4.eli-nps-btn-selected{background:#c62828;color:#fff;border-color:#c62828;}
|
||||
|
||||
.eli-nps-btn-5{background:#ffebee;border-color:#ffcdd2;}
|
||||
.eli-nps-btn-5:hover,.eli-nps-btn-5.eli-nps-btn-selected{background:#b71c1c;color:#fff;border-color:#b71c1c;}
|
||||
|
||||
.eli-nps-btn-6{background:#ffebee;border-color:#ffcdd2;}
|
||||
.eli-nps-btn-6:hover,.eli-nps-btn-6.eli-nps-btn-selected{background:#8e0000;color:#fff;border-color:#8e0000;}
|
||||
|
||||
/* 7–8 (amarelo) */
|
||||
.eli-nps-btn-7{background:#fffde7;border-color:#fff9c4;}
|
||||
.eli-nps-btn-7:hover,.eli-nps-btn-7.eli-nps-btn-selected{background:#fdd835;color:#111;border-color:#fdd835;}
|
||||
|
||||
.eli-nps-btn-8{background:#fff8e1;border-color:#ffecb3;}
|
||||
.eli-nps-btn-8:hover,.eli-nps-btn-8.eli-nps-btn-selected{background:#ffb300;color:#111;border-color:#ffb300;}
|
||||
|
||||
/* 9–10 (verde) */
|
||||
.eli-nps-btn-9{background:#e8f5e9;border-color:#c8e6c9;}
|
||||
.eli-nps-btn-9:hover,.eli-nps-btn-9.eli-nps-btn-selected{background:#2e7d32;color:#fff;border-color:#2e7d32;}
|
||||
|
||||
.eli-nps-btn-10{background:#e8f5e9;border-color:#c8e6c9;}
|
||||
.eli-nps-btn-10:hover,.eli-nps-btn-10.eli-nps-btn-selected{background:#1b5e20;color:#fff;border-color:#1b5e20;}
|
||||
.eli-nps-textarea{width:100%;min-height:100px;border:1px solid #ddd;border-radius:10px;padding:10px;font-size:14px;}
|
||||
.eli-nps-actions{display:flex;gap:10px;margin-top:12px;}
|
||||
.eli-nps-primary{background:#111;color:#fff;border:1px solid #111;border-radius:10px;padding:10px 14px;cursor:pointer;}
|
||||
.eli-nps-secondary{background:#fff;color:#111;border:1px solid #ddd;border-radius:10px;padding:10px 14px;cursor:pointer;}
|
||||
.eli-nps-foot{margin-top:10px;color:#666;font-size:12px;}
|
||||
.eli-nps-ok{padding:16px;border:1px solid #e5e5e5;border-radius:12px;background:#fafafa;}
|
||||
|
||||
/*
|
||||
Ajustes para dispositivos móveis.
|
||||
Objetivo: manter leitura confortável e botões clicáveis sem ficar apertado.
|
||||
*/
|
||||
@media (max-width: 480px){
|
||||
.eli-nps-card{max-width:none;padding:12px;}
|
||||
.eli-nps-title{font-size:16px;line-height:1.25;}
|
||||
.eli-nps-sub{font-size:13px;}
|
||||
.eli-nps-scale{grid-template-columns:repeat(5,1fr);gap:10px;}
|
||||
.eli-nps-btn{padding:12px 0;border-radius:10px;}
|
||||
.eli-nps-actions{flex-direction:column;}
|
||||
.eli-nps-primary,.eli-nps-secondary{width:100%;}
|
||||
.eli-nps-textarea{min-height:120px;}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="eli-nps-wrap">
|
||||
<div class="eli-nps-card" id="eli-nps-modal-body">
|
||||
{{template "form_inner.html" .}}
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
{{end}}
|
||||
2
web/templates/funcs.html
Normal file
2
web/templates/funcs.html
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
{{define "funcs"}}{{end}}
|
||||
|
||||
59
web/templates/justificativa_block.html
Normal file
59
web/templates/justificativa_block.html
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
{{define "justificativa_block.html"}}
|
||||
<p class="eli-nps-sub" style="margin-top:16px;">Quer nos contar o motivo?</p>
|
||||
|
||||
<form
|
||||
hx-patch="/api/e-li.nps/{{.Produto}}/{{.ID}}"
|
||||
hx-target="#eli-nps-modal-body"
|
||||
hx-swap="innerHTML"
|
||||
hx-ext="json-enc"
|
||||
>
|
||||
<textarea
|
||||
class="eli-nps-textarea"
|
||||
name="justificativa"
|
||||
id="eli-nps-justificativa"
|
||||
>{{if .Reg.Justificativa}}{{.Reg.Justificativa}}{{end}}</textarea>
|
||||
|
||||
<div class="eli-nps-actions">
|
||||
<button class="eli-nps-primary" type="button" onclick="window.__eliNpsSubmitJust('{{.Produto}}','{{.ID}}')">Enviar</button>
|
||||
<button class="eli-nps-secondary" type="button" onclick="window.__eliNpsFinalizar('{{.Produto}}','{{.ID}}')">Finalizar</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
// Funções auxiliares usadas pelo iframe.
|
||||
// Elas notificarão o widget pai (janela que contém o iframe) para fechar o modal.
|
||||
window.__eliNpsSubmitJust = async function(produto, id){
|
||||
const v = document.getElementById('eli-nps-justificativa')?.value || '';
|
||||
|
||||
// Regra do produto: ao clicar em "Enviar" após escolher a nota,
|
||||
// consideramos a resposta como finalizada e fechamos o modal.
|
||||
const res = await fetch(`/api/e-li.nps/${produto}/${id}`, {
|
||||
method: 'PATCH',
|
||||
headers: {'Content-Type':'application/json','HX-Request':'true'},
|
||||
body: JSON.stringify({justificativa: v, finalizar:true})
|
||||
});
|
||||
if(!res.ok){ return; }
|
||||
|
||||
// Close parent widget modal (iframe).
|
||||
try{ parent.postMessage({type:'eli-nps:done', id:id, produto:produto}, '*'); }catch(e){}
|
||||
}
|
||||
|
||||
window.__eliNpsFinalizar = async function(produto, id){
|
||||
const v = document.getElementById('eli-nps-justificativa')?.value || '';
|
||||
|
||||
const res = await fetch(`/api/e-li.nps/${produto}/${id}`, {
|
||||
method: 'PATCH',
|
||||
headers: {'Content-Type':'application/json','HX-Request':'true'},
|
||||
body: JSON.stringify({justificativa: v, finalizar:true})
|
||||
});
|
||||
if(!res.ok){ return; }
|
||||
|
||||
const html = await res.text();
|
||||
document.getElementById('eli-nps-modal-body').innerHTML = html;
|
||||
|
||||
// notify parent widget to close
|
||||
try{ parent.postMessage({type:'eli-nps:done', id:id, produto:produto}, '*'); }catch(e){}
|
||||
}
|
||||
</script>
|
||||
{{end}}
|
||||
|
||||
14
web/templates/nota_block.html
Normal file
14
web/templates/nota_block.html
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
{{define "nota_block.html"}}
|
||||
<div class="eli-nps-scale">
|
||||
{{range $i := seq 1 10}}
|
||||
<button
|
||||
class="eli-nps-btn eli-nps-btn-{{$i}} {{if noteEq $.Reg.Nota $i}}eli-nps-btn-selected{{end}}"
|
||||
hx-patch="/api/e-li.nps/{{$.Produto}}/{{$.ID}}"
|
||||
hx-target="#eli-nps-modal-body"
|
||||
hx-swap="innerHTML"
|
||||
hx-ext="json-enc"
|
||||
hx-vals='{"nota":{{$i}}}'
|
||||
>{{$i}}</button>
|
||||
{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
Loading…
Add table
Add a link
Reference in a new issue