heierbtc/lnbits
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: make the panels responsive

Browse Source
This commit is contained in:
Vlad Stan 2022-07-08 09:26:29 +03:00
parent 80e1545920
commit 05bc887ad5
1 changed files with 78 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

158
lnbits/extensions/satspay/templates/satspay/display.html
View File

@ -1,12 +1,12 @@
{% extends "public.html" %} {% block page %} {% extends "public.html" %} {% block page %}
<div class="row items-center q-mt-md"> <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-3 col-sm-1"></div>
<div class="col-lg-4 col-md-8 col-sm-10"> <div class="col-lg-4 col-md-6 col-sm-10">
<q-card class="my-card"> <q-card>
<div class="column"> <div class="column">
<center> <center>
<div class="col theHeading"> <div class="col">
<span v-text="charge.description"></span> <span class="text-h4" v-text="charge.description"></span>
</div> </div>
</center> </center>
<div class="col"> <div class="col">
@ -43,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 "> <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)"
@ -51,23 +51,29 @@
></q-btn> ></q-btn>
</div> </div>
</div> </div>
<div class="row items-center "> <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 "> <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 "> <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-if="charge.amount - charge.balance > 0" v-text="charge.amount - charge.balance">sats</span> <span
<q-badge v-if="charge.amount - charge.balance <= 0" color="green"> none</q-badge> 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>
@ -122,9 +128,12 @@
<q-separator></q-separator> <q-separator></q-separator>
</div> </div>
</div> </div>
<q-card class="q-pa-lg" v-if="lnbtc"> </q-card>
<q-card-section class="q-pa-none"> <q-card class="q-pa-lg" v-if="lnbtc">
<div class="text-center q-pt-md"> <q-card-section class="q-pa-none">
<div class="row items-center q-mt-md">
<div class="col-md-2 col-sm-0"></div>
<div class="col-md-8 col-sm-12">
<div v-if="timetoComplete < 1 && !charge.paid"> <div v-if="timetoComplete < 1 && !charge.paid">
<q-icon <q-icon
name="block" name="block"
@ -169,76 +178,66 @@
</div> </div>
</div> </div>
</div> </div>
</q-card-section> </div>
</q-card> <div class="col-md-2 col-sm-0"></div>
<q-card class="q-pa-lg" v-if="onbtc"> </q-card-section>
<q-card-section class="q-pa-none"> </q-card>
<div class="text-center q-pt-md"> <q-card class="q-pa-lg" v-if="onbtc">
<div v-if="timetoComplete < 1 && !charge.paid"> <q-card-section class="q-pa-none">
<q-icon <div class="text-center q-pt-md">
name="block" <div v-if="timetoComplete < 1 && !charge.paid">
style="color: #ccc; font-size: 21.4em" <q-icon
></q-icon> name="block"
</div> style="color: #ccc; font-size: 21.4em"
<div v-else-if="charge.paid"> ></q-icon>
<q-icon </div>
name="check" <div v-else-if="charge.paid">
style="color: green; font-size: 21.4em" <q-icon
></q-icon> name="check"
style="color: green; font-size: 21.4em"
></q-icon>
<q-btn
outline
v-if="charge.webhook "
type="a"
:href="charge.completelink"
:label="charge.completelinktext"
></q-btn>
</div>
<div v-else>
<span class="text-subtitle2"
>Send
<span v-text="charge.amount"></span>
sats to this onchain address</span
>
<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 <q-btn
outline outline
v-if="charge.webhook " color="grey"
type="a" @click="copyText(charge.onchainaddress)"
:href="charge.completelink" >Copy address</q-btn
:label="charge.completelinktext"
></q-btn>
</div>
<div v-else>
<span class="text-subtitle2"
>Send
<span v-text="charge.amount"></span>
sats to this onchain address</span
> >
<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>
</div> </div>
</q-card-section> </div>
</q-card> </q-card-section>
</q-card> </q-card>
</div> </div>
<div class="col-lg- 4 col-md-2 col-sm-1" ></div> <div class="col-lg- 4 col-md-3 col-sm-1"></div>
</div> </div>
{% endblock %} {% block scripts %} {% endblock %} {% block scripts %}
<style>
/* .theCard {
width: 30%;
margin: 10px auto;
} */
.theHeading {
margin: 15px;
font-size: 25px;
}
</style>
<!-- todo: use config mempool -->
<script src="https://mempool.space/mempool.js"></script> <script src="https://mempool.space/mempool.js"></script>
<script src="{{ url_for('satspay_static', path='js/utils.js') }}"></script> <script src="{{ url_for('satspay_static', path='js/utils.js') }}"></script>
<script> <script>
@ -266,7 +265,7 @@
methods: { methods: {
startPaymentNotifier() { startPaymentNotifier() {
this.cancelListener() this.cancelListener()
if (!this.lnbitswallet) return
this.cancelListener = LNbits.events.onInvoicePaid( this.cancelListener = LNbits.events.onInvoicePaid(
this.wallet, this.wallet,
payment => { payment => {
@ -303,11 +302,10 @@
}) })
const utxos = await retryWithDelay(fn) const utxos = await retryWithDelay(fn)
console.log('### utxos', utxos) const balance = utxos.reduce((t, u) => t + u.value, 0)
this.charge.balance = utxos.reduce((t, u) => t + u.value, 0)
console.log('### utxos', utxos)
}, },
checkBalances: async function() { checkBalances: async function () {
if (this.charge.lnbitswallet) this.checkInvoiceBalance() if (this.charge.lnbitswallet) this.checkInvoiceBalance()
if (this.charge.onchainaddress) this.checkAddressBalance() if (this.charge.onchainaddress) this.checkAddressBalance()
}, },
@ -368,7 +366,6 @@
const res = JSON.parse(data.toString()) const res = JSON.parse(data.toString())
console.log('### socker mempool res', res) console.log('### socker mempool res', res)
if (res['address-transactions']) { if (res['address-transactions']) {
this.checkAddressBalance()
} }
}) })
}, },
@ -398,12 +395,13 @@
// empty for onchain // empty for onchain
this.wallet.inkey = '{{ wallet_inkey }}' this.wallet.inkey = '{{ wallet_inkey }}'
this.startPaymentNotifier()
this.refreshProgres() this.refreshProgres()
if (!this.charge.paid) { if (!this.charge.paid) {
this.loopRefresh() this.loopRefresh()
} }
this.startPaymentNotifier()
if (this.charge.onchainaddress) { if (this.charge.onchainaddress) {
this.loopPingWs() this.loopPingWs()
this.trackAddress(this.charge.onchainaddress) this.trackAddress(this.charge.onchainaddress)