74 lines
2.6 KiB
JavaScript
74 lines
2.6 KiB
JavaScript
const resource = typeof GetParentResourceName === 'function'
|
||
? GetParentResourceName()
|
||
: 'devx_banking';
|
||
const app = document.querySelector('#app');
|
||
const form = document.querySelector('#transferForm');
|
||
const transactions = document.querySelector('#transactions');
|
||
const errorEl = document.querySelector('#error');
|
||
const format = new Intl.NumberFormat('de-DE');
|
||
|
||
async function post(event, data = {}) {
|
||
const response = await fetch(`https://${resource}/${event}`, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json; charset=UTF-8' },
|
||
body: JSON.stringify(data)
|
||
});
|
||
return response.json();
|
||
}
|
||
|
||
function showError(text = '') {
|
||
errorEl.textContent = text;
|
||
errorEl.classList.toggle('hidden', !text);
|
||
}
|
||
|
||
function render(overview) {
|
||
const account = overview.account;
|
||
document.querySelector('#accountName').textContent = account.accountName;
|
||
document.querySelector('#accountNumber').textContent = account.accountNumber;
|
||
document.querySelector('#balance').textContent = `${format.format(account.balance)} $`;
|
||
|
||
transactions.innerHTML = '';
|
||
for (const entry of overview.transactions || []) {
|
||
const row = document.createElement('div');
|
||
row.className = 'transaction';
|
||
const sign = entry.direction === 'credit' ? '+' : '−';
|
||
row.innerHTML = `
|
||
<div><strong>${escapeHtml(entry.reference)}</strong><br>
|
||
<small>${escapeHtml(entry.counterparty || '')} · ${escapeHtml(String(entry.createdAt))}</small></div>
|
||
<strong class="${entry.direction}">${sign}${format.format(entry.amount)} $</strong>`;
|
||
transactions.appendChild(row);
|
||
}
|
||
}
|
||
|
||
function escapeHtml(value) {
|
||
return String(value).replace(/[&<>"']/g, char => ({
|
||
'&': '&', '<': '<', '>': '>', '"': '"', "'": '''
|
||
}[char]));
|
||
}
|
||
|
||
document.querySelector('#close').addEventListener('click', () => post('close'));
|
||
document.addEventListener('keyup', event => {
|
||
if (event.key === 'Escape') post('close');
|
||
});
|
||
|
||
form.addEventListener('submit', async event => {
|
||
event.preventDefault();
|
||
showError('');
|
||
const result = await post('transfer', Object.fromEntries(new FormData(form)));
|
||
if (!result.ok) {
|
||
showError(result.error || 'Überweisung fehlgeschlagen.');
|
||
return;
|
||
}
|
||
form.reset();
|
||
const refreshed = await post('refresh');
|
||
if (refreshed.ok) render(refreshed.overview);
|
||
});
|
||
|
||
window.addEventListener('message', event => {
|
||
const data = event.data;
|
||
if (data.action === 'open') app.classList.remove('hidden');
|
||
if (data.action === 'close') app.classList.add('hidden');
|
||
if (data.action === 'overview') render(data.overview);
|
||
if (data.action === 'error') showError(data.message);
|
||
});
|