feat: use bootstrap tables for the layout (not fixed px values)

This commit is contained in:
Vlad Stan 2022-07-07 14:35:17 +03:00
parent 912a7e1c4b
commit 3bd4253292

View File

@ -1,5 +1,7 @@
{% extends "public.html" %} {% block page %}
<div class="q-pa-sm theCard">
<div class="row items-center q-mt-md">
<div class="col-lg-4 col-md-2 col-sm-1"></div>
<div class="col-lg-4 col-md-8 col-sm-10">
<q-card class="my-card">
<div class="column">
<center>
@ -41,7 +43,7 @@
</div>
</div>
<div class="col" style="margin: 2px 15px; max-height: 100px">
<div class="row items-center q-mt-md">
<div class="row items-center ">
<div class="col-4 q-pr-lg">Charge Id:</div>
<div class="col-8 q-pr-lg">
<q-btn flat dense outline @click="copyText(charge.id)"
@ -49,22 +51,23 @@
></q-btn>
</div>
</div>
<div class="row items-center q-mt-md">
<div class="row items-center ">
<div class="col-4 q-pr-lg">Total to pay:</div>
<div class="col-8 q-pr-lg">
<span v-text="charge.amount"></span> sats
</div>
</div>
<div class="row items-center q-mt-md">
<div class="row items-center ">
<div class="col-4 q-pr-lg">Amount paid:</div>
<div class="col-8 q-pr-lg">
<span v-text="charge.balance"></span> sats
</div>
</div>
<div class="row items-center q-mt-md">
<div class="row items-center ">
<div class="col-4 q-pr-lg">Amount due:</div>
<div class="col-8 q-pr-lg">
<span v-text="charge.amount - charge.balance"></span> sats
<span v-if="charge.amount - charge.balance > 0" v-text="charge.amount - charge.balance">sats</span>
<q-badge v-if="charge.amount - charge.balance <= 0" color="green"> none</q-badge>
</div>
</div>
</div>
@ -219,15 +222,17 @@
</q-card-section>
</q-card>
</q-card>
</div>
<div class="col-lg- 4 col-md-2 col-sm-1" ></div>
</div>
{% endblock %} {% block scripts %}
<style>
.theCard {
/* .theCard {
width: 30%;
margin: 10px auto;
}
} */
.theHeading {
margin: 15px;
font-size: 25px;
@ -302,6 +307,10 @@
this.charge.balance = utxos.reduce((t, u) => t + u.value, 0)
console.log('### utxos', utxos)
},
checkBalances: async function() {
if (this.charge.lnbitswallet) this.checkInvoiceBalance()
if (this.charge.onchainaddress) this.checkAddressBalance()
},
payInvoice: function () {
this.lnbtc = true
this.onbtc = false
@ -327,17 +336,17 @@
},
loopRefresh: function () {
// invoice only
const refreshIntervalId = setInterval(() => {
const refreshIntervalId = setInterval(async () => {
console.log('### 1111')
if (this.charge.paid || this.timetoComplete < 1) {
clearInterval(refreshIntervalId)
}
this.refreshProgres()
this.counter++
if (this.counter % 10 === 0) {
if (this.charge.lnbitswallet) this.checkInvoiceBalance()
if (this.charge.onchainaddress) this.checkAddressBalance()
console.log('### 11110')
await this.checkBalances()
}
this.counter++
}, 1000)
},
initWs: async function () {
@ -381,10 +390,11 @@
}
}
},
created: function () {
created: async function () {
console.log('### charge', this.charge)
if (this.charge.lnbitswallet) this.payInvoice()
else this.payOnchain()
await this.checkBalances()
// empty for onchain
this.wallet.inkey = '{{ wallet_inkey }}'