From 3f884f0923a3ef3033302054ab54714535c5c8cc Mon Sep 17 00:00:00 2001 From: projectmoon Date: Wed, 22 Mar 2023 22:10:11 +0100 Subject: [PATCH] Fully fleshed out download client-side experience for downloading txns. Now we can actually implement the downloading part --- src/content-scripts/statement-page.tsx | 111 ------------ .../statement-page/components.tsx | 165 ++++++++++++++++++ src/content-scripts/statement-page/index.tsx | 27 +++ src/manifest.json | 2 +- 4 files changed, 193 insertions(+), 112 deletions(-) delete mode 100644 src/content-scripts/statement-page.tsx create mode 100644 src/content-scripts/statement-page/components.tsx create mode 100644 src/content-scripts/statement-page/index.tsx diff --git a/src/content-scripts/statement-page.tsx b/src/content-scripts/statement-page.tsx deleted file mode 100644 index cb865cd..0000000 --- a/src/content-scripts/statement-page.tsx +++ /dev/null @@ -1,111 +0,0 @@ -import React from 'jsx-dom'; // necessary for react to work -import { Event, ClientEvents } from './events'; -import * as background from './background'; -import { Account } from '../landsbankinn/models'; -import $ from 'cash-dom'; - -interface AccountListProps { - accounts: Array; -} - -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 => - - - - - - - {formatAccountNumber(acct.accountNumber)} - - - - - {acct.name} - - - - ); - - return ( -
- - - - - - - - - - - - - - - {accountList} - -
SelectAccount NumberAccount Name
- - - Select All - - - N/A (Selects all accounts below) - -
-
- ); -} - -function ExportDiv(props: AccountListProps) { - return ( -
-

Download Transaction Statements

-

- Here, you can export statements from one or more of your accounts - over a specified date range. -

- - - - - - - -
-
- -
-
-
- ); -} - -window.addEventListener('DOMContentLoaded', async () => { - ClientEvents.on(Event.StatePopulated, async () => { - const response = await background.getAccounts(); - - if (response.error == null) { - const exportDiv = ; - const contentDiv = document.querySelector( - 'div[class="table-data content-box fill shadow"]' - ); - contentDiv?.prepend(exportDiv); - } - }); -}); diff --git a/src/content-scripts/statement-page/components.tsx b/src/content-scripts/statement-page/components.tsx new file mode 100644 index 0000000..ae9585b --- /dev/null +++ b/src/content-scripts/statement-page/components.tsx @@ -0,0 +1,165 @@ +import React, { FormEventHandler } from 'jsx-dom'; // necessary for react to work +import { Account } from '../../landsbankinn/models'; +import $ from 'cash-dom'; + +interface AccountListProps { + accounts: Array; +} + +const formatAccountNumber = (accountNumber: string) => + accountNumber.substring(0, 4) + '-' + + accountNumber.substring(4, 6) + '-' + + accountNumber.substring(6, 12); + +//getValues extracts the account numbers and date range for +//transactions to download. Basically the "submit button." +//TODO why not use an actual form... +const getValues = (exportDiv: HTMLElement): Array => + //@ts-expect-error + $(`#${exportDiv.id} input[type="checkbox"]`) + .filter('[data-checkbox-type="account"]:checked') + //@ts-expect-error + .map((_, el) => (el as HTMLInputElement).name).get(); + +const SelectAllRow = () => { + const boxStyle = { display: 'inline-block', width: "100%", cursor: 'pointer' }; + + const selectAllHandler = (e: MouseEvent) => { + const currentlyChecked = $('#check-all').prop('checked'); + + //@ts-expect-error + if ($(e.currentTarget).is($('#check-all')) == false) { + //The checkbox can toggle itself, by itself. Only toggle + //from other clicks + $(`#check-all`).prop('checked', !currentlyChecked); + } + + const checked = $('#check-all').prop('checked'); + $('#account-export-list input[type="checkbox"]').prop('checked', checked); + }; + + return ( + + + + + + Select All + + + + N/A (Selects all accounts below) + + + + ); +} + +const AccountRow = (props: { accountNumber: string; name: string; }) => { + const boxStyle = { display: 'inline-block', width: "100%", cursor: 'pointer' }; + + const selectAccountHandler = (accountNumber: string) => () => + $(`#export-${accountNumber}`) + .prop('checked', !$(`#export-${accountNumber}`).prop('checked')); + + return ( + + + + + + + {formatAccountNumber(props.accountNumber)} + + + + + {props.name} + + + + ); +} + +const AccountList = (props: AccountListProps) => { + const accountList = props.accounts.map(acct => + + ); + + return ( +
+ + + + + + + + + + + {accountList} + +
SelectAccount NumberAccount Name
+
+ ); +} + +const datePickerID = (label: string) => `export-date-${label}`; + +const DatePicker = (props: { label: string; }) => ( +
+ + +
+); + +const DownloadButton = () => { + return ( +
+ +
+ ); +} + +interface ExportDivProps { + fromLabel: string; + toLabel: string; + accounts: Account[]; + onDownload: (accountNumbers: string[]) => void; +} + +export const ExportDiv = (props: ExportDivProps) => { + const submitHandler = (e: Event) => { + e.preventDefault(); + const accountNumbers = getValues($('#account-export').get(0)!); + props.onDownload(accountNumbers); + } + + return ( +
+

Download Transaction Statements

+

+ Here, you can export statements from one or more of your accounts + over a specified date range. +

+ +
+
+ + + +
+ +
+
+ +
+
+
+
+ ); +} diff --git a/src/content-scripts/statement-page/index.tsx b/src/content-scripts/statement-page/index.tsx new file mode 100644 index 0000000..cf19593 --- /dev/null +++ b/src/content-scripts/statement-page/index.tsx @@ -0,0 +1,27 @@ +import React from 'jsx-dom'; // necessary for react to work +import { Event, ClientEvents } from '../events'; +import * as background from '../background'; +import { ExportDiv } from './components'; + +window.addEventListener('DOMContentLoaded', async () => { + ClientEvents.on(Event.StatePopulated, async () => { + const response = await background.getAccounts(); + + const downloadHandler = (accountNumbers: string[]) => { + console.log('downloading txns for', accountNumbers); + }; + + if (response.error == null) { + const exportDiv = ( + + ); + + const contentDiv = document.querySelector( + 'div[class="table-data content-box fill shadow"]' + ); + + contentDiv?.prepend(exportDiv); + } + }); +}); diff --git a/src/manifest.json b/src/manifest.json index 7b4bb37..ff80b00 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -22,7 +22,7 @@ }, { "matches": ["https://netbanki.landsbankinn.is/Ebli/Statements/ClientSummary.aspx"], - "js": ["content-scripts/statement-page.tsx"], + "js": ["content-scripts/statement-page/index.tsx"], "run_at": "document_start" } ]