satmachineclient/templates/myextension/index.html

<!--/////////////////////////////////////////////////-->
<!--//PAGE FOR THE EXTENSIONS BACKEND IN LNBITS//////-->
<!--/////////////////////////////////////////////////-->

{% extends "base.html" %} {% from "macros.jinja" import window_vars with context
%} {% block page %}
<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>
        <q-btn unelevated color="primary" @click="formDialog.show = true">New MyExtension</q-btn>
      </q-card-section>
    </q-card>

    <q-card>
      <q-card-section>
        <div class="row items-center no-wrap q-mb-md">
          <div class="col">
            <h5 class="text-subtitle1 q-my-none">MyExtension</h5>
          </div>
          <div class="col-auto">
            <q-btn flat color="grey" @click="exportCSV">Export to CSV</q-btn>
          </div>
        </div>
        <q-table dense flat :data="myex" row-key="id" :columns="myexTable.columns"
          :pagination.sync="myexTable.pagination">
          <myextension v-slot:header="props">
            <q-tr :props="props">
              <q-th v-for="col in props.cols" :key="col.name" :props="props">
                ${ col.label }
              </q-th>
            </q-tr>
          </myextension>

          <template v-slot:body="props">
            <q-tr :props="props">
              <q-td v-for="col in props.cols" :key="col.name" :props="props">
                <div v-if="col.field == 'total'">${ col.value / 1000} sats</div>
                <div v-else>${ col.value }</div>
              </q-td>
              <q-td auto-width>
                <q-btn unelevated dense size="sm" icon="qr_code" :color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
                  class="q-mr-sm" @click="openUrlDialog(props.row.id)"></q-btn></q-td>
              <q-td auto-width>
                <q-btn unelevated dense size="sm" icon="launch" :color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
                  type="a" :href="props.row.myextension" 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>

        </q-table>
      </q-card-section>
    </q-card>
  </div>

  <div class="col-12 col-md-4 col-lg-5 q-gutter-y-md">
    <q-card>
      <q-card-section>
        <h6 class="text-subtitle1 q-my-none">{{SITE_TITLE}} MyExtension extension</h6>
        <p>Simple extension you can use as a base for your own extension. <br /> Includes very simple LNURL-pay and
          LNURL-withdraw example.</p>
      </q-card-section>
      <q-card-section class="q-pa-none">
        <q-separator></q-separator>
        <q-list>
          {% include "myextension/_api_docs.html" %}
          <q-separator></q-separator>
          {% include "myextension/_myextension.html" %}
        </q-list>
      </q-card-section>
    </q-card>
  </div>

  <!--/////////////////////////////////////////////////-->
  <!--//////////////FORM DIALOG////////////////////////-->
  <!--/////////////////////////////////////////////////-->

  <q-dialog v-model="formDialog.show" position="top" @hide="closeFormDialog">
    <q-card class="q-pa-lg q-pt-xl" style="width: 500px">
      <q-form @submit="sendMyExtensionData" class="q-gutter-md">
        <q-input filled dense v-model.trim="formDialog.data.name" label="Name"
          placeholder="Name for your record"></q-input>
        <q-select filled dense emit-value v-model="formDialog.data.wallet" :options="g.user.walletOptions"
          label="Wallet *"></q-select>
        <q-input filled dense type="number" v-model.trim="formDialog.data.lnurlwithdrawamount"
          label="LNURL-withdraw amount"></q-input>
        <q-input filled dense type="number" v-model.trim="formDialog.data.lnurlpayamount"
          label="LNURL-pay amount"></q-input>
        <div class="row q-mt-lg">
          <q-btn v-if="formDialog.data.id" unelevated color="primary" type="submit">Update MyExtension</q-btn>
          <q-btn v-else unelevated color="primary"
            :disable="formDialog.data.name == null || formDialog.data.wallet == null || formDialog.data.lnurlwithdrawamount == null || formDialog.data.lnurlpayamount == null"
            type="submit">Create MyExtension</q-btn>
          <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
        </div>
      </q-form>
    </q-card>
  </q-dialog>

  <!--/////////////////////////////////////////////////-->
  <!--//////////////QR Code 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">
        <lnbits-qrcode :value="qrValue"></lnbits-qrcode>
      </q-responsive>
      <center><q-btn label="copy" @click="copyText(qrValue)"></q-btn>
      </center>

      <q-separator></q-separator>

      <div class="row justify-start q-mt-lg">
        <div class="col col-md-auto">
          <q-btn outline style="color: primmary;" @click="qrValue = urlDialog.data.lnurlpay">lnurlpay</q-btn>

        </div>
        <div class="col col-md-auto">
          <q-btn outline style="color: primmary;" @click="qrValue = urlDialog.data.lnurlwithdraw">lnurlwithdraw</q-btn>

        </div>
        <div class="col q-pl-md">
          <q-input filled bottom-slots dense v-model="invoiceAmount">
            <template v-slot:append>
              <q-btn round @click="createInvoice(urlDialog.data.wallet, urlDialog.data.id)" color="primary" flat
                icon="add_circle" />
            </template>
            <template v-slot:hint>
              Create an invoice
            </template>
          </q-input>
        </div>
      </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>

</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>

  ///////////////////////////////////////////////////
  //////////an object we can update with data////////
  ///////////////////////////////////////////////////
  const mapMyExtension = obj => {
    obj.date = Quasar.utils.date.formatDate(
      new Date(obj.time * 1000),
      'YYYY-MM-DD HH:mm'
    )
    obj.myextension = ['/myextension/', obj.id].join('')
    return obj
  }
  new Vue({
    el: '#vue',
    mixins: [windowMixin],
    delimiters: ['${', '}'],
    data: function () {
      return {
        invoiceAmount: 10,
        qrValue: 'lnurlpay',
        myex: [],
        myexTable: {
          columns: [
            { name: 'id', align: 'left', label: 'ID', field: 'id' },
            { name: 'name', align: 'left', label: 'Name', field: 'name' },
            {
              name: 'wallet',
              align: 'left',
              label: 'Wallet',
              field: 'wallet'
            },
            { name: 'total', align: 'left', label: 'Total sent/received', field: 'total' },
          ],
          pagination: {
            rowsPerPage: 10
          }
        },
        formDialog: {
          show: false,
          data: {},
          advanced: {}
        },
        urlDialog: {
          show: false,
          data: {}
        }
      }
    },

    ///////////////////////////////////////////////////
    ////////////////METHODS FUNCTIONS//////////////////
    ///////////////////////////////////////////////////

    methods: {
      closeFormDialog() {
        this.formDialog.show = false
        this.formDialog.data = {}
      },
      getMyExtensions: function () {
        var self = this

        LNbits.api
          .request(
            'GET',
            '/myextension/api/v1/myex?all_wallets=true',
            this.g.user.wallets[0].inkey
          )
          .then(function (response) {
            self.myex = response.data.map(function (obj) {
              return mapMyExtension(obj)
            })
          })
      },
      sendMyExtensionData() {
        const data = {
          name: this.formDialog.data.name,
          lnurlwithdrawamount: this.formDialog.data.lnurlwithdrawamount,
          lnurlpayamount: this.formDialog.data.lnurlpayamount
        }
        const wallet = _.findWhere(this.g.user.wallets, {
          id: this.formDialog.data.wallet
        })
        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)
        }
      },
      updateMyExtensionForm(tempId) {
        const myextension = _.findWhere(this.myex, { id: tempId })
        this.formDialog.data = {
          ...myextension
        }
        if (this.formDialog.data.tip_wallet != '') {
          this.formDialog.advanced.tips = true
        }
        if (this.formDialog.data.withdrawlimit >= 1) {
          this.formDialog.advanced.otc = true
        }
        this.formDialog.show = true
      },
      createMyExtension(wallet, data) {
        LNbits.api
          .request('POST', '/myextension/api/v1/myex', wallet.adminkey, data)
          .then(response => {
            this.myex.push(mapMyExtension(response.data))
            this.closeFormDialog()
          })
          .catch(error => {
            LNbits.utils.notifyApiError(error)
          })
      },
      updateMyExtension(wallet, data) {
        LNbits.api
          .request(
            'PUT',
            `/myextension/api/v1/myex/${data.id}`,
            wallet.adminkey,
            data
          )
          .then(response => {
            this.myex = _.reject(this.myex, obj => {
              return obj.id == data.id
            })
            this.myex.push(mapMyExtension(response.data))
            this.closeFormDialog()
          })
          .catch(error => {
            LNbits.utils.notifyApiError(error)
          })
      },
      deleteMyExtension: function (tempId) {
        var self = this
        var myextension = _.findWhere(this.myex, { id: tempId })

        LNbits.utils
          .confirmDialog('Are you sure you want to delete this MyExtension?')
          .onOk(function () {
            LNbits.api
              .request(
                'DELETE',
                '/myextension/api/v1/myex/' + tempId,
                _.findWhere(self.g.user.wallets, { id: myextension.wallet }).adminkey
              )
              .then(function (response) {
                self.myex = _.reject(self.myex, function (obj) {
                  return obj.id == tempId
                })
              })
              .catch(function (error) {
                LNbits.utils.notifyApiError(error)
              })
          })
      },
      exportCSV: function () {
        LNbits.utils.exportCSV(this.myexTable.columns, this.myex)
      },
      itemsArray(tempId) {
        const myextension = _.findWhere(this.myex, { id: tempId })
        return [...myextension.itemsMap.values()]
      },
      openformDialog(id) {
        const [tempId, itemId] = id.split(':')
        const myextension = _.findWhere(this.myex, { id: tempId })
        if (itemId) {
          const item = myextension.itemsMap.get(id)
          this.formDialog.data = {
            ...item,
            myextension: tempId
          }
        } else {
          this.formDialog.data.myextension = tempId
        }
        this.formDialog.data.currency = myextension.currency
        this.formDialog.show = true
      },
      closeformDialog() {
        this.formDialog.show = false
        this.formDialog.data = {}
      },
      openUrlDialog(id) {
        this.urlDialog.data = _.findWhere(this.myex, { id })
        this.qrValue = this.urlDialog.data.lnurlpay
        console.log(this.urlDialog.data.id)
        this.connectWebocket(this.urlDialog.data.id)
        this.urlDialog.show = true
      },
      createInvoice(walletId, myextensionId) {
        ///////////////////////////////////////////////////
        ///Simple call to the api to create an invoice/////
        ///////////////////////////////////////////////////
        console.log(walletId)
        const wallet = _.findWhere(this.g.user.wallets, {
          id: walletId
        })
        const dataToSend = {
          out: false,
          amount: this.invoiceAmount,
          memo: 'Invoice created by MyExtension',
          extra: {
            tag: 'MyExtension',
            myextensionId: myextensionId
          }
        }
        LNbits.api
          .request(
            'POST',
            `/api/v1/payments`,
            wallet.inkey,
            dataToSend
          )
          .then(response => {
            this.qrValue = response.data.payment_request
          })
          .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(wallet_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/' +
            wallet_id
        } else {
          localUrl =
            'ws://' +
            document.domain +
            ':' +
            location.port +
            '/api/v1/ws/' +
            wallet_id
        }
        this.connection = new WebSocket(localUrl)
        this.connection.onmessage = function (e) {
          self.makeItRain()
        }
      }
    },

    ///////////////////////////////////////////////////
    //////LIFECYCLE FUNCTIONS RUNNING ON PAGE LOAD/////
    ///////////////////////////////////////////////////
    created: function () {
      if (this.g.user.wallets.length) {
        this.getMyExtensions()
      }
    }
  })
</script>
{% endblock %}