fix: fidelizar websms_config con el diseño del resto del proyecto
Agrega bloque <style> con btn-primary, input-field, label, badge-* que faltaban. Badge de status ahora muestra "Enviado"/"Error" en vez del código numérico. Botones de copiar en la sección de webhooks. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Sonnet 4.6
parent
f94d01c089
commit
ab4e3252b1
@@ -69,17 +69,33 @@
|
||||
<div class="space-y-3">
|
||||
<div>
|
||||
<label class="label">Confirmaciones de entrega (ACK)</label>
|
||||
<code class="block text-xs bg-slate-50 p-2 rounded border border-slate-200 text-slate-700 break-all">https://admin.u-site.app/webhooks/websms/delivery</code>
|
||||
<div class="flex items-center gap-2">
|
||||
<code class="flex-1 text-xs bg-slate-50 p-2 rounded border border-slate-200 text-slate-700 break-all">https://admin.u-site.app/webhooks/websms/delivery</code>
|
||||
<button type="button" @click="copy('https://admin.u-site.app/webhooks/websms/delivery')" class="btn-icon text-slate-400 hover:text-slate-600 flex-shrink-0" title="Copiar">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="label">Clics en shortlinks</label>
|
||||
<code class="block text-xs bg-slate-50 p-2 rounded border border-slate-200 text-slate-700 break-all">https://admin.u-site.app/webhooks/websms/click</code>
|
||||
<div class="flex items-center gap-2">
|
||||
<code class="flex-1 text-xs bg-slate-50 p-2 rounded border border-slate-200 text-slate-700 break-all">https://admin.u-site.app/webhooks/websms/click</code>
|
||||
<button type="button" @click="copy('https://admin.u-site.app/webhooks/websms/click')" class="btn-icon text-slate-400 hover:text-slate-600 flex-shrink-0" title="Copiar">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="label">Mensajes entrantes</label>
|
||||
<code class="block text-xs bg-slate-50 p-2 rounded border border-slate-200 text-slate-700 break-all">https://admin.u-site.app/webhooks/websms/incoming</code>
|
||||
<div class="flex items-center gap-2">
|
||||
<code class="flex-1 text-xs bg-slate-50 p-2 rounded border border-slate-200 text-slate-700 break-all">https://admin.u-site.app/webhooks/websms/incoming</code>
|
||||
<button type="button" @click="copy('https://admin.u-site.app/webhooks/websms/incoming')" class="btn-icon text-slate-400 hover:text-slate-600 flex-shrink-0" title="Copiar">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p x-show="copied" x-text="copied" class="text-green-600 text-xs mt-3"></p>
|
||||
</div>
|
||||
|
||||
<!-- Logs -->
|
||||
@@ -103,7 +119,7 @@
|
||||
<td class="px-3 py-2 text-slate-700" x-text="l.para"></td>
|
||||
<td class="px-3 py-2 text-slate-600 max-w-xs truncate" x-text="l.mensaje"></td>
|
||||
<td class="px-3 py-2">
|
||||
<span class="badge" :class="l.status==='0'?'badge-green':'badge-red'" x-text="l.status"></span>
|
||||
<span class="badge" :class="l.status==='0'?'badge-green':'badge-red'" x-text="l.status==='0'?'Enviado':'Error'"></span>
|
||||
</td>
|
||||
<td class="px-3 py-2 text-xs font-mono text-slate-500" x-text="l.msg_id||'-'"></td>
|
||||
</tr>
|
||||
@@ -125,7 +141,7 @@ function websmsApp() {
|
||||
showToken:false,
|
||||
logs:[],
|
||||
testPara:'', testMsg:'', testResult:'', testOk:false,
|
||||
saving:false, error:'',
|
||||
saving:false, error:'', copied:'',
|
||||
|
||||
async init(){
|
||||
await this.loadConfig();
|
||||
@@ -166,6 +182,24 @@ function websmsApp() {
|
||||
},
|
||||
|
||||
formatDate(d){ if(!d) return ''; return new Date(d).toLocaleDateString('es-CO',{day:'2-digit',month:'short',year:'numeric',hour:'2-digit',minute:'2-digit'}); },
|
||||
copy(text){ navigator.clipboard.writeText(text); this.copied='URL copiada'; setTimeout(()=>this.copied='', 2000); },
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.btn-primary { background:#8eb02f; color:#fff; padding:0.5rem 1rem; border-radius:0.5rem; font-weight:600; font-size:.875rem; transition:background .15s; }
|
||||
.btn-primary:hover { background:#6d8c24; }
|
||||
.btn-secondary { background:#f1f5f9; color:#475569; padding:0.5rem 1rem; border-radius:0.5rem; font-weight:500; font-size:.875rem; border:1px solid #e2e8f0; }
|
||||
.btn-icon { display:inline-flex; align-items:center; padding:0.25rem; border-radius:0.375rem; }
|
||||
.btn-icon:hover { background:#f1f5f9; }
|
||||
.input-field { border:1px solid #e2e8f0; border-radius:0.5rem; padding:0.5rem 0.75rem; font-size:.875rem; outline:none; transition:border-color .15s; }
|
||||
.input-field:focus { border-color:#8eb02f; }
|
||||
.label { display:block; font-size:.75rem; font-weight:600; color:#475569; margin-bottom:.25rem; text-transform:uppercase; letter-spacing:.05em; }
|
||||
.badge { display:inline-block; padding:.15rem .6rem; border-radius:9999px; font-size:.7rem; font-weight:600; text-transform:capitalize; }
|
||||
.badge-green { background:#dcfce7; color:#15803d; }
|
||||
.badge-yellow { background:#fef9c3; color:#854d0e; }
|
||||
.badge-red { background:#fee2e2; color:#991b1b; }
|
||||
.badge-slate { background:#f1f5f9; color:#475569; }
|
||||
.text-primary { color:#8eb02f; }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user