reworked displaying of invoice
This commit is contained in:
parent
8c2f331303
commit
6c69629eed
|
@ -1,3 +1,4 @@
|
||||||
|
/* TODO: add light theme */
|
||||||
.lightningTipInput {
|
.lightningTipInput {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
|
@ -95,15 +96,15 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
#lightningTipInvoice {
|
#lightningTipInvoice {
|
||||||
margin-top: 0.6em;
|
margin-top: 1em;
|
||||||
margin-bottom: 1em;
|
margin-bottom: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
#lightningTipTools {
|
#lightningTipTools {
|
||||||
height: 100px;
|
height: 100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#lightningTipGetQR {
|
#lightningTipCopy {
|
||||||
border-right: 1px solid #F5F5F5;
|
border-right: 1px solid #F5F5F5;
|
||||||
|
|
||||||
border-top-right-radius: 0;
|
border-top-right-radius: 0;
|
||||||
|
|
|
@ -10,6 +10,7 @@ var qrCode;
|
||||||
|
|
||||||
var defaultGetInvoice;
|
var defaultGetInvoice;
|
||||||
|
|
||||||
|
// TODO: solve this without JavaScript
|
||||||
// Fixes weird bug which moved the button up one pixel when its content was changed
|
// Fixes weird bug which moved the button up one pixel when its content was changed
|
||||||
window.onload = function () {
|
window.onload = function () {
|
||||||
var button = document.getElementById("lightningTipGetInvoice");
|
var button = document.getElementById("lightningTipGetInvoice");
|
||||||
|
@ -19,7 +20,7 @@ window.onload = function () {
|
||||||
};
|
};
|
||||||
|
|
||||||
// TODO: fix scaling on phones
|
// TODO: fix scaling on phones
|
||||||
// TODO: maybe don't show full invoice
|
// TODO: optimize creating bigger QR codes
|
||||||
// TODO: show price in dollar?
|
// TODO: show price in dollar?
|
||||||
function getInvoice() {
|
function getInvoice() {
|
||||||
if (running === false) {
|
if (running === false) {
|
||||||
|
@ -50,26 +51,29 @@ function getInvoice() {
|
||||||
|
|
||||||
listenInvoiceSettled(hash);
|
listenInvoiceSettled(hash);
|
||||||
|
|
||||||
// Update UI
|
|
||||||
invoice = json.Invoice;
|
invoice = json.Invoice;
|
||||||
|
|
||||||
|
// Update UI
|
||||||
var wrapper = document.getElementById("lightningTip");
|
var wrapper = document.getElementById("lightningTip");
|
||||||
|
|
||||||
wrapper.innerHTML = "<a>Your tip request</a>";
|
wrapper.innerHTML = "<a>Your tip request</a>";
|
||||||
wrapper.innerHTML += "<textarea class='lightningTipInput' id='lightningTipInvoice' onclick='copyToClipboard(this)' readonly>" + json.Invoice + "</textarea>";
|
wrapper.innerHTML += "<input type='text' class='lightningTipInput' id='lightningTipInvoice' onclick='copyInvoiceToClipboard()' value='" + invoice + "' readonly>";
|
||||||
wrapper.innerHTML += "<div id='lightningTipQR'></div>";
|
wrapper.innerHTML += "<div id='lightningTipQR'></div>";
|
||||||
|
|
||||||
resizeInput(document.getElementById("lightningTipInvoice"));
|
resizeInput(document.getElementById("lightningTipInvoice"));
|
||||||
|
|
||||||
|
showQRCode();
|
||||||
|
|
||||||
wrapper.innerHTML += "<div id='lightningTipTools'>" +
|
wrapper.innerHTML += "<div id='lightningTipTools'>" +
|
||||||
"<button class='lightningTipButton' id='lightningTipGetQR' onclick='showQRCode()'>QR</button>" +
|
"<button class='lightningTipButton' id='lightningTipCopy' onclick='copyInvoiceToClipboard()'>Copy</button>" +
|
||||||
"<button class='lightningTipButton' id='lightningTipOpen'>Open</button>" +
|
"<button class='lightningTipButton' id='lightningTipOpen'>Open</button>" +
|
||||||
"<a id='lightningTipExpiry'></a>" +
|
"<a id='lightningTipExpiry'></a>" +
|
||||||
"</div>";
|
"</div>";
|
||||||
|
|
||||||
starTimer(json.Expiry, document.getElementById("lightningTipExpiry"));
|
starTimer(json.Expiry, document.getElementById("lightningTipExpiry"));
|
||||||
|
|
||||||
document.getElementById("lightningTipTools").style.height = document.getElementById("lightningTipGetQR").clientHeight + "px";
|
// Fixes bug which caused the content of #lightningTipTools to be visually outside of #lightningTip
|
||||||
|
document.getElementById("lightningTipTools").style.height = document.getElementById("lightningTipCopy").clientHeight + "px";
|
||||||
|
|
||||||
document.getElementById("lightningTipOpen").onclick = function () {
|
document.getElementById("lightningTipOpen").onclick = function () {
|
||||||
location.href = "lightning:" + json.Invoice;
|
location.href = "lightning:" + json.Invoice;
|
||||||
|
@ -130,7 +134,7 @@ function listenInvoiceSettled(hash) {
|
||||||
};
|
};
|
||||||
|
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.info(e);
|
console.error(e);
|
||||||
console.warn("Your browser does not support EventSource. Sending a request to the server every two second to check if the invoice is settled");
|
console.warn("Your browser does not support EventSource. Sending a request to the server every two second to check if the invoice is settled");
|
||||||
|
|
||||||
var interval = setInterval(function () {
|
var interval = setInterval(function () {
|
||||||
|
@ -227,7 +231,7 @@ function showQRCode() {
|
||||||
createQRCode(10);
|
createQRCode(10);
|
||||||
}
|
}
|
||||||
|
|
||||||
element.style.marginBottom = "1em";
|
element.style.marginBottom = "0.8em";
|
||||||
element.innerHTML = qrCode;
|
element.innerHTML = qrCode;
|
||||||
|
|
||||||
var size = document.getElementById("lightningTipInvoice").clientWidth + "px";
|
var size = document.getElementById("lightningTipInvoice").clientWidth + "px";
|
||||||
|
@ -267,7 +271,9 @@ function createQRCode(typeNumber) {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function copyToClipboard(element) {
|
function copyInvoiceToClipboard() {
|
||||||
|
var element = document.getElementById("lightningTipInvoice");
|
||||||
|
|
||||||
element.select();
|
element.select();
|
||||||
|
|
||||||
document.execCommand('copy');
|
document.execCommand('copy');
|
||||||
|
@ -296,5 +302,9 @@ function showErrorMessage(message) {
|
||||||
|
|
||||||
function resizeInput(element) {
|
function resizeInput(element) {
|
||||||
element.style.height = "auto";
|
element.style.height = "auto";
|
||||||
|
|
||||||
|
// Change the size only if
|
||||||
|
if (element.clientHeight !== element.scrollHeight) {
|
||||||
element.style.height = (element.scrollHeight) + "px";
|
element.style.height = (element.scrollHeight) + "px";
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue