kacerr/fuj-management
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(go): M6.5 — member-detail modal JS module for /adults and /juniors
All checks were successful
Deploy to K8s / deploy (push) Successful in 8s
Details

Browse Source 
Adds static/js/member-detail.js: fetches /api/<page> once on page load,
caches the response, and renders a per-member detail modal on [i] row click.
Keyboard nav: Esc closes, ↑/↓ walk visible (filtered) rows. All modal CSS
was already in place from M6.1.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Jan Novak
2026-05-08 13:14:41 +02:00
parent 01573faced
commit 309c26f209
5 changed files with 674 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

245
go/internal/web/static/js/member-detail.js Normal file
View File

@@ -0,0 +1,245 @@
// Member-detail modal for /adults and /juniors pages.
// Fetches /api/<page> once on load, caches the response, renders on row click.
// Mirrors templates/adults.html JS (lines 718-993) but as a standalone module.
(function () {
'use strict';
const container = document.getElementById('filterContainer');
if (!container) return;
const page = container.dataset.page; // "adults" | "juniors"
if (!page) return;
let apiData = null;
let currentMemberName = null;
// ── Data load ─────────────────────────────────────────────────────────────
async function loadData() {
if (apiData) return apiData;
const r = await fetch('/api/' + page);
if (!r.ok) throw new Error('[member-detail] failed to fetch /api/' + page + ': ' + r.status);
apiData = await r.json();
return apiData;
}
// Pre-warm on page load so first click is instant.
loadData().catch(function (err) { console.error(err); });
// ── Modal render ──────────────────────────────────────────────────────────
async function showMember(name) {
currentMemberName = name;
const data = (await loadData());
const member = data.member_data[name];
if (!member) return;
document.getElementById('modalMemberName').textContent = name;
document.getElementById('modalTier').textContent = 'Tier: ' + (member.tier || '-');
const monthLabels = data.month_labels || {};
const statusBody = document.getElementById('modalStatusBody');
statusBody.innerHTML = '';
const allTransactions = [];
const monthKeys = Object.keys(member.months || {}).sort().reverse();
monthKeys.forEach(function (m) {
const md = member.months[m];
const expected = md.expected; // int for adults; int or "?" for juniors
const paid = md.paid || 0;
const attendance = md.attendance_count || 0;
const originalExpected = md.original_expected;
const isUnknown = (expected === '?');
let status = '-';
let statusClass = '';
if (!isUnknown && (expected > 0 || paid > 0)) {
if (paid >= expected && expected > 0) {
status = paid + '/' + expected;
statusClass = 'cell-ok';
} else if (paid > 0) {
status = paid + '/' + expected;
} else {
status = '0/' + expected;
statusClass = 'cell-unpaid';
}
} else if (isUnknown) {
status = paid > 0 ? paid + '/?' : '?';
}
let expectedCell;
if (isUnknown) {
expectedCell = '?';
} else if (md.exception) {
expectedCell = '<span style="color: #ffaa00;" title="Overridden from ' + originalExpected + '">' + expected + '*</span>';
} else {
expectedCell = expected;
}
const displayMonth = monthLabels[m] || m;
const row = document.createElement('tr');
row.innerHTML =
'<td style="color: #888;">' + displayMonth + '</td>' +
'<td style="text-align: center; color: #ccc;">' + attendance + '</td>' +
'<td style="text-align: center; color: #ccc;">' + expectedCell + '</td>' +
'<td style="text-align: center; color: #ccc;">' + paid + '</td>' +
'<td style="text-align: right;" class="' + statusClass + '">' + status + '</td>';
statusBody.appendChild(row);
if (md.transactions) {
md.transactions.forEach(function (tx) {
allTransactions.push(Object.assign({ month: m }, tx));
});
}
});
// Exceptions
const exList = document.getElementById('modalExceptionList');
const exSection = document.getElementById('modalExceptionSection');
exList.innerHTML = '';
const exceptions = [];
monthKeys.forEach(function (m) {
if (member.months[m].exception) {
exceptions.push(Object.assign({ month: m }, member.months[m].exception));
}
});
if (exceptions.length > 0) {
exSection.style.display = 'block';
exceptions.forEach(function (ex) {
const displayMonth = monthLabels[ex.month] || ex.month;
const item = document.createElement('div');
item.className = 'tx-item';
item.innerHTML =
'<div class="tx-meta">' + displayMonth + '</div>' +
'<div class="tx-main"><span class="tx-amount" style="color: #ffaa00;">' + ex.amount + ' CZK</span></div>' +
'<div class="tx-msg">' + (ex.note || 'No details provided.') + '</div>';
exList.appendChild(item);
});
} else {
exSection.style.display = 'none';
}
// Other transactions
const otherList = document.getElementById('modalOtherList');
const otherSection = document.getElementById('modalOtherSection');
otherList.innerHTML = '';
if (member.other_transactions && member.other_transactions.length > 0) {
otherSection.style.display = 'block';
member.other_transactions.forEach(function (tx) {
const item = document.createElement('div');
item.className = 'tx-item';
item.innerHTML =
'<div class="tx-meta">' + tx.date + ' | ' + (tx.purpose || 'Other') + '</div>' +
'<div class="tx-main">' +
'<span class="tx-amount" style="color: #66ccff;">' + tx.amount + ' CZK</span>' +
'<span class="tx-sender">' + (tx.sender || '') + '</span>' +
'</div>' +
'<div class="tx-msg">' + (tx.message || '') + '</div>';
otherList.appendChild(item);
});
} else {
otherSection.style.display = 'none';
}
// Matched transactions (payment history)
const txList = document.getElementById('modalTxList');
txList.innerHTML = '';
if (allTransactions.length === 0) {
txList.innerHTML = '<div style="color: #444; font-style: italic; padding: 10px 0;">No transactions matched to this member.</div>';
} else {
allTransactions.sort(function (a, b) { return b.date.localeCompare(a.date); });
allTransactions.forEach(function (tx) {
const displayMonth = monthLabels[tx.month] || tx.month;
const item = document.createElement('div');
item.className = 'tx-item';
item.innerHTML =
'<div class="tx-meta">' + tx.date + ' | matched to ' + displayMonth + '</div>' +
'<div class="tx-main">' +
'<span class="tx-amount">' + tx.amount + ' CZK</span>' +
'<span class="tx-sender">' + (tx.sender || '') + '</span>' +
'</div>' +
'<div class="tx-msg">' + (tx.message || '') + '</div>';
txList.appendChild(item);
});
}
// Raw payments — hidden by default; reset toggle on each open
const rawList = document.getElementById('modalRawList');
const rawToggle = document.getElementById('rawPaymentsToggle');
rawList.style.display = 'none';
rawToggle.textContent = '[show]';
rawList.innerHTML = '';
const rawRows = (data.raw_payments || {})[name] || [];
if (rawRows.length === 0) {
rawList.innerHTML = '<div style="color: #444; font-style: italic; padding: 10px 0;">No raw payments tied to this member.</div>';
} else {
rawRows.forEach(function (tx) {
const inferredNote = (tx.inferred_amount && tx.inferred_amount !== '' && tx.inferred_amount !== tx.amount)
? ' <span style="color:#888;">(inferred: ' + tx.inferred_amount + ')</span>'
: '';
const manualNote = tx.manual_fix ? ' <span style="color:#ffaa00;">[manual fix]</span>' : '';
const bankIdNote = tx.bank_id ? '<span style="color:#444;"> · bank_id: ' + tx.bank_id + '</span>' : '';
const item = document.createElement('div');
item.className = 'tx-item';
item.innerHTML =
'<div class="tx-meta">' + tx.date + ' | purpose: ' + (tx.purpose || '—') + manualNote + '</div>' +
'<div class="tx-main">' +
'<span class="tx-amount">' + tx.amount + ' CZK' + inferredNote + '</span>' +
'<span class="tx-sender">' + (tx.sender || '') + '</span>' +
'</div>' +
'<div class="tx-msg">' + (tx.message || '') + '</div>' +
'<div class="tx-meta">' + (tx.person || '') + bankIdNote + '</div>';
rawList.appendChild(item);
});
}
document.getElementById('memberModal').classList.add('active');
}
// ── Raw-payments toggle ───────────────────────────────────────────────────
function toggleRawPayments(ev) {
ev.preventDefault();
const list = document.getElementById('modalRawList');
const link = document.getElementById('rawPaymentsToggle');
const hidden = list.style.display === 'none';
list.style.display = hidden ? 'block' : 'none';
link.textContent = hidden ? '[hide]' : '[show]';
}
// ── Close + keyboard nav ──────────────────────────────────────────────────
function closeModal() {
document.getElementById('memberModal').classList.remove('active');
}
function navigateMember(direction) {
const rows = Array.from(document.querySelectorAll('tr.member-row'));
const visible = rows.filter(function (r) { return r.style.display !== 'none'; });
const idx = visible.findIndex(function (r) { return r.dataset.name === currentMemberName; });
if (idx === -1) return;
const next = idx + direction;
if (next >= 0 && next < visible.length) {
showMember(visible[next].dataset.name);
}
}
// ── Wiring ────────────────────────────────────────────────────────────────
document.querySelectorAll('.info-icon[data-name]').forEach(function (el) {
el.addEventListener('click', function (ev) {
ev.stopPropagation();
showMember(el.dataset.name);
});
});
document.getElementById('rawPaymentsToggle').addEventListener('click', toggleRawPayments);
document.addEventListener('keydown', function (e) {
if (e.key === 'Escape') { closeModal(); return; }
const modal = document.getElementById('memberModal');
if (!modal.classList.contains('active')) return;
if (e.key === 'ArrowDown') { e.preventDefault(); navigateMember(1); }
if (e.key === 'ArrowUp') { e.preventDefault(); navigateMember(-1); }
});
}());