From 1874d7fd5488e9dbd12cc5fcf7694ff2185b7de4 Mon Sep 17 00:00:00 2001
From: benarc <ben@arc.wales>
Date: Wed, 20 Apr 2022 10:42:55 +0100
Subject: [PATCH] TPoS now theme dependent

---
 .../extensions/tpos/templates/tpos/tpos.html  | 455 ++++++++----------
 1 file changed, 192 insertions(+), 263 deletions(-)

diff --git a/lnbits/extensions/tpos/templates/tpos/tpos.html b/lnbits/extensions/tpos/templates/tpos/tpos.html
index d05fab4e..d1444989 100644
--- a/lnbits/extensions/tpos/templates/tpos/tpos.html
+++ b/lnbits/extensions/tpos/templates/tpos/tpos.html
@@ -1,278 +1,207 @@
-{% 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" color="grey-8"
-              >1</q-btn
-            >
-            <q-btn unelevated @click="stack.push(2)" size="xl" color="grey-8"
-              >2</q-btn
-            >
-            <q-btn unelevated @click="stack.push(3)" size="xl" color="grey-8"
-              >3</q-btn
-            >
-            <q-btn
-              unelevated
-              @click="stack = []"
-              size="xl"
-              color="pink"
-              class="btn-cancel"
-              >C</q-btn
-            >
-            <q-btn unelevated @click="stack.push(4)" size="xl" color="grey-8"
-              >4</q-btn
-            >
-            <q-btn unelevated @click="stack.push(5)" size="xl" color="grey-8"
-              >5</q-btn
-            >
-            <q-btn unelevated @click="stack.push(6)" size="xl" color="grey-8"
-              >6</q-btn
-            >
-            <q-btn unelevated @click="stack.push(7)" size="xl" color="grey-8"
-              >7</q-btn
-            >
-            <q-btn unelevated @click="stack.push(8)" size="xl" color="grey-8"
-              >8</q-btn
-            >
-            <q-btn unelevated @click="stack.push(9)" size="xl" color="grey-8"
-              >9</q-btn
-            >
-            <q-btn
-              unelevated
-              :disabled="amount == 0"
-              @click="showInvoice()"
-              size="xl"
-              color="green"
-              class="btn-confirm"
-              >OK</q-btn
-            >
-            <q-btn
-              unelevated
-              @click="stack.splice(-1, 1)"
-              size="xl"
-              color="grey-7"
-              >DEL</q-btn
-            >
-            <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-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
-        }
-      }
-    },
-    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
+    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
+                }
             }
-          })
-          .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) {
+        },
+        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()
-                    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
-                    setTimeout(function () {
-                      self.complete.show = false
-                    }, 5000)
-                  }
+                        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]
                 })
-            }, 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)
-    }
-  })
+            }
+        },
+        created: function() {
+            var getRates = this.getRates
+            getRates()
+            setInterval(function() {
+                getRates()
+            }, 20000)
+        }
+    })
 </script>
-{% endblock %}
+{% endblock %}
\ No newline at end of file