From 8042dc51b30d76580b8c0b7a944491ba81cc012c Mon Sep 17 00:00:00 2001
From: benarc <ben@arc.wales>
Date: Wed, 20 Apr 2022 11:16:00 +0100
Subject: [PATCH] prettier tpos

---
 .../extensions/tpos/templates/tpos/tpos.html  | 523 +++++++++++-------
 1 file changed, 332 insertions(+), 191 deletions(-)

diff --git a/lnbits/extensions/tpos/templates/tpos/tpos.html b/lnbits/extensions/tpos/templates/tpos/tpos.html
index d14449895..49d88140f 100644
--- a/lnbits/extensions/tpos/templates/tpos/tpos.html
+++ b/lnbits/extensions/tpos/templates/tpos/tpos.html
@@ -1,207 +1,348 @@
-{% extends "public.html" %} {% block toolbar_title %}{{ tpos.name }}{% endblock %} {% block footer %}{% endblock %} {% block page_container %}
+{% extends "public.html" %} {% block toolbar_title %}{{ tpos.name }}{% endblock
+%} {% block footer %}{% endblock %} {% block page_container %}
 <q-page-container>
-    <q-page>
-        <q-page-sticky v-if="exchangeRate" expand position="top">
-            <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 %}{{ famount }}{% endraw %}</h3>
-                    <h5 class="q-mt-none">
-                        {% raw %}{{ fsat }}{% endraw %} <small>sat</small>
-                    </h5>
-                </div>
-            </div>
-        </q-page-sticky>
-        <q-page-sticky expand position="bottom">
-            <div class="row justify-center full-width">
-                <div class="col-12 col-sm-8 col-md-6 col-lg-4">
-                    <div class="keypad q-pa-sm">
-                        <q-btn unelevated @click="stack.push(1)" size="xl" :outline="!($q.dark.isActive)" rounded color="primary">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 = []" size="xl" :outline="!($q.dark.isActive)" rounded color="primary" class="btn-cancel">C</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(6)" size="xl" :outline="!($q.dark.isActive)" rounded color="primary">6</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 unelevated @click="stack.push(9)" size="xl" :outline="!($q.dark.isActive)" rounded color="primary">9</q-btn>
-                        <q-btn unelevated :disabled="amount == 0" @click="showInvoice()" size="xl" :outline="!($q.dark.isActive)" rounded color="primary" class="btn-confirm">OK</q-btn>
-                        <q-btn unelevated @click="stack.splice(-1, 1)" size="xl" :outline="!($q.dark.isActive)" rounded color="primary">DEL</q-btn>
-                        <q-btn unelevated @click="stack.push(0)" size="xl" :outline="!($q.dark.isActive)" rounded color="primary">0</q-btn>
-                        <q-btn unelevated @click="urlDialog.show = true" size="xl" :outline="!($q.dark.isActive)" rounded color="primary">#</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-page>
+    <q-page-sticky v-if="exchangeRate" expand position="top">
+      <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 %}{{ famount }}{% endraw %}</h3>
+          <h5 class="q-mt-none">
+            {% raw %}{{ fsat }}{% endraw %} <small>sat</small>
+          </h5>
+        </div>
+      </div>
+    </q-page-sticky>
+    <q-page-sticky expand position="bottom">
+      <div class="row justify-center full-width">
+        <div class="col-12 col-sm-8 col-md-6 col-lg-4">
+          <div class="keypad q-pa-sm">
+            <q-btn
+              unelevated
+              @click="stack.push(1)"
+              size="xl"
+              :outline="!($q.dark.isActive)"
+              rounded
+              color="primary"
+              >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 = []"
+              size="xl"
+              :outline="!($q.dark.isActive)"
+              rounded
+              color="primary"
+              class="btn-cancel"
+              >C</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(6)"
+              size="xl"
+              :outline="!($q.dark.isActive)"
+              rounded
+              color="primary"
+              >6</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
+              unelevated
+              @click="stack.push(9)"
+              size="xl"
+              :outline="!($q.dark.isActive)"
+              rounded
+              color="primary"
+              >9</q-btn
+            >
+            <q-btn
+              unelevated
+              :disabled="amount == 0"
+              @click="showInvoice()"
+              size="xl"
+              :outline="!($q.dark.isActive)"
+              rounded
+              color="primary"
+              class="btn-confirm"
+              >OK</q-btn
+            >
+            <q-btn
+              unelevated
+              @click="stack.splice(-1, 1)"
+              size="xl"
+              :outline="!($q.dark.isActive)"
+              rounded
+              color="primary"
+              >DEL</q-btn
+            >
+            <q-btn
+              unelevated
+              @click="stack.push(0)"
+              size="xl"
+              :outline="!($q.dark.isActive)"
+              rounded
+              color="primary"
+              >0</q-btn
+            >
+            <q-btn
+              unelevated
+              @click="urlDialog.show = true"
+              size="xl"
+              :outline="!($q.dark.isActive)"
+              rounded
+              color="primary"
+              >#</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-icon name="check" transition-show="fade" class="text-light-green" style="font-size: 40em"></q-icon>
-        </q-dialog>
-    </q-page>
+    <q-dialog v-model="complete.show" position="top">
+      <q-icon
+        name="check"
+        transition-show="fade"
+        class="text-light-green"
+        style="font-size: 40em"
+      ></q-icon>
+    </q-dialog>
+  </q-page>
 </q-page-container>
 {% endblock %} {% block styles %}
 <style>
-    .keypad {
-        display: grid;
-        grid-gap: 8px;
-        grid-template-columns: repeat(4, 1fr);
-        grid-template-rows: repeat(4, 1fr);
-    }
-    
-    .keypad .btn {
-        height: 100%;
-    }
-    
-    .btn-cancel,
-    .btn-confirm {
-        grid-row: auto/span 2;
-    }
+  .keypad {
+    display: grid;
+    grid-gap: 8px;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: repeat(4, 1fr);
+  }
+
+  .keypad .btn {
+    height: 100%;
+  }
+
+  .btn-cancel,
+  .btn-confirm {
+    grid-row: auto/span 2;
+  }
 </style>
 {% endblock %} {% block scripts %}
 <script>
-    Vue.component(VueQrcode.name, VueQrcode)
+  Vue.component(VueQrcode.name, VueQrcode)
 
-    new Vue({
-        el: '#vue',
-        mixins: [windowMixin],
-        data: function() {
-            return {
-                tposId: '{{ tpos.id }}',
-                currency: '{{ tpos.currency }}',
-                exchangeRate: null,
-                stack: [],
-                invoiceDialog: {
-                    show: false,
-                    data: null,
-                    dismissMsg: null,
-                    paymentChecker: null
-                },
-                urlDialog: {
-                    show: false
-                },
-                complete: {
-                    show: false
-                }
-            }
+  new Vue({
+    el: '#vue',
+    mixins: [windowMixin],
+    data: function () {
+      return {
+        tposId: '{{ tpos.id }}',
+        currency: '{{ tpos.currency }}',
+        exchangeRate: null,
+        stack: [],
+        invoiceDialog: {
+          show: false,
+          data: null,
+          dismissMsg: null,
+          paymentChecker: null
         },
-        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)
-            }
+        urlDialog: {
+          show: false
         },
-        methods: {
-            closeInvoiceDialog: function() {
-                this.stack = []
-                var dialog = this.invoiceDialog
-                setTimeout(function() {
+        complete: {
+          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) {
+            dialog.data = response.data
+            dialog.show = true
+
+            dialog.dismissMsg = self.$q.notify({
+              timeout: 0,
+              message: 'Waiting for payment...'
+            })
+
+            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()
-                }, 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
+                    dialog.show = false
 
-                        dialog.dismissMsg = self.$q.notify({
-                            timeout: 0,
-                            message: 'Waiting for payment...'
-                        })
-
-                        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]
+                    self.complete.show = true
+                    setTimeout(function () {
+                      self.complete.show = false
+                    }, 5000)
+                  }
                 })
-            }
-        },
-        created: function() {
-            var getRates = this.getRates
-            getRates()
-            setInterval(function() {
-                getRates()
-            }, 20000)
-        }
-    })
+            }, 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]
+        })
+      }
+    },
+    created: function () {
+      var getRates = this.getRates
+      getRates()
+      setInterval(function () {
+        getRates()
+      }, 20000)
+    }
+  })
 </script>
-{% endblock %}
\ No newline at end of file
+{% endblock %}