Bridge-and-Join-s/internal/lkgateway/web/templates/admin_prepare.html

{{define "content"}}
<style>
/* Тот же язык, что у мастера: одна карточка, заголовок и пояснение, строки «название — значение», «Далее» справа внизу. */
.prep { max-width:720px; margin:10px auto 0; padding:28px 32px 22px; border-radius:16px; }
.prep h2 { font-size:21px; font-weight:680; letter-spacing:-0.015em; margin:0 0 6px; }
.prep-lead { color:var(--muted); font-size:14.5px; margin:0 0 18px; }
.prep-kv { display:grid; grid-template-columns:minmax(120px,170px) minmax(0,1fr); gap:10px 20px; font-size:14.5px; margin:0 0 14px; }
.prep-kv dt { color:var(--muted); } .prep-kv dd { margin:0; }
.prep-ok { display:flex; gap:10px; align-items:center; padding:12px 14px; border-radius:10px; font-size:14px; margin:0 0 16px; background:var(--ok-weak); border:1px solid color-mix(in srgb, var(--ok) 30%, transparent); }
.prep-row { display:grid; grid-template-columns:22px 1fr; gap:2px 12px; padding:12px 0; border-top:1px solid var(--border); font-size:14.5px; }
.prep-row .ic { display:grid; place-items:center; height:22px; }
.prep-row b { font-weight:600; }
.prep-row .muted { font-size:13px; }
.ic-ok { position:relative; width:18px; height:18px; border-radius:50%; background:var(--ok); }
.ic-ok::after { content:""; position:absolute; left:50%; top:45%; width:4px; height:8px; border:solid #fff; border-width:0 1.8px 1.8px 0; transform:translate(-50%,-50%) rotate(45deg); }
.ic-wait { width:16px; height:16px; border-radius:50%; border:1.5px solid var(--border-strong); }
.prep-bar { height:6px; border-radius:3px; background:var(--card-2); overflow:hidden; margin:6px 0 0; }
.prep-bar i { display:block; height:100%; width:100%; background:var(--accent); transform-origin:left center; transform:scaleX(0); transition:transform .4s ease; }
.prep-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:18px; padding-top:18px; border-top:1px solid var(--border); flex-wrap:wrap; }
.prep-foot .btn { border-radius:999px; padding:10px 22px; font-size:14.5px; font-weight:600; text-decoration:none; }
@keyframes prepspin { to { transform:rotate(360deg); } }
.spin { display:inline-block; width:14px; height:14px; border:2px solid var(--accent-weak); border-top-color:var(--accent); border-radius:50%; animation:prepspin .8s linear infinite; vertical-align:-2px; }
@media (prefers-reduced-motion: reduce) { .spin { animation:none; } .prep-bar i { transition:none; } }
@media (max-width:600px) { .prep { padding:20px 18px 16px; } .prep-kv { grid-template-columns:minmax(0,1fr); gap:2px 0; } .prep-kv dd { margin-bottom:8px; } }
</style>
<div class="card prep">
  <h2>Подготовка модулей</h2>
  <p class="prep-lead">bj проверяет обновления, ставит и запускает модули вашей лицензии — затем откроется мастер настройки.</p>
  {{if .Flash}}<div class="prep-ok"><i class="ic-ok"></i><span>{{.Flash}}</span></div>{{end}}
  <dl class="prep-kv">
    <dt>Организация</dt><dd>{{.Tenant}}</dd>
    <dt>Лицензия</dt><dd>активна · {{.Until}}</dd>
  </dl>
  <div id="prep-rows"><p class="muted" style="margin:12px 0 0">Проверяю обновления и состав лицензии…</p></div>
  <div id="prep-prog" style="display:none;margin-top:8px"><span class="muted" id="prep-stage" style="font-size:13px"></span><div class="prep-bar"><i id="prep-fill"></i></div></div>
  <div class="prep-foot">
    <span id="prep-sum" style="font-weight:600"></span>
    <a class="btn" id="prep-next" href="{{.Next}}" style="display:none">Перейти к настройке →</a>
  </div>
</div>
<script>
(function(){
  var rows=document.getElementById('prep-rows'), sum=document.getElementById('prep-sum'), nxt=document.getElementById('prep-next');
  var prog=document.getElementById('prep-prog'), stage=document.getElementById('prep-stage'), fill=document.getElementById('prep-fill');
  var next={{.Next}}, started=false, redirect=null, boot=null, lost=0;
  function esc(s){return String(s==null?'':s).replace(/[&<>"]/g,function(c){return{'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c]})}
  var ic={ok:'<i class="ic-ok" aria-label="готово"></i>',run:'<span class="spin" aria-label="идёт"></span>',wait:'<i class="ic-wait" aria-label="ждёт"></i>',warn:'<span style="color:var(--warn)">⚠</span>',err:'<span style="color:var(--err)">✗</span>',info:'<span class="muted">ⓘ</span>'};
  function mb(n){return (n/1048576).toFixed(1).replace('.',',')+' МБ'}
  function draw(d){
    rows.innerHTML=d.items.map(function(it){return '<div class="prep-row"><div class="ic">'+ic[it.state]+'</div><div><b>'+esc(it.title)+'</b>'+(it.detail?'<br><span class="muted">'+esc(it.detail)+'</span>':'')+'</div></div>'}).join('');
    if(d.running && d.stage){ prog.style.display=''; stage.textContent=d.stage+(d.total?' — '+mb(d.done)+' из '+mb(d.total):''); fill.style.transform='scaleX('+(d.total?Math.min(1,d.done/d.total):0.15)+')'; }
    else prog.style.display='none';
    var bad=d.items.filter(function(it){return it.state==='err'}).length, warn=d.items.filter(function(it){return it.state==='warn'}).length;
    if(d.running || d.busy || (d.pending && !d.finished)){ sum.innerHTML='<span class="muted" style="font-weight:400">Обновления и модули… обычно пара минут</span>'; nxt.style.display='none'; return false; }
    nxt.style.display='';
    if(bad){ sum.innerHTML='<span style="color:var(--err)">✗ Не всё установилось</span> <span class="muted" style="font-weight:400">— продолжить можно, модули поставятся из «Настройка → Обновления»</span>'; return true; }
    if(warn){ sum.innerHTML='<span style="color:var(--ok)">✓ Готово</span> <span class="muted" style="font-weight:400">— есть замечание (⚠), продолжать можно</span>'; return true; }
    sum.innerHTML='<span style="color:var(--ok)">✓ Модули готовы</span> <span class="muted" style="font-weight:400">— открываю мастер настройки…</span>';
    if(!redirect) redirect=setTimeout(function(){ location.href=next; }, 2500);
    return true;
  }
  function poll(){
    fetch('/admin/setup/prepare/status',{cache:'no-store'}).then(function(r){return r.json()}).then(function(d){
      lost=0;
      if(boot!==null && d.boot!==boot){ started=false; if(redirect){ clearTimeout(redirect); redirect=null; } } // bj перезапустился после обновления — продолжаем
      boot=d.boot;
      if(!started && d.pending && !d.running && !d.finished){ started=true; fetch('/admin/setup/prepare/start',{method:'POST',cache:'no-store'}).then(function(){ setTimeout(poll,600); }); draw(d); return; }
      if(!draw(d)) setTimeout(poll,1500);
    }).catch(function(){ // bj перезапускается (обновилось ядро) — ждём
      if(++lost>1){ prog.style.display='none'; sum.innerHTML='<span class="spin"></span> <span class="muted" style="font-weight:400">bj перезапускается после обновления — подождите…</span>'; nxt.style.display='none'; }
      setTimeout(poll,3000); });
  }
  poll();
})();
</script>
{{end}}