feat: basic use of custom components

lnbits/extensions/watchonly/static/js/components/my-checkbox/my-checkbox.html

@@ -0,0 +1,5 @@
+<div class="checkbox-wrapper" @click="check">
+    <div :class="{ checkbox: true, checked: checked }"></div>
+    <div class="title">{{ title }}</div>
+    <q-btn color="primary">XXX</q-btn>
+</div>

lnbits/extensions/watchonly/static/js/components/my-checkbox/my-checkbox.js

@@ -0,0 +1,18 @@
+async function initMyCheckbox(path) {
+    const t = await loadTemplateAsync(path)
+    Vue.component('my-checkbox', {
+        name:'my-checkbox',
+        template: t,
+        data() {
+            return { checked: false, title: 'Check me' }
+        },
+        methods: {
+            check() {
+                this.checked = !this.checked;
+                console.log('### checked', this.checked)
+            }
+        }
+    });
+}
+
+

lnbits/extensions/watchonly/static/js/utils.js

@@ -139,3 +139,23 @@ const readFromSerialPort = serial => {
   }
   return readStringUntil
 }
+
+function loadTemplateAsync(path) {
+  const result = new Promise(resolve => {
+    const xhttp = new XMLHttpRequest()
+    console.log('### 300')
+
+    xhttp.onreadystatechange = function () {
+      if (this.readyState == 4) {
+        if (this.status == 200) resolve(this.responseText)
+
+        if (this.status == 404) resolve('Page not found.')
+      }
+    }
+
+    xhttp.open('GET', path, true)
+    xhttp.send()
+  })
+
+  return result
+}

lnbits/extensions/watchonly/templates/watchonly/index.html

@@ -31,7 +31,9 @@
             </q-btn>
           </div>
 
-          <div class="col-auto q-pr-lg"></div>
+          <div class="col-auto q-pr-lg">
+            <my-checkbox></my-checkbox>
+          </div>
           <div class="col-auto q-pl-lg">
             <q-input
               borderless
@@ -1710,5 +1712,6 @@
 <script src="{{ url_for('watchonly_static', path='js/tables.js') }}"></script>
 <script src="{{ url_for('watchonly_static', path='js/map.js') }}"></script>
 <script src="{{ url_for('watchonly_static', path='js/utils.js') }}"></script>
+<script src="{{ url_for('watchonly_static', path='js/components/my-checkbox/my-checkbox.js') }}"></script>
 <script src="{{ url_for('watchonly_static', path='js/index.js') }}"></script>
 {% endblock %}