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 if (!this.dashboardData) return 0
const sats = this.dashboardData.total_sats_accumulated const sats = this.dashboardData.total_sats_accumulated
if (sats >= 1000000) return 100 const milestone = this.getNextMilestone()
if (sats >= 100000) return 75
if (sats >= 10000) return 50 // Show total progress toward the next milestone (from 0)
return Math.min((sats / 10000) * 50, 50) 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>
<div class="col-12 col-md-4 q-mt-md"> <div class="col-12 col-md-4 q-mt-md">
<q-circular-progress <q-circular-progress
:value="Math.min((dashboardData.total_sats_accumulated / 100000) * 100, 100)" :value="getMilestoneProgress()"
size="80px" size="80px"
:thickness="0.2" :thickness="0.2"
color="orange" color="orange"
@ -50,10 +50,10 @@
class="q-ma-md" class="q-ma-md"
> >
<div class="text-caption text-orange-8"> <div class="text-caption text-orange-8">
${Math.min(Math.round((dashboardData.total_sats_accumulated / 100000) * 100), 100)}% ${Math.round(getMilestoneProgress())}%
</div> </div>
</q-circular-progress> </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>
</div> </div>
</q-card-section> </q-card-section>
@ -392,6 +392,17 @@
</q-item-section> </q-item-section>
</q-item> </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>
<q-item-section avatar> <q-item-section avatar>
<div v-if="dashboardData.total_sats_accumulated >= 1000000" class="text-positive text-h6">✅</div> <div v-if="dashboardData.total_sats_accumulated >= 1000000" class="text-positive text-h6">✅</div>