mirror of
https://github.com/btcpayserver/btcpayserver.git
synced 2024-11-19 18:11:36 +01:00
add loader and fix perk badge zindex
This commit is contained in:
Kukks
parent
57610881de
commit
419ab8e0b1
@ -1,3 +1,4 @@
|
||||
using System;
|
||||
using System.Threading.Tasks;
|
||||
using BTCPayServer.Controllers;
|
||||
using BTCPayServer.Models.AppViewModels;
|
||||
@ -35,18 +36,28 @@ namespace BTCPayServer.Hubs
|
||||
{
|
||||
model.RedirectToCheckout = false;
|
||||
_AppsPublicController.ControllerContext.HttpContext = Context.GetHttpContext();
|
||||
var result = await _AppsPublicController.ContributeToCrowdfund(Context.Items["app"].ToString(), model);
|
||||
switch (result)
|
||||
try
|
||||
{
|
||||
case OkObjectResult okObjectResult:
|
||||
await Clients.Caller.SendCoreAsync(InvoiceCreated, new[] {okObjectResult.Value.ToString()});
|
||||
break;
|
||||
case ObjectResult objectResult:
|
||||
await Clients.Caller.SendCoreAsync(InvoiceError, new[] {objectResult.Value});
|
||||
break;
|
||||
default:
|
||||
await Clients.Caller.SendCoreAsync(InvoiceError, System.Array.Empty<object>());
|
||||
break;
|
||||
|
||||
var result =
|
||||
await _AppsPublicController.ContributeToCrowdfund(Context.Items["app"].ToString(), model);
|
||||
switch (result)
|
||||
{
|
||||
case OkObjectResult okObjectResult:
|
||||
await Clients.Caller.SendCoreAsync(InvoiceCreated, new[] {okObjectResult.Value.ToString()});
|
||||
break;
|
||||
case ObjectResult objectResult:
|
||||
await Clients.Caller.SendCoreAsync(InvoiceError, new[] {objectResult.Value});
|
||||
break;
|
||||
default:
|
||||
await Clients.Caller.SendCoreAsync(InvoiceError, System.Array.Empty<object>());
|
||||
break;
|
||||
}
|
||||
}
|
||||
catch (Exception)
|
||||
{
|
||||
await Clients.Caller.SendCoreAsync(InvoiceError, System.Array.Empty<object>());
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<img class="card-img-top" :src="srvModel.mainImageUrl" v-if="srvModel.mainImageUrl">
|
||||
<div class="d-flex justify-content-between px-2">
|
||||
<h1>
|
||||
{{srvModel.title}}
|
||||
{{srvModel.title}} {{loading}}
|
||||
<span class="h6 text-muted" v-if="!started && srvModel.startDate" v-b-tooltip :title="startDate">
|
||||
Starts {{startDateRelativeTime}}
|
||||
</span>
|
||||
@ -157,6 +157,7 @@
|
||||
<contribute :target-currency="srvModel.targetCurrency"
|
||||
:display-perks-ranking="srvModel.displayPerksRanking"
|
||||
:active="active"
|
||||
:loading="loading"
|
||||
:in-modal="false"
|
||||
:perks="perks">
|
||||
|
||||
@ -178,6 +179,7 @@
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-12">
|
||||
<contribute :target-currency="srvModel.targetCurrency"
|
||||
:loading="loading"
|
||||
:display-perks-ranking="srvModel.displayPerksRanking"
|
||||
:active="active"
|
||||
:in-modal="false"
|
||||
@ -207,11 +209,11 @@
|
||||
</div>
|
||||
</div>
|
||||
<b-modal title="Contribute" v-model="contributeModalOpen" size="lg" ok-only="true" ok-variant="secondary" ok-title="Close" ref="modalContribute">
|
||||
|
||||
<contribute v-if="contributeModalOpen"
|
||||
:target-currency="srvModel.targetCurrency"
|
||||
:active="active"
|
||||
:perks="srvModel.perks"
|
||||
:loading="loading"
|
||||
:in-modal="true">
|
||||
</contribute>
|
||||
</b-modal>
|
||||
@ -220,10 +222,19 @@
|
||||
|
||||
<script type="text/x-template" id="perks-template">
|
||||
<div>
|
||||
<perk v-if="!perks || perks.length ===0" :perk="{title: 'Donate Custom Amount', price: { value: null}, custom: true}" :target-currency="targetCurrency" :active="active"
|
||||
<perk v-if="!perks || perks.length ===0"
|
||||
:perk="{title: 'Donate Custom Amount', price: { value: null}, custom: true}"
|
||||
:target-currency="targetCurrency"
|
||||
:active="active"
|
||||
:loading="loading"
|
||||
:in-modal="inModal">
|
||||
</perk>
|
||||
<perk v-for="(perk, index) in perks" :perk="perk" :target-currency="targetCurrency" :active="active" :display-perks-ranking="displayPerksRanking" :index="index"
|
||||
<perk v-for="(perk, index) in perks" :perk="perk"
|
||||
:target-currency="targetCurrency"
|
||||
:active="active"
|
||||
:display-perks-ranking="displayPerksRanking"
|
||||
:index="index"
|
||||
:loading="loading"
|
||||
:in-modal="inModal">
|
||||
</perk>
|
||||
</div>
|
||||
@ -276,8 +287,12 @@
|
||||
<span class='input-group-text'>{{targetCurrency}}</span>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
:disabled="!active"
|
||||
v-bind:class="{ 'btn-disabled': loading}"
|
||||
:disabled="!active || loading"
|
||||
type="submit">
|
||||
<div v-if="loading" class="spinner-grow spinner-grow-sm" role="status">
|
||||
<span class="sr-only">Loading...</span>
|
||||
</div>
|
||||
Continue
|
||||
</button>
|
||||
</div>
|
||||
@ -297,6 +312,7 @@
|
||||
<h3 v-if="!inModal" class="mb-3">Contribute</h3>
|
||||
<perks
|
||||
:perks="perks"
|
||||
:loading="loading"
|
||||
:in-modal="inModal"
|
||||
:display-perks-ranking="displayPerksRanking"
|
||||
:target-currency="targetCurrency"
|
||||
|
||||
@ -18,17 +18,17 @@ addLoadEvent(function (ev) {
|
||||
Vue.use(Toasted);
|
||||
|
||||
Vue.component('contribute', {
|
||||
props: ["targetCurrency", "active", "perks", "inModal", "displayPerksRanking"],
|
||||
props: ["targetCurrency", "active", "perks", "inModal", "displayPerksRanking", "loading"],
|
||||
template: "#contribute-template"
|
||||
});
|
||||
|
||||
Vue.component('perks', {
|
||||
props: ["perks", "targetCurrency", "active", "inModal","displayPerksRanking"],
|
||||
props: ["perks", "targetCurrency", "active", "inModal","displayPerksRanking", "loading"],
|
||||
template: "#perks-template"
|
||||
});
|
||||
|
||||
Vue.component('perk', {
|
||||
props: ["perk", "targetCurrency", "active", "inModal", "displayPerksRanking", "index"],
|
||||
props: ["perk", "targetCurrency", "active", "inModal", "displayPerksRanking", "index", "loading"],
|
||||
template: "#perk-template",
|
||||
data: function () {
|
||||
return {
|
||||
@ -46,7 +46,7 @@ addLoadEvent(function (ev) {
|
||||
if (e) {
|
||||
e.preventDefault();
|
||||
}
|
||||
if(!this.active){
|
||||
if(!this.active || this.loading){
|
||||
return;
|
||||
}
|
||||
|
||||
@ -84,8 +84,9 @@ addLoadEvent(function (ev) {
|
||||
active: true,
|
||||
animation: true,
|
||||
sound: true,
|
||||
lastUpdated:""
|
||||
|
||||
lastUpdated:"",
|
||||
loading: false,
|
||||
timeoutState: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -194,6 +195,12 @@ addLoadEvent(function (ev) {
|
||||
submitModalContribute: function(e){
|
||||
debugger;
|
||||
this.$refs.modalContribute.onContributeFormSubmit(e);
|
||||
},
|
||||
setLoading: function(val){
|
||||
this.loading = val;
|
||||
if(this.timeoutState){
|
||||
clearTimeout(this.timeoutState);
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
@ -207,8 +214,19 @@ addLoadEvent(function (ev) {
|
||||
btcpay.showFrame();
|
||||
|
||||
self.contributeModalOpen = false;
|
||||
self.setLoading(false);
|
||||
});
|
||||
|
||||
eventAggregator.$on("contribute", function () {
|
||||
self.setLoading(true);
|
||||
|
||||
self.timeoutState = setTimeout(function(){
|
||||
self.setLoading(false);
|
||||
},5000);
|
||||
});
|
||||
eventAggregator.$on("invoice-error", function(error){
|
||||
|
||||
self.setLoading(false);
|
||||
var msg = "";
|
||||
if(typeof error === "string"){
|
||||
msg = error;
|
||||
|
||||
@ -52,4 +52,5 @@ canvas#fireworks {
|
||||
left: -15px;
|
||||
top: -15px;
|
||||
padding-top: 5px;
|
||||
z-index: 1
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user