Change UI for Pay Invoice Dialog (#2979)
This commit is contained in:
Tiago Vasconcelos
GitHub
parent
0cd94e654e
commit
4afe6dbd6d
2 changed files with 173 additions and 24 deletions
|
|
@ -29,19 +29,20 @@
|
||||||
} : ''"
|
} : ''"
|
||||||
>
|
>
|
||||||
<q-card-section style="height: 130px">
|
<q-card-section style="height: 130px">
|
||||||
<div class="row">
|
<div class="row q-gutter-md">
|
||||||
<div class="col-1" style="max-width: 30px">
|
<div class="col-1" style="max-width: 30px">
|
||||||
<q-btn
|
<q-btn
|
||||||
v-if="g.fiatTracking"
|
v-if="g.fiatTracking"
|
||||||
@click="swapBalancePriority"
|
@click="swapBalancePriority"
|
||||||
style="height: 50px"
|
style="height: 50px"
|
||||||
class="q-mt-lg"
|
class="q-mt-lg"
|
||||||
|
color="primary"
|
||||||
flat
|
flat
|
||||||
dense
|
dense
|
||||||
icon="swap_vert"
|
icon="swap_vert"
|
||||||
></q-btn>
|
></q-btn>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-11">
|
<div class="col">
|
||||||
<div
|
<div
|
||||||
class="column"
|
class="column"
|
||||||
:class="{
|
:class="{
|
||||||
|
|
@ -693,27 +694,159 @@
|
||||||
<q-dialog v-model="parse.show" @hide="closeParseDialog" position="top">
|
<q-dialog v-model="parse.show" @hide="closeParseDialog" position="top">
|
||||||
<q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
|
<q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
|
||||||
<div v-if="parse.invoice">
|
<div v-if="parse.invoice">
|
||||||
<h6
|
<div class="column content-center text-center q-mb-md">
|
||||||
v-if="'{{LNBITS_DENOMINATION}}' != 'sats'"
|
<div v-if="!isFiatPriority">
|
||||||
class="q-my-none"
|
<h4
|
||||||
v-text="parseFloat(String(parse.invoice.fsat).replaceAll(',', '')) / 100 + '{{LNBITS_DENOMINATION}}'"
|
v-if="'{{LNBITS_DENOMINATION}}' != 'sats'"
|
||||||
></h6>
|
class="q-my-none text-bold"
|
||||||
<h6
|
>
|
||||||
v-else
|
<span
|
||||||
class="q-my-none"
|
v-text="parseFloat(String(parse.invoice.fsat).replaceAll(',', '')) / 100"
|
||||||
v-text="parse.invoice.fsat + '{{LNBITS_DENOMINATION}}'"
|
></span>
|
||||||
></h6>
|
<span
|
||||||
<q-separator class="q-my-sm"></q-separator>
|
class="text-h5"
|
||||||
<p class="text-wrap">
|
v-text="'{{LNBITS_DENOMINATION}}'"
|
||||||
<strong v-text="$t('memo') + ': '"></strong>
|
></span>
|
||||||
<span v-text="parse.invoice.description"></span>
|
</h4>
|
||||||
<br />
|
<h4 v-else class="q-my-none text-bold">
|
||||||
<strong v-text="$t('expire_date')"></strong>
|
<span v-text="parse.invoice.fsat"></span>
|
||||||
<span v-text="parse.invoice.expireDate"></span>
|
<span
|
||||||
<br />
|
class="text-h5"
|
||||||
<strong v-text="$t('hash')"></strong>
|
v-text="'{{LNBITS_DENOMINATION}}'"
|
||||||
<span v-text="parse.invoice.hash"></span>
|
></span>
|
||||||
</p>
|
</h4>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<h4
|
||||||
|
class="q-my-none text-bold"
|
||||||
|
v-text="parse.invoice.fiatAmount"
|
||||||
|
></h4>
|
||||||
|
</div>
|
||||||
|
<div class="q-my-md absolute">
|
||||||
|
<q-btn
|
||||||
|
v-if="g.fiatTracking"
|
||||||
|
@click="swapBalancePriority"
|
||||||
|
flat
|
||||||
|
dense
|
||||||
|
icon="swap_vert"
|
||||||
|
color="primary"
|
||||||
|
></q-btn>
|
||||||
|
</div>
|
||||||
|
<div v-if="!isFiatPriority">
|
||||||
|
<div class="text-h5 text-italic">
|
||||||
|
<span
|
||||||
|
v-text="parse.invoice.fiatAmount"
|
||||||
|
style="opacity: 0.75"
|
||||||
|
></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-else style="opacity: 0.75">
|
||||||
|
<h5
|
||||||
|
v-if="'{{LNBITS_DENOMINATION}}' != 'sats'"
|
||||||
|
class="q-my-none text-bold"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
v-text="parseFloat(String(parse.invoice.fsat).replaceAll(',', '')) / 100"
|
||||||
|
></span>
|
||||||
|
<span
|
||||||
|
class="text-h6"
|
||||||
|
v-text="'{{LNBITS_DENOMINATION}}'"
|
||||||
|
></span>
|
||||||
|
</h5>
|
||||||
|
<h5 v-else class="q-my-none text-bold">
|
||||||
|
<span v-text="parse.invoice.fsat"></span>
|
||||||
|
<span
|
||||||
|
class="text-h6"
|
||||||
|
v-text="'{{LNBITS_DENOMINATION}}'"
|
||||||
|
></span>
|
||||||
|
</h5>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<q-separator></q-separator>
|
||||||
|
<h6 class="text-center" v-text="parse.invoice.description"></h6>
|
||||||
|
<q-list separator bordered dense class="q-mb-md">
|
||||||
|
<q-expansion-item expand-separator icon="info" label="Details">
|
||||||
|
<q-list separator>
|
||||||
|
<q-item>
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label v-text="$t('created')"></q-item-label>
|
||||||
|
<q-item-label
|
||||||
|
caption
|
||||||
|
v-text="parse.invoice.createdDate"
|
||||||
|
></q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
|
||||||
|
<q-item-section side top>
|
||||||
|
<q-item-label
|
||||||
|
caption
|
||||||
|
v-text="parse.invoice.createdDateFrom"
|
||||||
|
></q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
<q-item>
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label v-text="$t('expire_date')"></q-item-label>
|
||||||
|
<q-item-label
|
||||||
|
caption
|
||||||
|
v-text="parse.invoice.expireDate"
|
||||||
|
></q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
<q-item-section side top>
|
||||||
|
<q-item-label
|
||||||
|
caption
|
||||||
|
v-text="parse.invoice.expireDateFrom"
|
||||||
|
></q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
<q-item>
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label v-text="$t('payment_hash')"></q-item-label>
|
||||||
|
<q-item-label
|
||||||
|
caption
|
||||||
|
v-text="`${parse.invoice.hash.slice(0, 12)}...${parse.invoice.hash.slice(-12)}`"
|
||||||
|
></q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
<q-item-section side>
|
||||||
|
<q-item-label>
|
||||||
|
<q-icon
|
||||||
|
name="content_copy"
|
||||||
|
@click="copyText(parse.invoice.hash)"
|
||||||
|
size="1em"
|
||||||
|
color="grey"
|
||||||
|
class="cursor-pointer"
|
||||||
|
/>
|
||||||
|
</q-item-label>
|
||||||
|
<q-tooltip>
|
||||||
|
<span v-text="parse.invoice.hash"></span>
|
||||||
|
</q-tooltip>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
<q-item>
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label v-text="$t('Invoice')"></q-item-label>
|
||||||
|
<q-item-label
|
||||||
|
caption
|
||||||
|
v-text="`${parse.invoice.bolt11.slice(0, 12)}...${parse.invoice.bolt11.slice(-12)}`"
|
||||||
|
></q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
<q-item-section side>
|
||||||
|
<q-item-label>
|
||||||
|
<q-icon
|
||||||
|
name="content_copy"
|
||||||
|
@click="copyText(parse.invoice.bolt11)"
|
||||||
|
size="1em"
|
||||||
|
color="grey"
|
||||||
|
class="cursor-pointer"
|
||||||
|
/>
|
||||||
|
</q-item-label>
|
||||||
|
<q-tooltip>
|
||||||
|
<span v-text="parse.invoice.bolt11"></span>
|
||||||
|
</q-tooltip>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</q-expansion-item>
|
||||||
|
</q-list>
|
||||||
<div v-if="canPay" class="row q-mt-lg">
|
<div v-if="canPay" class="row q-mt-lg">
|
||||||
<q-btn
|
<q-btn
|
||||||
unelevated
|
unelevated
|
||||||
|
|
|
||||||
|
|
@ -420,7 +420,8 @@ window.WalletPageLogic = {
|
||||||
let cleanInvoice = {
|
let cleanInvoice = {
|
||||||
msat: invoice.human_readable_part.amount,
|
msat: invoice.human_readable_part.amount,
|
||||||
sat: invoice.human_readable_part.amount / 1000,
|
sat: invoice.human_readable_part.amount / 1000,
|
||||||
fsat: LNbits.utils.formatSat(invoice.human_readable_part.amount / 1000)
|
fsat: LNbits.utils.formatSat(invoice.human_readable_part.amount / 1000),
|
||||||
|
bolt11: this.parse.data.request
|
||||||
}
|
}
|
||||||
|
|
||||||
_.each(invoice.data.tags, tag => {
|
_.each(invoice.data.tags, tag => {
|
||||||
|
|
@ -433,15 +434,30 @@ window.WalletPageLogic = {
|
||||||
const expireDate = new Date(
|
const expireDate = new Date(
|
||||||
(invoice.data.time_stamp + tag.value) * 1000
|
(invoice.data.time_stamp + tag.value) * 1000
|
||||||
)
|
)
|
||||||
|
const createdDate = new Date(invoice.data.time_stamp * 1000)
|
||||||
cleanInvoice.expireDate = Quasar.date.formatDate(
|
cleanInvoice.expireDate = Quasar.date.formatDate(
|
||||||
expireDate,
|
expireDate,
|
||||||
'YYYY-MM-DDTHH:mm:ss.SSSZ'
|
'YYYY-MM-DDTHH:mm:ss.SSSZ'
|
||||||
)
|
)
|
||||||
|
cleanInvoice.createdDate = Quasar.date.formatDate(
|
||||||
|
createdDate,
|
||||||
|
'YYYY-MM-DDTHH:mm:ss.SSSZ'
|
||||||
|
)
|
||||||
|
cleanInvoice.expireDateFrom = moment(expireDate).fromNow()
|
||||||
|
cleanInvoice.createdDateFrom = moment(createdDate).fromNow()
|
||||||
|
|
||||||
cleanInvoice.expired = false // TODO
|
cleanInvoice.expired = false // TODO
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
if (this.g.wallet.currency) {
|
||||||
|
cleanInvoice.fiatAmount = LNbits.utils.formatCurrency(
|
||||||
|
((cleanInvoice.sat / 1e8) * this.g.exchangeRate).toFixed(2),
|
||||||
|
this.g.wallet.currency
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
this.parse.invoice = Object.freeze(cleanInvoice)
|
this.parse.invoice = Object.freeze(cleanInvoice)
|
||||||
},
|
},
|
||||||
payInvoice() {
|
payInvoice() {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue