mtg_python_deckbuilder/code/web/templates/setup/index.html

{% extends "base.html" %}
{% block content %}
<section>
  <h2>Setup / Tagging</h2>
  <p class="muted" style="max-width:70ch;">Prepare or refresh the card database and apply tags. You can run this anytime.</p>

  <details open style="margin-top:.5rem;">
    <summary>Current Status</summary>
    <div id="setup-status" style="margin-top:.5rem; padding:1rem; border:1px solid var(--border); background:#0f1115; border-radius:8px;">
      <div class="muted">Status:</div>
      <div id="setup-status-line" style="margin-top:.25rem;">Checking…</div>
      <div id="setup-progress-line" class="muted" style="margin-top:.25rem; display:none;"></div>
      <div id="setup-progress-bar" style="margin-top:.25rem; width:100%; height:10px; background:#151821; border:1px solid var(--border); border-radius:6px; overflow:hidden; display:none;">
        <div id="setup-progress-bar-inner" style="height:100%; width:0%; background:#3b82f6;"></div>
      </div>
      <div id="setup-time-line" class="muted" style="margin-top:.25rem; display:none;"></div>
  <div id="setup-color-line" class="muted" style="margin-top:.25rem; display:none;"></div>
      <details id="setup-log-wrap" style="margin-top:.5rem; display:none;">
        <summary id="setup-log-summary" class="muted" style="cursor:pointer;">Show logs</summary>
        <pre id="setup-log-tail" style="margin-top:.5rem; max-height:240px; overflow:auto; background:#0b0d12; border:1px solid var(--border); padding:.5rem; border-radius:6px;"></pre>
      </details>
    </div>
  </details>

  <div style="margin-top:1rem; display:flex; gap:.5rem; flex-wrap:wrap;">
    <form id="frm-start-setup" action="/setup/start" method="post" onsubmit="event.preventDefault(); startSetup();">
      <button type="submit" id="btn-start-setup" class="action-btn">Run Setup/Tagging</button>
      <label class="muted" style="margin-left:.75rem; font-size:.9rem;">
        <input type="checkbox" id="chk-force" checked /> Force run
      </label>
    </form>
    <form method="get" action="/setup/running?start=1&force=1">
      <button type="submit" class="action-btn">Open Progress Page</button>
    </form>
  </div>

  <details style="margin-top:1.25rem;" open>
    <summary>Theme Catalog Status</summary>
    <div id="themes-status" style="margin-top:.5rem; padding:1rem; border:1px solid var(--border); background:#0f1115; border-radius:8px;">
      <div class="muted">Status:</div>
      <div id="themes-status-line" style="margin-top:.25rem;">Checking…</div>
      <div class="muted" id="themes-meta-line" style="margin-top:.25rem; display:none;"></div>
      <div class="muted" id="themes-stale-line" style="margin-top:.25rem; display:none; color:#f87171;"></div>
    </div>
  </details>
  <div style="margin-top:.75rem;">
    <button type="button" id="btn-refresh-themes" class="action-btn" onclick="refreshThemes()">Refresh Themes Only</button>
  </div>
</section>
<script>
(function(){
  // Minimal styling helper to unify button widths
  try {
    var style = document.createElement('style');
    style.textContent = '.action-btn{min-width:180px;}';
    document.head.appendChild(style);
  } catch(e){}
  function update(data){
    var line = document.getElementById('setup-status-line');
    var colorEl = document.getElementById('setup-color-line');
    var logEl = document.getElementById('setup-log-tail');
  var progEl = document.getElementById('setup-progress-line');
  var timeEl = document.getElementById('setup-time-line');
  var bar = document.getElementById('setup-progress-bar');
  var barIn = document.getElementById('setup-progress-bar-inner');
  var logWrap = document.getElementById('setup-log-wrap');
  var logSummary = document.getElementById('setup-log-summary');
    if (!line) return;
    if (data && data.running) {
      line.textContent = (data.message || 'Working…');
      if (typeof data.percent === 'number') {
        progEl.style.display = '';
        var p = Math.max(0, Math.min(100, data.percent));
        progEl.textContent = 'Progress: ' + p + '%';
        if (bar && barIn) { bar.style.display = ''; barIn.style.width = p + '%'; }
        if (typeof data.color_idx === 'number' && typeof data.color_total === 'number') {
          progEl.textContent += ' • Colors: ' + data.color_idx + ' / ' + data.color_total;
        }
        if (typeof data.eta_seconds === 'number') {
          var mins = Math.floor(data.eta_seconds / 60); var secs = data.eta_seconds % 60;
          progEl.textContent += ' • ETA: ~' + mins + 'm ' + secs + 's';
        }
      } else {
        progEl.style.display = 'none';
        if (bar) bar.style.display = 'none';
      }
      if (data.started_at) {
        timeEl.style.display = '';
        timeEl.textContent = 'Started: ' + data.started_at;
      } else {
        timeEl.style.display = 'none';
      }
      if (data.color) {
        colorEl.style.display = '';
        colorEl.textContent = 'Current color: ' + data.color;
      } else {
        colorEl.style.display = 'none';
      }
      if (data.log_tail) {
        var lines = data.log_tail.split(/\r?\n/).filter(function(x){ return x.trim() !== ''; });
        if (logWrap) logWrap.style.display = '';
        if (logSummary) logSummary.textContent = 'Show logs (' + lines.length + ' lines)';
        logEl.textContent = data.log_tail;
      } else {
        if (logWrap) logWrap.style.display = 'none';
      }
    } else if (data && data.phase === 'done') {
      line.textContent = 'Setup complete.';
      if (typeof data.percent === 'number') {
        progEl.style.display = '';
        var p2 = Math.max(0, Math.min(100, data.percent));
        progEl.textContent = 'Progress: ' + p2 + '%';
        if (bar && barIn) { bar.style.display = ''; barIn.style.width = p2 + '%'; }
      } else {
        progEl.style.display = 'none';
        if (bar) bar.style.display = 'none';
      }
      if (data.started_at || data.finished_at) {
        timeEl.style.display = '';
        var t = [];
        if (data.started_at) t.push('Started: ' + data.started_at);
        if (data.finished_at) t.push('Finished: ' + data.finished_at);
        timeEl.textContent = t.join(' • ');
      } else {
        timeEl.style.display = 'none';
      }
  colorEl.style.display = 'none';
  if (logWrap) logWrap.style.display = 'none';
    } else if (data && data.phase === 'error') {
      line.textContent = (data.message || 'Setup error.');
      if (data.color) {
        colorEl.style.display = '';
        colorEl.textContent = 'While working on: ' + data.color;
      }
    } else {
      line.textContent = 'Idle';
      progEl.style.display = 'none';
      timeEl.style.display = 'none';
  colorEl.style.display = 'none';
  if (logWrap) logWrap.style.display = 'none';
    }
  }
  function poll(){
    fetch('/status/setup', { cache: 'no-store' })
      .then(function(r){ return r.json(); })
      .then(update)
      .catch(function(){});
    pollThemes();
  }
  function pollThemes(){
    fetch('/themes/status', { cache: 'no-store' })
      .then(function(r){ return r.json(); })
      .then(updateThemes)
      .catch(function(){});
  }
  function updateThemes(data){
    var line = document.getElementById('themes-status-line');
    var meta = document.getElementById('themes-meta-line');
    var staleEl = document.getElementById('themes-stale-line');
    var btn = document.getElementById('btn-refresh-themes');
    if(!line) return;
    if(!data || !data.ok){ line.textContent = 'Unavailable'; return; }
    var parts = [];
    if (typeof data.theme_count === 'number') parts.push('Themes: '+data.theme_count);
    if (typeof data.yaml_file_count === 'number') parts.push('YAML: '+data.yaml_file_count);
    if (data.last_export_at) parts.push('Last Export: '+data.last_export_at);
    line.textContent = (data.theme_list_exists ? 'Ready' : 'Not generated');
    if(parts.length){ meta.style.display=''; meta.textContent = parts.join(' • '); } else { meta.style.display='none'; }
    if(data.stale){ staleEl.style.display=''; staleEl.textContent='Stale: needs refresh'; }
    else { staleEl.style.display='none'; }
    // Disable refresh while a theme export phase is active (in orchestrator phases 'themes' / 'themes-fast')
    try {
      if(btn){
        if(data.phase === 'themes' || data.phase === 'themes-fast'){
          btn.disabled = true; btn.textContent='Refreshing…';
        } else {
          if(!data.running){ btn.disabled = false; btn.textContent='Refresh Themes Only'; }
        }
      }
    } catch(e){}
  }
  window.refreshThemes = function(){
    var btn = document.getElementById('btn-refresh-themes');
    if(btn) btn.disabled = true;
    fetch('/themes/refresh', { method:'POST' })
      .then(function(){ setTimeout(function(){ pollThemes(); if(btn) btn.disabled=false; }, 1200); })
      .catch(function(){ if(btn) btn.disabled=false; });
  };
  function rapidPoll(times, delay){
    var i = 0;
    function tick(){
      poll();
      i++;
      if (i < times) setTimeout(tick, delay);
    }
    tick();
  }
  window.startSetup = function(){
    var btn = document.getElementById('btn-start-setup');
    var line = document.getElementById('setup-status-line');
    var force = document.getElementById('chk-force') && document.getElementById('chk-force').checked;
    if (btn) btn.disabled = true;
    if (line) line.textContent = 'Starting setup/tagging…';
    // First try POST with JSON body
    fetch('/setup/start', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ force: !!force }) })
      .then(function(r){ if (!r.ok) throw new Error('POST failed'); return r.json().catch(function(){ return {}; }); })
      .then(function(){ rapidPoll(5, 600); setTimeout(function(){ window.location.href = '/setup/running?start=1' + (force ? '&force=1' : ''); }, 500); })
      .catch(function(){
        // Fallback to GET if POST fails (proxy/middleware issues)
        var url = '/setup/start' + (force ? '?force=1' : '');
        fetch(url, { method: 'GET', cache: 'no-store' })
          .then(function(){ rapidPoll(5, 600); setTimeout(function(){ window.location.href = '/setup/running?start=1' + (force ? '&force=1' : ''); }, 500); })
          .catch(function(){});
      })
      .finally(function(){ if (btn) btn.disabled = false; });
  };
  setInterval(poll, 3000);
  poll();
  pollThemes();
})();
</script>
{% endblock %}