commit 0fe98452fcfe571011ffd6fd0c1b6d23d0b96e89
parent 22c03559b1b2ecd81f1e54dc7117f700505fc2f7
Author: NicholasFarrow <nicholas.w.farrow@gmail.com>
Date: Sat, 26 Dec 2020 19:11:38 +1100
Improved qr code zoom, copying text, columns, conditional information display
Diffstat:
3 files changed, 81 insertions(+), 50 deletions(-)
diff --git a/server.py b/server.py
@@ -66,6 +66,7 @@ def create_invoice(dollar_amount, currency, label):
payment = bitcoind.btcd(dollar_amount, currency, label)
# payment = bitcoind.btcd(payment_invoice)
payment.get_address()
+ payment.create_qr()
return payment
def update_status(payment, console_status=True):
@@ -77,6 +78,7 @@ def update_status(payment, console_status=True):
'address' : payment.address,
'amount' : payment.value,
'time_left' : payment.time_left,
+ 'uuid' : payment.uuid,
'response': payment.response})
return
@@ -95,6 +97,7 @@ def make_payment(payment):
if payment.confirmed_paid > payment.value:
payment.paid = True
+ payment.time_left = 0
payment.status = "Payment successful! {} BTC".format(payment.confirmed_paid)
payment.response = "Payment successful! {} BTC".format(payment.confirmed_paid)
update_status(payment)
diff --git a/static/server_connection.js b/static/server_connection.js
@@ -12,7 +12,10 @@ $(document).ready(function() {
$('#address').text(msg.address).html();
$('#amount').text(msg.amount).html();
$('#log').append('<br>' + $('<div/>').text(msg.response).html());
- $('#timer').text(msg.time_left).html();
+ $('#timer').text(Math.round(msg.time_left)).html();
+
+ conditionalPageLogic(msg)
+
if (cb)
cb();
});
@@ -23,31 +26,41 @@ $(document).ready(function() {
});
});
-intervalTimer = setInterval(function () {
- var currentTime = document.getElementById('timer').innerHTML;
- if (currentTime <= 0) {
- currentTime = 1;
+function conditionalPageLogic(msg) {
+ if (msg.address != null) {
+ document.getElementById('logo').classList.add("qr");
+ document.getElementById('logo').src = "static/qr_codes/" + msg.uuid + ".png";
+ document.getElementById('qrClick').href = "/static/qr_codes/" + msg.uuid + ".png"
}
- document.getElementById('timer').innerHTML = Math.round(currentTime - 1);
-}, 1000)
-function showDiv() {
+ if (msg.time_left == 0) {
+ document.getElementById('timerContainer').style.visibility = "hidden";
+ }
+}
+
+function hideAmountShowPayment() {
if (document.getElementById('pay_data').value > 0) {
document.getElementById('paymentDetails').style.display = "block";
+ document.getElementById('paymentForm').style.display = "none";
}
}
-function CopyToClipboard(containerid) {
- if (document.selection) {
- var range = document.body.createTextRange();
- range.moveToElementText(document.getElementById(containerid));
- range.select().createTextRange();
- document.execCommand("copy");
- } else if (window.getSelection) {
- var range = document.createRange();
- range.selectNode(document.getElementById(containerid));
- window.getSelection().addRange(range);
- document.execCommand("copy");
- alert("Copied address!");
- }
+function copyText(text) {
+ navigator.clipboard.writeText(text);
}
+
+function copyTextFromElement(elementID) {
+ let element = document.getElementById(elementID); //select the element
+ let elementText = element.textContent; //get the text content from the element
+ copyText(elementText); //use the copyText function below
+ alert("Copied address:" + elementText)
+}
+
+
+intervalTimer = setInterval(function () {
+ var currentTime = document.getElementById('timer').innerHTML;
+ if (currentTime <= 0) {
+ currentTime = 1;
+ }
+ document.getElementById('timer').innerHTML = Math.round(currentTime - 1);
+}, 1000)
diff --git a/templates/index.html b/templates/index.html
@@ -30,19 +30,20 @@
padding-bottom: 10px;
font-size: 16px
- height:auto;
+ /* height:auto; */
+ height: 275px;
width:220px;
}
- .row {
+ #row {
display: flex;
}
- .left {
+ #left {
width: 70%;
padding: 0 10px 0 0;
float: left;
}
- .right {
+ #right {
width: 30%;
padding: 0 10px 0 0;
float: right;
@@ -54,46 +55,60 @@
margin: 0;
padding: 5px;
}
- address {
+ #address {
overflow-wrap: break-word;
+ text-align: right;
}
- paymentDetails.p {
- overflow-wrap: break-word;
- word-wrap: break-word;
- padding: 0;
- margin: 0;
+ .qr {
+ transition: transform .2s;
+ object-fit: cover;
+ }
+ .qr:hover {
+ -ms-transform: scale(3); /* IE 9 */
+ -webkit-transform: scale(3); /* Safari 3-8 */
+ transform: scale(3);
}
</style>
</head>
+
+<!-- Issues:
+ The style is a mess
+ The copy address doesnt work
+ The logo title columns don't work
+ The iframe expands beyond its max height. -->
+
+
<body>
<div id="paybox">
- <!-- <div id="row" height="50px">
+ <div id="row" height="50px">
<div id="left" style="display:inline-block;">
- <p>Pay with Bitcoin</p>
+ <h1>Pay with Bitcoin</h1>
</div>
<div id="right">
- <img align="right" width="50px" src="https://i.pinimg.com/originals/3a/dd/40/3add4023fa9b435e7da3c09156b88015.png">
+ <a id="qrClick" target="_blank"><img class="" id="logo" style="padding-top:25px" width="65px" src="https://i.pinimg.com/originals/3a/dd/40/3add4023fa9b435e7da3c09156b88015.png"></a>
</div>
- </div> -->
- <h1><img style="padding-left: 15px; float:right;" width="65px" src="https://i.pinimg.com/originals/3a/dd/40/3add4023fa9b435e7da3c09156b88015.png">Pay with <br> Bitcoin</h1>
+ </div>
+ <!-- <h1><img id="logoQR" style="padding-left: 15px; float:right;" width="65px" src="https://i.pinimg.com/originals/3a/dd/40/3add4023fa9b435e7da3c09156b88015.png">Pay with <br> Bitcoin</h1> -->
- <center>
- <form id="pay" method="POST" action='#' style="margin:0;padding0;">
- <h2 style="margin:0;padding0;">Amount:
- <input style="display:inline" size="4" type="float" name="pay_data" id="pay_data" placeholder="USD">
- </h2>
- <br>
- <input style="width:100%" type="submit" value="Pay" onclick="showDiv()">
- </form>
- </center>
+ <div id="paymentForm">
+ <center>
+ <form id="pay" method="POST" action='#' style="margin:0;padding0;">
+ <h2 style="margin:0;padding0;">Amount:
+ <input style="display:inline" size="4" type="float" name="pay_data" id="pay_data" placeholder="USD">
+ </h2>
+ <br>
+ <input style="width:100%" type="submit" value="Pay" onclick="hideAmountShowPayment()">
+ </form>
+ </center>
+ </div>
- <div id="paymentDetails" style="display:none;">
- <p>Send: <b><span id="amount"></span></b> BTC</p>
- <p>To: <br><b><span id="address" onclick="CopyToClipboard('address')"></span></b></p>
- <p><span id="status"></span>.</p>
- <p><span id="timer"></span> seconds remaining.</p>
+ <div id="paymentDetails" style="display:none; padding: 0;">
+ <p style="padding:0;">Send: <b><span id="amount"></span></b> BTC</p>
+ <p style="padding:0;">To: </p><b><p id="address" onclick="copyTextFromElement('address')"></p></b>
+ <p style="padding:0;"><span id="status"></span></p>
+ <p id="timerContainer" style="padding:0;"><span id="timer"></span> seconds remaining.</p>
</div>
<div id="paybutton"></div>
