Feature: Sync feedback for Spectrum (#2197)

* core logic applied
* dynamic sync status for spectrum
* progress bar sync status for spectrum
This commit is contained in:
Manolis Mandrapilias 2023-02-15 13:29:45 +01:00 committed by GitHub
parent b48ad80e00
commit d00b628838
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 47 additions and 2 deletions

View file

@ -1,4 +1,13 @@
<div class="bg-dark-800 flex flex-col">
{% if specter.info.get("initialblockdownload") == True %}
{% set verificationprogress = specter.info.get("verificationprogress") * 100 %}
<div class="flex flex-col p-4 mt-3 mb-4">
<p>{{ _("Spectrum is still syncing")}}<p>
<div class="w-full bg-dark-700 rounded-lg">
<div class="bg-dark-600 text-xs text-white text-center p-2 leading-none {% if verificationprogress < 100 %} rounded-l-md {% else %} rounded-md {% endif %}" style="width: {{ verificationprogress | round | int }}%">{{ verificationprogress | round | int }}%</div>
</div>
</div>
{% endif %}
{% if specter.chain %}
<table>
<tr> <td data-style="text-align: left;">{{ _("Network") }}:</td> <td data-style="text-align: right;" id="node-info-specter-chain">{{specter.chain}}</td> </tr>

View file

@ -2,9 +2,12 @@
{% if specter.node.is_running %}
<div class="px-3 py-2 h-full min-w-0 grow flex items-center cursor-pointer" id="active-node" onclick="showPageOverlay('node-info-popup', {top: '64px', left: '16px'});document.getElementById('side-content').classList.remove('active');" >
{% if specter.info.get("initialblockdownload") %}
<p class="text-white">{{ _("Spectrum is still syncing...")}}<br>{{ _('(data might be outdated)')}}</p>
<img class="rounded-full bg-dark-700 w-4 h-4 animate-spin-slow" id="unfinished-ibd-indicator" src="{{ url_for('static', filename='img/refresh.svg') }}" data-cy="unfinished-sync-indicator"/>
<svg class="w-7 h-7 text-white hidden" id="connected-icon" version="1.1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><!--Generated by IJSVG (https://github.com/iconjar/IJSVG)--><path d="M54.5946,27.4366l5.66603e-08,-5.66066e-08c-0.745305,0.744598 -1.9414,0.780481 -2.73,0.0819001l1.11948e-07,9.86842e-08c-11.3381,-9.99478 -28.3408,-9.99478 -39.6789,-1.97368e-07l4.1375e-08,-3.6659e-08c-0.788564,0.698682 -1.98474,0.662797 -2.73,-0.0818999l-2.831,-2.8295l4.78383e-08,4.78239e-08c-0.782846,-0.782609 -0.783038,-2.05166 -0.000429116,-2.83451c0.0255969,-0.0256047 0.0518829,-0.0505111 0.078829,-0.0746918l-1.08875e-06,9.72979e-07c14.4215,-12.888 36.2226,-12.888 50.6441,-1.94596e-06l-4.18137e-09,-3.75185e-09c0.823858,0.73923 0.892463,2.00636 0.153233,2.83022c-0.0242251,0.0269984 -0.0491787,0.0533343 -0.0748332,0.0789783Zm-17.6311,13.896l1.74829e-07,9.87123e-08c1.00267,0.56613 1.35656,1.8379 0.79043,2.84057c-0.0942659,0.166954 -0.21111,0.320108 -0.34723,0.45513l-3.6928,3.6684l2.2751e-08,-2.25368e-08c-0.943884,0.934995 -2.46482,0.934995 -3.4087,4.50735e-08l-3.6928,-3.6684l-6.02819e-08,-5.98007e-08c-0.8175,-0.810974 -0.82279,-2.13111 -0.0118161,-2.94861c0.134967,-0.136053 0.288047,-0.252849 0.454916,-0.347088l2.96297e-07,-1.66902e-07c3.07549,-1.7324 6.83251,-1.7324 9.908,3.33805e-07Zm-14.8508,-3.792l3.86385e-08,-3.1954e-08c-0.835403,0.690877 -2.05882,0.634623 -2.8273,-0.13l-2.3847,-2.4084c-1.1739,-1.1855 -1.14,-2.6381 -0.1975,-3.4266l9.62086e-07,-8.05987e-07c8.84671,-7.41133 21.7347,-7.41133 30.5814,1.61198e-06l-5.08261e-08,-4.40698e-08c0.88879,0.770643 0.984568,2.11588 0.213926,3.00467c-0.0332999,0.0384052 -0.0679639,0.075606 -0.103925,0.111531l-2.6883,2.7151l2.63897e-08,-2.62774e-08c-0.768944,0.765671 -1.99317,0.823532 -2.8309,0.1338l-1.43462e-07,-1.17058e-07c-5.75168,-4.69307 -14.0109,-4.69307 -19.7626,2.34116e-07Z" fill="currentColor" fill-rule="evenodd"></path></svg>
{% else %}
<img class="rounded-full bg-dark-700 w-4 h-4 animate-spin-slow hidden" id="unfinished-ibd-indicator" src="{{ url_for('static', filename='img/refresh.svg') }}" data-cy="unfinished-sync-indicator"/>
<svg class="w-7 h-7 text-white" id="connected-icon" version="1.1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><!--Generated by IJSVG (https://github.com/iconjar/IJSVG)--><path d="M54.5946,27.4366l5.66603e-08,-5.66066e-08c-0.745305,0.744598 -1.9414,0.780481 -2.73,0.0819001l1.11948e-07,9.86842e-08c-11.3381,-9.99478 -28.3408,-9.99478 -39.6789,-1.97368e-07l4.1375e-08,-3.6659e-08c-0.788564,0.698682 -1.98474,0.662797 -2.73,-0.0818999l-2.831,-2.8295l4.78383e-08,4.78239e-08c-0.782846,-0.782609 -0.783038,-2.05166 -0.000429116,-2.83451c0.0255969,-0.0256047 0.0518829,-0.0505111 0.078829,-0.0746918l-1.08875e-06,9.72979e-07c14.4215,-12.888 36.2226,-12.888 50.6441,-1.94596e-06l-4.18137e-09,-3.75185e-09c0.823858,0.73923 0.892463,2.00636 0.153233,2.83022c-0.0242251,0.0269984 -0.0491787,0.0533343 -0.0748332,0.0789783Zm-17.6311,13.896l1.74829e-07,9.87123e-08c1.00267,0.56613 1.35656,1.8379 0.79043,2.84057c-0.0942659,0.166954 -0.21111,0.320108 -0.34723,0.45513l-3.6928,3.6684l2.2751e-08,-2.25368e-08c-0.943884,0.934995 -2.46482,0.934995 -3.4087,4.50735e-08l-3.6928,-3.6684l-6.02819e-08,-5.98007e-08c-0.8175,-0.810974 -0.82279,-2.13111 -0.0118161,-2.94861c0.134967,-0.136053 0.288047,-0.252849 0.454916,-0.347088l2.96297e-07,-1.66902e-07c3.07549,-1.7324 6.83251,-1.7324 9.908,3.33805e-07Zm-14.8508,-3.792l3.86385e-08,-3.1954e-08c-0.835403,0.690877 -2.05882,0.634623 -2.8273,-0.13l-2.3847,-2.4084c-1.1739,-1.1855 -1.14,-2.6381 -0.1975,-3.4266l9.62086e-07,-8.05987e-07c8.84671,-7.41133 21.7347,-7.41133 30.5814,1.61198e-06l-5.08261e-08,-4.40698e-08c0.88879,0.770643 0.984568,2.11588 0.213926,3.00467c-0.0332999,0.0384052 -0.0679639,0.075606 -0.103925,0.111531l-2.6883,2.7151l2.63897e-08,-2.62774e-08c-0.768944,0.765671 -1.99317,0.823532 -2.8309,0.1338l-1.43462e-07,-1.17058e-07c-5.75168,-4.69307 -14.0109,-4.69307 -19.7626,2.34116e-07Z" fill="currentColor" fill-rule="evenodd"></path></svg>
{% endif %}
<svg class="w-7 h-7 text-white" version="1.1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><!--Generated by IJSVG (https://github.com/iconjar/IJSVG)--><path d="M54.5946,27.4366l5.66603e-08,-5.66066e-08c-0.745305,0.744598 -1.9414,0.780481 -2.73,0.0819001l1.11948e-07,9.86842e-08c-11.3381,-9.99478 -28.3408,-9.99478 -39.6789,-1.97368e-07l4.1375e-08,-3.6659e-08c-0.788564,0.698682 -1.98474,0.662797 -2.73,-0.0818999l-2.831,-2.8295l4.78383e-08,4.78239e-08c-0.782846,-0.782609 -0.783038,-2.05166 -0.000429116,-2.83451c0.0255969,-0.0256047 0.0518829,-0.0505111 0.078829,-0.0746918l-1.08875e-06,9.72979e-07c14.4215,-12.888 36.2226,-12.888 50.6441,-1.94596e-06l-4.18137e-09,-3.75185e-09c0.823858,0.73923 0.892463,2.00636 0.153233,2.83022c-0.0242251,0.0269984 -0.0491787,0.0533343 -0.0748332,0.0789783Zm-17.6311,13.896l1.74829e-07,9.87123e-08c1.00267,0.56613 1.35656,1.8379 0.79043,2.84057c-0.0942659,0.166954 -0.21111,0.320108 -0.34723,0.45513l-3.6928,3.6684l2.2751e-08,-2.25368e-08c-0.943884,0.934995 -2.46482,0.934995 -3.4087,4.50735e-08l-3.6928,-3.6684l-6.02819e-08,-5.98007e-08c-0.8175,-0.810974 -0.82279,-2.13111 -0.0118161,-2.94861c0.134967,-0.136053 0.288047,-0.252849 0.454916,-0.347088l2.96297e-07,-1.66902e-07c3.07549,-1.7324 6.83251,-1.7324 9.908,3.33805e-07Zm-14.8508,-3.792l3.86385e-08,-3.1954e-08c-0.835403,0.690877 -2.05882,0.634623 -2.8273,-0.13l-2.3847,-2.4084c-1.1739,-1.1855 -1.14,-2.6381 -0.1975,-3.4266l9.62086e-07,-8.05987e-07c8.84671,-7.41133 21.7347,-7.41133 30.5814,1.61198e-06l-5.08261e-08,-4.40698e-08c0.88879,0.770643 0.984568,2.11588 0.213926,3.00467c-0.0332999,0.0384052 -0.0679639,0.075606 -0.103925,0.111531l-2.6883,2.7151l2.63897e-08,-2.62774e-08c-0.768944,0.765671 -1.99317,0.823532 -2.8309,0.1338l-1.43462e-07,-1.17058e-07c-5.75168,-4.69307 -14.0109,-4.69307 -19.7626,2.34116e-07Z" fill="currentColor" fill-rule="evenodd"></path></svg>
<div class="ml-2 text-lg min-w-0 truncate">{{ _("Bitcoin Network") }}</div>
<div class="hidden" id="node-info-popup">{% include node.node_info_template() %}</div>
</div>
@ -16,3 +19,36 @@
</a>
</div>
{% endif%}
<script>
document.addEventListener("DOMContentLoaded", () => {
{% if node.is_running %}
checkSyncStatus()
{% endif %}
})
let count = 0
async function checkSyncStatus() {
let url = `{{ url_for('nodes_endpoint.check_sync_status') }}`;
const response = await send_request(url, 'GET', "{{ csrf_token() }}");
if (response.fullySynced === true) {
console.log('Spectrum node is fully synced.')
document.getElementById('unfinished-ibd-indicator').classList.remove('animate-spin')
document.getElementById("unfinished-ibd-indicator").classList.add('hidden')
document.getElementById('connected-icon').classList.remove('hidden')
}
else {
console.log('Spectrum node is not fully synced yet.')
document.getElementById('unfinished-ibd-indicator').classList.remove('hidden')
document.getElementById('unfinished-ibd-indicator').classList.add('animate-spin')
document.getElementById('connected-icon').classList.add('hidden')
console.log(count)
// Show message only once
if (count === 0 ) {
showNotification(`{{ _("Spectrum is syncing. Check the progress by clicking on the connection.") }}`)
}
count++
setTimeout(checkSyncStatus, 30000);
}
}
</script>