Add pin toggle to Bitcoin Details on Home Page

This commit is contained in:
Taylor Helsper 2023-07-27 00:06:09 -05:00
parent 3fcd7c9779
commit 2da9207300
5 changed files with 42 additions and 15 deletions

View File

@ -527,6 +527,8 @@ def init_ui_setting_defaults(ui_settings):
ui_settings["darkmode"] = False ui_settings["darkmode"] = False
if "price_ticker" not in ui_settings: if "price_ticker" not in ui_settings:
ui_settings["price_ticker"] = False ui_settings["price_ticker"] = False
if "pinned_bitcoin_details" not in ui_settings:
ui_settings["pinned_bitcoin_details"] = False
if "pinned_lightning_details" not in ui_settings: if "pinned_lightning_details" not in ui_settings:
ui_settings["pinned_lightning_details"] = False ui_settings["pinned_lightning_details"] = False
if "background" not in ui_settings: if "background" not in ui_settings:

View File

@ -237,7 +237,10 @@ def api_toggle_setting():
return jsonify(data) return jsonify(data)
setting = request.args.get("setting") setting = request.args.get("setting")
if setting == "pinned_lightning_details": if setting == "pinned_bitcoin_details":
toggle_ui_setting("pinned_bitcoin_details")
data["status"] = "success"
elif setting == "pinned_lightning_details":
toggle_ui_setting("pinned_lightning_details") toggle_ui_setting("pinned_lightning_details")
data["status"] = "success" data["status"] = "success"
else: else:

View File

@ -366,7 +366,7 @@ td, th {
.lightning_channel_container { .lightning_channel_container {
width: 1000px; width: 1000px;
} }
.lightning_pin_details_icon { .pin_details_icon {
width: 26px; width: 26px;
position: absolute; position: absolute;
top: 5px; top: 5px;

View File

@ -39,7 +39,7 @@
</tr> </tr>
</table> </table>
<br/> <br/>
<img class="" id="show_bitcoin_blocks" style="margin: auto; width: 60px; cursor: pointer;" onclick="toggleBlocks();" src="{{ url_for('static', filename="images/expand_down.png")}}"/> <img class="" id="show_bitcoin_details" style="margin: auto; width: 60px; cursor: pointer;" onclick="toggleBitcoinDetails();" src="{{ url_for('static', filename="images/")}}{% if ui_settings['pinned_lightning_details'] %}expand_up.png{% else %}expand_down.png{% endif %}"/>
</div> </div>
</div> </div>
<div class="app_tile_wide"> <div class="app_tile_wide">
@ -109,8 +109,15 @@
</div> </div>
<!-- Show Bitcoin Blocks --> <!-- Show Bitcoin Blocks -->
<div class="app_tile_row" id="bitcoin_blocks" style="display: none;"> <div class="app_tile_row" id="bitcoin_details" style="display: none;">
<div class="app_tile_bitcoin_recent_blocks" > <div class="app_tile_bitcoin_recent_blocks" >
{% if ui_settings['pinned_bitcoin_details'] %}
<img class="pin_details_icon" id="pin_bitcoin_details_icon" onclick="togglePinnedBitcoinDetails();" src="{{ url_for('static', filename="images/unpin.png")}}" title="Toggle Pinning Bitcoin Details"/>
{% else %}
<img class="pin_details_icon" id="pin_bitcoin_details_icon" onclick="togglePinnedBitcoinDetails();" src="{{ url_for('static', filename="images/pin.png")}}" title="Toggle Pinning Bitcoin Details"/>
{% endif %}
<div class="bitcoin_block_set"></div> <div class="bitcoin_block_set"></div>
<div class="bitcoin_block"> <div class="bitcoin_block">
<div class="bitcoin_block_orange_square"> <div class="bitcoin_block_orange_square">
@ -180,9 +187,9 @@
<p style="font-size: 16px; font-weight: bold;">Wallet</p> <p style="font-size: 16px; font-weight: bold;">Wallet</p>
{% if ui_settings['pinned_lightning_details'] %} {% 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"/> <img class="pin_details_icon" id="pin_lightning_details_icon" onclick="togglePinnedLightningDetails();" src="{{ url_for('static', filename="images/unpin.png")}}" title="Toggle Pinning Lightning Details"/>
{% else %} {% 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"/> <img class="pin_details_icon" id="pin_lightning_details_icon" onclick="togglePinnedLightningDetails();" src="{{ url_for('static', filename="images/pin.png")}}" title="Toggle Pinning Lightning Details"/>
{% endif %} {% endif %}
<div style="display: flex; margin: auto;"> <div style="display: flex; margin: auto;">

View File

@ -144,16 +144,28 @@
} }
} }
var showing_blocks = false; var pinned_bitcoin_details = {% if ui_settings['pinned_bitcoin_details'] %}true{% else %}false{% endif %};
function toggleBlocks() { function togglePinnedBitcoinDetails() {
if (showing_blocks) { if (pinned_bitcoin_details) {
$("#bitcoin_blocks").slideUp(400); $('#pin_bitcoin_details_icon').attr('src', location.protocol+'//'+location.hostname+'/static/images/pin.png');
$('#show_bitcoin_blocks').attr('src', location.protocol+'//'+location.hostname+'/static/images/expand_down.png'); $.get("/api/toggle_setting?setting=pinned_bitcoin_details");
} else { } else {
$("#bitcoin_blocks").slideDown(400); $('#pin_bitcoin_details_icon').attr('src', location.protocol+'//'+location.hostname+'/static/images/unpin.png');
$('#show_bitcoin_blocks').attr('src', location.protocol+'//'+location.hostname+'/static/images/expand_up.png'); $.get("/api/toggle_setting?setting=pinned_bitcoin_details");
} }
showing_blocks = !showing_blocks; pinned_bitcoin_details = !pinned_bitcoin_details;
}
var showing_bitcoin_details = false;
function toggleBitcoinDetails() {
if (showing_bitcoin_details) {
$("#bitcoin_details").slideUp(400);
$('#show_bitcoin_details').attr('src', location.protocol+'//'+location.hostname+'/static/images/expand_down.png');
} else {
$("#bitcoin_details").slideDown(400);
$('#show_bitcoin_details').attr('src', location.protocol+'//'+location.hostname+'/static/images/expand_up.png');
}
showing_bitcoin_details = !showing_bitcoin_details;
} }
var pinned_lightning_details = {% if ui_settings['pinned_lightning_details'] %}true{% else %}false{% endif %}; var pinned_lightning_details = {% if ui_settings['pinned_lightning_details'] %}true{% else %}false{% endif %};
@ -593,10 +605,13 @@
setTimeout(update_ticker, 1500); setTimeout(update_ticker, 1500);
update_ticker(); update_ticker();
// If pinned lightning, auto open lightning details // If pinned bitcoin or lightning info, auto open details
{% if lnd_wallet_exists and lnd_ready and ui_settings['pinned_lightning_details'] %} {% if lnd_wallet_exists and lnd_ready and ui_settings['pinned_lightning_details'] %}
setTimeout(toggleLightningDetails, 1500); setTimeout(toggleLightningDetails, 1500);
{% endif %} {% endif %}
{% if ui_settings['pinned_bitcoin_details'] %}
setTimeout(toggleBitcoinDetails, 1500);
{% endif %}
}); });
</script> </script>
</head> </head>