diff options
| author | Marcello Stanisci <marcello.stanisci@inria.fr> | 2015-12-16 16:50:11 +0100 |
|---|---|---|
| committer | Marcello Stanisci <marcello.stanisci@inria.fr> | 2015-12-16 16:50:11 +0100 |
| commit | f5d359e7025c6c5ac94b730b145afa9494033833 (patch) | |
| tree | 4504ba9810a2eaa6850f26bc209ed28aab979ea4 /extension/popup | |
| parent | 22246ea15692fd6e6cfde2e3768e000bc782eb36 (diff) | |
saving handlebars tryings
Diffstat (limited to 'extension/popup')
| -rw-r--r-- | extension/popup/balance-overview.html | 19 | ||||
| -rw-r--r-- | extension/popup/balance-overview.js | 27 | ||||
| -rw-r--r-- | extension/popup/balance-overview.tsx | 18 |
3 files changed, 49 insertions, 15 deletions
diff --git a/extension/popup/balance-overview.html b/extension/popup/balance-overview.html index 9131bc710..7c0674c1e 100644 --- a/extension/popup/balance-overview.html +++ b/extension/popup/balance-overview.html @@ -5,9 +5,18 @@ <meta charset="utf-8"> <link rel="stylesheet" href="popup.css" type="text/css"> <script src="../lib/util.js" type="text/javascript"></script> + <script src="../lib/handlebars-v4.0.5.js"></script> <script src="balance-overview.js" type="text/javascript"></script> - </head> + <script id="balance-template" type="text/x-handlebars-template"> + <div> + {{#each this}} + <p>{{this.value + this.fraction / 10e6 + <a> this.currency}}</a></p> + {{/each}} + </div> + </script> + + </head> <body> <div id="header" class="nav"> <a href="wallet.html" class="active">Wallet</a> @@ -18,9 +27,11 @@ </div> <div id="content"> - <p id="balances"> - Looks like your wallet is empty. Want to get some <a id="link-kudos" href="http://bank.demo.taler.net">KUDOS?</a> - </p> + <div id="balance"> + <p>Looks like your wallet is empty. Want to get some + <a id="link-kudos" href="http://bank.demo.taler.net">KUDOS?</a> + </p> + </div> </div> </body> diff --git a/extension/popup/balance-overview.js b/extension/popup/balance-overview.js index e244e5c05..0df0dae9f 100644 --- a/extension/popup/balance-overview.js +++ b/extension/popup/balance-overview.js @@ -19,17 +19,28 @@ document.addEventListener('DOMContentLoaded', (e) => { chrome.runtime.sendMessage({ type: "balances" }, function (wallet) { console.log("got balance"); let n = 0; - let table = React.createElement("div", null); + /*let table = <div />;*/ + let source = document.getElementById("balance-template").innerHTML; + console.log("size", Object.keys(wallet).length); + if (Object.keys(wallet).length > 0) { + let template = Handlebars.compile(source); + console.log("DB error? ", chrome.runtime.lastError); + console.log("wallet ", JSON.stringify(wallet)); + let html = template({ wallet: wallet, walletEmpty: wallet.length == 0 }); + console.log("Hb generated html", html); + document.getElementById("content").innerHTML = html; + } + /* for (let curr in wallet) { - n++; - let x = wallet[curr]; - let num = x.value + x.fraction / 10e6; - table.appendChild(React.createElement("p", null, num, " ", React.createElement("a", null, x.currency))); + n++; + let x = wallet[curr]; + let num = x.value + x.fraction / 10e6; + table.appendChild(<p>{num} <a>{x.currency}</a></p>); } if (n != 0) { - let p = document.getElementById("content"); - p.replaceChild(table, p.firstElementChild); - } + let p = document.getElementById("content"); + p.replaceChild(table, p.firstElementChild); + } */ }); document.getElementById("debug").addEventListener("click", (e) => { chrome.tabs.create({ diff --git a/extension/popup/balance-overview.tsx b/extension/popup/balance-overview.tsx index de992a46d..9435918f3 100644 --- a/extension/popup/balance-overview.tsx +++ b/extension/popup/balance-overview.tsx @@ -16,13 +16,25 @@ let React = { } } - document.addEventListener('DOMContentLoaded', (e) => { console.log("content loaded"); chrome.runtime.sendMessage({type: "balances"}, function(wallet) { console.log("got balance"); let n = 0; - let table = <div />; + /*let table = <div />;*/ + + let source = document.getElementById("balance-template").innerHTML; + console.log("size", Object.keys(wallet).length); + if (Object.keys(wallet).length > 0){ + let template = Handlebars.compile(source); + console.log("DB error? ", chrome.runtime.lastError); + console.log("wallet ", JSON.stringify(wallet)); + let html = template({wallet: wallet, walletEmpty: wallet.length == 0}); + console.log("Hb generated html", html); + document.getElementById("content").innerHTML = html; + } + + /* for (let curr in wallet) { n++; let x = wallet[curr]; @@ -32,7 +44,7 @@ document.addEventListener('DOMContentLoaded', (e) => { if (n != 0) { let p = document.getElementById("content"); p.replaceChild(table, p.firstElementChild); - } + } */ }); document.getElementById("debug").addEventListener("click", (e) => { |