Merge pull request #1341 from lnbits/exampleupdate

Adds some more examples to the example extension

docs/devs/extensions.md

@@ -28,7 +28,9 @@ Going over the example extension's structure:
 Adding new dependencies
 -----------------------
 
-If for some reason your extensions needs a new python package to work, you can add a new package using `venv`, or `poerty`:
+DO NOT ADD NEW DEPENDENCIES. Try to use the dependencies that are availabe in `pyproject.toml`. Getting the LNbits project to accept a new dependency is time consuming and uncertain, and may result in your extension NOT being made available to others. 
+
+If for some reason your extensions must have a new python package to work, and its nees are not met in `pyproject.toml`, you can add a new package using `venv`, or `poerty`:
 
 ```sh
 $ poetry add <package>
@@ -37,8 +39,7 @@ $ ./venv/bin/pip install <package>
 ```
 
 **But we need an extra step to make sure LNbits doesn't break in production.**
-Dependencies need to be added to `pyproject.toml` and `requirements.txt`, then tested by running on `venv` and `poetry`.
+Dependencies need to be added to `pyproject.toml` and `requirements.txt`, then tested by running on `venv` and `poetry` compatability can be tested with `nix build .#checks.x86_64-linux.vmTest`.
-`nix` compatability can be tested with `nix build .#checks.x86_64-linux.vmTest`.
 
 
 SQLite to PostgreSQL migration

lnbits/extensions/example/templates/example/index.html

@@ -51,8 +51,15 @@
 <q-card flat>
   <q-card-section>
     <div class="text-h5 q-mb-md">
-      {{SITE_TITLE}} Extension Development Guide
+      Extension Development Guide
-      <small>(Collection of resources for extension developers)</small>
+      <small
+        >(also check the
+        <a
+          class="text-primary"
+          href="http://docs.lnbits.org/devs/development.html"
+          >docs</a
+        >)</small
+      >
     </div>
 
     <q-card unelevated flat>
@@ -188,8 +195,8 @@
                   <p>
                     LNbits uses
                     <a href="https://vuejs.org/" class="text-primary">Vue</a>
-                    components for best-in-class high-performance and responsive
+                    for best-in-class, responsive and high-performance
-                    performance.
+                    components.
                   </p>
 
                   <p>Typical example of Vue components in a frontend script:</p>
@@ -199,8 +206,7 @@
                   /><br /><br />
 
                   <p>
-                    In a page body, models can be called. <br />Content can be
+                    Content can be conditionally rendered using Vue's
-                    conditionally rendered using Vue's
                     <code class="bg-grey-3 text-black">v-if</code>:
                   </p>
                   <img
@@ -220,6 +226,8 @@
               <q-tabs v-model="usefultab" align="left">
                 <q-tab name="magicalg">MAGICAL G</q-tab>
                 <q-tab name="exchange">EXCHANGE RATES</q-tab>
+                <q-tab name="qrcodes">QR CODES</q-tab>
+                <q-tab name="websockets">WEBSOCKETS</q-tab>
               </q-tabs>
             </template>
 
@@ -255,6 +263,85 @@
                   >:<br />
                   <img src="./static/conversion-example2.png" />
                 </q-tab-panel>
+                <q-tab-panel name="qrcodes" class="text-body1">
+                  <div class="text-h5 q-mb-md">QR Codes</div>
+                  <p>
+                    For most purposes use Quasar's inbuilt VueQrcode library:
+                  </p>
+                  <img src="./static/qrcode-example1.png" />
+                  <p>
+                    LNbits does also include a handy
+                    <a
+                      href="../docs#/default/img_api_v1_qrcode__data__get"
+                      class="text-primary"
+                    >
+                      QR code enpoint</a
+                    >
+                  </p>
+                  {% raw %} You can use via
+                  <a
+                    href="/api/v1/qrcode/some-data-you-want-in-a-qrcode"
+                    class="text-primary"
+                    >{{protocol + location}}{% endraw
+                    %}/api/v1/qrcode/some-data-you-want-in-a-qrcode:</a
+                  ><br />
+                  <br />
+                  <img src="./static/qrcode-example.png" />
+                  <br />
+                  <img
+                    class="bg-white"
+                    width="300px"
+                    src="/api/v1/qrcode/some-data-you-want-in-a-qrcode"
+                  />
+
+                  <br />
+                </q-tab-panel>
+
+                <q-tab-panel name="websockets" class="text-body1">
+                  <div class="text-h5 q-mb-md">Websockets</div>
+                  <p>
+                    Fastapi includes a great
+                    <a
+                      class="text-primary"
+                      href="https://fastapi.tiangolo.com/advanced/websockets/#websockets-client"
+                      >websocket tool</a
+                    >
+                  </p>
+                  {% raw %}
+                  <p>
+                    A few LNbits extensions also make use of a weird and useful
+                    websocket/GET tool built into LNbits, such as extensions
+                    Copilot and LNURLDevices<br />
+                    You can subscribe to websocket with
+                    <code class="bg-grey-3 text-black"
+                      >wss:{{location}}/api/v1/ws/{SOME-ID}</code
+                    ><br />
+                    You can post to any clients subscribed to the endpoint with
+                    <code class="bg-grey-3 text-black"
+                      >{{protocol +
+                      location}}/api/v1/ws/{SOME-ID}/{THE-DATA-YOU-WANT-TO-POST}</code
+                    ><br />
+                    <br />
+                    <strong
+                      ><div id="text-to-change">
+                        DEMO: Hit
+                        <a
+                          target="_blank"
+                          href="/api/v1/ws/32872r23g29/blah%20blah%20blah"
+                          class="text-primary"
+                          >{{protocol +
+                          location}}/api/v1/ws/32872r23g29/blah%20blah%20blah</a
+                        >
+                        in a different browser window to change this text to
+                        `blah blah blah`.
+                      </div></strong
+                    >
+                    <br />
+                    Function used in this demo:<br />
+                    <img src="./static/websocket-example.png" /></p
+                ></q-tab-panel>
+
+                {% endraw %}
               </q-tab-panels>
             </template>
           </div>
@@ -296,6 +383,8 @@
     data: function () {
       return {
         ///// Declare models/variables /////
+        protocol: window.location.protocol,
+        location: '//' + window.location.hostname,
         thingDialog: {
           show: false,
           data: {}
@@ -310,7 +399,7 @@
     },
     ///// Where functions live /////
     methods: {
-      exampleFunction(data) {
+      exampleFunction: function (data) {
         var theData = data
         LNbits.api
           .request(
@@ -325,6 +414,28 @@
             LNbits.utils.notifyApiError(error) // Error will be passed to the frontend
           })
       },
+      initWs: async function () {
+        if (location.protocol !== 'http:') {
+          localUrl =
+            'wss://' +
+            document.domain +
+            ':' +
+            location.port +
+            '/api/v1/ws/32872r23g29'
+        } else {
+          localUrl =
+            'ws://' +
+            document.domain +
+            ':' +
+            location.port +
+            '/api/v1/ws/32872r23g29'
+        }
+        this.ws = new WebSocket(localUrl)
+        this.ws.addEventListener('message', async ({data}) => {
+          const res = data.toString()
+          document.getElementById('text-to-change').innerHTML = res
+        })
+      },
       sendThingDialog() {
         console.log(this.thingDialog)
       }
@@ -333,6 +444,7 @@
     created: function () {
       self = this // Often used to run a real object, rather than the event (all a bit confusing really)
       self.exampleFunction('lorum')
+      self.initWs()
     }
   })
 </script>