projectmoon
/
landsbankinn-exporter
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fancy looking accout selection table

This commit is contained in:
projectmoon 2023-03-22 16:48:07 +01:00
parent ba349d96cf
commit d635ae0cbf
1 changed files with 74 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
src/content-scripts/statement-page.tsx
View File

@ -1,5 +1,4 @@
import React from 'jsx-dom'; // necessary for react to work
import { Actions, GetAccountsReply } from '../background/messages';
import { Event, ClientEvents } from './events';
import * as background from './background';
import { Account } from '../landsbankinn/models';
@ -9,32 +8,90 @@ interface AccountListProps {
accounts: Array<Account>;
}
const formatAccountNumber = (accountNumber: string) => accountNumber.substring(0, 4) + '-' + accountNumber.substring(4, 6) + '-' + accountNumber.substring(6, 12);
function AccountList(props: AccountListProps) {
const boxStyle = { display: 'inline-block', width: "100%", cursor: 'pointer' };
const selectAllHandler = () => {
$(`#check-all`).prop('checked', !$('#check-all').prop('checked'));
const checked = $('#check-all').prop('checked');
$('#account-export-list input[type="checkbox"]').prop('checked', checked);
};
const selectAccountHandler = (accountNumber: string) => () =>
$(`#export-${accountNumber}`)
.prop('checked', !$(`#export-${accountNumber}`).prop('checked'));
const accountList = props.accounts.map(acct =>
<li>
<input id="export-{acct.acountNumber}" type="checkbox" />
&nbsp;
<label htmlFor="export-{acct.acountNumber}">
{acct.accountNumber} - {acct.name}
</label>
</li>
<tr>
<td>
<input id={`export-${acct.accountNumber}`} type="checkbox" />
</td>
<td onClick={selectAccountHandler(acct.accountNumber)}>
<span style={boxStyle}>
{formatAccountNumber(acct.accountNumber)}
</span>
</td>
<td onClick={selectAccountHandler(acct.accountNumber)}>
<span style={boxStyle}>
{acct.name}
</span>
</td>
</tr >
);
return (
<div id="account-export-list">
<ul>
<li>
<table>
<thead>
<tr>
<th scope="colgroup">Select</th>
<th scope="colgroup">Account Number</th>
<th scope="colgroup">Account Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input id="check-all" type="checkbox" onClick={selectAllHandler} />
&nbsp;
<label htmlFor="check-all">Select All</label>
</li>
</td>
<td onClick={selectAllHandler}>
<span style={boxStyle}>Select All</span>
</td>
<td onClick={selectAllHandler}>
<span style={boxStyle}>
N/A (Selects all accounts below)
</span>
</td>
</tr>
{accountList}
</ul>
</tbody>
</table>
</div >
);
}
function ExportDiv(props: AccountListProps) {
return (
<div id="account-export" class="content-box fill shadow ui-form" >
<h2>Download Transaction Statements</h2>
<p>
Here, you can export statements from one or more of your accounts
over a specified date range.
</p>
<label htmlFor="export-date-from">Date From</label>
<input id="export-date-from" type="date" />
<label htmlFor="export-date-to">Date From</label>
<input id="export-date-to" type="date" />
<div class="row-column">
<div class="column-span2 column-span2--base">
<AccountList accounts={props.accounts} />
</div>
</div>
</div>
);
}
@ -44,18 +101,7 @@ window.addEventListener('DOMContentLoaded', async () => {
const response = await background.getAccounts();
if (response.error == null) {
const exportDiv = (
<div id="account-export" class="content-box fill shadow ui-form">
<h2>Download Transaction Statements</h2>
<p>
Here, you can export statements from one or more of your accounts
over a specified date range.
</p>
<AccountList accounts={response.accounts} />
</div>
);
const exportDiv = <ExportDiv accounts={response.accounts} />;
const contentDiv = document.querySelector(
'div[class="table-data content-box fill shadow"]'
);