aboutsummaryrefslogtreecommitdiff
path: root/extension/popup
diff options
context:
space:
mode:
authortg(x) <*@tg-x.net>2015-12-03 20:07:03 +0100
committertg(x) <*@tg-x.net>2015-12-03 20:07:03 +0100
commit5243a707260af9de820ad02b1972d3280164cf19 (patch)
tree46e6918fca8edfeddb919b7a89307328390a0ec1 /extension/popup
parent7b6706bee3cbecc84b330672ecdb5764d7d68756 (diff)
downloadwallet-core-5243a707260af9de820ad02b1972d3280164cf19.tar.xz
webext popup
Diffstat (limited to 'extension/popup')
-rw-r--r--extension/popup/popup.css51
-rw-r--r--extension/popup/reserve-create-sepa.html28
-rw-r--r--extension/popup/reserve-create.html41
-rw-r--r--extension/popup/reserves.html29
-rw-r--r--extension/popup/transactions.html52
-rw-r--r--extension/popup/transactions.js56
-rw-r--r--extension/popup/wallet.html50
-rw-r--r--extension/popup/wallet.js85
8 files changed, 373 insertions, 19 deletions
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 @@
+<!DOCTYPE html>
+
+<html>
+ <head>
+ <meta charset="utf-8">
+ <link rel="stylesheet" href="popup.css" type="text/css">
+ </head>
+
+ <body>
+ <div id="header" class="nav">
+ <a href="wallet.html">Wallet</a>
+ <a href="transactions.html">Transactions</a>
+ <a href="reserves.html" class="active">Reserves</a>
+ </div>
+
+ <div id="content">
+ <div id="reserve-create-sepa">
+ SEPA info here.
+ </div>
+ </div>
+
+ <div id="footer" class="nav">
+ <a href="reserves.html">List reserves</a>
+ <a href="reserve-create.html">Create reserve</a>
+ </div>
+
+ </body>
+</html>
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 @@
+<!DOCTYPE html>
+
+<html>
+ <head>
+ <meta charset="utf-8">
+ <link rel="stylesheet" href="popup.css" type="text/css">
+ </head>
+
+ <body>
+ <div id="header" class="nav">
+ <a href="wallet.html">Wallet</a>
+ <a href="transactions.html">Transactions</a>
+ <a href="reserves.html" class="active">Reserves</a>
+ </div>
+
+ <div id="content">
+ <form id="reserve-create" action="reserve-create-sepa.html">
+ <table>
+ <tr>
+ <td class="label"><label for="mint">Mint URL:</label></td>
+ <td class="input"><input name="mint" type="text" /></td>
+ </tr>
+ <tr>
+ <td class="label"><label for="amount">Amount:</label></td>
+ <td class="input"><input name="amount" type="text" /></td>
+ </tr>
+ <tr>
+ <td class="label"></td>
+ <td class="input"><input type="submit" value="Create reserve " /></td>
+ </tr>
+ </table>
+ </form>
+ </div>
+
+ <div id="footer" class="nav">
+ <a href="reserves.html">List reserves</a>
+ <a href="reserve-create.html" class="active">Create reserve</a>
+ </div>
+
+ </body>
+</html>
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 @@
-<!doctype html>
+<!DOCTYPE html>
-<a href="javascript:history.back()">Back</a>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <link rel="stylesheet" href="popup.css" type="text/css">
+ </head>
-<p />
+ <body>
+ <div id="header" class="nav">
+ <a href="wallet.html">Wallet</a>
+ <a href="transactions.html">Transactions</a>
+ <a href="reserves.html" class="active">Reserves</a>
+ </div>
-Your reserves are listed here.
+ <div id="content">
+ <div id="reserves">
+ There are no reserves available.
+ </div>
+ </div>
+
+ <div id="footer" class="nav">
+ <a href="reserves.html" class="active">List reserves</a>
+ <a href="reserve-create.html">Create reserve</a>
+ </div>
+
+ </body>
+</html>
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 @@
-<!doctype html>
+<!DOCTYPE html>
-<a href="javascript:history.back()">Back</a>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <link rel="stylesheet" href="popup.css" type="text/css">
+ <script src="transactions.js" type="text/javascript"></script>
+ </head>
-<p />
+ <body>
+ <div id="header" class="nav">
+ <a href="wallet.html">Wallet</a>
+ <a href="transactions.html" class="active">Transactions</a>
+ <a href="reserves.html">Reserves</a>
+ </div>
-Your past transactions are listed here.
+ <div id="content">
+ <table id="transactions-table" class="hidden">
+ <thead>
+ <tr>
+ <th>Date</th>
+ <th>Amount</th>
+ <th>Status</th>
+ <th></th>
+ </tr>
+ </thead>
+ <tbody>
+ <!--
+ <tr>
+ <td class="date">2015-12-21 13:37</td>
+ <td class="amount">42 EUR</td>
+ <td class="status">Completed</td>
+ <td class="contract"><button>Contract</button></td>
+ </tr>
+ <tr>
+ <td class="date">2015-12-22 10:01</td>
+ <td class="amount">23 USD</td>
+ <td class="status">Pending</td>
+ <td class="contract"><button>Contract</button></td>
+ </tr>
+ -->
+ </tbody>
+ </table>
+
+ <p id="no-transactions">
+ There are no transactions to show.
+ </p>
+ </div>
+
+ </body>
+</html>
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 @@
<html>
<head>
<meta charset="utf-8">
+ <link rel="stylesheet" href="popup.css" type="text/css">
+ <script src="wallet.js" type="text/javascript"></script>
</head>
-<body>
- This is the Taler wallet.
+ <body>
+ <div id="header" class="nav">
+ <a href="wallet.html" class="active">Wallet</a>
+ <a href="transactions.html">Transactions</a>
+ <a href="reserves.html">Reserves</a>
+ </div>
- <p />
-
- <a href='reserves.html'>Reserves</a>
- <a href='transactions.html'>Transaction History</a>
-
- <p />
-
- Your balance will be displayed here.
-</body>
+ <div id="content">
+ <table id="wallet-table" class="hidden">
+ <thead>
+ <tr>
+ <th colspan="2">Amount</th>
+ <th>Show</th>
+ </tr>
+ </thead>
+ <tbody>
+ <!--
+ <tr>
+ <td class="amount">42</td>
+ <td class="currency">EUR</td>
+ <td class="select"><input type="checkbox" /></td>
+ </tr>
+ <tr>
+ <td class="amount">23</td>
+ <td class="currency">USD</td>
+ <td class="select"><input type="checkbox" /></td>
+ </tr>
+ <tr>
+ <td class="amount">1337</td>
+ <td class="currency">KUD</td>
+ <td class="select"><input type="checkbox" /></td>
+ </tr>
+ -->
+ </tbody>
+ </table>
+ <p id="wallet-empty">The wallet is empty.</p>
+ </div>
+ </body>
</html>
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);
+});
generated by cgit v1.2.3 (git 2.26.2) at 2024-07-15 17:54:55 +0000