{% extends "base.html" %} {% from "macros.jinja" import window_vars with context
%} {% block page %}
<div class="row q-col-gutter-md">
  <div class="col-12 col-md-7 q-gutter-y-md">
    <q-card>
      <q-card-section>
        {% raw %}
        <q-btn
          unelevated
          color="primary"
          @click="formDialoglnurldevice.show = true"
          >New LNURLDevice instance
        </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">lNURLdevice</h5>
          </div>

          <div class="col-auto">
            <q-input
              borderless
              dense
              debounce="300"
              v-model="filter"
              placeholder="Search"
            >
              <template v-slot:append>
                <q-icon name="search"></q-icon>
              </template>
            </q-input>
            <q-btn flat color="grey" @click="exportlnurldeviceCSV"
              >Export to CSV</q-btn
            >
          </div>
        </div>
        <q-table
          flat
          dense
          :data="lnurldeviceLinks"
          row-key="id"
          :columns="lnurldevicesTable.columns"
          :pagination.sync="lnurldevicesTable.pagination"
          :filter="filter"
        >
          <template v-slot:header="props">
            <q-tr :props="props">
              <q-th style="width: 5%"></q-th>
              <q-th style="width: 5%"></q-th>
              <q-th style="width: 5%"></q-th>

              <q-th
                v-for="col in props.cols"
                :key="col.name"
                :props="props"
                auto-width
              >
                <div v-if="col.name == 'id'"></div>
                <div v-else>{{ col.label }}</div>
              </q-th>
              <!-- <q-th auto-width></q-th> -->
            </q-tr>
          </template>

          <template v-slot:body="props">
            <q-tr :props="props">
              <q-td>
                <q-btn
                  flat
                  dense
                  size="xs"
                  @click="deletelnurldeviceLink(props.row.id)"
                  icon="cancel"
                  color="pink"
                >
                  <q-tooltip> Delete LNURLDevice </q-tooltip>
                </q-btn>
              </q-td>
              <q-td>
                <q-btn
                  flat
                  dense
                  size="xs"
                  @click="openlnurldeviceSettings(props.row.id)"
                  icon="perm_data_setting"
                  color="primary"
                >
                  <q-tooltip> LNURLDevice Settings </q-tooltip>
                </q-btn>
              </q-td>
              <q-td>
                <q-btn
                  v-if="props.row.device == 'switch'"
                  flat
                  dense
                  size="xs"
                  icon="qr_code"
                  color="grey"
                  type="a"
                  :href="'/lnurldevice/img/' + props.row.id"
                  target="_blank"
                >
                  <q-tooltip> bitcoinSwitch embeddable QRCode </q-tooltip>
                </q-btn>
              </q-td>
              <q-td
                v-for="col in props.cols"
                :key="col.name"
                :props="props"
                auto-width
              >
                <div v-if="col.name == 'id'"></div>
                <div v-else>{{ col.value }}</div>
              </q-td>
            </q-tr>
          </template>
          {% endraw %}
        </q-table>
      </q-card-section>
    </q-card>
  </div>

  <div class="col-12 col-md-5 q-gutter-y-md">
    <q-card>
      <q-card-section>
        <h6 class="text-subtitle1 q-my-none">
          {{SITE_TITLE}} LNURLDevice Extension
        </h6>
      </q-card-section>
      <q-card-section class="q-pa-none">
        <q-separator></q-separator>
        <q-list> {% include "lnurldevice/_api_docs.html" %} </q-list>
      </q-card-section>
    </q-card>
  </div>

  <q-dialog
    v-model="settingsDialog.show"
    deviceition="top"
    @hide="closeFormDialog"
  >
    <q-card
      style="width: 700px; max-width: 80vw"
      class="q-pa-lg q-pt-xl lnbits__dialog-card"
    >
      <div class="text-h6">LNURLDevice device string</div>
      <center>
      <q-btn
        v-if="settingsDialog.data.device == 'switch'"
        dense
        outline
        unelevated
        color="primary"
        size="md"
        @click="copyText(wslocation + '/lnurldevice/ws/' + settingsDialog.data.id, 'Link copied to clipboard!')"
        >{% raw
        %}{{wslocation}}/lnurldevice/ws/{{settingsDialog.data.id}}{% endraw
        %}<q-tooltip> Click to copy URL </q-tooltip>
      </q-btn>
      <q-btn
        v-else
        dense
        outline
        unelevated
        color="primary"
        size="md"
        @click="copyText(location + '/lnurldevice/api/v1/lnurl/' + settingsDialog.data.id + ',' +
      settingsDialog.data.key + ',' + settingsDialog.data.currency, 'Link copied to clipboard!')"
        >{% raw
        %}{{location}}/lnurldevice/api/v1/lnurl/{{settingsDialog.data.id}},
        {{settingsDialog.data.key}}, {{settingsDialog.data.currency}}{% endraw
        %}<q-tooltip> Click to copy URL </q-tooltip>
      </q-btn>
    </center>
      <div class="text-subtitle2">
        <small> </small>
      </div>
    </q-card>
  </q-dialog>

  <q-dialog
    v-model="formDialoglnurldevice.show"
    deviceition="top"
    @hide="closeFormDialog"
  >
    <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
      <q-form @submit="sendFormDatalnurldevice" class="q-gutter-md">
        <q-input
          filled
          dense
          v-model.trim="formDialoglnurldevice.data.title"
          type="text"
          label="Title"
        ></q-input>

        <q-select
          filled
          dense
          emit-value
          v-model="formDialoglnurldevice.data.wallet"
          :options="g.user.walletOptions"
          label="Wallet *"
        ></q-select>

        <q-select
          filled
          dense
          v-model.trim="formDialoglnurldevice.data.currency"
          type="text"
          label="Fiat currency for device"
          :options="currency"
        ></q-select>
        <q-option-group
          v-model.trim="formDialoglnurldevice.data.device"
          :options="devices"
          color="primary"
          label="Type of device"
        ></q-option-group>
        <q-input
          v-if="formDialoglnurldevice.data.device != 'switch'"
          filled
          dense
          v-model.trim="formDialoglnurldevice.data.profit"
          type="number"
          max="90"
          label="Profit margin (% added to invoices/deducted from faucets)"
        ></q-input>
        <div v-else>
        <q-input
          ref="setAmount"
          filled
          dense
          v-model.trim="formDialoglnurldevice.data.profit"
          class="q-pb-md"
          :label="'Amount (' + formDialoglnurldevice.data.currency + ') *'"
          :mask="'#.##'"
          fill-mask="0"
          reverse-fill-mask
          :step="'0.01'"
        ></q-input>
        <q-input
          filled
          dense
          v-model.trim="formDialoglnurldevice.data.amount"
          type="number"
          value="1000"
          label="milesecs to turn Switch on for (1sec = 1000ms)"

        ></q-input>
      </div>

        <div class="row q-mt-lg">
          <q-btn
            v-if="formDialoglnurldevice.data.id"
            unelevated
            color="primary"
            :disable="
                formDialoglnurldevice.data.title == ''"
            type="submit"
            >Update lnurldevice</q-btn
          >
          <q-btn
            v-else
            unelevated
            color="primary"
            :disable="
                formDialoglnurldevice.data.title == ''"
            type="submit"
            >Create lnurldevice</q-btn
          >
          <q-btn @click="cancellnurldevice" flat color="grey" class="q-ml-auto"
            >Cancel</q-btn
          >
        </div>
      </q-form>
    </q-card>
  </q-dialog>
</div>
{% endblock %} {% block scripts %} {{ window_vars(user) }}

<script>
  Vue.component(VueQrcode.name, VueQrcode)

  var maplnurldevice = obj => {
    obj._data = _.clone(obj)
    obj.theTime = obj.time * 60 - (Date.now() / 1000 - obj.timestamp)
    obj.time = obj.time + 'mins'

    if (obj.time_elapsed) {
      obj.date = 'Time elapsed'
    } else {
      obj.date = Quasar.utils.date.formatDate(
        new Date((obj.theTime - 3600) * 1000),
        'HH:mm:ss'
      )
    }
    return obj
  }

  new Vue({
    el: '#vue',
    mixins: [windowMixin],
    data: function () {
      return {
        location: window.location.hostname,
        wslocation: window.location.hostname,
        filter: '',
        currency: 'USD',
        lnurldeviceLinks: [],
        lnurldeviceLinksObj: [],
        devices: [
          {
            label: 'PoS',
            value: 'pos'
          },
          {
            label: 'ATM',
            value: 'atm'
          },
          {
            label: 'Switch',
            value: 'switch'
          }
        ],
        lnurldevicesTable: {
          columns: [
            {
              name: 'title',
              align: 'left',
              label: 'title',
              field: 'title'
            },
            {
              name: 'theId',
              align: 'left',
              label: 'id',
              field: 'id'
            },
            {
              name: 'key',
              align: 'left',
              label: 'key',
              field: 'key'
            },
            {
              name: 'wallet',
              align: 'left',
              label: 'wallet',
              field: 'wallet'
            },
            {
              name: 'device',
              align: 'left',
              label: 'device',
              field: 'device'
            },
            {
              name: 'profit',
              align: 'left',
              label: 'profit',
              field: 'profit'
            },
            {
              name: 'currency',
              align: 'left',
              label: 'currency',
              field: 'currency'
            }
          ],
          pagination: {
            rowsPerPage: 10
          }
        },
        passedlnurldevice: {},
        settingsDialog: {
          show: false,
          data: {}
        },
        formDialog: {
          show: false,
          data: {}
        },
        formDialoglnurldevice: {
          show: false,
          data: {
            lnurl_toggle: false,
            show_message: false,
            show_ack: false,
            show_price: 'None',
            device: 'pos',
            profit: 2,
            amount: 1,
            title: ''
          }
        },
        qrCodeDialog: {
          show: false,
          data: null
        }
      }
    },
    methods: {
      cancellnurldevice: function (data) {
        var self = this
        self.formDialoglnurldevice.show = false
        self.clearFormDialoglnurldevice()
      },
      closeFormDialog: function () {
        this.clearFormDialoglnurldevice()
        this.formDialog.data = {
          is_unique: false
        }
      },
      sendFormDatalnurldevice: function () {
        var self = this
        if (self.formDialoglnurldevice.data.id) {
          this.updatelnurldevice(
            self.g.user.wallets[0].adminkey,
            self.formDialoglnurldevice.data
          )
        } else {
          this.createlnurldevice(
            self.g.user.wallets[0].adminkey,
            self.formDialoglnurldevice.data
          )
        }
      },

      createlnurldevice: function (wallet, data) {
        var self = this
        var updatedData = {}
        for (const property in data) {
          if (data[property]) {
            updatedData[property] = data[property]
          }
        }
        LNbits.api
          .request('POST', '/lnurldevice/api/v1/lnurlpos', wallet, updatedData)
          .then(function (response) {
            self.lnurldeviceLinks.push(maplnurldevice(response.data))
            self.formDialoglnurldevice.show = false
            self.clearFormDialoglnurldevice()
          })
          .catch(function (error) {
            LNbits.utils.notifyApiError(error)
          })
      },
      getlnurldevices: function () {
        var self = this
        LNbits.api
          .request(
            'GET',
            '/lnurldevice/api/v1/lnurlpos',
            self.g.user.wallets[0].adminkey
          )
          .then(function (response) {
            if (response.data) {
              self.lnurldeviceLinks = response.data.map(maplnurldevice)
            }
          })
          .catch(function (error) {
            LNbits.utils.notifyApiError(error)
          })
      },
      getlnurldevice: function (lnurldevice_id) {
        var self = this
        LNbits.api
          .request(
            'GET',
            '/lnurldevice/api/v1/lnurlpos/' + lnurldevice_id,
            self.g.user.wallets[0].adminkey
          )
          .then(function (response) {
            localStorage.setItem('lnurldevice', JSON.stringify(response.data))
            localStorage.setItem('inkey', self.g.user.wallets[0].inkey)
          })
          .catch(function (error) {
            LNbits.utils.notifyApiError(error)
          })
      },
      deletelnurldeviceLink: function (lnurldeviceId) {
        var self = this
        var link = _.findWhere(this.lnurldeviceLinks, {id: lnurldeviceId})
        LNbits.utils
          .confirmDialog('Are you sure you want to delete this pay link?')
          .onOk(function () {
            LNbits.api
              .request(
                'DELETE',
                '/lnurldevice/api/v1/lnurlpos/' + lnurldeviceId,
                self.g.user.wallets[0].adminkey
              )
              .then(function (response) {
                self.lnurldeviceLinks = _.reject(
                  self.lnurldeviceLinks,
                  function (obj) {
                    return obj.id === lnurldeviceId
                  }
                )
              })
              .catch(function (error) {
                LNbits.utils.notifyApiError(error)
              })
          })
      },
      openUpdatelnurldeviceLink: function (lnurldeviceId) {
        var self = this
        var lnurldevice = _.findWhere(this.lnurldeviceLinks, {
          id: lnurldeviceId
        })
        self.formDialoglnurldevice.data = _.clone(lnurldevice._data)
        self.formDialoglnurldevice.show = true
      },
      openlnurldeviceSettings: function (lnurldeviceId) {
        var self = this
        var lnurldevice = _.findWhere(this.lnurldeviceLinks, {
          id: lnurldeviceId
        })
        self.settingsDialog.data = _.clone(lnurldevice._data)
        self.settingsDialog.show = true
      },
      updatelnurldevice: function (wallet, data) {
        var self = this
        var updatedData = {}
        for (const property in data) {
          if (data[property]) {
            updatedData[property] = data[property]
          }
        }

        LNbits.api
          .request(
            'PUT',
            '/lnurldevice/api/v1/lnurlpos/' + updatedData.id,
            wallet,
            updatedData
          )
          .then(function (response) {
            self.lnurldeviceLinks = _.reject(self.lnurldeviceLinks, function (
              obj
            ) {
              return obj.id === updatedData.id
            })
            self.lnurldeviceLinks.push(maplnurldevice(response.data))
            self.formDialoglnurldevice.show = false
            self.clearFormDialoglnurldevice()
          })
          .catch(function (error) {
            LNbits.utils.notifyApiError(error)
          })
      },
      clearFormDialoglnurldevice() {
        this.formDialoglnurldevice.data = {
          lnurl_toggle: false,
          show_message: false,
          show_ack: false,
          show_price: 'None',
          title: ''
        }
      },
      exportlnurldeviceCSV: function () {
        var self = this
        LNbits.utils.exportCSV(
          self.lnurldevicesTable.columns,
          this.lnurldeviceLinks
        )
      }
    },
    created: function () {
      var self = this
      var getlnurldevices = this.getlnurldevices
      getlnurldevices()
      self.location = [
        window.location.protocol,
        '//',
        window.location.host
      ].join('')
      self.wslocation = [
        'ws://',
        window.location.host
      ].join('')
      LNbits.api
        .request('GET', '/api/v1/currencies')
        .then(response => {
          this.currency = ['USD', ...response.data]
        })
        .catch(err => {
          LNbits.utils.notifyApiError(err)
        })
    }
  })
</script>
{% endblock %}