Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Functionality to add on TPoS #30

Merged
merged 7 commits into from
Nov 13, 2023
Merged

Functionality to add on TPoS #30

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
34a9a8f
add plus button and colors
talvasconcelos Nov 9, 2023
e051eab
add functionality
talvasconcelos Nov 9, 2023
6904c24
add plus button and colors
talvasconcelos Nov 9, 2023
a0a0107
add functionality
talvasconcelos Nov 9, 2023
76d4171
rework plus functionality
prusnak Nov 10, 2023
0ac601d
fix double paymentChecker and send amount
talvasconcelos Nov 10, 2023
4dae33f
in not total don't update stack
talvasconcelos Nov 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
103 changes: 69 additions & 34 deletions templates/tpos/tpos.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
{% extends "public.html" %} {% block toolbar_title %} {{ tpos.name }}

<q-btn
flat
dense
Expand All @@ -8,7 +7,6 @@
icon="share"
color="white"
></q-btn>

{% endblock %} {% block footer %}{% endblock %} {% block page_container %}
<q-page-container>
<q-page>
Expand All @@ -22,10 +20,13 @@
>
<div class="row justify-center full-width">
<div class="col-12 col-sm-8 col-md-6 col-lg-4 text-center">
<h3 class="q-mb-md">{% raw %}{{ amountFormatted }}{% endraw %}</h3>
<h5 class="q-mt-none q-mb-sm">
{% raw %}{{ fsat }}{% endraw %} <small>sat</small>
</h5>
<h3 class="q-mb-md">${ amountFormatted }</h3>
<h5 class="q-mt-none q-mb-sm">${ fsat }<small> sat</small></h5>
<div v-if="total > 0.0">
<h5>
<i>Total: ${totalFormatted}<br />${totalfsat} sat</i>
</h5>
</div>
</div>
</div>
</q-page-sticky>
Expand Down Expand Up @@ -116,12 +117,12 @@ <h5 class="q-mt-none q-mb-sm">
>
<q-btn
unelevated
@click="stack.splice(-1, 1)"
@click="total > 0.0 ? cancelAddAmount() : stack = []"
size="xl"
:outline="!($q.dark.isActive)"
rounded
color="primary"
>DEL</q-btn
color="negative"
>C</q-btn
>
<q-btn
unelevated
Expand All @@ -134,24 +135,33 @@ <h5 class="q-mt-none q-mb-sm">
>
<q-btn
unelevated
@click="stack = []"
@click="stack.pop()"
size="xl"
:outline="!($q.dark.isActive)"
rounded
color="primary"
color="warning"
class="btn-cancel"
>C</q-btn
>⬅</q-btn
>
<q-btn
unelevated
:disabled="amount == 0"
@click="submitForm()"
@click="addAmount()"
size="xl"
:outline="!($q.dark.isActive)"
rounded
color="primary"
class="btn-plus"
>+</q-btn
>
<q-btn
unelevated
@click="submitForm()"
size="xl"
:outline="!($q.dark.isActive)"
rounded
color="positive"
class="btn-confirm"
>OK</q-btn
>Ok</q-btn
>
</div>
</div>
Expand Down Expand Up @@ -198,17 +208,14 @@ <h5 class="q-mt-none q-mb-sm">
class="rounded-borders"
></qrcode>
</q-responsive>
<div class="text-center" v-show="!atmMode">
<h3 class="q-my-md">
{% raw %}{{ amountWithTipFormatted }}{% endraw %}
</h3>
<div class="text-center">
<h3 class="q-my-md">${ amountWithTipFormatted }</h3>
<h5 class="q-mt-none">
{% raw %}{{ fsat }}
<small>sat</small>
${ fsat }
<small> sat</small>
<span v-show="tip_options" style="font-size: 0.75rem"
>( + {{ tipAmountFormatted }} tip)</span
>( + ${ tipAmountFormatted } tip)</span
>
{% endraw %}
</h5>
<q-btn
outline
Expand All @@ -223,7 +230,7 @@ <h5 class="q-mt-none">
outline
color="grey"
@click="copyText(invoiceDialog.data.payment_request)"
>Copy</q-btn
>Copy invoice</q-btn
>
<q-btn v-close-popup flat color="grey" class="q-ml-auto">Close</q-btn>
</div>
Expand All @@ -246,7 +253,7 @@ <h5 class="q-mt-none">
color="primary"
v-for="tip in tip_options.filter(f => f != 'Round')"
:key="tip"
>{% raw %}{{ tip }}{% endraw %}%</q-btn
>${ tip }%</q-btn
>
<q-btn
style="padding: 10px; margin: 3px"
Expand Down Expand Up @@ -335,20 +342,18 @@ <h5 class="q-mt-none">
</q-item-section>
</q-item>
<q-item v-for="(payment, idx) in lastPaymentsDialog.data" :key="idx">
{%raw%}
<q-item-section>
<q-item-label class="text-bold"
>{{payment.amount / 1000}} sats</q-item-label
>${payment.amount / 1000} sats</q-item-label
>
<q-item-label caption lines="2"
>Hash: {{payment.checking_id.slice(0, 30)}}...</q-item-label
>Hash: ${payment.checking_id.slice(0, 30)}...</q-item-label
>
</q-item-section>
<q-item-section side top>
<q-item-label caption>{{payment.dateFrom}}</q-item-label>
<q-item-label caption>${payment.dateFrom}</q-item-label>
<q-icon name="check" color="green" />
</q-item-section>
{%endraw%}
</q-item>
</q-list>
</q-card>
Expand Down Expand Up @@ -392,14 +397,19 @@ <h5 class="q-mt-none">
grid-gap: 8px;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
min-height: 40vh;
}

.keypad .btn {
height: 100%;
min-height: 56px;
}

.keypad .btn-confirm {
grid-area: 1 / 4 / 5 / 4;
grid-area: 2 / 4 / 5 / 4;
}
.keypad .btn-plus {
grid-area: 1 / 4 / 2 / 4;
}
</style>
{% endblock %} {% block scripts %}
Expand All @@ -409,6 +419,7 @@ <h5 class="q-mt-none">
new Vue({
el: '#vue',
mixins: [windowMixin],
delimiters: ['${', '}'],
data: function () {
return {
tposId: '{{ tpos.id }}',
Expand Down Expand Up @@ -446,20 +457,24 @@ <h5 class="q-mt-none">
show: false
},
rounding: false,
isFullScreen: false
isFullScreen: false,
total: 0.0
}
},
computed: {
amount: function () {
if (!this.stack.length) return 0.0
return Number(this.stack.join('') / 100)
return this.stack.reduce((acc, dig) => acc * 10 + dig, 0) * 0.01
},
amountFormatted: function () {
return LNbits.utils.formatCurrency(
this.amount.toFixed(2),
this.currency
)
},
totalFormatted() {
return LNbits.utils.formatCurrency(this.total.toFixed(2), this.currency)
},
amountWithTipFormatted: function () {
return LNbits.utils.formatCurrency(
(this.amount + this.tipAmount).toFixed(2),
Expand All @@ -470,6 +485,10 @@ <h5 class="q-mt-none">
if (!this.exchangeRate) return 0
return Math.ceil(this.amount * this.exchangeRate)
},
totalSat: function () {
if (!this.exchangeRate) return 0
return Math.ceil(this.total * this.exchangeRate)
},
tipAmountSat: function () {
if (!this.exchangeRate) return 0
return Math.ceil(this.tipAmount * this.exchangeRate)
Expand All @@ -480,6 +499,9 @@ <h5 class="q-mt-none">
fsat: function () {
return LNbits.utils.formatSat(this.sat)
},
totalfsat: function () {
return LNbits.utils.formatSat(this.totalSat)
},
isRoundValid() {
return this.tipRounding > this.amount
},
Expand All @@ -506,6 +528,14 @@ <h5 class="q-mt-none">
}
},
methods: {
addAmount() {
this.total = +(this.total + this.amount).toFixed(2)
this.stack = []
},
cancelAddAmount() {
this.total = 0.0
this.stack = []
},
atm() {
if (this.withdrawamtposs > 0) {
this.atmBox = true
Expand Down Expand Up @@ -612,6 +642,11 @@ <h5 class="q-mt-none">
this.showInvoice()
},
submitForm: function () {
if (this.total != 0.0) {
this.stack = Array.from(String(this.total * 100), Number)
this.total = 0.0
}

if (this.tip_options && this.tip_options.length) {
this.rounding = false
this.tipRounding = null
Expand Down Expand Up @@ -803,7 +838,7 @@ <h5 class="q-mt-none">
this.isFullScreen = document.fullscreenElement
})
})
.catch(err => console.debug(err))
.catch(err => console.log(err))
}
},
created: function () {
Expand Down