ui: print the equipped card's ICCID in the header indicator (v2.5.2)

- new #state-indicator-iccid span between the card image and the ADM badge;
  shows the EF.ICCID digits of the equipped card (hidden without a card
  session or when the ICCID is unreadable, cleared when the server is lost)
- pysimUpdateIccidIndicator() mirrors the ADM badge pattern (no rewrite when
  the value is unchanged); wired into pysimCardStateUpdate() and
  pysimSetServerAvailable()
- indicator/card_state tests for show/hide and markup order;
  SW cache simple-v197

frontend/tests/card_state.test.js

@@ -24,6 +24,7 @@ function extractFunc(src, name) {
 let code = 'var _pysimCardStateKey = null;\nvar _pysimCardSession = null;\n'
 	+ 'var _pysimServerAvailable = null;\nvar _pysimCardEquipped = false;\n'
 	+ 'var _pysimProactiveSeq = null;\nvar _pysimStkSig = null;\nvar _pysimAdmVerified = null;\n'
+	+ 'var _pysimHeaderIccid = undefined;\n'
 	+ 'var _cardsAutoIccid = null;\nvar _pysimCardIccid = null;\n';
 code += extractFunc(html, 'pysimCardStateUpdate') + '\n';
 code += extractFunc(html, 'pysimAvailabilityState') + '\n';
@@ -31,6 +32,7 @@ code += extractFunc(html, 'pysimControlDisabled') + '\n';
 code += extractFunc(html, 'pysimProactiveSeqChanged') + '\n';
 code += extractFunc(html, 'pysimStkStatusChanged') + '\n';
 code += extractFunc(html, 'pysimUpdateAdmIndicator') + '\n';
+code += extractFunc(html, 'pysimUpdateIccidIndicator') + '\n';
 code += extractFunc(html, 'pysimSetServerAvailable') + '\n';
 code += '\nglobalThis.esc = s => s;\n';
 code += 'globalThis.t = s => s;\n';
@@ -54,16 +56,19 @@ function fakeIndicator() {
 function setup() {
 	const el = { textContent: 'status line', innerHTML: '' };
 	const adm = fakeIndicator();
+	const iccidEl = fakeIndicator();
 	const calls = { connected: [], resets: [], refreshStatus: [], proactive: 0, autoIccid: [] };
 	_pysimCardStateKey = null;
 	_pysimCardSession = null;
 	_pysimProactiveSeq = null;
 	_pysimAdmVerified = null;
+	_pysimHeaderIccid = undefined;
 	_pysimServerAvailable = null;
 	_cardsAutoIccid = null;
 	_pysimCardIccid = null;
 	globalThis.document = {
-		getElementById: id => id === 'state-indicator-adm' ? adm : el,
+		getElementById: id => id === 'state-indicator-adm' ? adm
+			: (id === 'state-indicator-iccid' ? iccidEl : el),
 		querySelectorAll: () => [],
 	};
 	globalThis.pysimSetConnected = v => calls.connected.push(v);
@@ -72,7 +77,7 @@ function setup() {
 	globalThis.isViewVisible = () => true;
 	globalThis.pysimProactiveLogRender = () => { calls.proactive++; };
 	globalThis.cardsAutoSelectByIccid = iccid => { calls.autoIccid.push(iccid); return -1; };
-	return { el, adm, calls };
+	return { el, adm, iccidEl, calls };
 }
 
 function status(extra) {
@@ -250,3 +255,18 @@ test('losing the server hides the ADM badge', () => {
 	pysimSetServerAvailable(false);
 	assert.ok(adm.classes.has('hidden'));
 });
+
+test('the header indicator prints the equipped card ICCID', () => {
+	const { iccidEl } = setup();
+	pysimCardStateUpdate(status({ connected: true, card_present: true, card_session: 2, iccid: '89701450001700031958' }));
+	assert.strictEqual(iccidEl.textContent, '89701450001700031958');
+	assert.ok(!iccidEl.classes.has('hidden'));
+	// equipped but unreadable -> hidden again
+	pysimCardStateUpdate(status({ connected: true, card_present: true, card_session: 2, iccid: null }));
+	assert.strictEqual(iccidEl.textContent, '');
+	assert.ok(iccidEl.classes.has('hidden'));
+	// losing the server hides it too
+	pysimCardStateUpdate(status({ connected: true, card_present: true, card_session: 2, iccid: '89701450001700031958' }));
+	pysimSetServerAvailable(false);
+	assert.ok(iccidEl.classes.has('hidden'));
+});

frontend/tests/indicator.test.js

@@ -21,12 +21,13 @@ function extractFunc(src, name) {
 	return src.slice(m.index, i + 1);
 }
 
-let code = 'var _pysimServerAvailable = null;\nvar _pysimCardEquipped = false;\nvar _pysimEquipping = false;\nvar _pysimCardIccid = null;\n';
+let code = 'var _pysimServerAvailable = null;\nvar _pysimCardEquipped = false;\nvar _pysimEquipping = false;\nvar _pysimCardIccid = null;\nvar _pysimHeaderIccid = undefined;\n';
 code += extractFunc(html, 'pysimAvailabilityState') + '\n';
 code += extractFunc(html, 'pysimControlDisabled') + '\n';
 code += extractFunc(html, 'pysimNeedsHint') + '\n';
 code += extractFunc(html, 'pysimApplyAvailability') + '\n';
 code += extractFunc(html, 'pysimUpdateStateIndicator') + '\n';
+code += extractFunc(html, 'pysimUpdateIccidIndicator') + '\n';
 code += 'globalThis.t = s => s;\n';
 eval(code);
 
@@ -51,6 +52,7 @@ function setup() {
 		'state-indicator': fakeEl(),
 		'state-indicator-dot': fakeEl(),
 		'state-indicator-img': fakeEl(),
+		'state-indicator-iccid': fakeEl(),
 	};
 	els['state-indicator-img'].src = '';
 	globalThis.document = { getElementById: id => els[id] || null, querySelectorAll: () => [] };
@@ -58,6 +60,7 @@ function setup() {
 	_pysimCardEquipped = false;
 	_pysimEquipping = false;
 	_pysimCardIccid = null;
+	_pysimHeaderIccid = undefined;
 	return els;
 }
 
@@ -132,6 +135,21 @@ test('indicator markup carries the dot and image elements', () => {
 	assert.match(html, /id="state-indicator-img"[^>]*src="nosim\.svg"/);
 });
 
+test('header prints the equipped card ICCID next to the card image', () => {
+	const els = setup();
+	pysimUpdateIccidIndicator('89701450001700031958');
+	const el = els['state-indicator-iccid'];
+	assert.strictEqual(el.textContent, '89701450001700031958');
+	assert.ok(!el.classes.has('hidden'));
+	// no card session -> hidden again
+	pysimUpdateIccidIndicator(null);
+	assert.strictEqual(el.textContent, '');
+	assert.ok(el.classes.has('hidden'));
+	// markup order: image, ICCID, ADM badge
+	assert.ok(html.indexOf('id="state-indicator-img"') < html.indexOf('id="state-indicator-iccid"'));
+	assert.ok(html.indexOf('id="state-indicator-iccid"') < html.indexOf('id="state-indicator-adm"'));
+});
+
 test('card-iccid controls need an equipped card with a readable ICCID', () => {
 	const check = (state, iccid) => {
 		const el = fakeEl();