SatSale

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README | LICENSE

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:
Mserver.py | 3+++
Mstatic/server_connection.js | 55++++++++++++++++++++++++++++++++++---------------------
Mtemplates/index.html | 73++++++++++++++++++++++++++++++++++++++++++++-----------------------------
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>