catarrh/simple
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: green Send buttons, TP status below the buttons

Browse Source 
- TERMINAL PROFILE: the status line moves out of the button row (its own
  line under Send/Configure; tpStatusMsg keeps the top margin on every
  update) and the Send button turns emerald
- STATUS and Polling: Send STATUS turns emerald as well
- html guard test for the green buttons and the status placement;
  SW cache simple-v195
This commit is contained in:
Антон Трошин
2026-09-19 23:10:41 +03:00
parent bc5d46eccb
commit 8848df1c1e
3 changed files with 14 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/index.html
+4 -4
View File
@@ -919,7 +919,7 @@
<fieldset class="border border-gray-200 dark:border-slate-700 rounded p-3">
<legend class="px-1 text-xs font-medium text-gray-500 dark:text-slate-400" data-l10n="STATUS and Polling">STATUS and Polling</legend>
<div class="flex items-center gap-2">
<button id="pli-status-btn" data-needs="card" onclick="pysimStatusPoll()" class="px-2.5 py-1 text-sm rounded bg-gray-600 text-white hover:bg-gray-700 disabled:opacity-40 disabled:cursor-not-allowed" data-l10n="Send STATUS">Send STATUS</button>
<button id="pli-status-btn" data-needs="card" onclick="pysimStatusPoll()" class="px-2.5 py-1 text-sm rounded bg-emerald-600 text-white hover:bg-emerald-700 disabled:opacity-40 disabled:cursor-not-allowed" data-l10n="Send STATUS">Send STATUS</button>
<span class="text-xs text-gray-500 dark:text-slate-400">|</span>
<span class="text-xs text-gray-500 dark:text-slate-400" data-l10n="Polling">Polling</span>
<button id="pli-pause-btn" data-needs="server" onclick="pysimPollToggle()" class="px-2.5 py-1 text-sm rounded bg-gray-200 dark:bg-slate-700 text-gray-700 dark:text-slate-300 hover:bg-gray-300 dark:hover:bg-slate-600 disabled:opacity-40 disabled:cursor-not-allowed">OFF</button>
@@ -929,10 +929,10 @@
<fieldset class="border border-gray-200 dark:border-slate-700 rounded p-3">
<legend class="px-1 text-xs font-medium text-gray-500 dark:text-slate-400" data-l10n="TERMINAL PROFILE">TERMINAL PROFILE</legend>
<div class="flex items-center gap-2">
<button id="tp-send-btn" data-needs="card" onclick="tpSend()" class="px-2.5 py-1 text-sm rounded bg-gray-600 text-white hover:bg-gray-700 disabled:opacity-40 disabled:cursor-not-allowed" data-l10n="Send">Send</button>
<button id="tp-send-btn" data-needs="card" onclick="tpSend()" class="px-2.5 py-1 text-sm rounded bg-emerald-600 text-white hover:bg-emerald-700 disabled:opacity-40 disabled:cursor-not-allowed" data-l10n="Send">Send</button>
<button id="tp-configure-btn" data-needs="server" onclick="tpOpen()" class="px-2.5 py-1 text-sm rounded bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-40 disabled:cursor-not-allowed" data-l10n="Configure">Configure</button>
<span id="tp-status" class="text-xs text-gray-400 dark:text-slate-500"></span>
</div>
<div id="tp-status" class="text-xs mt-1 text-gray-400 dark:text-slate-500"></div>
</fieldset>
<fieldset class="flex-1 min-w-0 border border-gray-200 dark:border-slate-700 rounded p-3">
<legend class="px-1 text-xs font-medium text-gray-500 dark:text-slate-400" data-l10n="Events that the card monitors (SET UP EVENT LIST):">Events that the card monitors (SET UP EVENT LIST):</legend>
@@ -7617,7 +7617,7 @@ function tpStatusMsg(text, cls) {
const el = document.getElementById('tp-status');
if (!el) return;
el.textContent = text || '';
el.className = 'text-xs ' + (cls || 'text-gray-400 dark:text-slate-500');
el.className = 'text-xs mt-1 ' + (cls || 'text-gray-400 dark:text-slate-500');
}
async function tpRefresh() {
frontend/sw.js
+1 -1
View File
@@ -1,4 +1,4 @@
const CACHE = 'simple-v194';
const CACHE = 'simple-v195';
const URLS = [
'index.html',
'help.html',
frontend/tests/html.test.js
+9
View File
@@ -217,6 +217,15 @@ test('phone simulator has the network-simulation fieldset', () => {
assert.match(html, /data-needs="card" onclick="netSimRun\('service_lost'\)"/);
});
test('phone simulator action buttons are green and the TP status sits below them', () => {
assert.match(html, /id="tp-send-btn"[^>]*bg-emerald-600/);
assert.match(html, /id="pli-status-btn"[^>]*bg-emerald-600/);
// #tp-status is outside the button row (the row's </div> comes after
// the last button and before the status element)
const block = html.slice(html.indexOf('id="tp-send-btn"'), html.indexOf('id="tp-status"'));
assert.ok(block.lastIndexOf('</div>') > block.lastIndexOf('</button>'));
});
test('SCP81 listener exposes its four modes with the matching notes', () => {
for (const v of ['tls', 'redirect', 'passthru', 'dump']) {
assert.ok(html.includes('value="' + v + '"'), v);