More homepage ajax updates

rootfs/standard/var/www/mynode/api.py

@@ -55,6 +55,8 @@ def api_get_lightning_info():
     data["lnd_ready"] = is_lnd_ready()
     data["balances"] = get_lightning_balance_info()
     data["channels"] = get_lightning_channels()
+    data["transactions"] = get_lightning_transactions()
+    data["payments_and_invoices"] = get_lightning_payments_and_invoices()
 
     return jsonify(data)
 

rootfs/standard/var/www/mynode/lightning_info.py

@@ -272,6 +272,7 @@ def get_lightning_transactions():
         transactions = []
         data = copy.deepcopy(lightning_transactions)
         for tx in data["transactions"]:
+            tx["id"] = tx["tx_hash"]
             tx["amount_str"] = format_sat_amount(tx["amount"])
             tx["date_str"] = time.strftime("%D %H:%M", time.localtime(int(tx["time_stamp"])))
             transactions.append(tx)
@@ -285,6 +286,7 @@ def get_lightning_payments():
         payments = []
         data = copy.deepcopy(lightning_payments)
         for tx in data["payments"]:
+            tx["id"] = tx["payment_hash"]
             tx["type"] = "PAYMENT"
             tx["value_str"] = format_sat_amount(tx["value_sat"])
             tx["fee_str"] = format_sat_amount(tx["fee"])
@@ -294,7 +296,7 @@ def get_lightning_payments():
         payments.reverse()
         return payments
     except:
-        return None
+        return []
 
 def get_lightning_invoices():
     global lightning_invoices
@@ -302,6 +304,7 @@ def get_lightning_invoices():
         invoices = []
         data = copy.deepcopy(lightning_invoices)
         for tx in data["invoices"]:
+            tx["id"] = tx["r_hash"]
             tx["type"] = "INVOICE"
             tx["value_str"] = format_sat_amount(tx["value"])
             tx["date_str"] = time.strftime("%D %H:%M", time.localtime(int(tx["creation_date"])))
@@ -310,7 +313,7 @@ def get_lightning_invoices():
         invoices.reverse()
         return invoices
     except:
-        return None
+        return []
 
 def get_lightning_payments_and_invoices():
     payments = get_lightning_payments()
@@ -318,13 +321,13 @@ def get_lightning_payments_and_invoices():
     txs = []
 
     if payments == None and invoices == None:
-        return None
+        return []
     elif payments == None and invoices != None:
         return invoices
     elif payments != None and invoices == None:
         return payments
     elif len(payments) == 0 and len(invoices) == 0:
-        return None
+        return []
 
     while len(payments) or len(invoices):
         if len(payments) == 0:

rootfs/standard/var/www/mynode/templates/includes/services.html

@@ -191,12 +191,13 @@
             
             <div>
                 <b>On-chain Transactions</b>
-                <table style="font-size: 12px; width: 270px; margin: 10px;">
+                <table id="lnd_transactions" style="font-size: 12px; width: 270px; margin: 10px;">
                     <tr>
                         <td>Date</td>
                         <td>Amount</td>
                         <td></td>
                     </tr>
+                    <!-- ONLY UPDATE VIA JS??
                     {% if lnd_transactions and lnd_transactions|length > 0 %}
                         {% for tx in lnd_transactions[:lnd_tx_display_limit] %}
                             <tr>
@@ -219,18 +220,20 @@
                     {% else %}
                         <tr><td colspan=9 style="text-align: center;"><br/><br/>None yet!</td></tr>
                     {% endif %}
+                    -->
                 </table>
             </div> 
 
             
             <div>
                 <b>Lightning Transactions</b>
-                <table style="font-size: 12px; width: 270px; margin: 10px;">
+                <table id="lnd_payments_and_invoices" style="font-size: 12px; width: 270px; margin: 10px;">
                     <tr>
                         <td>Date</td>
                         <td>Amount</td>
                         <td></td>
                     </tr>
+                    <!-- ONLY UPDATE VIA JS??
                     {% if lnd_payments_and_invoices and lnd_payments_and_invoices|length > 0 %}
                         {% for tx in lnd_payments_and_invoices[:lnd_tx_display_limit] %}
                             <tr>
@@ -238,9 +241,9 @@
                                 <td>{{ tx.value_str }}</td>
                                 <td>
                                     {% if tx.type == "PAYMENT" %}
-                                        <img style="width: 16px;" src="{{ url_for('static', filename="images/ln_send.png")}}" title="{{ tx.memo }}"/>
+                                        <img style="width: 16px;" src="{{ url_for('static', filename="images/ln_send.png")}}"/>
                                     {% else %}
-                                        <img style="width: 16px;" src="{{ url_for('static', filename="images/ln_recv.png")}}" title="{{ tx.memo }}"/>
+                                        <img style="width: 16px;" src="{{ url_for('static', filename="images/ln_recv.png")}}"/>
                                     {% endif %}
 
                                     {% if tx.state == "OPEN" %}
@@ -263,6 +266,7 @@
                     {% else %}
                         <tr><td colspan=9 style="text-align: center;"><br/><br/>None yet!</td></tr>
                     {% endif %}
+                    -->
                 </table>
             </div>
         </div>

rootfs/standard/var/www/mynode/templates/main.html

@@ -16,6 +16,8 @@
             var electrs_active = {% if electrs_active %}1{% else %}0{% endif %};
             var lnd_ready = {% if lnd_ready %}true{% else %}false{% endif %};
             var is_installing_docker_images = {% if is_installing_docker_images %}true{% else %}false{% endif %};
+            var lnd_last_btc_tx = "";
+            var lnd_last_ln_tx = "";
 
             // Toggle enable/disable functions
             function get_custom_enable_message(short_name) {
@@ -104,6 +106,21 @@
                 window.location.href=location.protocol+'//'+location.hostname+"/";
             }
 
+            function need_to_update_tx_table(transactions, last_displayed_tx) {
+                if (transactions.length > 0) {
+                    tx = transactions[0];
+                    if (tx["id"] != last_displayed_tx) {
+                        return true;
+                    }
+                    return false;
+                } else {
+                    if (last_displayed_tx == "none") {
+                        return false;
+                    }
+                    return true;
+                }
+            }
+
             var showing_blocks = false;
             function toggleBlocks() {
                 if (showing_blocks) {
@@ -225,6 +242,78 @@
                             }
                         }
                     }
+                    if ("transactions" in data && data["transactions"] != null) {
+                        transactions = data["transactions"];
+                        if (need_to_update_tx_table(transactions, lnd_last_btc_tx)) {
+                            // Clear table
+                            while ($('#lnd_transactions tr').length > 1) {
+                                $('#lnd_transactions tr:last').remove();
+                            }
+                            for (i=0; i < transactions.length && i < {{lnd_tx_display_limit}}; i++) {
+                                tx = transactions[i];
+                                //console.log(JSON.stringify(tx))
+                                if (i==0) {lnd_last_btc_tx = tx['id'];}
+                                row =  "<tr>";
+                                row += "<td>"+tx['date_str']+"</td>";
+                                row += "<td>"+tx['amount_str']+"</td>";
+                                row += "<td>";
+                                if      (tx["num_confirmations"] <  1) { row += "<img style=\"width: 16px;\" src=\"/static/images/confirm_pending.png\" title=\"pending transaction\"/>"; }
+                                else if (tx["num_confirmations"] <= 3) { row += "<img style=\"width: 16px;\" src=\"/static/images/confirm_bars_"+tx["num_confirmations"]+".png\" title=\""+tx["num_confirmations"]+" confirmations\"/>"; }
+                                else if (tx["num_confirmations"] >  3) { row += "<img style=\"width: 16px;\" src=\"/static/images/confirm_complete.png\" title=\""+tx["num_confirmations"]+" confirmations\"/>"; }
+                                row += "</td>";
+                                row += "</tr>";
+                                $('#lnd_transactions tr:last').after(row);
+                            }
+                            if (transactions.length >= {{lnd_tx_display_limit}}) {
+                                $('#lnd_transactions tr:last').after("<tr><td colspan=9>more...</td></tr>");
+                            }
+                            if (transactions.length == 0) {
+                                lnd_last_btc_tx = "none";
+                                $('#lnd_transactions tr:last').after("<tr><td colspan=9 style=\"text-align: center;\"><br/><br/>None yet!</td></tr>");
+                            }
+                        }
+                    }
+                    if ("payments_and_invoices" in data && data["payments_and_invoices"] != null) {
+                        payments_and_invoices = data["payments_and_invoices"];
+                        if (need_to_update_tx_table(payments_and_invoices, lnd_last_ln_tx)) {
+                            // Clear table
+                            while ($('#lnd_payments_and_invoices tr').length > 1) {
+                                $('#lnd_payments_and_invoices tr:last').remove();
+                            }
+                            for (i=0; i < payments_and_invoices.length && i < {{lnd_tx_display_limit}}; i++) {
+                                tx = payments_and_invoices[i];
+                                //console.log(JSON.stringify(tx))
+                                if (i==0) {lnd_last_ln_tx = tx['id'];}
+                                row =  "<tr>";
+                                row += "<td>"+tx['date_str']+"</td>";
+                                row += "<td>"+tx['value_str']+"</td>";
+                                row += "<td>";
+                                if (tx["type"] == "PAYMENT") {
+                                    row += "<img style=\"width: 16px;\" src=\"/static/images/ln_send.png\"/>";
+                                } else {
+                                    row += "<img style=\"width: 16px;\" src=\"/static/images/ln_recv.png\"/>";
+                                }
+                                if ("state" in tx && tx["state"] == "OPEN")      { row += "<img style=\"width: 16px;\" src=\"/static/images/invoice_pending.png\" title=\"open invoice\"/>"; }
+                                if ("state" in tx && tx["state"] == "SETTLED")   { row += "<img style=\"width: 16px;\" src=\"/static/images/invoice_complete.png\" title=\"settled invoice\"/>"; }
+                                if ("state" in tx && tx["state"] == "CANCELED")  { row += "<img style=\"width: 16px;\" src=\"/static/images/invoice_cancelled.png\" title=\"cancelled invoice\"/>"; }
+                                if ("state" in tx && tx["state"] == "CANCELLED") { row += "<img style=\"width: 16px;\" src=\"/static/images/invoice_cancelled.png\" title=\"cancelled invoice\"/>"; }
+
+                                if ("memo" in tx && tx["memo"] != "") {
+                                    row += "<img style=\"width: 16px;\" src=\"/static/images/memo.png\" title=\""+tx["memo"]+"\"/>";
+                                }
+                                row += "</td>";
+                                row += "</tr>";
+                                $('#lnd_payments_and_invoices tr:last').after(row);
+                            }
+                            if (payments_and_invoices.length >= {{lnd_tx_display_limit}}) {
+                                $('#lnd_payments_and_invoices tr:last').after("<tr><td colspan=9>more...</td></tr>");
+                            }
+                            if (payments_and_invoices.length == 0) {
+                                lnd_last_ln_tx = "none";
+                                $('#lnd_payments_and_invoices tr:last').after("<tr><td colspan=9 style=\"text-align: center;\"><br/><br/>None yet!</td></tr>");
+                            }
+                        }
+                    }
                 });
 
                 // Update app status