Show connect-phase messages in visible slot (was writing to hidden #pysim-status)

#pysim-status lives inside the hidden #pysim-connected-row, so 'Checking card…',
version warnings, and the connection-failure hint were never visible. Add
#pysim-connect-msg inside the disconnected info block and route pre-connect
messages to it.
This commit is contained in:
2026-08-14 00:18:22 +03:00
parent a88930b7b1
commit 65127b8cfe
+6 -4
View File
@@ -847,6 +847,7 @@
<div id="pysim-connect-info" class="mb-3 text-xs text-gray-500 dark:text-slate-400 leading-relaxed"> <div id="pysim-connect-info" class="mb-3 text-xs text-gray-500 dark:text-slate-400 leading-relaxed">
<p data-l10n="To access local card reader, you need pysim-otaman-server running locally.">To access local card reader, you need pysim-otaman-server running locally.</p> <p data-l10n="To access local card reader, you need pysim-otaman-server running locally.">To access local card reader, you need pysim-otaman-server running locally.</p>
<p><span data-l10n="To connect, install">To connect, install</span> <a href="https://github.com/anttro/pysim-otaman-server" target="_blank" class="text-blue-600 dark:text-blue-400 underline">pysim-otaman-server</a>: <code class="font-mono bg-gray-100 dark:bg-slate-700 px-1 rounded">git clone https://github.com/anttro/pysim-otaman-server.git</code> <span data-l10n="and start it.">and start it.</span><br><span data-l10n="Refer to pysim-otaman-server README files for details.">Refer to pysim-otaman-server README files for details.</span> <span data-l10n="Click">Click</span> <b data-l10n="Connect">Connect</b> <span data-l10n="when pysim-otaman-server is ready">when pysim-otaman-server is ready</span></p> <p><span data-l10n="To connect, install">To connect, install</span> <a href="https://github.com/anttro/pysim-otaman-server" target="_blank" class="text-blue-600 dark:text-blue-400 underline">pysim-otaman-server</a>: <code class="font-mono bg-gray-100 dark:bg-slate-700 px-1 rounded">git clone https://github.com/anttro/pysim-otaman-server.git</code> <span data-l10n="and start it.">and start it.</span><br><span data-l10n="Refer to pysim-otaman-server README files for details.">Refer to pysim-otaman-server README files for details.</span> <span data-l10n="Click">Click</span> <b data-l10n="Connect">Connect</b> <span data-l10n="when pysim-otaman-server is ready">when pysim-otaman-server is ready</span></p>
<div id="pysim-connect-msg" class="text-xs"></div>
</div> </div>
<div id="pysim-connected-row" class="mb-3 hidden"> <div id="pysim-connected-row" class="mb-3 hidden">
<div class="flex gap-3 items-start"> <div class="flex gap-3 items-start">
@@ -2721,7 +2722,8 @@ async function pysimConnect() {
btn.disabled = true; btn.disabled = true;
btn.textContent = t('Connecting...'); btn.textContent = t('Connecting...');
const statusEl = document.getElementById('pysim-status'); const statusEl = document.getElementById('pysim-status');
statusEl.innerHTML = '<span class="text-gray-500">' + t('Checking card...') + '</span>'; const msgEl = document.getElementById('pysim-connect-msg');
msgEl.innerHTML = '<span class="text-gray-500">' + t('Checking card...') + '</span>';
pysimSetConnected('spin'); pysimSetConnected('spin');
try { try {
// Version check // Version check
@@ -2729,13 +2731,13 @@ async function pysimConnect() {
if (!ver.version) throw new Error('No version'); if (!ver.version) throw new Error('No version');
const sv = (ver.version || '').split('.').map(Number); const sv = (ver.version || '').split('.').map(Number);
if (sv[0] < 1 || (sv[0] === 1 && sv[1] < 0)) { if (sv[0] < 1 || (sv[0] === 1 && sv[1] < 0)) {
statusEl.innerHTML = '<span class="text-red-500">Server version ' + esc(ver.version) + ' is outdated. Please update pysim-otaman-server.</span>'; msgEl.innerHTML = '<span class="text-red-500">Server version ' + esc(ver.version) + ' is outdated. Please update pysim-otaman-server.</span>';
btn.textContent = t('Connect'); btn.textContent = t('Connect');
btn.disabled = false; btn.disabled = false;
return; return;
} }
if (sv[0] > 1) { if (sv[0] > 1) {
statusEl.innerHTML = '<span class="text-yellow-500">Warning: server version ' + esc(ver.version) + ' is newer than expected. Update OTAMan for full compatibility.</span>'; msgEl.innerHTML = '<span class="text-yellow-500">Warning: server version ' + esc(ver.version) + ' is newer than expected. Update OTAMan for full compatibility.</span>';
} }
const status = await pysimFetch('/api/status'); const status = await pysimFetch('/api/status');
if (!status.app_ready) { if (!status.app_ready) {
@@ -2763,7 +2765,7 @@ async function pysimConnect() {
pysimSetConnected(false); pysimSetConnected(false);
const hint = t(pysimIsLikelyBlocked() ? 'pysim-blocked-hint' : 'pysim-unreachable-hint') const hint = t(pysimIsLikelyBlocked() ? 'pysim-blocked-hint' : 'pysim-unreachable-hint')
.replace('{url}', esc(pysimBase)); .replace('{url}', esc(pysimBase));
statusEl.innerHTML = msgEl.innerHTML =
'<span class="text-red-500">' + t('Connection failed:') + ' ' + esc(e.message) + '</span>' + '<span class="text-red-500">' + t('Connection failed:') + ' ' + esc(e.message) + '</span>' +
'<br><span class="text-sm text-gray-600 dark:text-slate-400">' + hint + '</span>'; '<br><span class="text-sm text-gray-600 dark:text-slate-400">' + hint + '</span>';
btn.textContent = t('Connect'); btn.textContent = t('Connect');