mirrors/btcpayserver
1
0
Fork 0
mirror of https://github.com/btcpayserver/btcpayserver.git synced 2025-02-23 14:40:36 +01:00
Code Issues Projects Releases Packages Wiki Activity

start ux for perks

Browse source
This commit is contained in:
Kukks 2018-12-29 20:21:23 +01:00
parent 6eb36abe2e
commit 8bd7ea5bbc
2 changed files with 61 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
BTCPayServer/Views/AppsPublic/Crowdfund/VueCrowdfund.cshtml
View file

@ -106,7 +106,12 @@
<div class="card-text" v-html="srvModel.description"></div> <div class="card-text" v-html="srvModel.description"></div>
</div> </div>
<div class="col-md-4 col-sm-12"> <div class="col-md-4 col-sm-12">
<contribute :target-currency="srvModel.targetCurrency" :active="srvModel.info.active"></contribute> <contribute :target-currency="srvModel.targetCurrency"
:active="srvModel.info.active"
:in-modal="false"
:perks="srvModel.perks">
</contribute>
</div> </div>
</div> </div>
@ -116,7 +121,13 @@
</div> </div>
<b-modal title="Contribute" v-model="contributeModalOpen" v-on:ok="submitModalContribute" :hide-header-close="true"> <b-modal title="Contribute" v-model="contributeModalOpen" v-on:ok="submitModalContribute" :hide-header-close="true">
<contribute :target-currency="srvModel.targetCurrency" :active="srvModel.info.active" ref="modalContribute" :in-modal="true"></contribute> <contribute v-if="contributeModalOpen"
:target-currency="srvModel.targetCurrency"
:active="srvModel.info.active"
ref="modalContribute"
:perks="srvModel.perks"
:in-modal="true">
</contribute>
<template slot="modal-ok"> <template slot="modal-ok">
Submit Submit
</template> </template>
@ -126,3 +137,32 @@
</b-modal> </b-modal>
</div> </div>
<script type="text/x-template" id="perks-template">
{{perks}}
</script>
<script type="text/x-template" id="contribute-template">
<div>
<h3 v-if="!inModal">Contribute</h3>
<form v-on:submit='onContributeFormSubmit'>
<perks-display >
</perks-display>
<div class='form-group'>
<label >Email</label>
<input type='email' class='form-control' v-model='email' placeholder='Email'/>
</div>
<div class='form-group'>
<label >Contribution Amount</label>
<div class='input-group mb-3'>
<input type='number' step='any' class='form-control' v-model='amount' placeholder='Contribution Amount'/>
<div class='input-group-append'>
<span class='input-group-text'>{{targetCurrency}}</span>
</div>
</div>
</div>
<button v-if="!inModal" type='submit' class='btn btn-primary' :disabled='!active'>Contribute</button>
</form>
</div>
</script>

41
BTCPayServer/wwwroot/crowdfund/components/contribute.js
View file

@ -1,5 +1,6 @@
Vue.component('contribute', { Vue.component('contribute', {
props: ["targetCurrency", "active", "inModal"], props: ["targetCurrency", "active", "perks", "inModal"],
template: "#contribute-template",
data: function () { data: function () {
return { return {
email: "", email: "",
@ -17,27 +18,19 @@ Vue.component('contribute', {
} }
eventAggregator.$emit("contribute", {email: this.email, amount: this.amount, choiceKey: this.choiceKey}); eventAggregator.$emit("contribute", {email: this.email, amount: this.amount, choiceKey: this.choiceKey});
} }
}, }
template: "<div>" +
"<h3 v-if='!inModal'>Contribute</h3>" +
"" +
" <form v-on:submit=\"onContributeFormSubmit\">" +
"" +
" <div class=\"form-group\">" +
" <label ></label>" +
" <input type=\"email\" class=\"form-control\" v-model=\"email\" placeholder='Email'/>" +
" </div>" +
" <div class=\"form-group\">" +
" <label ></label>" +
" <div class=\"input-group mb-3\">" +
" <input type=\"number\" step=\"any\" class=\"form-control\" v-model=\"amount\" placeholder='Contribution Amount'/>" +
" <div class=\"input-group-append\">" +
" <span class=\"input-group-text\">{{targetCurrency}}</span>" +
" </div>" +
" </div>" +
" </div>" +
" <button type=\"submit\" class=\"btn btn-primary\" :disabled='!active' v-if='!inModal'>Contribute</button>" +
" </form>" +
"</div>"
}); });
Vue.component('perks-display', {
props: ["perks"],
template: "#perks-template",
data: function () {
return {
}
},
methods: {
}
});