working on loading of account data

Signed-off-by: Stephan Richter <s.richter@srsoftware.de>

frontend/src/routes/accounting/account.svelte

@@ -1,5 +1,50 @@
 <script>
-	let { id } = $props();
+	import { onMount } from 'svelte';
+	import { api, get } from '../../urls.svelte';
+	import { error, yikes } from '../../warn.svelte';
+	import { t } from '../../translations.svelte';
 
+	let { id } = $props();
+	let account = $state(null);
+	let transactions = [];
+
+	async function load(){
+		let url = api(`accounting/${id}`);
+		let res = await get(url);
+		if (res.ok) {
+			yikes();
+			let json = await res.json();
+			transactions = json.transactions;
+			account = json.account;
+		} else error(res);
+	}
+
+	onMount(load);
 </script>
-<h1>Account {id}</h1>
+{#if account}
+<fieldset>
+	<legend>{account.name}</legend>
+	<table>
+		<thead>
+			<tr>
+				<th>{t('date')}</th>
+				<th>{t('source')}</th>
+				<th>{t('destination')}</th>
+				<th>{t('amount')}</th>
+				<th>{t('purpose')}</th>
+			</tr>
+		</thead>
+		<tbody>
+			{#each transactions as transaction, i}
+			<tr>
+				<td>{transaction.date}</td>
+				<td>{transaction.source}</td>
+				<td>{transaction.destination}</td>
+				<td>{transaction.amount} {account.currency}</td>
+				<td>{transaction.purpose}</td>
+			</tr>
+			{/each}
+		</tbody>
+	</table>
+</fieldset>
+{/if}

frontend/src/routes/accounting/index.svelte

@@ -43,7 +43,7 @@
 	<ul>
 	{#each accounts as account (account.id)}
 		<li>
-			<a {onclick} href="account/{account.id}">{account.name} ({account.id})</a>
+			<a {onclick} href="/account/{account.id}">{account.name} ({account.id})</a>
 		</li>
 	{/each}
 	</ul>