Fixed prettier
This commit is contained in:
Ben Arc
parent
f84e965e13
commit
6a18766a82
2 changed files with 185 additions and 111 deletions
|
|
@ -2,67 +2,103 @@
|
||||||
<div class="q-pa-sm theCard">
|
<div class="q-pa-sm theCard">
|
||||||
<q-card class="my-card">
|
<q-card class="my-card">
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<center> <div class="col theHeading">{{ charge.description }}</div></center>
|
<center>
|
||||||
|
<div class="col theHeading">{{ charge.description }}</div>
|
||||||
|
</center>
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="col" color="white" style="background-color:grey; height: 30px; padding: 5px" v-if="charge_time_elapsed == 'True'">
|
<div
|
||||||
|
class="col"
|
||||||
|
color="white"
|
||||||
|
style="background-color: grey; height: 30px; padding: 5px"
|
||||||
|
v-if="charge_time_elapsed == 'True'"
|
||||||
|
>
|
||||||
<center>Time elapsed</center>
|
<center>Time elapsed</center>
|
||||||
</div>
|
</div>
|
||||||
<div class="col" color="white" style="background-color:grey; height: 30px; padding: 5px" v-else-if="charge_paid == 'True'">
|
<div
|
||||||
|
class="col"
|
||||||
|
color="white"
|
||||||
|
style="background-color: grey; height: 30px; padding: 5px"
|
||||||
|
v-else-if="charge_paid == 'True'"
|
||||||
|
>
|
||||||
<center>Charge paid</center>
|
<center>Charge paid</center>
|
||||||
</div>
|
</div>
|
||||||
<div v-else>
|
<div v-else>
|
||||||
<q-linear-progress size="30px" :value="newProgress" color="grey" >
|
<q-linear-progress size="30px" :value="newProgress" color="grey">
|
||||||
|
<q-item-section>
|
||||||
<q-item-section>
|
<q-item style="padding: 3px">
|
||||||
<q-item style="padding: 3px">
|
<q-spinner color="white" size="0.8em"></q-spinner
|
||||||
<q-spinner color="white" size="0.8em" ></q-spinner
|
><span style="font-size: 15px; color: white"
|
||||||
><span style="font-size: 15px; color:white"><span class="q-pr-xl q-pl-md"> Awaiting payment...</span>
|
><span class="q-pr-xl q-pl-md"> Awaiting payment...</span>
|
||||||
<span class="q-pl-xl" style="color:white"> {% raw %} {{ newTimeLeft }} {% endraw %}</span></span>
|
<span class="q-pl-xl" style="color: white">
|
||||||
</q-item-section>
|
{% raw %} {{ newTimeLeft }} {% endraw %}</span
|
||||||
</q-item>
|
></span
|
||||||
</q-linear-progress>
|
>
|
||||||
|
</q-item>
|
||||||
|
</q-item-section>
|
||||||
|
</q-linear-progress>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="col" style="margin: 2px 15px; max-height: 100px">
|
||||||
<div class="col" style="margin: 2px 15px; max-height:100px" >
|
|
||||||
<center>
|
<center>
|
||||||
<q-btn flat dense outline @click="copyText('{{ charge.id }}')"
|
<q-btn flat dense outline @click="copyText('{{ charge.id }}')"
|
||||||
>Charge ID: {{ charge.id }}</q-btn
|
>Charge ID: {{ charge.id }}</q-btn
|
||||||
>
|
>
|
||||||
</center>
|
</center>
|
||||||
<span><small>{% raw %}
|
<span
|
||||||
Total to pay: {{ charge_amount }}sats<br/>
|
><small
|
||||||
Amount paid: {{ charge_balance }}</small><br/>
|
>{% raw %} Total to pay: {{ charge_amount }}sats<br />
|
||||||
Amount due: {{ charge_amount - charge_balance }}sats
|
Amount paid: {{ charge_balance }}</small
|
||||||
{% endraw %}
|
><br />
|
||||||
</span>
|
Amount due: {{ charge_amount - charge_balance }}sats {% endraw %}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<q-separator></q-separator>
|
<q-separator></q-separator>
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<q-btn flat disable v-if="'{{ charge.lnbitswallet }}' == 'None' || charge_time_elapsed == 'True'" style="color: primary; width: 100%" label="lightning⚡" >
|
<q-btn
|
||||||
<q-tooltip>
|
flat
|
||||||
bitcoin onchain payment method not available
|
disable
|
||||||
</q-tooltip>
|
v-if="'{{ charge.lnbitswallet }}' == 'None' || charge_time_elapsed == 'True'"
|
||||||
</q-btn>
|
style="color: primary; width: 100%"
|
||||||
<q-btn flat v-else @click="payLN" style="color: primary; width: 100%" label="lightning⚡" >
|
label="lightning⚡"
|
||||||
<q-tooltip>
|
>
|
||||||
pay with lightning
|
<q-tooltip>
|
||||||
</q-tooltip>
|
bitcoin onchain payment method not available
|
||||||
</q-btn>
|
</q-tooltip>
|
||||||
</div>
|
</q-btn>
|
||||||
<div class="col">
|
<q-btn
|
||||||
<q-btn flat disable v-if="'{{ charge.onchainwallet }}' == 'None' || charge_time_elapsed == 'True'" style="color: primary; width: 100%" label="onchain⛓️" >
|
flat
|
||||||
<q-tooltip>
|
v-else
|
||||||
bitcoin lightning payment method not available
|
@click="payLN"
|
||||||
</q-tooltip>
|
style="color: primary; width: 100%"
|
||||||
</q-btn>
|
label="lightning⚡"
|
||||||
<q-btn flat v-else @click="payON" style="color: primary; width: 100%" label="onchain⛓️" >
|
>
|
||||||
<q-tooltip>
|
<q-tooltip> pay with lightning </q-tooltip>
|
||||||
pay onchain
|
</q-btn>
|
||||||
</q-tooltip>
|
</div>
|
||||||
</q-btn>
|
<div class="col">
|
||||||
</div>
|
<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>
|
</div>
|
||||||
<q-separator></q-separator>
|
<q-separator></q-separator>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -71,65 +107,100 @@
|
||||||
<q-card-section class="q-pa-none">
|
<q-card-section class="q-pa-none">
|
||||||
<div class="text-center q-pt-md">
|
<div class="text-center q-pt-md">
|
||||||
<div v-if="charge_time_elapsed == 'True' && charge_paid == 'False'">
|
<div v-if="charge_time_elapsed == 'True' && charge_paid == 'False'">
|
||||||
|
<q-icon
|
||||||
<q-icon name="block" style="color: #ccc; font-size: 21.4em;" ></q-icon>
|
name="block"
|
||||||
|
style="color: #ccc; font-size: 21.4em"
|
||||||
|
></q-icon>
|
||||||
</div>
|
</div>
|
||||||
<div v-else-if="charge_paid == 'True'">
|
<div v-else-if="charge_paid == 'True'">
|
||||||
<q-icon name="check" style="color:green; font-size: 21.4em;" ></q-icon>
|
<q-icon
|
||||||
<q-btn outline v-if="'{{ charge.webhook }}' != 'None'" type="a" href="{{ charge.completelink }}" label="{{ charge.completelinktext }}"></q-btn>
|
name="check"
|
||||||
</div>
|
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>
|
<div v-else>
|
||||||
<center>
|
<center>
|
||||||
<span class="text-subtitle2">Pay this <br/> lightning-network invoice</span>
|
<span class="text-subtitle2"
|
||||||
|
>Pay this <br />
|
||||||
|
lightning-network invoice</span
|
||||||
|
>
|
||||||
</center>
|
</center>
|
||||||
<a href="lightning://{{ charge.payment_request }}">
|
<a href="lightning://{{ charge.payment_request }}">
|
||||||
<q-responsive :ratio="1" class="q-mx-md">
|
<q-responsive :ratio="1" class="q-mx-md">
|
||||||
<qrcode
|
<qrcode
|
||||||
:value="'{{ charge.payment_request }}'"
|
:value="'{{ charge.payment_request }}'"
|
||||||
:options="{width: 800}"
|
:options="{width: 800}"
|
||||||
class="rounded-borders"
|
class="rounded-borders"
|
||||||
></qrcode>
|
></qrcode>
|
||||||
</q-responsive>
|
</q-responsive>
|
||||||
</a>
|
</a>
|
||||||
<div class="row q-mt-lg">
|
<div class="row q-mt-lg">
|
||||||
<q-btn outline color="grey" @click="copyText('{{ charge.payment_request }}')"
|
<q-btn
|
||||||
>Copy invoice</q-btn
|
outline
|
||||||
>
|
color="grey"
|
||||||
|
@click="copyText('{{ charge.payment_request }}')"
|
||||||
|
>Copy invoice</q-btn
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div></div>
|
|
||||||
</q-card-section>
|
</q-card-section>
|
||||||
</q-card>
|
</q-card>
|
||||||
<q-card class="q-pa-lg" v-if="onbtc">
|
<q-card class="q-pa-lg" v-if="onbtc">
|
||||||
<q-card-section class="q-pa-none">
|
<q-card-section class="q-pa-none">
|
||||||
|
|
||||||
<div class="text-center q-pt-md">
|
<div class="text-center q-pt-md">
|
||||||
<div v-if="charge_time_elapsed == 'True' && charge_paid == 'False'">
|
<div v-if="charge_time_elapsed == 'True' && charge_paid == 'False'">
|
||||||
|
<q-icon
|
||||||
<q-icon name="block" style="color: #ccc; font-size: 21.4em;" ></q-icon>
|
name="block"
|
||||||
|
style="color: #ccc; font-size: 21.4em"
|
||||||
|
></q-icon>
|
||||||
</div>
|
</div>
|
||||||
<div v-else-if="charge_paid == 'True'">
|
<div v-else-if="charge_paid == 'True'">
|
||||||
<q-icon name="check" style="color:green; font-size: 21.4em;" ></q-icon>
|
<q-icon
|
||||||
<q-btn outline v-if="'{{ charge.webhook }}' != 'None'" type="a" href="{{ charge.completelink }}" label="{{ charge.completelinktext }}"></q-btn>
|
name="check"
|
||||||
</div>
|
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>
|
<div v-else>
|
||||||
<center>
|
<center>
|
||||||
<span class="text-subtitle2">Send {{ charge.amount }}sats<br/> to this onchain address</span>
|
<span class="text-subtitle2"
|
||||||
|
>Send {{ charge.amount }}sats<br />
|
||||||
|
to this onchain address</span
|
||||||
|
>
|
||||||
</center>
|
</center>
|
||||||
<a href="bitcoin://{{ charge.onchainaddress }}">
|
<a href="bitcoin://{{ charge.onchainaddress }}">
|
||||||
<q-responsive :ratio="1" class="q-mx-md">
|
<q-responsive :ratio="1" class="q-mx-md">
|
||||||
<qrcode
|
<qrcode
|
||||||
:value="'{{ charge.onchainaddress }}'"
|
:value="'{{ charge.onchainaddress }}'"
|
||||||
:options="{width: 800}"
|
:options="{width: 800}"
|
||||||
class="rounded-borders"
|
class="rounded-borders"
|
||||||
></qrcode>
|
></qrcode>
|
||||||
</q-responsive>
|
</q-responsive>
|
||||||
</a>
|
</a>
|
||||||
<div class="row q-mt-lg">
|
<div class="row q-mt-lg">
|
||||||
<q-btn outline color="grey" @click="copyText('{{ charge.onchainaddress }}')"
|
<q-btn
|
||||||
>Copy address</q-btn
|
outline
|
||||||
>
|
color="grey"
|
||||||
|
@click="copyText('{{ charge.onchainaddress }}')"
|
||||||
|
>Copy address</q-btn
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div></div>
|
|
||||||
</q-card-section>
|
</q-card-section>
|
||||||
</q-card>
|
</q-card>
|
||||||
</q-card>
|
</q-card>
|
||||||
|
|
@ -173,67 +244,72 @@
|
||||||
.request(
|
.request(
|
||||||
'GET',
|
'GET',
|
||||||
'/satspay/api/v1/charges/balance/{{ charge.id }}',
|
'/satspay/api/v1/charges/balance/{{ charge.id }}',
|
||||||
"filla"
|
'filla'
|
||||||
)
|
)
|
||||||
.then(function (response) {
|
.then(function (response) {
|
||||||
console.log(response.data)
|
console.log(response.data)
|
||||||
self.charge_time_elapsed = response.data.time_elapsed
|
self.charge_time_elapsed = response.data.time_elapsed
|
||||||
self.charge_amount = response.data.amount
|
self.charge_amount = response.data.amount
|
||||||
self.charge_balance = response.data.balance
|
self.charge_balance = response.data.balance
|
||||||
if (self.charge_balance >= self.charge_amount ){
|
if (self.charge_balance >= self.charge_amount) {
|
||||||
self.charge_paid = "True"
|
self.charge_paid = 'True'
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch(function (error) {
|
.catch(function (error) {
|
||||||
LNbits.utils.notifyApiError(error)
|
LNbits.utils.notifyApiError(error)
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
payLN: function(){
|
payLN: function () {
|
||||||
this.lnbtc = true
|
this.lnbtc = true
|
||||||
this.onbtc = false
|
this.onbtc = false
|
||||||
},
|
},
|
||||||
payON: function(){
|
payON: function () {
|
||||||
this.lnbtc = false
|
this.lnbtc = false
|
||||||
this.onbtc = true
|
this.onbtc = true
|
||||||
},
|
},
|
||||||
getTheTime: function () {
|
getTheTime: function () {
|
||||||
var timeToComplete = (parseInt('{{ charge.time }}') * 60) - (Date.now()/1000 - parseInt('{{ charge.timestamp }}') )
|
var timeToComplete =
|
||||||
var timeLeft = Quasar.utils.date.formatDate(
|
parseInt('{{ charge.time }}') * 60 -
|
||||||
new Date((timeToComplete - 3600)*1000),
|
(Date.now() / 1000 - parseInt('{{ charge.timestamp }}'))
|
||||||
'HH:mm:ss'
|
var timeLeft = Quasar.utils.date.formatDate(
|
||||||
)
|
new Date((timeToComplete - 3600) * 1000),
|
||||||
this.newTimeLeft = timeLeft
|
'HH:mm:ss'
|
||||||
|
)
|
||||||
|
this.newTimeLeft = timeLeft
|
||||||
},
|
},
|
||||||
getThePercentage: function () {
|
getThePercentage: function () {
|
||||||
var timeToComplete = (parseInt('{{ charge.time }}') * 60) - (Date.now()/1000 - parseInt('{{ charge.timestamp }}') )
|
var timeToComplete =
|
||||||
this.newProgress = 1 - (timeToComplete / (parseInt('{{ charge.time }}') * 60))
|
parseInt('{{ charge.time }}') * 60 -
|
||||||
|
(Date.now() / 1000 - parseInt('{{ charge.timestamp }}'))
|
||||||
|
this.newProgress =
|
||||||
|
1 - timeToComplete / (parseInt('{{ charge.time }}') * 60)
|
||||||
},
|
},
|
||||||
|
|
||||||
timerCount: function () {
|
timerCount: function () {
|
||||||
self = this
|
self = this
|
||||||
var refreshIntervalId = setInterval(function () {
|
var refreshIntervalId = setInterval(function () {
|
||||||
if(self.charge_paid == "True"){
|
if (self.charge_paid == 'True') {
|
||||||
console.log("did this work?")
|
console.log('did this work?')
|
||||||
clearInterval(refreshIntervalId)
|
clearInterval(refreshIntervalId)
|
||||||
}
|
}
|
||||||
self.getTheTime()
|
self.getTheTime()
|
||||||
self.getThePercentage()
|
self.getThePercentage()
|
||||||
self.counter++
|
self.counter++
|
||||||
if (self.counter% 10 === 0){
|
if (self.counter % 10 === 0) {
|
||||||
self.checkBalance()
|
self.checkBalance()
|
||||||
}
|
}
|
||||||
}, 1000)
|
}, 1000)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created: function () {
|
created: function () {
|
||||||
if('{{ charge.lnbitswallet }}' == 'None'){
|
if ('{{ charge.lnbitswallet }}' == 'None') {
|
||||||
this.lnbtc = false
|
this.lnbtc = false
|
||||||
this.onbtc = true
|
this.onbtc = true
|
||||||
}
|
}
|
||||||
this.getTheTime()
|
this.getTheTime()
|
||||||
this.getThePercentage()
|
this.getThePercentage()
|
||||||
var timerCount = this.timerCount
|
var timerCount = this.timerCount
|
||||||
if('{{ charge.paid }}' == 'False'){
|
if ('{{ charge.paid }}' == 'False') {
|
||||||
timerCount()
|
timerCount()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -257,9 +257,7 @@
|
||||||
emit-value
|
emit-value
|
||||||
v-model="formDialogCharge.data.lnbitswallet"
|
v-model="formDialogCharge.data.lnbitswallet"
|
||||||
:options="g.user.walletOptions"
|
:options="g.user.walletOptions"
|
||||||
label="Wallet *"
|
label="Wallet *">
|
||||||
>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="row q-mt-lg">
|
<div class="row q-mt-lg">
|
||||||
<q-btn
|
<q-btn
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue