commit 731cd49f34fe4a99bde6529b1d07858ebb252871
parent c59da7bdd22247f049538ee108ecf577b620bb4d
Author: nickfarrow <nick@nickfarrow.com>
Date: Sat, 22 May 2021 16:08:37 +1000
Clean up websocket files
Diffstat:
4 files changed, 101 insertions(+), 104 deletions(-)
diff --git a/server.py b/server.py
@@ -60,9 +60,9 @@ def payment_page():
# Websocket payment processing method called by client
-# make_payment recieves amount and initiates invoice and payment processing.
-@socket_.on("make_payment")
-def make_payment(payload):
+# initiate_payment recieves amount and initiates invoice and payment processing.
+@socket_.on("initiate_payment")
+def initiate_payment(payload):
# Check the amount is a float
amount = payload["amount"]
try:
diff --git a/static/server_connection.js b/static/server_connection.js
@@ -1,99 +0,0 @@
-// Websocket logic, talks to server.py /pay
-// Initiate is called in the <head> of index.html with the payload provided
-// by the flask request. The data can not be passed straight from flask to this js
-// Hence we {{ load }} it in the index head and call this function.
-function initiate(payment_data) {
- namespace = '/';
- var socket = io(namespace);
-
- // Echo initated message for debugging.
- socket.on('connect', function() {
- socket.emit('initialise', {'data': 'Initialising payment.'});
- });
-
- // Recieving payment status from flask
- socket.on('payresponse', function(msg, cb) {
- console.log(msg.response);
- // Display payment status
- $('#status').text(msg.status).html();
- // Display payment address
- $('#address').text(msg.address).html();
- // Display payment amount
- $('#amount').text(msg.amount).html();
- $('#amount_sats').text(Math.round(msg.amount * 10**8)).html();
- // Display payment time left
- $('#timer').text(Math.round(msg.time_left)).html();
-
- // Run additional logic that manipulates element visibility depending
- // on the contents and status of the payment.
- conditionalPageLogic(msg)
-
- console.log(msg);
-
- // Actions if paid
- if (msg.paid == true) {
-
- // Redirect if paid
- if (msg.redirect != null) {
- setTimeout(() => { window.location.replace(msg.redirect); }, 5000);
- }
- }
-
-
- // If close? I forget..
- if (cb)
- cb();
- });
-
- // Initiate the payment websocket
- socket.emit('make_payment', payment_data);
- return false
-}
-
-// Run additional logic that manipulates element visibility depending
-// on the contents and status of the payment when giving a response to the webpage.
-function conditionalPageLogic(msg) {
- // Display QR code
- if (msg.address != null) {
- document.getElementById('qrImage').className = "qr";
- // document.getElementById('qrImage').style.display = "block";
- document.getElementById('qrClick').href = "/static/qr_codes/" + msg.uuid + ".png";
- document.getElementById('qrImage').src = "/static/qr_codes/" + msg.uuid + ".png";
- }
- // Hide timer until ready.
- if (msg.time_left == 0) {
- document.getElementById('timerContainer').style.visibility = "hidden";
- }
- else {
- document.getElementById('timerContainer').style.visibility = "visible";
- }
-}
-
-function replaceUrlParam(url, paramName, paramValue)
-{
- console.log(url);
- var href = new URL(url);
- href.searchParams.set(paramName, paramValue);
- window.location = href;
- return
-}
-
-// Payment timer, can't go below zero, update every second
-intervalTimer = setInterval(function () {
- var currentTime = document.getElementById('timer').innerHTML;
- if (currentTime <= 0) {
- currentTime = 1;
- }
- document.getElementById('timer').innerHTML = Math.round(currentTime - 1);
-}, 1000)
-
-// Copy text functions
-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)
-}
diff --git a/static/websocket.js b/static/websocket.js
@@ -0,0 +1,96 @@
+// Websocket logic, talks to server.py /pay
+
+// Initiate is called in the <head> of index.html with the payload provided
+// by the flask request. The data can not be passed straight from flask to this js
+// Hence we {{ load }} it in the index head and call this function.
+function open_websocket(payment_data) {
+ namespace = '/';
+ var socket = io(namespace);
+
+ // Echo initated message for debugging.
+ socket.on('connect', function() {
+ socket.emit('initialise', {'data': 'Initialising payment.'});
+ });
+
+ // Recieving payment status from flask
+ socket.on('payresponse', function(msg) {
+ console.log(msg.response);
+ // Display payment status
+ $('#status').text(msg.status).html();
+ // Display payment address
+ $('#address').text(msg.address).html();
+ // Display payment amount
+ $('#amount').text(msg.amount).html();
+ $('#amount_sats').text(Math.round(msg.amount * 10**8)).html();
+ // Display payment time left
+ $('#timer').text(Math.round(msg.time_left)).html();
+
+ // Run additional logic that manipulates element visibility depending
+ // on the contents and status of the payment.
+ conditionalPageLogic(msg)
+
+ console.log(msg);
+
+ // Actions if paid
+ if (msg.paid == true) {
+
+ // Redirect if paid
+ if (msg.redirect != null) {
+ setTimeout(() => { window.location.replace(msg.redirect); }, 5000);
+ }
+ }
+ });
+
+ // Initiate the payment websocket with the server
+ socket.emit('initiate_payment', payment_data);
+ return false
+}
+
+// Run additional logic that manipulates element visibility depending
+// on the contents and status of the payment when giving a response to the webpage.
+function conditionalPageLogic(msg) {
+ // Display QR code
+ if (msg.address != null) {
+ // Change image id to qr id
+ document.getElementById('qrImage').className = "qr";
+ // Insert image and link
+ document.getElementById('qrClick').href = "/static/qr_codes/" + msg.uuid + ".png";
+ document.getElementById('qrImage').src = "/static/qr_codes/" + msg.uuid + ".png";
+ }
+ // Hide timer until ready.
+ if (msg.time_left == 0) {
+ document.getElementById('timerContainer').style.visibility = "hidden";
+ }
+ else {
+ document.getElementById('timerContainer').style.visibility = "visible";
+ }
+}
+
+function replaceUrlParam(url, paramName, paramValue)
+{
+ console.log(url);
+ var href = new URL(url);
+ href.searchParams.set(paramName, paramValue);
+ window.location = href;
+ return
+}
+
+// Payment timer, can't go below zero, update every second
+intervalTimer = setInterval(function () {
+ var currentTime = document.getElementById('timer').innerHTML;
+ if (currentTime <= 0) {
+ currentTime = 1;
+ }
+ document.getElementById('timer').innerHTML = Math.round(currentTime - 1);
+}, 1000)
+
+// Copy text functions
+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)
+}
diff --git a/templates/index.html b/templates/index.html
@@ -6,7 +6,7 @@
<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/3.0.4/socket.io.js"></script>
- <script src="{{ url_for('static', filename='server_connection.js') }}"></script>
+ <script src="{{ url_for('static', filename='websocket.js') }}"></script>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
@@ -14,7 +14,7 @@
<script type="text/javascript">
payment_data = {{ params|tojson }};
console.log(payment_data);
- initiate(payment_data);
+ open_websocket(payment_data);
</script>
</head>
