aljaz/btcpayserver
1
0
Fork 0
mirror of https://github.com/aljazceru/btcpayserver.git synced 2026-02-10 00:34:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix bug with fraction amount display in crowdfund app (#3098)

Browse Source 
* Update formatting

* Adjust formatting

* Adjust formatting

* Fix bug with BTC fraction amount display
This commit is contained in:
Umar Bolatov
2021-11-14 20:14:55 -08:00
committed by GitHub
parent 39a1834a75
commit 40dff0381b
2 changed files with 29 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
BTCPayServer/Views/AppsPublic/ViewCrowdfund.cshtml
View File

@@ -65,7 +65,7 @@
{
<span v-if="srvModel.targetAmount" class="mt-3" id="crowdfund-header-target">
<h3 class="d-inline-block">
<span class="badge bg-info px-3" v-text="`${new Intl.NumberFormat().format(srvModel.targetAmount)} ${targetCurrency}`">@Math.Round(Model.TargetAmount.GetValueOrDefault(0)) @Model.TargetCurrency</span>
<span class="badge bg-info px-3" v-text="`${targetAmount} ${targetCurrency}`">@Math.Round(Model.TargetAmount.GetValueOrDefault(0)) @Model.TargetCurrency</span>
</h3>
@if (Model.ResetEveryAmount > 0 && !Model.NeverReset)
{
@@ -123,7 +123,7 @@
<div class="card-body">
<div class="row py-2 text-center crowdfund-stats">
<div class="col-sm border-end p-3 text-center" id="crowdfund-body-raised-amount">
<h3 v-text="`${new Intl.NumberFormat().format(raisedAmount)} ${targetCurrency}`">@Math.Round(Model.Info.CurrentAmount + Model.Info.CurrentPendingAmount) @Model.TargetCurrency</h3>
<h3 v-text="`${raisedAmount} ${targetCurrency}`">@Math.Round(Model.Info.CurrentAmount + Model.Info.CurrentPendingAmount, Model.CurrencyData.Divisibility) @Model.TargetCurrency</h3>
<h5 class="text-muted fst-italic mb-0">Raised</h5>
<b-tooltip target="crowdfund-body-raised-amount" v-if="paymentStats && paymentStats.length > 0" class="only-for-js">
<ul class="p-0 text-uppercase">
@@ -287,8 +287,8 @@
<template id="perks-template">
<div class="perks-container">
<perk v-if="!perks || perks.length ===0"
:perk="{title: 'Donate Custom Amount', price: { type: 0, value: null}}"
<perk v-if="!perks || perks.length === 0"
:perk="{title: 'Donate Custom Amount', price: { type: 0, value: null}}"
:target-currency="targetCurrency"
:active="active"
:loading="loading"
@@ -324,10 +324,10 @@
<img v-if="perk.image && perk.image != 'null'" class="card-img-top" :src="perk.image" />
<div class="card-body">
<div class="card-title d-flex justify-content-between">
<span class="h5">{{perk.title? perk.title : perk.id}}</span>
<span class="h5">{{perk.title ? perk.title : perk.id}}</span>
<span class="text-muted">
<template v-if="perk.price && perk.price.value">
{{new Intl.NumberFormat().format(perk.price.value.noExponents())}}
{{formatAmount(perk.price.value.noExponents(), srvModel.currencyData.divisibility)}}
{{targetCurrency}}
<template v-if="perk.price.type == 1">or more</template>
</template>

28
BTCPayServer/wwwroot/crowdfund/app.js
View File

@@ -48,8 +48,6 @@ document.addEventListener("DOMContentLoaded",function (ev) {
this.amount = this.perk.price.type === 0? null : (amount || 0).noExponents();
this.expanded = false;
}
},
mounted: function () {
this.setAmount(this.perk.price.value);
@@ -63,7 +61,6 @@ document.addEventListener("DOMContentLoaded",function (ev) {
}
}
}
});
app = new Vue({
@@ -82,14 +79,17 @@ document.addEventListener("DOMContentLoaded",function (ev) {
active: true,
animation: true,
sound: true,
lastUpdated:"",
lastUpdated: "",
loading: false,
timeoutState: 0
}
},
computed: {
raisedAmount: function(){
return parseFloat(this.srvModel.info.currentAmount + this.srvModel.info.currentPendingAmount ).toFixed(this.srvModel.currencyData.divisibility) ;
return this.formatAmount(this.srvModel.info.currentAmount + this.srvModel.info.currentPendingAmount);
},
targetAmount: function(){
return this.formatAmount(this.srvModel.targetAmount);
},
percentageRaisedAmount: function(){
return parseFloat(this.srvModel.info.progressPercentage + this.srvModel.info.pendingProgressPercentage ).toFixed(2);
@@ -203,6 +203,9 @@ document.addEventListener("DOMContentLoaded",function (ev) {
if(this.timeoutState){
clearTimeout(this.timeoutState);
}
},
formatAmount: function(amount) {
return formatAmount(amount, this.srvModel.currencyData.divisibility)
}
},
mounted: function () {
@@ -315,3 +318,18 @@ document.addEventListener("DOMContentLoaded",function (ev) {
});
});
/**
* Formats input string as a number according to browser locale
* with correctly displayed fraction amount (e.g. 0.012345 for BTC instead of just 0.0123)
*
* @param {number | string} amount Amount to format
* @param {number} divisibility Currency divisibility (e.g., 8 for BTC)
* @returns String formatted as a number according to current browser locale and correct fraction amount
*/
function formatAmount(amount, divisibility) {
var parsedAmount = parseFloat(amount).toFixed(divisibility);
var [wholeAmount, fractionAmount] = parsedAmount.split('.');
var formattedWholeAmount = new Intl.NumberFormat().format(parseInt(wholeAmount, 10));
return formattedWholeAmount + (fractionAmount ? '.' + fractionAmount : '');
}