319 lines
9.6 KiB
HTML
319 lines
9.6 KiB
HTML
{% extends "public.html" %} {% block page %}
|
|
<div class="q-pa-sm theCard">
|
|
<q-card class="my-card">
|
|
<div class="column">
|
|
<center>
|
|
<div class="col theHeading">{{ charge.description }}</div>
|
|
</center>
|
|
<div class="col">
|
|
<div
|
|
class="col"
|
|
color="white"
|
|
style="background-color: grey; height: 30px; padding: 5px"
|
|
v-if="timetoComplete < 1"
|
|
>
|
|
<center>Time elapsed</center>
|
|
</div>
|
|
<div
|
|
class="col"
|
|
color="white"
|
|
style="background-color: grey; height: 30px; padding: 5px"
|
|
v-else-if="charge_paid == 'True'"
|
|
>
|
|
<center>Charge paid</center>
|
|
</div>
|
|
<div v-else>
|
|
<q-linear-progress size="30px" :value="newProgress" color="grey">
|
|
<q-item-section>
|
|
<q-item style="padding: 3px">
|
|
<q-spinner color="white" size="0.8em"></q-spinner
|
|
><span style="font-size: 15px; color: white"
|
|
><span class="q-pr-xl q-pl-md"> Awaiting payment...</span>
|
|
<span class="q-pl-xl" style="color: white">
|
|
{% raw %} {{ newTimeLeft }} {% endraw %}</span
|
|
></span
|
|
>
|
|
</q-item>
|
|
</q-item-section>
|
|
</q-linear-progress>
|
|
</div>
|
|
</div>
|
|
<div class="col" style="margin: 2px 15px; max-height: 100px">
|
|
<center>
|
|
<q-btn flat dense outline @click="copyText('{{ charge.id }}')"
|
|
>Charge ID: {{ charge.id }}</q-btn
|
|
>
|
|
</center>
|
|
<span
|
|
><small
|
|
>{% raw %} Total to pay: {{ charge_amount }}sats<br />
|
|
Amount paid: {{ charge_balance }}</small
|
|
><br />
|
|
Amount due: {{ charge_amount - charge_balance }}sats {% endraw %}
|
|
</span>
|
|
</div>
|
|
<q-separator></q-separator>
|
|
<div class="col">
|
|
<div class="row">
|
|
<div class="col">
|
|
<q-btn
|
|
flat
|
|
disable
|
|
v-if="'{{ charge.lnbitswallet }}' == 'None' || charge_time_elapsed == 'True'"
|
|
style="color: primary; width: 100%"
|
|
label="lightning⚡"
|
|
>
|
|
<q-tooltip>
|
|
bitcoin onchain payment method not available
|
|
</q-tooltip>
|
|
</q-btn>
|
|
<q-btn
|
|
flat
|
|
v-else
|
|
@click="payLN"
|
|
style="color: primary; width: 100%"
|
|
label="lightning⚡"
|
|
>
|
|
<q-tooltip> pay with lightning </q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
<div class="col">
|
|
<q-btn
|
|
flat
|
|
disable
|
|
v-if="'{{ charge.onchainwallet }}' == 'None' || charge_time_elapsed == 'True'"
|
|
style="color: primary; width: 100%"
|
|
label="onchain⛓️"
|
|
>
|
|
<q-tooltip>
|
|
bitcoin lightning payment method not available
|
|
</q-tooltip>
|
|
</q-btn>
|
|
<q-btn
|
|
flat
|
|
v-else
|
|
@click="payON"
|
|
style="color: primary; width: 100%"
|
|
label="onchain⛓️"
|
|
>
|
|
<q-tooltip> pay onchain </q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
</div>
|
|
<q-separator></q-separator>
|
|
</div>
|
|
</div>
|
|
<q-card class="q-pa-lg" v-if="lnbtc">
|
|
<q-card-section class="q-pa-none">
|
|
<div class="text-center q-pt-md">
|
|
<div v-if="timetoComplete < 1 && charge_paid == 'False'">
|
|
<q-icon
|
|
name="block"
|
|
style="color: #ccc; font-size: 21.4em"
|
|
></q-icon>
|
|
</div>
|
|
<div v-else-if="charge_paid == 'True'">
|
|
<q-icon
|
|
name="check"
|
|
style="color: green; font-size: 21.4em"
|
|
></q-icon>
|
|
<q-btn
|
|
outline
|
|
v-if="'{{ charge.webhook }}' != 'None'"
|
|
type="a"
|
|
href="{{ charge.completelink }}"
|
|
label="{{ charge.completelinktext }}"
|
|
></q-btn>
|
|
</div>
|
|
<div v-else>
|
|
<center>
|
|
<span class="text-subtitle2"
|
|
>Pay this <br />
|
|
lightning-network invoice</span
|
|
>
|
|
</center>
|
|
<a href="lightning://{{ charge.payment_request }}">
|
|
<q-responsive :ratio="1" class="q-mx-md">
|
|
<qrcode
|
|
:value="'{{ charge.payment_request }}'"
|
|
:options="{width: 800}"
|
|
class="rounded-borders"
|
|
></qrcode>
|
|
</q-responsive>
|
|
</a>
|
|
<div class="row q-mt-lg">
|
|
<q-btn
|
|
outline
|
|
color="grey"
|
|
@click="copyText('{{ charge.payment_request }}')"
|
|
>Copy invoice</q-btn
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
</q-card>
|
|
<q-card class="q-pa-lg" v-if="onbtc">
|
|
<q-card-section class="q-pa-none">
|
|
<div class="text-center q-pt-md">
|
|
<div v-if="timetoComplete < 1 && charge_paid == 'False'">
|
|
<q-icon
|
|
name="block"
|
|
style="color: #ccc; font-size: 21.4em"
|
|
></q-icon>
|
|
</div>
|
|
<div v-else-if="charge_paid == 'True'">
|
|
<q-icon
|
|
name="check"
|
|
style="color: green; font-size: 21.4em"
|
|
></q-icon>
|
|
<q-btn
|
|
outline
|
|
v-if="'{{ charge.webhook }}' != 'None'"
|
|
type="a"
|
|
href="{{ charge.completelink }}"
|
|
label="{{ charge.completelinktext }}"
|
|
></q-btn>
|
|
</div>
|
|
<div v-else>
|
|
<center>
|
|
<span class="text-subtitle2"
|
|
>Send {{ charge.amount }}sats<br />
|
|
to this onchain address</span
|
|
>
|
|
</center>
|
|
<a href="bitcoin://{{ charge.onchainaddress }}">
|
|
<q-responsive :ratio="1" class="q-mx-md">
|
|
<qrcode
|
|
:value="'{{ charge.onchainaddress }}'"
|
|
:options="{width: 800}"
|
|
class="rounded-borders"
|
|
></qrcode>
|
|
</q-responsive>
|
|
</a>
|
|
<div class="row q-mt-lg">
|
|
<q-btn
|
|
outline
|
|
color="grey"
|
|
@click="copyText('{{ charge.onchainaddress }}')"
|
|
>Copy address</q-btn
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
</q-card>
|
|
</q-card>
|
|
</div>
|
|
|
|
{% endblock %} {% block scripts %}
|
|
<script src="{{ url_for('static', filename='vendor/vue-qrcode@1.0.2/vue-qrcode.min.js') }}"></script>
|
|
<style>
|
|
.theCard {
|
|
width: 360px;
|
|
margin: 10px auto;
|
|
}
|
|
.theHeading {
|
|
margin: 15px;
|
|
font-size: 25px;
|
|
}
|
|
</style>
|
|
<script>
|
|
Vue.component(VueQrcode.name, VueQrcode)
|
|
|
|
new Vue({
|
|
el: '#vue',
|
|
mixins: [windowMixin],
|
|
data() {
|
|
return {
|
|
newProgress: 0.4,
|
|
counter: 1,
|
|
newTimeLeft: '',
|
|
timetoComplete: 100,
|
|
lnbtc: true,
|
|
onbtc: false,
|
|
charge_time_elapsed: '{{charge.time_elapsed}}',
|
|
charge_amount: '{{charge.amount}}',
|
|
charge_balance: '{{charge.balance}}',
|
|
charge_paid: '{{charge.paid}}'
|
|
}
|
|
},
|
|
methods: {
|
|
checkBalance: function () {
|
|
var self = this
|
|
LNbits.api
|
|
.request(
|
|
'GET',
|
|
'/satspay/api/v1/charges/balance/{{ charge.id }}',
|
|
'filla'
|
|
)
|
|
.then(function (response) {
|
|
self.charge_time_elapsed = response.data.time_elapsed
|
|
self.charge_amount = response.data.amount
|
|
self.charge_balance = response.data.balance
|
|
if (self.charge_balance >= self.charge_amount) {
|
|
self.charge_paid = 'True'
|
|
}
|
|
})
|
|
.catch(function (error) {
|
|
LNbits.utils.notifyApiError(error)
|
|
})
|
|
},
|
|
payLN: function () {
|
|
this.lnbtc = true
|
|
this.onbtc = false
|
|
},
|
|
payON: function () {
|
|
this.lnbtc = false
|
|
this.onbtc = true
|
|
},
|
|
getTheTime: function () {
|
|
var timeToComplete =
|
|
parseInt('{{ charge.time }}') * 60 -
|
|
(Date.now() / 1000 - parseInt('{{ charge.timestamp }}'))
|
|
this.timetoComplete = timeToComplete
|
|
var timeLeft = Quasar.utils.date.formatDate(
|
|
new Date((timeToComplete - 3600) * 1000),
|
|
'HH:mm:ss'
|
|
)
|
|
this.newTimeLeft = timeLeft
|
|
},
|
|
getThePercentage: function () {
|
|
var timeToComplete =
|
|
parseInt('{{ charge.time }}') * 60 -
|
|
(Date.now() / 1000 - parseInt('{{ charge.timestamp }}'))
|
|
this.newProgress =
|
|
1 - timeToComplete / (parseInt('{{ charge.time }}') * 60)
|
|
},
|
|
|
|
timerCount: function () {
|
|
self = this
|
|
var refreshIntervalId = setInterval(function () {
|
|
if (self.charge_paid == 'True' || self.timetoComplete < 1) {
|
|
clearInterval(refreshIntervalId)
|
|
}
|
|
self.getTheTime()
|
|
self.getThePercentage()
|
|
self.counter++
|
|
if (self.counter % 10 === 0) {
|
|
self.checkBalance()
|
|
}
|
|
}, 1000)
|
|
}
|
|
},
|
|
created: function () {
|
|
if ('{{ charge.lnbitswallet }}' == 'None') {
|
|
this.lnbtc = false
|
|
this.onbtc = true
|
|
}
|
|
this.getTheTime()
|
|
this.getThePercentage()
|
|
var timerCount = this.timerCount
|
|
if ('{{ charge.paid }}' == 'False') {
|
|
timerCount()
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
{% endblock %}
|