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

Add fiat value toggle functionality: Introduce a button to show/hide fiat values in the dashboard, enhancing user control over displayed financial data.

Browse source
This commit is contained in:
padreug 2025-06-22 16:13:48 +02:00
parent fdf41c016a
commit 3d0fc9c910
2 changed files with 20 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

3
static/js/index.js
View file

@ -7,7 +7,8 @@ window.app = Vue.createApp({
dashboardData: null, dashboardData: null,
transactions: [], transactions: [],
loading: true, loading: true,
error: null error: null,
showFiatValues: false // Hide fiat values by default
} }
}, },

21
templates/satmachineclient/index.html
View file

@ -57,8 +57,23 @@
</div> </div>
</div> </div>
</div> </div>
<!-- Current Value Row --> <!-- Fiat Value Toggle Button -->
<div class="row q-col-gutter-md q-mt-sm"> <div class="row q-mt-sm">
<div class="col-12 text-center">
<q-btn
flat
dense
:color="showFiatValues ? 'orange' : 'grey'"
:icon="showFiatValues ? 'visibility_off' : 'attach_money'"
@click="showFiatValues = !showFiatValues"
>
${showFiatValues ? 'Hide' : 'Show'} Fiat Values
</q-btn>
</div>
</div>
<!-- Current Value Row (Conditional) -->
<div v-if="showFiatValues" class="row q-col-gutter-md q-mt-sm">
<div class="col-12 col-md-6"> <div class="col-12 col-md-6">
<q-card flat class="bg-orange-1"> <q-card flat class="bg-orange-1">
<q-card-section class="text-center"> <q-card-section class="text-center">
@ -76,7 +91,7 @@
${formatCurrencyWithCode((dashboardData.current_sats_fiat_value + dashboardData.current_fiat_balance) - dashboardData.total_fiat_invested, dashboardData.currency)} ${formatCurrencyWithCode((dashboardData.current_sats_fiat_value + dashboardData.current_fiat_balance) - dashboardData.total_fiat_invested, dashboardData.currency)}
</div> </div>
<div class="text-caption" :class="(dashboardData.current_sats_fiat_value + dashboardData.current_fiat_balance) > dashboardData.total_fiat_invested ? 'text-green-7' : 'text-red-7'"> <div class="text-caption" :class="(dashboardData.current_sats_fiat_value + dashboardData.current_fiat_balance) > dashboardData.total_fiat_invested ? 'text-green-7' : 'text-red-7'">
${(dashboardData.current_sats_fiat_value + dashboardData.current_fiat_balance) > dashboardData.total_fiat_invested ? 'Unrealized Gain' : 'Unrealized Loss'} ${(dashboardData.current_sats_fiat_value + dashboardData.current_fiat_balance) > dashboardData.total_fiat_invested ? 'Bitcoin Appreciation vs Fiat' : 'Fiat Depreciation vs Bitcoin'}
</div> </div>
<div class="text-caption text-grey">vs total invested</div> <div class="text-caption text-grey">vs total invested</div>
</q-card-section> </q-card-section>