Merge pull request #601 from lnbits/tposbuttons
TPoS now theme dependent
This commit is contained in:
Arc
GitHub
commit
ed48821ef9
|
|
@ -1,278 +1,207 @@
|
||||||
{% extends "public.html" %} {% block toolbar_title %}{{ tpos.name }}{% endblock
|
{% extends "public.html" %} {% block toolbar_title %}{{ tpos.name }}{% endblock %} {% block footer %}{% endblock %} {% block page_container %}
|
||||||
%} {% block footer %}{% endblock %} {% block page_container %}
|
|
||||||
<q-page-container>
|
<q-page-container>
|
||||||
<q-page>
|
<q-page>
|
||||||
<q-page-sticky v-if="exchangeRate" expand position="top">
|
<q-page-sticky v-if="exchangeRate" expand position="top">
|
||||||
<div class="row justify-center full-width">
|
<div class="row justify-center full-width">
|
||||||
<div class="col-12 col-sm-8 col-md-6 col-lg-4 text-center">
|
<div class="col-12 col-sm-8 col-md-6 col-lg-4 text-center">
|
||||||
<h3 class="q-mb-md">{% raw %}{{ famount }}{% endraw %}</h3>
|
<h3 class="q-mb-md">{% raw %}{{ famount }}{% endraw %}</h3>
|
||||||
<h5 class="q-mt-none">
|
<h5 class="q-mt-none">
|
||||||
{% raw %}{{ fsat }}{% endraw %} <small>sat</small>
|
{% raw %}{{ fsat }}{% endraw %} <small>sat</small>
|
||||||
</h5>
|
</h5>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</q-page-sticky>
|
</q-page-sticky>
|
||||||
<q-page-sticky expand position="bottom">
|
<q-page-sticky expand position="bottom">
|
||||||
<div class="row justify-center full-width">
|
<div class="row justify-center full-width">
|
||||||
<div class="col-12 col-sm-8 col-md-6 col-lg-4">
|
<div class="col-12 col-sm-8 col-md-6 col-lg-4">
|
||||||
<div class="keypad q-pa-sm">
|
<div class="keypad q-pa-sm">
|
||||||
<q-btn unelevated @click="stack.push(1)" size="xl" color="grey-8"
|
<q-btn unelevated @click="stack.push(1)" size="xl" :outline="!($q.dark.isActive)" rounded color="primary">1</q-btn>
|
||||||
>1</q-btn
|
<q-btn unelevated @click="stack.push(2)" size="xl" :outline="!($q.dark.isActive)" rounded color="primary">2</q-btn>
|
||||||
>
|
<q-btn unelevated @click="stack.push(3)" size="xl" :outline="!($q.dark.isActive)" rounded color="primary">3</q-btn>
|
||||||
<q-btn unelevated @click="stack.push(2)" size="xl" color="grey-8"
|
<q-btn unelevated @click="stack = []" size="xl" :outline="!($q.dark.isActive)" rounded color="primary" class="btn-cancel">C</q-btn>
|
||||||
>2</q-btn
|
<q-btn unelevated @click="stack.push(4)" size="xl" :outline="!($q.dark.isActive)" rounded color="primary">4</q-btn>
|
||||||
>
|
<q-btn unelevated @click="stack.push(5)" size="xl" :outline="!($q.dark.isActive)" rounded color="primary">5</q-btn>
|
||||||
<q-btn unelevated @click="stack.push(3)" size="xl" color="grey-8"
|
<q-btn unelevated @click="stack.push(6)" size="xl" :outline="!($q.dark.isActive)" rounded color="primary">6</q-btn>
|
||||||
>3</q-btn
|
<q-btn unelevated @click="stack.push(7)" size="xl" :outline="!($q.dark.isActive)" rounded color="primary">7</q-btn>
|
||||||
>
|
<q-btn unelevated @click="stack.push(8)" size="xl" :outline="!($q.dark.isActive)" rounded color="primary">8</q-btn>
|
||||||
<q-btn
|
<q-btn unelevated @click="stack.push(9)" size="xl" :outline="!($q.dark.isActive)" rounded color="primary">9</q-btn>
|
||||||
unelevated
|
<q-btn unelevated :disabled="amount == 0" @click="showInvoice()" size="xl" :outline="!($q.dark.isActive)" rounded color="primary" class="btn-confirm">OK</q-btn>
|
||||||
@click="stack = []"
|
<q-btn unelevated @click="stack.splice(-1, 1)" size="xl" :outline="!($q.dark.isActive)" rounded color="primary">DEL</q-btn>
|
||||||
size="xl"
|
<q-btn unelevated @click="stack.push(0)" size="xl" :outline="!($q.dark.isActive)" rounded color="primary">0</q-btn>
|
||||||
color="pink"
|
<q-btn unelevated @click="urlDialog.show = true" size="xl" :outline="!($q.dark.isActive)" rounded color="primary">#</q-btn>
|
||||||
class="btn-cancel"
|
</div>
|
||||||
>C</q-btn
|
</div>
|
||||||
>
|
</div>
|
||||||
<q-btn unelevated @click="stack.push(4)" size="xl" color="grey-8"
|
</q-page-sticky>
|
||||||
>4</q-btn
|
<q-dialog v-model="invoiceDialog.show" position="top" @hide="closeInvoiceDialog">
|
||||||
>
|
<q-card v-if="invoiceDialog.data" class="q-pa-lg q-pt-xl lnbits__dialog-card">
|
||||||
<q-btn unelevated @click="stack.push(5)" size="xl" color="grey-8"
|
<q-responsive :ratio="1" class="q-mx-xl q-mb-md">
|
||||||
>5</q-btn
|
<qrcode :value="invoiceDialog.data.payment_request" :options="{width: 800}" class="rounded-borders"></qrcode>
|
||||||
>
|
</q-responsive>
|
||||||
<q-btn unelevated @click="stack.push(6)" size="xl" color="grey-8"
|
<div class="text-center">
|
||||||
>6</q-btn
|
<h3 class="q-my-md">{% raw %}{{ famount }}{% endraw %}</h3>
|
||||||
>
|
<h5 class="q-mt-none">
|
||||||
<q-btn unelevated @click="stack.push(7)" size="xl" color="grey-8"
|
{% raw %}{{ fsat }}{% endraw %} <small>sat</small>
|
||||||
>7</q-btn
|
</h5>
|
||||||
>
|
</div>
|
||||||
<q-btn unelevated @click="stack.push(8)" size="xl" color="grey-8"
|
<div class="row q-mt-lg">
|
||||||
>8</q-btn
|
<q-btn v-close-popup flat color="grey" class="q-ml-auto">Close</q-btn>
|
||||||
>
|
</div>
|
||||||
<q-btn unelevated @click="stack.push(9)" size="xl" color="grey-8"
|
</q-card>
|
||||||
>9</q-btn
|
</q-dialog>
|
||||||
>
|
<q-dialog v-model="urlDialog.show" position="top">
|
||||||
<q-btn
|
<q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
|
||||||
unelevated
|
<q-responsive :ratio="1" class="q-mx-xl q-mb-md">
|
||||||
:disabled="amount == 0"
|
<qrcode value="{{ request.url }}" :options="{width: 800}" class="rounded-borders"></qrcode>
|
||||||
@click="showInvoice()"
|
</q-responsive>
|
||||||
size="xl"
|
<div class="text-center q-mb-xl">
|
||||||
color="green"
|
<p style="word-break: break-all">
|
||||||
class="btn-confirm"
|
<strong>{{ tpos.name }}</strong><br />{{ request.url }}
|
||||||
>OK</q-btn
|
</p>
|
||||||
>
|
</div>
|
||||||
<q-btn
|
<div class="row q-mt-lg">
|
||||||
unelevated
|
<q-btn outline color="grey" @click="copyText('{{ request.url }}', 'TPoS URL copied to clipboard!')">Copy URL</q-btn>
|
||||||
@click="stack.splice(-1, 1)"
|
<q-btn v-close-popup flat color="grey" class="q-ml-auto">Close</q-btn>
|
||||||
size="xl"
|
</div>
|
||||||
color="grey-7"
|
</q-card>
|
||||||
>DEL</q-btn
|
</q-dialog>
|
||||||
>
|
|
||||||
<q-btn unelevated @click="stack.push(0)" size="xl" color="grey-8"
|
|
||||||
>0</q-btn
|
|
||||||
>
|
|
||||||
<q-btn
|
|
||||||
unelevated
|
|
||||||
@click="urlDialog.show = true"
|
|
||||||
size="xl"
|
|
||||||
color="grey-7"
|
|
||||||
>#</q-btn
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-page-sticky>
|
|
||||||
<q-dialog
|
|
||||||
v-model="invoiceDialog.show"
|
|
||||||
position="top"
|
|
||||||
@hide="closeInvoiceDialog"
|
|
||||||
>
|
|
||||||
<q-card
|
|
||||||
v-if="invoiceDialog.data"
|
|
||||||
class="q-pa-lg q-pt-xl lnbits__dialog-card"
|
|
||||||
>
|
|
||||||
<q-responsive :ratio="1" class="q-mx-xl q-mb-md">
|
|
||||||
<qrcode
|
|
||||||
:value="invoiceDialog.data.payment_request"
|
|
||||||
:options="{width: 800}"
|
|
||||||
class="rounded-borders"
|
|
||||||
></qrcode>
|
|
||||||
</q-responsive>
|
|
||||||
<div class="text-center">
|
|
||||||
<h3 class="q-my-md">{% raw %}{{ famount }}{% endraw %}</h3>
|
|
||||||
<h5 class="q-mt-none">
|
|
||||||
{% raw %}{{ fsat }}{% endraw %} <small>sat</small>
|
|
||||||
</h5>
|
|
||||||
</div>
|
|
||||||
<div class="row q-mt-lg">
|
|
||||||
<q-btn v-close-popup flat color="grey" class="q-ml-auto">Close</q-btn>
|
|
||||||
</div>
|
|
||||||
</q-card>
|
|
||||||
</q-dialog>
|
|
||||||
<q-dialog v-model="urlDialog.show" position="top">
|
|
||||||
<q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
|
|
||||||
<q-responsive :ratio="1" class="q-mx-xl q-mb-md">
|
|
||||||
<qrcode
|
|
||||||
value="{{ request.url }}"
|
|
||||||
:options="{width: 800}"
|
|
||||||
class="rounded-borders"
|
|
||||||
></qrcode>
|
|
||||||
</q-responsive>
|
|
||||||
<div class="text-center q-mb-xl">
|
|
||||||
<p style="word-break: break-all">
|
|
||||||
<strong>{{ tpos.name }}</strong><br />{{ request.url }}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="row q-mt-lg">
|
|
||||||
<q-btn
|
|
||||||
outline
|
|
||||||
color="grey"
|
|
||||||
@click="copyText('{{ request.url }}', 'TPoS URL copied to clipboard!')"
|
|
||||||
>Copy URL</q-btn
|
|
||||||
>
|
|
||||||
<q-btn v-close-popup flat color="grey" class="q-ml-auto">Close</q-btn>
|
|
||||||
</div>
|
|
||||||
</q-card>
|
|
||||||
</q-dialog>
|
|
||||||
|
|
||||||
<q-dialog v-model="complete.show" position="top">
|
<q-dialog v-model="complete.show" position="top">
|
||||||
<q-icon
|
<q-icon name="check" transition-show="fade" class="text-light-green" style="font-size: 40em"></q-icon>
|
||||||
name="check"
|
</q-dialog>
|
||||||
transition-show="fade"
|
</q-page>
|
||||||
class="text-light-green"
|
|
||||||
style="font-size: 40em"
|
|
||||||
></q-icon
|
|
||||||
></q-dialog>
|
|
||||||
</q-page>
|
|
||||||
</q-page-container>
|
</q-page-container>
|
||||||
{% endblock %} {% block styles %}
|
{% endblock %} {% block styles %}
|
||||||
<style>
|
<style>
|
||||||
.keypad {
|
.keypad {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-gap: 8px;
|
grid-gap: 8px;
|
||||||
grid-template-columns: repeat(4, 1fr);
|
grid-template-columns: repeat(4, 1fr);
|
||||||
grid-template-rows: repeat(4, 1fr);
|
grid-template-rows: repeat(4, 1fr);
|
||||||
}
|
}
|
||||||
.keypad .btn {
|
|
||||||
height: 100%;
|
.keypad .btn {
|
||||||
}
|
height: 100%;
|
||||||
.btn-cancel,
|
}
|
||||||
.btn-confirm {
|
|
||||||
grid-row: auto/span 2;
|
.btn-cancel,
|
||||||
}
|
.btn-confirm {
|
||||||
|
grid-row: auto/span 2;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
{% endblock %} {% block scripts %}
|
{% endblock %} {% block scripts %}
|
||||||
<script>
|
<script>
|
||||||
Vue.component(VueQrcode.name, VueQrcode)
|
Vue.component(VueQrcode.name, VueQrcode)
|
||||||
|
|
||||||
new Vue({
|
new Vue({
|
||||||
el: '#vue',
|
el: '#vue',
|
||||||
mixins: [windowMixin],
|
mixins: [windowMixin],
|
||||||
data: function () {
|
data: function() {
|
||||||
return {
|
return {
|
||||||
tposId: '{{ tpos.id }}',
|
tposId: '{{ tpos.id }}',
|
||||||
currency: '{{ tpos.currency }}',
|
currency: '{{ tpos.currency }}',
|
||||||
exchangeRate: null,
|
exchangeRate: null,
|
||||||
stack: [],
|
stack: [],
|
||||||
invoiceDialog: {
|
invoiceDialog: {
|
||||||
show: false,
|
show: false,
|
||||||
data: null,
|
data: null,
|
||||||
dismissMsg: null,
|
dismissMsg: null,
|
||||||
paymentChecker: null
|
paymentChecker: null
|
||||||
},
|
},
|
||||||
urlDialog: {
|
urlDialog: {
|
||||||
show: false
|
show: false
|
||||||
},
|
},
|
||||||
complete: {
|
complete: {
|
||||||
show: false
|
show: false
|
||||||
}
|
}
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
amount: function () {
|
|
||||||
if (!this.stack.length) return 0.0
|
|
||||||
return (Number(this.stack.join('')) / 100).toFixed(2)
|
|
||||||
},
|
|
||||||
famount: function () {
|
|
||||||
return LNbits.utils.formatCurrency(this.amount, this.currency)
|
|
||||||
},
|
|
||||||
sat: function () {
|
|
||||||
if (!this.exchangeRate) return 0
|
|
||||||
return Math.ceil((this.amount / this.exchangeRate) * 100000000)
|
|
||||||
},
|
|
||||||
fsat: function () {
|
|
||||||
console.log('sat', this.sat, LNbits.utils.formatSat(this.sat))
|
|
||||||
return LNbits.utils.formatSat(this.sat)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
closeInvoiceDialog: function () {
|
|
||||||
this.stack = []
|
|
||||||
var dialog = this.invoiceDialog
|
|
||||||
setTimeout(function () {
|
|
||||||
clearInterval(dialog.paymentChecker)
|
|
||||||
dialog.dismissMsg()
|
|
||||||
}, 3000)
|
|
||||||
},
|
|
||||||
showInvoice: function () {
|
|
||||||
var self = this
|
|
||||||
var dialog = this.invoiceDialog
|
|
||||||
console.log(this.sat, this.tposId)
|
|
||||||
axios
|
|
||||||
.post('/tpos/api/v1/tposs/' + this.tposId + '/invoices', null, {
|
|
||||||
params: {
|
|
||||||
amount: this.sat
|
|
||||||
}
|
}
|
||||||
})
|
},
|
||||||
.then(function (response) {
|
computed: {
|
||||||
dialog.data = response.data
|
amount: function() {
|
||||||
dialog.show = true
|
if (!this.stack.length) return 0.0
|
||||||
|
return (Number(this.stack.join('')) / 100).toFixed(2)
|
||||||
dialog.dismissMsg = self.$q.notify({
|
},
|
||||||
timeout: 0,
|
famount: function() {
|
||||||
message: 'Waiting for payment...'
|
return LNbits.utils.formatCurrency(this.amount, this.currency)
|
||||||
})
|
},
|
||||||
|
sat: function() {
|
||||||
dialog.paymentChecker = setInterval(function () {
|
if (!this.exchangeRate) return 0
|
||||||
axios
|
return Math.ceil((this.amount / this.exchangeRate) * 100000000)
|
||||||
.get(
|
},
|
||||||
'/tpos/api/v1/tposs/' +
|
fsat: function() {
|
||||||
self.tposId +
|
console.log('sat', this.sat, LNbits.utils.formatSat(this.sat))
|
||||||
'/invoices/' +
|
return LNbits.utils.formatSat(this.sat)
|
||||||
response.data.payment_hash
|
}
|
||||||
)
|
},
|
||||||
.then(function (res) {
|
methods: {
|
||||||
if (res.data.paid) {
|
closeInvoiceDialog: function() {
|
||||||
|
this.stack = []
|
||||||
|
var dialog = this.invoiceDialog
|
||||||
|
setTimeout(function() {
|
||||||
clearInterval(dialog.paymentChecker)
|
clearInterval(dialog.paymentChecker)
|
||||||
dialog.dismissMsg()
|
dialog.dismissMsg()
|
||||||
dialog.show = false
|
}, 3000)
|
||||||
|
},
|
||||||
|
showInvoice: function() {
|
||||||
|
var self = this
|
||||||
|
var dialog = this.invoiceDialog
|
||||||
|
console.log(this.sat, this.tposId)
|
||||||
|
axios
|
||||||
|
.post('/tpos/api/v1/tposs/' + this.tposId + '/invoices', null, {
|
||||||
|
params: {
|
||||||
|
amount: this.sat
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.then(function(response) {
|
||||||
|
dialog.data = response.data
|
||||||
|
dialog.show = true
|
||||||
|
|
||||||
self.complete.show = true
|
dialog.dismissMsg = self.$q.notify({
|
||||||
setTimeout(function () {
|
timeout: 0,
|
||||||
self.complete.show = false
|
message: 'Waiting for payment...'
|
||||||
}, 5000)
|
})
|
||||||
}
|
|
||||||
|
dialog.paymentChecker = setInterval(function() {
|
||||||
|
axios
|
||||||
|
.get(
|
||||||
|
'/tpos/api/v1/tposs/' +
|
||||||
|
self.tposId +
|
||||||
|
'/invoices/' +
|
||||||
|
response.data.payment_hash
|
||||||
|
)
|
||||||
|
.then(function(res) {
|
||||||
|
if (res.data.paid) {
|
||||||
|
clearInterval(dialog.paymentChecker)
|
||||||
|
dialog.dismissMsg()
|
||||||
|
dialog.show = false
|
||||||
|
|
||||||
|
self.complete.show = true
|
||||||
|
setTimeout(function() {
|
||||||
|
self.complete.show = false
|
||||||
|
}, 5000)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}, 3000)
|
||||||
|
})
|
||||||
|
.catch(function(error) {
|
||||||
|
LNbits.utils.notifyApiError(error)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
getRates: function() {
|
||||||
|
var self = this
|
||||||
|
axios.get('https://api.opennode.co/v1/rates').then(function(response) {
|
||||||
|
self.exchangeRate =
|
||||||
|
response.data.data['BTC' + self.currency][self.currency]
|
||||||
})
|
})
|
||||||
}, 3000)
|
}
|
||||||
})
|
},
|
||||||
.catch(function (error) {
|
created: function() {
|
||||||
LNbits.utils.notifyApiError(error)
|
var getRates = this.getRates
|
||||||
})
|
getRates()
|
||||||
},
|
setInterval(function() {
|
||||||
getRates: function () {
|
getRates()
|
||||||
var self = this
|
}, 20000)
|
||||||
axios.get('https://api.opennode.co/v1/rates').then(function (response) {
|
}
|
||||||
self.exchangeRate =
|
})
|
||||||
response.data.data['BTC' + self.currency][self.currency]
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created: function () {
|
|
||||||
var getRates = this.getRates
|
|
||||||
getRates()
|
|
||||||
setInterval(function () {
|
|
||||||
getRates()
|
|
||||||
}, 20000)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
</script>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
Loading…
Reference in New Issue
Block a user