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
if "price_ticker" not in ui_settings:
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:
ui_settings["pinned_lightning_details"] = False
if "background" not in ui_settings:

View File

@ -237,7 +237,10 @@ def api_toggle_setting():
return jsonify(data)
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")
data["status"] = "success"
else:

View File

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

View File

@ -39,7 +39,7 @@
</tr>
</table>
<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 class="app_tile_wide">
@ -109,8 +109,15 @@
</div>
<!-- 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" >
{% 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">
<div class="bitcoin_block_orange_square">
@ -180,9 +187,9 @@
<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"/>
<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 %}
<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 %}
<div style="display: flex; margin: auto;">

View File

@ -144,16 +144,28 @@
}
}
var showing_blocks = false;
function toggleBlocks() {
if (showing_blocks) {
$("#bitcoin_blocks").slideUp(400);
$('#show_bitcoin_blocks').attr('src', location.protocol+'//'+location.hostname+'/static/images/expand_down.png');
var pinned_bitcoin_details = {% if ui_settings['pinned_bitcoin_details'] %}true{% else %}false{% endif %};
function togglePinnedBitcoinDetails() {
if (pinned_bitcoin_details) {
$('#pin_bitcoin_details_icon').attr('src', location.protocol+'//'+location.hostname+'/static/images/pin.png');
$.get("/api/toggle_setting?setting=pinned_bitcoin_details");
} else {
$("#bitcoin_blocks").slideDown(400);
$('#show_bitcoin_blocks').attr('src', location.protocol+'//'+location.hostname+'/static/images/expand_up.png');
$('#pin_bitcoin_details_icon').attr('src', location.protocol+'//'+location.hostname+'/static/images/unpin.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 %};
@ -593,10 +605,13 @@
setTimeout(update_ticker, 1500);
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'] %}
setTimeout(toggleLightningDetails, 1500);
{% endif %}
{% if ui_settings['pinned_bitcoin_details'] %}
setTimeout(toggleBitcoinDetails, 1500);
{% endif %}
});
</script>
</head>