From 5243a707260af9de820ad02b1972d3280164cf19 Mon Sep 17 00:00:00 2001 From: "tg(x)" <*@tg-x.net> Date: Thu, 3 Dec 2015 20:07:03 +0100 Subject: webext popup --- extension/popup/popup.css | 51 +++++++++++++++++++ extension/popup/reserve-create-sepa.html | 28 +++++++++++ extension/popup/reserve-create.html | 41 +++++++++++++++ extension/popup/reserves.html | 29 +++++++++-- extension/popup/transactions.html | 52 +++++++++++++++++-- extension/popup/transactions.js | 56 +++++++++++++++++++++ extension/popup/wallet.html | 50 ++++++++++++++----- extension/popup/wallet.js | 85 ++++++++++++++++++++++++++++++++ 8 files changed, 373 insertions(+), 19 deletions(-) create mode 100644 extension/popup/popup.css create mode 100644 extension/popup/reserve-create-sepa.html create mode 100644 extension/popup/reserve-create.html create mode 100644 extension/popup/transactions.js create mode 100644 extension/popup/wallet.js (limited to 'extension/popup') diff --git a/extension/popup/popup.css b/extension/popup/popup.css new file mode 100644 index 000000000..023d1520b --- /dev/null +++ b/extension/popup/popup.css @@ -0,0 +1,51 @@ +body { + width: 35em; + margin: 0; + padding: 0 +} + +.nav { + background-color: #ddd; + padding: 0.5em 0; +} + +.nav a { + color: black; + padding: 0.5em; + text-decoration: none; +} + +.nav a.active { + background-color: white; + font-weight: bold; +} + +#content { + padding: 1em; +} + + +#wallet-table .amount { + text-align: right; +} + +.hidden { + display: none; +} + +#transactions-table th, +#transactions-table td { + padding: 0.2em 0.5em; +} + +#reserve-create table { + width: 100%; +} + +#reserve-create table td.label { + width: 5em; +} + +#reserve-create table .input input[type="text"] { + width: 100%; +} \ No newline at end of file diff --git a/extension/popup/reserve-create-sepa.html b/extension/popup/reserve-create-sepa.html new file mode 100644 index 000000000..7f851970b --- /dev/null +++ b/extension/popup/reserve-create-sepa.html @@ -0,0 +1,28 @@ + + + + + + + + + + + +
+
+ SEPA info here. +
+
+ + + + + diff --git a/extension/popup/reserve-create.html b/extension/popup/reserve-create.html new file mode 100644 index 000000000..0cfbe22a4 --- /dev/null +++ b/extension/popup/reserve-create.html @@ -0,0 +1,41 @@ + + + + + + + + + + + +
+
+ + + + + + + + + + + + + +
+
+
+ + + + + diff --git a/extension/popup/reserves.html b/extension/popup/reserves.html index 63db032e5..d5b5a1862 100644 --- a/extension/popup/reserves.html +++ b/extension/popup/reserves.html @@ -1,7 +1,28 @@ - + -Back + + + + + -

+ +

-Your reserves are listed here. +
+
+ There are no reserves available. +
+
+ + + + + diff --git a/extension/popup/transactions.html b/extension/popup/transactions.html index 427100853..2dc3fbea0 100644 --- a/extension/popup/transactions.html +++ b/extension/popup/transactions.html @@ -1,7 +1,51 @@ - + -Back + + + + + + -

+ +

-Your past transactions are listed here. +
+ + + + + + + + + + + + + + +

+ There are no transactions to show. +

+
+ + + diff --git a/extension/popup/transactions.js b/extension/popup/transactions.js new file mode 100644 index 000000000..7d38d3b36 --- /dev/null +++ b/extension/popup/transactions.js @@ -0,0 +1,56 @@ +'use strict'; + +function format_date (date) +{ + function pad (number) { + if (number < 10) { + return '0' + number; + } + return number; + } + + return date.getUTCFullYear() + + '-' + pad(date.getUTCMonth() + 1) + + '-' + pad(date.getUTCDate()) + + ' ' + pad(date.getUTCHours()) + + ':' + pad(date.getUTCMinutes()); + //':' + pad(date.getUTCSeconds()); +} + +function add_transaction (date, currency, amount, status, contract) +{ + let table = document.getElementById('transactions-table'); + table.className = table.className.replace(/\bhidden\b/, ''); + let tr = document.createElement('tr'); + table.appendChild(tr); + + let td_date = document.createElement('td'); + td_date.className = 'date'; + let text_date = document.createTextNode(format_date (date)); + tr.appendChild(td_date).appendChild(text_date); + + let td_amount = document.createElement('td'); + td_amount.className = 'amount'; + let text_amount = document.createTextNode(amount +' '+ currency); + tr.appendChild(td_amount).appendChild(text_amount); + + let td_status = document.createElement('td'); + td_status.className = 'status'; + let text_status = document.createTextNode(status); + tr.appendChild(td_status).appendChild(text_status); + + let td_contract = document.createElement('td'); + td_contract.className = 'contract'; + let btn_contract = document.createElement('button'); + btn_contract.appendChild(document.createTextNode('Contract')); + tr.appendChild(td_contract).appendChild(btn_contract); +} + +document.addEventListener('DOMContentLoaded', function () { + let no = document.getElementById('no-transactions'); + + // FIXME + no.className += ' hidden'; + add_transaction (new Date('2015-12-21 13:37'), 'EUR', 42, 'Completed', {}); + add_transaction (new Date('2015-12-22 10:01'), 'USD', 23, 'Pending', {}); +}); diff --git a/extension/popup/wallet.html b/extension/popup/wallet.html index f27387b1d..a6864896b 100644 --- a/extension/popup/wallet.html +++ b/extension/popup/wallet.html @@ -3,19 +3,47 @@ + + - - This is the Taler wallet. + + -

- - Reserves - Transaction History - -

- - Your balance will be displayed here. - +

+ + + + + + + + + + + +

The wallet is empty.

+
+ diff --git a/extension/popup/wallet.js b/extension/popup/wallet.js new file mode 100644 index 000000000..cb7399dac --- /dev/null +++ b/extension/popup/wallet.js @@ -0,0 +1,85 @@ +'use strict'; + +var selected_currency = 'EUR'; // FIXME + +function select_currency (checkbox, currency, amount) +{ + selected_currency = currency; + + if (checkbox.checked) + { + let inputs = document.getElementsByTagName('input'); + for (let i = 0; i < inputs.length; i++) + { + let input = inputs[i]; + if (input != checkbox) + input.checked = false; + } + chrome.browserAction.setBadgeText({text: amount.toString()}) + chrome.browserAction.setTitle({title: 'Taler: ' + amount + ' ' + currency}); + } + else + { + chrome.browserAction.setBadgeText({text: ''}) + chrome.browserAction.setTitle({title: 'Taler'}); + } +} + + +function add_currency (currency, amount) +{ + let table = document.getElementById('wallet-table'); + table.className = table.className.replace(/\bhidden\b/, ''); + let tr = document.createElement('tr'); + tr.id = 'wallet-table-'+ currency; + table.appendChild(tr); + + let td_amount = document.createElement('td'); + td_amount.id = 'wallet-currency-'+ currency +'-amount'; + td_amount.className = 'amount'; + let text_amount = document.createTextNode(amount); + tr.appendChild(td_amount).appendChild(text_amount); + + let td_currency = document.createElement('td'); + td_currency.id = 'wallet-table-'+ currency +'-currency'; + td_currency.className = 'currency'; + let text_currency = document.createTextNode(currency); + tr.appendChild(td_currency).appendChild(text_currency); + + let td_select = document.createElement('td'); + td_select.id = 'wallet-table-'+ currency +'-select'; + td_select.className = 'select'; + let checkbox = document.createElement('input'); + checkbox.id = 'wallet-table-'+ currency +'-checkbox'; + checkbox.setAttribute('type', 'checkbox'); + if (currency == selected_currency) + checkbox.checked = true; + tr.appendChild(td_select).appendChild(checkbox); + + checkbox._amount = amount; + checkbox.addEventListener('click', function () { + select_currency(this, currency, this._amount); + }); +} + +function update_currency (currency, amount) +{ + let td_amount = document.getElementById('wallet-currency-'+ currency +'-amount'); + let text_amount = document.createTextNode(amount); + td_amount.removeChild(td_amount.firstChild); + td_amount.appendChild(text_amount); + + let checkbox = document.getElementById('wallet-table-'+ currency +'-checkbox'); + checkbox._amount = amount; +} + +document.addEventListener('DOMContentLoaded', function () { + let empty = document.getElementById('wallet-empty'); + + // FIXME + empty.className += ' hidden'; + add_currency('EUR', 42); + add_currency('USD', 17); + add_currency('KUD', 1337); + update_currency('USD', 23); +}); -- cgit v1.2.3