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