Added tabs

lnbits/extensions/example/crud.py

@@ -0,0 +1,5 @@
+# crud.py is for communication with your extensions database
+
+# add your dependencies here
+
+# add your fnctions here

lnbits/extensions/example/migrations.py

@@ -1,3 +1,5 @@
+# migrations.py is for building your database
+
 # async def m001_initial(db):
 #    await db.execute(
 #        f"""

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

@@ -1,58 +1,212 @@
 {% extends "base.html" %} {% from "macros.jinja" import window_vars with context
 %} {% block page %}
-<q-card>
+
+<q-dialog v-model="thingDialog.show" position="top">
+  <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
+    <q-form @submit="sendThingDialog" class="q-gutter-md">
+      <q-input filled dense v-model.trim="thingDialog.data.name" type="text" label="Name *"></q-input>
+      <q-input filled dense v-model.trim="thingDialog.data.email" type="email" label="Name *"></q-input>
+      <q-select filled dense emit-value v-model="thingDialog.data.wallet" :options="g.user.walletOptions" label="Wallet *"></q-select>
+      <div class="row q-mt-lg">
+        <q-btn v-if="thingDialog.data.id" unelevated color="primary" type="submit">Update thing</q-btn>
+        <q-btn v-else unelevated color="primary" :disable="thingDialog.data.name == null" type="submit">Create thing</q-btn>
+        <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
+      </div>
+    </q-form>
+  </q-card>
+</q-dialog>
+
+<q-card flat>
   <q-card-section>
-    <h5 class="text-subtitle1 q-mt-none q-mb-md">
-      Frameworks used by {{SITE_TITLE}}
-    </h5>
-    <q-list>
-      <q-item
-        v-for="tool in tools"
-        :key="tool.name"
-        tag="a"
-        :href="tool.url"
-        target="_blank"
+    <div class="text-h5 q-mb-md">
+      {{SITE_TITLE}} Extension Development Guide
+    </div>
+
+    <q-card unelevated flat>
+      <q-tabs
+        v-model="tab"
+        dense
+        class="text-grey"
+        active-color="primary"
+        indicator-color="primary"
+        align="justify"
+        narrow-indicator
       >
-        {% raw %}
-        <!-- with raw Flask won't try to interpret the Vue moustaches -->
-        <q-item-section>
-          <q-item-label>{{ tool.name }}</q-item-label>
-          <q-item-label caption>{{ tool.language }}</q-item-label>
-        </q-item-section>
-        {% endraw %}
-      </q-item>
-    </q-list>
-    <q-separator class="q-my-lg"></q-separator>
-    <p>
-      A magical "g" is always available, with info about the user, wallets and
-      extensions:
-    </p>
-    <code class="text-caption">{% raw %}{{ g }}{% endraw %}</code>
+        <q-tab name="frameworks" label="Frameworks" ></q-tab>
+        <q-tab name="tools" label="Useful Tools" ></q-tab>
+        <q-tab name="structure" label="File Structure" ></q-tab>
+        <q-tab name="enviroment" label="Dev Enviroment" ></q-tab>
+      </q-tabs>
+
+      <q-separator></q-separator>
+
+      <q-tab-panels v-model="tab">
+        <q-tab-panel name="frameworks">
+          <div class="text-h6">Frameworks</div>
+
+          <div>
+            <q-splitter
+              v-model="splitterModel"
+            >
+        
+              <template v-slot:before>
+                <q-tabs
+                  v-model="framworktab"
+                  vertical
+                >
+                  <q-tab name="fastapi"><img src="./static/fastapi-framework.png">FASTAPI</q-tab>
+                  <q-tab name="quasar"><img src="./static/quasar-framework.png">QUASAR</q-tab>
+                  <q-tab name="vuejs"><img src="./static/vuejs-framework.png">VUE-JS</q-tab>
+                </q-tabs>
+              </template>
+        
+              <template v-slot:after>
+                <q-tab-panels
+                  v-model="framworktab"
+                >
+                <q-tab-panel name="fastapi" class="text-body1">
+                <img src="./static/fastapilogo.png">
+                  <p>LNbits API is built using FastAPI, a high-performance, easy to code API framework.<br/><br/>
+                  FastAPI auto-generates swagger UI docs for testing endpoints <a class="text-primary" href="../docs">/docs</a></p>
+                  
+                </q-tab-panel>
+                
+                  <q-tab-panel name="quasar" class="text-body1">
+                    <img src="./static/quasarlogo.png">
+                    <p>LNbits uses Quasar for frontend deisgn elements. Quasar Framework is an open-source Vue.js based framework for building apps.</p>
+
+                    <p class="text-weight-bold">TIP: Look through <code>/template</code> files in other extensions for examples.</p>
+
+                    <p>In the below example we make a dialogue popup box (box can be triggered <q-btn size="sm" color="primary" @click="thingDialog.show = true">here</q-btn>):
+                    <q-tooltip>Exmple of a tooltip!</q-tooltip></p>
+                    <img src="./static/quasar-example.png"><br/><br/>
+                    <div class="text-h6">Useful links:</div>
+                    <q-btn color="primary" type="a" href="https://quasar.dev/style/">Style (typography, spacing, etc)</q-btn>
+                    <q-btn color="primary" type="a" href="https://quasar.dev/vue-components/">Genral components (cards, buttons, popup dialogs, etc)</q-btn>
+                    <q-btn color="primary" type="a" href="https://quasar.dev/layout/grid">Layouts (rows/columns, flexbox)</q-btn>
+                  
+                  </q-tab-panel>
+        
+                  <q-tab-panel v-if="someBool == true" name="vuejs" class="text-body1">
+                    <img src="./static/vuejslogo.png">
+                    <p>Quasar is built on Vue-JS, so LNbits uses Vue-JS for rendering page elements, organising JS functions and declaring modles and elements.</p>
+                    <p><code>v-if</code> can be used to render elements:</p>
+                    <img src="./static/vif-example.png" style="max-width:800px">
+                    <p>Typical example of a frontend page JS:</p>
+                    <img src="./static/script-example.png" style="max-width:800px">
+                  </q-tab-panel>
+                </q-tab-panels>
+              </template>
+            </q-splitter>
+          </div>
+        </q-tab-panel>
+
+        <!--FILE STRUCTURE-->
+
+        <q-tab-panel name="structure">
+          <div class="text-h6">File Structure</div>
+          Coming soon...
+        </q-tab-panel>
+
+        <q-tab-panel name="enviroment">
+          <div class="text-h6">Dev Enviroment</div>
+          Coming soon...
+        </q-tab-panel>
+
+        <q-tab-panel name="tools">
+          <div class="text-h6">Useful Tools</div>
+          <div>
+            <q-splitter
+              v-model="splitterModel"
+            >
+        
+              <template v-slot:before>
+                <q-tabs
+                  v-model="usefultab"
+                  vertical
+                >
+                  <q-tab name="magicalg">MAGICAL G</q-tab>
+                  <q-tab name="conversion">CONVERSION</q-tab>
+                </q-tabs>
+              </template>
+        
+              <template v-slot:after>
+                <q-tab-panels
+                  v-model="usefultab"
+                >
+                  <q-tab-panel name="magicalg" class="text-body1">
+                    <div class="text-h5 q-mb-md">Magical G</div>
+                    <p>
+                      A magical "g" (ie <code>this.g.user.wallets[0].inkey</code>) is always available, with info about the user, wallets and
+                      extensions:
+                    </p>
+                    <code class="text-caption">{% raw %}{{ g }}{% endraw %}</code>
+                  </q-tab-panel>
+                </q-tab-panels>
+              </template>
+        
+            </q-splitter>
+          </div>
+        </q-tab-panel>
+      </q-tab-panels>
+    </q-card>
   </q-card-section>
 </q-card>
 {% endblock %} {% block scripts %} {{ window_vars(user) }}
+
 <script>
+var someMapObject = obj => {
+  obj._data = _.clone(obj)
+  obj.date = Quasar.utils.date.formatDate(
+    new Date(obj.time * 1000),
+    'YYYY-MM-DD HH:mm'
+  )
+  // here you can do something with the mapped data
+  return obj
+}
   new Vue({
     el: '#vue',
     mixins: [windowMixin],
     data: function () {
       return {
-        tools: []
+        ///// Declare models/variables /////
+        thingDialog:{
+          show: false,
+          data: {}
+        },
+        someBool: true,
+        splitterModel: 20, 
+        exampleData: [],
+        tab: "frameworks",
+        framworktab: "fastapi",
+        usefultab: "magicalg"
       }
     },
+    ///// Where functions live /////
+    methods: { 
+      exampleFunction(data){
+        var theData = data
+        LNbits.api
+          .request(
+            'GET', // Type of request
+            '/example/api/v1/test/'+ theData, // URL of the endpoint
+            this.g.user.wallets[0].inkey // Often endpoints require a key
+          )
+          .then(response => {
+            this.exampleData = response.data.map(someMapObject) // Often whats returned is mapped onto some model
+          })
+          .catch(error => {
+            LNbits.utils.notifyApiError(error) // Error will be passed to the frontend
+          })
+      },
+      sendThingDialog(){
+        console.log(this.thingDialog)
+      }
+    },
+    ///// To run on startup /////
     created: function () {
-      var self = this
-
-      // axios is available for making requests
-      axios({
-        method: 'GET',
-        url: '/example/api/v1/tools',
-        headers: {
-          'X-example-header': 'not-used'
-        }
-      }).then(function (response) {
-        self.tools = response.data
-      })
+      self = this // Often used to run a real object, rather than the event (all a bit confusing really)
+      self.exampleFunction("lorum")
     }
   })
 </script>

lnbits/extensions/example/views_api.py

@@ -2,34 +2,11 @@
 
 # add your dependencies here
 
-# import httpx
-# (use httpx just like requests, except instead of response.ok there's only the
-#  response.is_error that is its inverse)
-
 from . import example_ext
 
 # add your endpoints here
 
-
-@example_ext.get("/api/v1/tools")
-async def api_example():
-    """Try to add descriptions for others."""
-    tools = [
-        {
-            "name": "fastAPI",
-            "url": "https://fastapi.tiangolo.com/",
-            "language": "Python",
-        },
-        {
-            "name": "Vue.js",
-            "url": "https://vuejs.org/",
-            "language": "JavaScript",
-        },
-        {
-            "name": "Quasar Framework",
-            "url": "https://quasar.dev/",
-            "language": "JavaScript",
-        },
-    ]
-
-    return tools
+@example_ext.get("/api/v1/test/{test_data}")
+async def api_example(test_data):
+    # Do some python things and return the data
+    return test_data