mirror of
https://github.com/mwisnowski/mtg_python_deckbuilder.git
synced 2025-12-17 08:00:13 +01:00
Web UI: setup progress + logs folding, Finished Decks library, commander search UX (debounce, keyboard, highlights, color chips), ranking fixes (first-word priority, substring include), optional auto-select; setup start reliability (POST+GET), force runs, status with percent/ETA/timestamps; stepwise builder with added stage reporting and sidecar summaries; keyboard grid wrap-around; restrict commander search to eligible rows
This commit is contained in:
mwisnowski
parent
8fa040a05a
commit
0f73a85a4e
43 changed files with 4515 additions and 105 deletions
162
code/web/templates/setup/index.html
Normal file
162
code/web/templates/setup/index.html
Normal file
|
|
@ -0,0 +1,162 @@
|
|||
{% 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">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">Open Progress Page</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
<script>
|
||||
(function(){
|
||||
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(){});
|
||||
}
|
||||
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();
|
||||
})();
|
||||
</script>
|
||||
{% endblock %}
|
||||
134
code/web/templates/setup/running.html
Normal file
134
code/web/templates/setup/running.html
Normal file
|
|
@ -0,0 +1,134 @@
|
|||
{% extends "base.html" %}
|
||||
{% block content %}
|
||||
<section>
|
||||
<h2>Preparing Card Database</h2>
|
||||
<p class="muted">Initial setup and tagging may take several minutes on first run.</p>
|
||||
|
||||
<div id="setup-status" style="margin-top:1rem; padding:1rem; border:1px solid var(--border); background:#0f1115; border-radius:8px;" data-next-url="{{ next_url or '' }}">
|
||||
<div class="muted">Status:</div>
|
||||
<div id="setup-status-line" style="margin-top:.25rem;">Starting…</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>
|
||||
|
||||
<div style="margin-top:1rem; display:flex; gap:.5rem;">
|
||||
<form method="get" action="/setup">
|
||||
<button type="submit">Back to Setup</button>
|
||||
</form>
|
||||
{% if next_url %}
|
||||
<form method="get" action="{{ next_url }}">
|
||||
<button type="submit">Continue</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
</div>
|
||||
</section>
|
||||
<script>
|
||||
(function(){
|
||||
var container = document.getElementById('setup-status');
|
||||
var nextUrl = (container && container.dataset.nextUrl) ? container.dataset.nextUrl : null;
|
||||
if (nextUrl === '') nextUrl = null;
|
||||
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';
|
||||
if (nextUrl) {
|
||||
setTimeout(function(){ window.location.href = nextUrl; }, 1200);
|
||||
}
|
||||
} 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';
|
||||
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(){});
|
||||
}
|
||||
setInterval(poll, 3000);
|
||||
poll();
|
||||
})();
|
||||
</script>
|
||||
{% endblock %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue