mirrors/btcpayserver
1
0
Fork 0
mirror of https://github.com/btcpayserver/btcpayserver.git synced 2025-01-19 05:33:31 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add loading indicator for "Pay" button in POS terminal app (#3342)

Browse Source 
* Add loading indicator for "Pay" button in POS terminal app

close #3336

* move feature over to Vue

* replace click handler with form submit handler
This commit is contained in:
Umar Bolatov 2022-01-26 17:58:25 -08:00 committed by GitHub
parent aa762821ce
commit 69202ed752
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 23 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
BTCPayServer/Views/UIAppsPublic/PointOfSale/VueLight.cshtml
View File

@ -1,6 +1,6 @@
@model BTCPayServer.Models.AppViewModels.ViewPointOfSaleViewModel
<div id="app" class="l-pos-wrapper" v-cloak>
<form method="post" asp-controller="UIAppsPublic" asp-action="ViewPointOfSale" asp-route-appId="@Model.AppId" asp-antiforgery="false" data-buy>
<form method="post" asp-controller="UIAppsPublic" asp-action="ViewPointOfSale" asp-route-appId="@Model.AppId" asp-antiforgery="false" data-buy v-on:submit="handleFormSubmit">
<div class="l-pos-header bg-primary py-3 px-3">
@if (!string.IsNullOrEmpty(Model.CustomLogoLink))
{
@ -25,7 +25,13 @@
</div>
<div class="l-pos-controls mt-2">
<div class="btn btn-outline-secondary btn-lg mb-0" v-on:click="clearTotal">Clear</div><button class="btn btn-primary btn-lg mb-0" type="submit"><b>Pay</b></button>
<div class="btn btn-outline-secondary btn-lg mb-0" v-on:click="clearTotal">Clear</div>
<button class="btn btn-primary btn-lg mb-0" id="pay-button" type="submit" v-bind:disabled="payButtonLoading">
<div v-if="payButtonLoading" class="spinner-border spinner-border-sm" id="pay-button-spinner" role="status">
<span class="sr-only">Loading...</span>
</div>
<b>Pay</b>
</button>
</div>
<input class="form-control" type="hidden" name="amount" v-model="payTotalNumeric">
@ -78,4 +84,3 @@
</div>
</div>

16
BTCPayServer/wwwroot/light-pos/app.js
View File

@ -15,9 +15,17 @@ document.addEventListener("DOMContentLoaded",function (ev) {
tipTotalNumeric: 0,
fontSize: displayFontSize,
defaultFontSize: displayFontSize,
keys: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '.', '0', 'C']
keys: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '.', '0', 'C'],
payButtonLoading: false,
}
},
created: function() {
/** We need to unset state in case user clicks the browser back button */
window.addEventListener('pagehide', this.unsetPayButtonLoading);
},
destroyed: function() {
window.removeEventListener('pagehide', this.unsetPayButtonLoading);
},
computed: {
Currency: function(){
return this.srvModel.Currency.toUpperCase();
@ -57,6 +65,12 @@ document.addEventListener("DOMContentLoaded",function (ev) {
this.tipTotal = null;
this.tipTotalNumeric = 0;
},
handleFormSubmit: function() {
this.payButtonLoading = true;
},
unsetPayButtonLoading: function() {
this.payButtonLoading = false;
},
buttonClicked: function(key) {
var payTotal = this.payTotal;