Add ability to pin open lightning details

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

@@ -147,3 +147,23 @@ def api_get_message():
     data = {}
     data["message"] = get_message(funny)
     return jsonify(data)
+
+@mynode_api.route("/api/toggle_setting")
+def api_toggle_setting():
+    check_logged_in()
+
+    data = {}
+    data["status"] = "unknown"
+
+    if not request.args.get("setting"):
+        data["status"] = "no_setting_specified"
+        return jsonify(data)
+
+    setting = request.args.get("setting")
+    if setting == "pinned_lightning_details":
+        toggle_pinned_lightning_details()
+        data["status"] = "success"
+    else:
+        data["status"] = "unknown_setting"
+    
+    return jsonify(data)

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

@@ -471,6 +471,14 @@ def toggle_darkmode():
     else:
         enable_darkmode()
 
+def toggle_pinned_lightning_details():
+    ui_settings = read_ui_settings()
+    if "pinned_lightning_details" not in ui_settings or ui_settings["pinned_lightning_details"] == False:
+        ui_settings["pinned_lightning_details"] = True
+    else:
+        ui_settings["pinned_lightning_details"] = False
+    write_ui_settings(ui_settings)
+
 def set_background(background):
     ui_settings = read_ui_settings()
     ui_settings['background'] = background

rootfs/standard/var/www/mynode/static/css/mynode.css

@@ -310,6 +310,13 @@ td, th {
 .lightning_channel_container {
     width: 1000px;
 }
+.lightning_pin_details_icon {
+    width: 26px;
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    cursor: pointer;
+}
 .lightning_channel_top_row {
     margin-bottom: 3px;
     height: 25px;

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

@@ -93,7 +93,7 @@
             <br/>
             
             {% if lnd_wallet_exists and lnd_ready %}
-            <img class="" id="show_lightning_details" style="margin: auto; width: 60px; cursor: pointer;" onclick="toggleLightningDetails();" src="{{ url_for('static', filename="images/expand_down.png")}}"/>
+            <img class="" id="show_lightning_details" style="margin: auto; width: 60px; cursor: pointer;" onclick="toggleLightningDetails();" src="{{ url_for('static', filename="images/")}}{% if ui_settings['pinned_lightning_details'] %}expand_up.png{% else %}expand_down.png{% endif %}"/>
             {% endif %}
         </div>
     </div>
@@ -166,24 +166,16 @@
 <!-- Show Lightning Details -->
 <div class="app_tile_row">
     <div class="app_tile_lightning_details" id="lightning_details" style="display: none;">
-        <!--
-        <table>
-            <tr>
-                <td>
-                    <img style='width: 120px; height: 120px; display: inline;' src='/api/get_qr_code_image?url={{ lnd_deposit_address }}' title="{{ lnd_deposit_address }}"/>
-                </td>
-                <td>
-                    <b>Deposit Address:</b> {{lnd_deposit_address}}<br/>
-                    <b>On-chain Balance:</b> {{lnd_deposit_address}}<br/>
-                    <b>Channel Balance:</b> {{lnd_deposit_address}}<br/>
-                </td>
-            </tr>
-        </table>
-        -->
-
 
         <!-- Top Wallet Section -->
         <p style="font-size: 16px; font-weight: bold;">Wallet</p>
+
+        {% if ui_settings['pinned_lightning_details'] %}
+            <img class="lightning_pin_details_icon" id="pin_lightning_details_icon" onclick="togglePinnedLightningDetails();" src="{{ url_for('static', filename="images/unpin.png")}}" title="Toggle Pinning Lightning Details"/>
+        {% else %}
+            <img class="lightning_pin_details_icon" id="pin_lightning_details_icon" onclick="togglePinnedLightningDetails();" src="{{ url_for('static', filename="images/pin.png")}}" title="Toggle Pinning Lightning Details"/>
+        {% endif %}
+
         <div style="display: flex; margin: auto;">
 
             <div>
@@ -197,7 +189,6 @@
                 <span style="font-size: 10px;">{{lnd_deposit_address}}</span>
             </div>
             
-            
             <div>
                 <b>On-chain Transactions</b>
                 <table style="font-size: 12px; width: 270px; margin: 10px;">

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

@@ -116,6 +116,18 @@
                 showing_blocks = !showing_blocks;
             }
 
+            var pinned_lightning_details = {% if ui_settings['pinned_lightning_details'] %}true{% else %}false{% endif %};
+            function togglePinnedLightningDetails() {
+                if (pinned_lightning_details) {
+                    $('#pin_lightning_details_icon').attr('src', location.protocol+'//'+location.hostname+'/static/images/pin.png');
+                    $.get("/api/toggle_setting?setting=pinned_lightning_details");
+                } else {
+                    $('#pin_lightning_details_icon').attr('src', location.protocol+'//'+location.hostname+'/static/images/unpin.png');
+                    $.get("/api/toggle_setting?setting=pinned_lightning_details");
+                }
+                pinned_lightning_details = !pinned_lightning_details;
+            }
+
             var showing_lightning_details = false;
             function toggleLightningDetails() {
                 if (showing_lightning_details) {
@@ -136,7 +148,6 @@
             }
             
 
-
             // Update page function
             function update_page() {
                 // Update Bitcoin Info
@@ -410,6 +421,11 @@
                 // Update info every 15 seconds
                 const update_interval = setInterval(update_page, 15000);
                 update_page();
+
+                // If pinned lightning, auto open lightning details
+                {% if lnd_wallet_exists and lnd_ready and ui_settings['pinned_lightning_details'] %}
+                toggleLightningDetails();
+                {% endif %}
             });
         </script>
      </head>