lnbits-legend/lnbits/extensions/streamalerts/templates/streamalerts/display.html
2022-02-23 10:13:52 +00:00

97 lines
2.6 KiB
HTML

{% extends "public.html" %} {% block page %}
<div class="row q-col-gutter-md justify-center">
<div class="col-12 col-md-7 col-lg-6 q-gutter-y-md">
<q-card class="q-pa-lg">
<q-card-section class="q-pa-none">
<h5 class="q-my-none">Donate Bitcoin to {{ twitchuser }}</h5>
<br />
<q-form @submit="Invoice()" class="q-gutter-md">
<q-input
filled
dense
v-model.trim="donationDialog.data.name"
maxlength="25"
type="name"
label="Your Name (leave blank for Anonymous donation)"
></q-input>
<q-input
filled
dense
v-model.number="donationDialog.data.sats"
type="number"
min="1"
max="2100000000000000"
suffix="sats"
:rules="[val => val > 0 || 'Choose a positive number of sats!']"
label="Amount of sats"
></q-input>
<q-input
filled
dense
v-model.trim="donationDialog.data.message"
maxlength="255"
type="textarea"
label="Donation Message (you can leave this blank too)"
></q-input>
<div class="row q-mt-lg">
<q-btn
unelevated
color="primary"
:disable="donationDialog.data.sats < 1 || !donationDialog.data.sats"
type="submit"
>Submit</q-btn
>
</div>
</q-form>
</q-card-section>
</q-card>
</div>
</div>
{% endblock %} {% block scripts %}
<script>
Vue.component(VueQrcode.name, VueQrcode)
new Vue({
el: '#vue',
mixins: [windowMixin],
data: function () {
return {
paymentReq: null,
redirectUrl: null,
donationDialog: {
show: false,
data: {
name: null,
sats: '',
message: ''
}
},
receive: {
show: false,
status: 'pending',
paymentReq: null
}
}
},
methods: {
Invoice: function () {
var self = this
axios
.post('/streamalerts/api/v1/donations', {
service: {{ service }},
name: self.donationDialog.data.name,
sats: self.donationDialog.data.sats,
message: self.donationDialog.data.message
})
.then(function (response) {
self.redirect_url = response.data.redirect_url
console.log(self.redirect_url)
window.location.href = self.redirect_url
})
}
}
})
</script>
{% endblock %}