STK menu: remove warning, restructure buttons (OK/Back/Cancel/Timeout/Exit), fix double-fetch

This commit is contained in:
2026-08-08 23:38:31 +03:00
parent 4dd2eb1956
commit 718160b708
2 changed files with 148 additions and 26 deletions
+25 -26
View File
@@ -916,15 +916,15 @@
<div id="stk-menu-panel" class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center hidden">
<div class="bg-white dark:bg-slate-800 rounded-lg p-4 max-w-md w-full max-h-[80vh] flex flex-col">
<div id="stk-menu-warning" class="hidden mb-2 text-xs text-amber-600 dark:text-amber-400 text-center bg-amber-50 dark:bg-amber-900/30 rounded px-2 py-1">Menu session blocks all other commands, click Cancel/Exit to leave menu and unblock</div>
<div class="flex justify-between items-center mb-3">
<button id="stk-back-btn" onclick="stkMenuRespond('back')" class="px-3 py-1 text-xs rounded-full bg-gray-200 dark:bg-slate-700 text-gray-700 dark:text-slate-300 hover:bg-gray-300 dark:hover:bg-slate-600" disabled>← Back</button>
<span id="stk-menu-panel-title" class="font-bold text-sm"></span>
<button id="stk-cancel-btn" onclick="stkMenuRespond('cancel')" class="px-3 py-1 text-xs rounded-full bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 hover:bg-red-200 dark:hover:bg-red-900/50">Cancel/Exit</button>
<button onclick="stkMenuExit()" class="px-3 py-1 text-xs rounded-full bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 hover:bg-red-200 dark:hover:bg-red-900/50">Exit</button>
</div>
<div id="stk-menu-panel-content" class="flex-1 overflow-auto"></div>
<div id="stk-menu-buttons" class="flex justify-between mt-3 pt-3 border-t border-gray-200 dark:border-slate-700 hidden">
<button onclick="stkMenuRespond('timeout')" class="px-3 py-1 text-xs rounded-full bg-gray-200 dark:bg-slate-700 text-gray-700 dark:text-slate-300 hover:bg-gray-300 dark:hover:bg-slate-600">Timeout</button>
<button onclick="stkMenuRespond('cancel')" class="px-3 py-1 text-xs rounded-full bg-gray-200 dark:bg-slate-700 text-gray-700 dark:text-slate-300 hover:bg-gray-300 dark:hover:bg-slate-600">Cancel</button>
<button onclick="stkMenuRespond('ok')" class="px-4 py-1 text-xs rounded-full bg-blue-600 text-white hover:bg-blue-700">OK</button>
</div>
</div>
@@ -2560,8 +2560,7 @@ async function pysimConnect() {
pysimSetConnected(false);
statusEl.innerHTML = '<span class="text-red-500">No card detected. Insert card and click Equip card button</span>';
pysimShowConnected(true);
btn.textContent = 'Connected';
stkCheckMenu();
btn.textContent = 'Connected';
btn.disabled = false;
return;
}
@@ -2571,6 +2570,7 @@ async function pysimConnect() {
pysimLoadCommands();
pysimFsRefresh();
btn.textContent = 'Connected';
stkCheckMenu();
} catch (e) {
pysimSetConnected(false);
statusEl.innerHTML = '<span class="text-red-500">Connection failed: ' + esc(e.message) + '</span>';
@@ -2743,7 +2743,9 @@ let stkMenuStack = [];
async function stkCheckMenu() {
try {
console.log('stkCheckMenu called');
const data = await pysimFetch('/api/menu');
console.log('menu data:', data);
const btn = document.getElementById('stk-menu-btn');
if (data && data.title && data.items && data.items.length) {
document.getElementById('stk-menu-title').textContent = data.title;
@@ -2751,7 +2753,9 @@ async function stkCheckMenu() {
} else {
btn.style.display = 'none';
}
} catch (e) {}
} catch (e) {
console.error('stkCheckMenu error:', e);
}
}
function stkSetPillsDisabled(disabled) {
@@ -2763,13 +2767,11 @@ function stkSetPillsDisabled(disabled) {
}
function stkMenuOpen() {
const menu = document.getElementById('stk-menu-btn');
document.getElementById('stk-menu-panel-title').textContent = document.getElementById('stk-menu-title').textContent;
document.getElementById('stk-menu-warning').classList.remove('hidden');
stkSetPillsDisabled(true);
stkMenuStack = [];
document.getElementById('stk-back-btn').disabled = true;
document.getElementById('stk-menu-buttons').classList.remove('hidden');
document.getElementById('stk-menu-buttons').classList.add('hidden');
document.getElementById('stk-menu-panel').classList.remove('hidden');
stkMenuRenderItems();
}
@@ -2777,7 +2779,13 @@ function stkMenuOpen() {
function stkMenuClose() {
document.getElementById('stk-menu-panel').classList.add('hidden');
stkSetPillsDisabled(false);
document.getElementById('stk-menu-warning').classList.add('hidden');
}
async function stkMenuExit() {
try {
await pysimFetch('/api/menu-respond', { result: 'cancel' });
} catch (e) {}
stkMenuClose();
}
function stkMenuRenderItems() {
@@ -2810,9 +2818,12 @@ async function stkMenuItemClick(itemId) {
function stkMenuHandleResponse(data) {
const content = document.getElementById('stk-menu-panel-content');
const backBtn = document.getElementById('stk-back-btn');
const btns = document.getElementById('stk-menu-buttons');
btns.classList.add('hidden');
if (data.type === 'display_text') {
content.innerHTML = '<div class="text-sm whitespace-pre-wrap p-2 bg-gray-50 dark:bg-slate-700 rounded">' + esc(data.text) + '</div>';
backBtn.disabled = stkMenuStack.length === 0;
btns.classList.remove('hidden');
} else if (data.type === 'select_item') {
stkMenuStack.push(data.items);
content.innerHTML = '';
@@ -2824,6 +2835,7 @@ function stkMenuHandleResponse(data) {
html += '</div>';
content.innerHTML = html;
backBtn.disabled = false;
btns.classList.remove('hidden');
} else {
content.innerHTML = '<span class="text-gray-500 text-sm">Done</span>';
stkSetPillsDisabled(false);
@@ -2845,23 +2857,10 @@ async function stkSubItemClick(itemId) {
async function stkMenuRespond(result) {
try {
const data = await pysimFetch('/api/menu-respond', { result: result });
if (result === 'cancel') {
stkMenuClose();
return;
}
if (result === 'back') {
if (stkMenuStack.length > 0) {
const prev = stkMenuStack.pop();
const content = document.getElementById('stk-menu-panel-content');
content.innerHTML = '';
let html = '<div class="space-y-1">';
prev.forEach(item => {
html += '<div class="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-gray-100 dark:hover:bg-slate-700 cursor-pointer" onclick="stkSubItemClick(' + item.id + ')"><span class="w-5 text-xs font-bold text-gray-400 text-right">' + item.id + '</span><span class="text-sm">' + esc(item.text) + '</span></div>';
});
html += '</div>';
content.innerHTML = html;
document.getElementById('stk-back-btn').disabled = stkMenuStack.length === 0;
}
if (result === 'cancel' || result === 'back' || result === 'timeout') {
stkMenuRenderItems();
document.getElementById('stk-menu-buttons').classList.add('hidden');
document.getElementById('stk-back-btn').disabled = stkMenuStack.length === 0;
return;
}
stkMenuHandleResponse(data);