added confetti

2024-01-19 17:40:43 +00:00 · 2024-01-19 17:40:43 +00:00 · d90babebc8
commit d90babebc8
parent 1735cc0d66
15 changed files with 177 additions and 135 deletions
--- a/templates/myextension/_api_docs.html
+++ b/templates/myextension/_api_docs.html
@ -4,76 +4,5 @@
  label="API info"
  :content-inset-level="0.5"
 >
-  <q-btn flat label="Swagger API" type="a" href="../docs#/myextension"></q-btn>
-  <q-expansion-item group="api" dense expand-separator label="List MyExtension">
-    <q-card>
-      <q-card-section>
-        <code><span class="text-blue">GET</span> /myextension/api/v1/temps</code>
-        <h5 class="text-caption q-mt-sm q-mb-none">Headers</h5>
-        <code>{"X-Api-Key": &lt;invoice_key&gt;}</code><br />
-        <h5 class="text-caption q-mt-sm q-mb-none">Body (application/json)</h5>
-        <h5 class="text-caption q-mt-sm q-mb-none">
-          Returns 200 OK (application/json)
-        </h5>
-        <code>[&lt;temp_object&gt;, ...]</code>
-        <h5 class="text-caption q-mt-sm q-mb-none">Curl example</h5>
-        <code
-          >curl -X GET {{ request.base_url }}myextension/api/v1/temps -H "X-Api-Key:
-          &lt;invoice_key&gt;"
-        </code>
-      </q-card-section>
-    </q-card>
-  </q-expansion-item>
-  <q-expansion-item group="api" dense expand-separator label="Create a MyExtension">
-    <q-card>
-      <q-card-section>
-        <code><span class="text-green">POST</span> /myextension/api/v1/temps</code>
-        <h5 class="text-caption q-mt-sm q-mb-none">Headers</h5>
-        <code>{"X-Api-Key": &lt;invoice_key&gt;}</code><br />
-        <h5 class="text-caption q-mt-sm q-mb-none">Body (application/json)</h5>
-        <code
-          >{"name": &lt;string&gt;, "currency": &lt;string*ie USD*&gt;}</code
-        >
-        <h5 class="text-caption q-mt-sm q-mb-none">
-          Returns 201 CREATED (application/json)
-        </h5>
-        <code
-          >{"currency": &lt;string&gt;, "id": &lt;string&gt;, "name":
-          &lt;string&gt;, "wallet": &lt;string&gt;}</code
-        >
-        <h5 class="text-caption q-mt-sm q-mb-none">Curl example</h5>
-        <code
-          >curl -X POST {{ request.base_url }}myextension/api/v1/temps -d '{"name":
-          &lt;string&gt;, "currency": &lt;string&gt;}' -H "Content-type:
-          application/json" -H "X-Api-Key: &lt;admin_key&gt;"
-        </code>
-      </q-card-section>
-    </q-card>
-  </q-expansion-item>
-
-  <q-expansion-item
-    group="api"
-    dense
-    expand-separator
-    label="Delete a MyExtension"
-    class="q-pb-md"
-  >
-    <q-card>
-      <q-card-section>
-        <code
-          ><span class="text-pink">DELETE</span>
-          /myextension/api/v1/temps/&lt;myextension_id&gt;</code
-        >
-        <h5 class="text-caption q-mt-sm q-mb-none">Headers</h5>
-        <code>{"X-Api-Key": &lt;admin_key&gt;}</code><br />
-        <h5 class="text-caption q-mt-sm q-mb-none">Returns 204 NO CONTENT</h5>
-        <code></code>
-        <h5 class="text-caption q-mt-sm q-mb-none">Curl example</h5>
-        <code
-          >curl -X DELETE {{ request.base_url
-          }}myextension/api/v1/temps/&lt;myextension_id&gt; -H "X-Api-Key: &lt;admin_key&gt;"
-        </code>
-      </q-card-section>
-    </q-card>
-  </q-expansion-item>
+  <q-btn flat label="Swagger API" type="a" href="../docs#/MyExtension"></q-btn>
 </q-expansion-item>
--- a/templates/myextension/_myextension.html
+++ b/templates/myextension/_myextension.html
@ -1,11 +1,11 @@
-<q-expansion-item group="extras" icon="info" label="About MyExtension">
+<q-expansion-item group="extras" icon="info" label="More info">
  <q-card>
    <q-card-section>
      <p>
-        MyExtension extension is a basic extension that you can use to get started building your own extension
+        Some more info about my excellent extension.
      </p>
      <small
-        >Created by
+        >Created by   
        <a
          class="text-secondary"
          href="https://github.com/benarc"
@ -13,6 +13,15 @@
          >Ben Arc</a
        >.</small
      >
+      <small
+        >Repo  
+        <a
+          class="text-secondary"
+          href="https://github.com/lnbits/myextension"
+          target="_blank"
+          >MyExtension</a
+        >.</small
+      >
    </q-card-section>
  </q-card>
 </q-expansion-item>
--- a/templates/myextension/index.html
+++ b/templates/myextension/index.html
@ -1,6 +1,6 @@
 {% extends "base.html" %} {% from "macros.jinja" import window_vars with context
 %} {% block page %}
-<div class="row q-col-gutter-md">
+<div class="row q-col-gutter-md" id="makeItRain">
  <div class="col-12 col-md-8 col-lg-7 q-gutter-y-md">
    <q-card>
      <q-card-section>
@ -67,7 +67,32 @@
            target="_blank"
            ><q-tooltip>Open public page</q-tooltip></q-btn
          ></q-td>
-        
+
+          <q-td>
+            <q-btn
+              flat
+              dense
+              size="xs"
+              @click="updateMyExtensionForm(props.row.id)"
+              icon="edit"
+              color="light-blue"
+            >
+              <q-tooltip> Edit copilot </q-tooltip>
+            </q-btn>
+          </q-td>
+
+          <q-td>
+            <q-btn
+              flat
+              dense
+              size="xs"
+              @click="deleteMyExtension(props.row.id)"
+              icon="cancel"
+              color="pink"
+            >
+              <q-tooltip> Delete copilot </q-tooltip>
+            </q-btn>
+          </q-td>
        
            </q-tr>
          </template>
@ -194,6 +219,7 @@
  </q-dialog>
 </div>
 {% endblock %} {% block scripts %} {{ window_vars(user) }}
+<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.4.0/dist/confetti.browser.min.js"></script>
 <script>
  // The object returned here will be merged with the data object of the Vue instance
  const mapMyExtension = obj => {
@ -204,7 +230,6 @@
    obj.myextension = ['/myextension/', obj.id].join('')
    return obj
  }
-
  new Vue({
    el: '#vue',
    mixins: [windowMixin],
@ -280,9 +305,10 @@
        const wallet = _.findWhere(this.g.user.wallets, {
          id: this.formDialog.data.wallet
        })
-        console.log(data)
-        console.log(wallet)
-        if (data.id) {
+        if (this.formDialog.data.id) {
+          data.id = this.formDialog.data.id
+          data.wallet = wallet.id
+          data.total = this.formDialog.data.total
          this.updateMyExtension(wallet, data)
        } else {
          this.createMyExtension(wallet, data)
@ -291,8 +317,7 @@
      updateMyExtensionForm(tempId) {
        const myextension = _.findWhere(this.temps, {id: tempId})
        this.formDialog.data = {
-          ...myextension,
-          tip_options: JSON.parse(myextension.tip_options)
+          ...myextension
        }
        if (this.formDialog.data.tip_wallet != '') {
          this.formDialog.advanced.tips = true
@ -325,7 +350,7 @@
            this.temps = _.reject(this.temps, obj => {
              return obj.id == data.id
            })
-            this.temps.push(mapTemp(response.data))
+            this.temps.push(mapMyExtension(response.data))
            this.closeFormDialog()
          })
          .catch(error => {
@ -410,10 +435,10 @@
          amount: this.invoiceAmount,
          memo: 'Invoice created by MyExtension',
          extra: {
-            tag: 'MyExtension'
+            tag: 'MyExtension',
+            myextensionId: myextensionId
          }
        }
-        console.log(dataToSend)
        LNbits.api
          .request(
            'POST',
@ -423,16 +448,46 @@
          )
          .then(response => {
            this.qrValue = response.data.payment_request
-            this.connectWebocket(myextensionId)
          })
          .catch(error => {
            LNbits.utils.notifyApiError(error)
          })
      },
+      makeItRain() {
+        document.getElementById("vue").disabled = true
+        var end = Date.now() + (2 * 1000)
+        var colors = ['#FFD700', '#ffffff']
+        function frame() {
+          confetti({
+            particleCount: 2,
+            angle: 60,
+            spread: 55,
+            origin: { x: 0 },
+            colors: colors,
+            zIndex: 999999
+          })
+          confetti({
+            particleCount: 2,
+            angle: 120,
+            spread: 55,
+            origin: { x: 1 },
+            colors: colors,
+            zIndex: 999999
+          })
+          if (Date.now() < end) {
+            requestAnimationFrame(frame)
+          }
+          else {
+            document.getElementById("vue").disabled = false
+          }
+        }
+        frame()
+      },
      connectWebocket(id){
      //////////////////////////////////////////////////
      ///wait for pay action to happen and do a thing////
      ///////////////////////////////////////////////////
+      self = this
        if (location.protocol !== 'http:') {
        localUrl =
          'wss://' +
@ -452,14 +507,13 @@
      }
      this.connection = new WebSocket(localUrl)
      this.connection.onmessage = function (e) {
-        console.log(e)
+        self.makeItRain()
      }
      }
    },
    created: function () {
      if (this.g.user.wallets.length) {
        this.getMyExtensions()
-        
      }
    }
  })
--- a/templates/myextension/myextension.html
+++ b/templates/myextension/myextension.html
@ -62,36 +62,73 @@
    mixins: [windowMixin],
    data: function () {
      return {
-        qrValue: ''
+        qrValue: '',
+        myExtensionID: ''
      }
    },
    created: function () {
      this.qrValue = '{{lnurlpay}}'
+      this.myExtensionID = '{{myextension_id}}'
+      this.connectWebocket(this.myExtensionID)
    },
    methods: {
-      createInvoice(walletId) {
-        console.log(walletId)
-        const wallet = _.findWhere(this.g.user.wallets, {
-          id: walletId
-        })
-        console.log(wallet.inkey)
-        LNbits.api
-          .request(
-            'POST',
-            `/api/v1/payments`,
-            wallet.inkey,
-            { 
-              out: false,
-              amount: this.invoiceAmount,
-            }
-          )
-          .then(response => {
-            this.qrValue = response.data.payment_request
+      makeItRain() {
+        document.getElementById("vue").disabled = true
+        var end = Date.now() + (2 * 1000)
+        var colors = ['#FFD700', '#ffffff']
+        function frame() {
+          confetti({
+            particleCount: 2,
+            angle: 60,
+            spread: 55,
+            origin: { x: 0 },
+            colors: colors,
+            zIndex: 999999
          })
-          .catch(error => {
-            LNbits.utils.notifyApiError(error)
+          confetti({
+            particleCount: 2,
+            angle: 120,
+            spread: 55,
+            origin: { x: 1 },
+            colors: colors,
+            zIndex: 999999
          })
+          if (Date.now() < end) {
+            requestAnimationFrame(frame)
+          }
+          else {
+            document.getElementById("vue").disabled = false
+          }
+        }
+        frame()
      },
+      connectWebocket(id){
+      //////////////////////////////////////////////////
+      ///wait for pay action to happen and do a thing////
+      ///////////////////////////////////////////////////
+      self = this
+        if (location.protocol !== 'http:') {
+        localUrl =
+          'wss://' +
+          document.domain +
+          ':' +
+          location.port +
+          '/api/v1/ws/' +
+          id
+      } else {
+        localUrl =
+          'ws://' +
+          document.domain +
+          ':' +
+          location.port +
+          '/api/v1/ws/' +
+          id
+      }
+      this.connection = new WebSocket(localUrl)
+      this.connection.onmessage = function (e) {
+        self.makeItRain()
+      }
+      }
    },
  })
 </script>