mirror of
https://github.com/mwisnowski/mtg_python_deckbuilder.git
synced 2026-01-31 05:35:17 +01:00
87 lines
No EOL
4.1 KiB
HTML
87 lines
No EOL
4.1 KiB
HTML
{% extends "base.html" %}
|
||
{% block content %}
|
||
<section>
|
||
<h2>Diagnostics</h2>
|
||
<p class="muted">Use these tools to verify error handling surfaces.</p>
|
||
<div class="card" style="background:#0f1115; border:1px solid var(--border); border-radius:10px; padding:.75rem; margin-bottom:.75rem">
|
||
<h3 style="margin-top:0">System summary</h3>
|
||
<div id="sysSummary" class="muted">Loading…</div>
|
||
</div>
|
||
<div class="card" style="background:#0f1115; border:1px solid var(--border); border-radius:10px; padding:.75rem; margin-bottom:.75rem">
|
||
<h3 style="margin-top:0">Performance (local)</h3>
|
||
<div class="muted" style="margin-bottom:.35rem">Scroll the Step 5 list; this panel shows a rough FPS estimate and virtualization renders.</div>
|
||
<div style="display:flex; gap:1rem; flex-wrap:wrap">
|
||
<div><strong>Scroll FPS:</strong> <span id="perf-fps">–</span></div>
|
||
<div><strong>Visible tiles:</strong> <span id="perf-visible">–</span></div>
|
||
<div><strong>Render count:</strong> <span id="perf-renders">0</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="card" style="background:#0f1115; border:1px solid var(--border); border-radius:10px; padding:.75rem;">
|
||
<h3 style="margin-top:0">Error triggers</h3>
|
||
<div class="row" style="display:flex; gap:.5rem; align-items:center">
|
||
<button class="btn" hx-get="/diagnostics/trigger-error" hx-trigger="click" hx-target="this" hx-swap="none">Trigger HTTP error (418)</button>
|
||
<button class="btn" hx-get="/diagnostics/trigger-error?kind=unhandled" hx-trigger="click" hx-target="this" hx-swap="none">Trigger unhandled error (500)</button>
|
||
<small class="muted">You should see a toast and an inline banner with Request-ID.</small>
|
||
</div>
|
||
</div>
|
||
{% if show_logs %}
|
||
<p style="margin-top:.75rem"><a class="btn" href="/logs">Open Logs</a></p>
|
||
{% endif %}
|
||
</section>
|
||
<script>
|
||
(function(){
|
||
var el = document.getElementById('sysSummary');
|
||
function render(data){
|
||
if (!el) return;
|
||
try {
|
||
var v = (data && data.version) || 'dev';
|
||
var up = (data && data.uptime_seconds) || 0;
|
||
var st = (data && data.server_time_utc) || '';
|
||
var flags = (data && data.flags) || {};
|
||
el.innerHTML = '<div><strong>Version:</strong> '+String(v)+'</div>'+
|
||
(st ? '<div><strong>Server time (UTC):</strong> '+String(st)+'</div>' : '')+
|
||
'<div><strong>Uptime:</strong> '+String(up)+'s</div>'+
|
||
'<div><strong>Flags:</strong> SHOW_LOGS='+ (flags.SHOW_LOGS? '1':'0') +', SHOW_DIAGNOSTICS='+ (flags.SHOW_DIAGNOSTICS? '1':'0') +', SHOW_SETUP='+ (flags.SHOW_SETUP? '1':'0') +'</div>';
|
||
} catch(_){ el.textContent = 'Unavailable'; }
|
||
}
|
||
function load(){
|
||
try { fetch('/status/sys', { cache: 'no-store' }).then(function(r){ return r.json(); }).then(render).catch(function(){ el.textContent='Unavailable'; }); } catch(_){ el.textContent='Unavailable'; }
|
||
}
|
||
load();
|
||
// Perf probe: listen to scroll on a card grid if present
|
||
try{
|
||
var fpsEl = document.getElementById('perf-fps');
|
||
var visEl = document.getElementById('perf-visible');
|
||
var rcEl = document.getElementById('perf-renders');
|
||
var grid = document.querySelector('.card-grid');
|
||
var last = performance.now();
|
||
var frames = 0; var renders = 0;
|
||
function tick(){
|
||
frames++;
|
||
var now = performance.now();
|
||
if (now - last >= 500){
|
||
var fps = Math.round((frames * 1000) / (now - last));
|
||
if (fpsEl) fpsEl.textContent = String(fps);
|
||
frames = 0; last = now;
|
||
}
|
||
requestAnimationFrame(tick);
|
||
}
|
||
requestAnimationFrame(tick);
|
||
function updateVisible(){
|
||
try{
|
||
if (!grid) return;
|
||
var tiles = grid.querySelectorAll('.card-tile');
|
||
var c = 0; tiles.forEach(function(t){ if (t.style.display !== 'none') c++; });
|
||
if (visEl) visEl.textContent = String(c);
|
||
}catch(_){ }
|
||
}
|
||
if (grid){
|
||
grid.addEventListener('scroll', updateVisible);
|
||
var mo = new MutationObserver(function(){ renders++; if (rcEl) rcEl.textContent = String(renders); updateVisible(); });
|
||
mo.observe(grid, { childList: true, subtree: true, attributes: false });
|
||
updateVisible();
|
||
}
|
||
}catch(_){ }
|
||
})();
|
||
</script>
|
||
{% endblock %} |