lnbits-exts/satmachineclient
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Refactor milestone tracking: Introduce a new method to determine the next milestone based on total sats accumulated, and update progress calculations accordingly. Adjust frontend to display progress towards the next milestone and enhance user feedback with additional milestone indicators.

Browse source
This commit is contained in:
padreug 2025-06-22 20:36:46 +02:00
parent 08e5cc20e3
commit 7e030c5d0a
2 changed files with 32 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

23
static/js/index.js
View file

@ -164,13 +164,26 @@ window.app = Vue.createApp({
}
},
getSatsMilestoneProgress() {
getNextMilestone() {
if (!this.dashboardData) return { target: 100000, name: '100k sats' }
const sats = this.dashboardData.total_sats_accumulated
if (sats < 10000) return { target: 10000, name: '10k sats' }
if (sats < 100000) return { target: 100000, name: '100k sats' }
if (sats < 500000) return { target: 500000, name: '500k sats' }
if (sats < 1000000) return { target: 1000000, name: '1M sats' }
if (sats < 2100000) return { target: 2100000, name: '2.1M sats' }
return { target: 21000000, name: '21M sats' }
},
getMilestoneProgress() {
if (!this.dashboardData) return 0
const sats = this.dashboardData.total_sats_accumulated
if (sats >= 1000000) return 100
if (sats >= 100000) return 75
if (sats >= 10000) return 50
return Math.min((sats / 10000) * 50, 50)
const milestone = this.getNextMilestone()
// Show total progress toward the next milestone (from 0)
const progress = (sats / milestone.target) * 100
return Math.min(Math.max(progress, 0), 100)
}
},

17
templates/satmachineclient/index.html
View file

@ -42,7 +42,7 @@
</div>
<div class="col-12 col-md-4 q-mt-md">
<q-circular-progress
:value="Math.min((dashboardData.total_sats_accumulated / 100000) * 100, 100)"
:value="getMilestoneProgress()"
size="80px"
:thickness="0.2"
color="orange"
@ -50,10 +50,10 @@
class="q-ma-md"
>
<div class="text-caption text-orange-8">
${Math.min(Math.round((dashboardData.total_sats_accumulated / 100000) * 100), 100)}%
${Math.round(getMilestoneProgress())}%
</div>
</q-circular-progress>
<div class="text-caption text-grey-6">to 100k sats</div>
<div class="text-caption text-grey-6">to ${getNextMilestone().name}</div>
</div>
</div>
</q-card-section>
@ -392,6 +392,17 @@
</q-item-section>
</q-item>
<q-item>
<q-item-section avatar>
<div v-if="dashboardData.total_sats_accumulated >= 500000" class="text-positive text-h6">✅</div>
<div v-else class="text-grey-5 text-h6">⭕</div>
</q-item-section>
<q-item-section>
<q-item-label class="text-body2">500,000 sats</q-item-label>
<q-item-label caption>Half a million! 🔥</q-item-label>
</q-item-section>
</q-item>
<q-item>
<q-item-section avatar>
<div v-if="dashboardData.total_sats_accumulated >= 1000000" class="text-positive text-h6">✅</div>