{% 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-8 col-lg-7 q-gutter-y-md">
    <q-card>
      <q-card-section>
        <q-btn unelevated color="deep-purple" @click="amilkDialog.show = true"
          >New AMilk</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">AMilks</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="amilks"
          row-key="id"
          :columns="amilksTable.columns"
          :pagination.sync="amilksTable.pagination"
        >
          {% raw %}
          <template 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>
          </template>
          <template v-slot:body="props">
            <q-tr :props="props">
              <q-td v-for="col in props.cols" :key="col.name" :props="props">
                {{ col.value }}
              </q-td>
              <q-td auto-width>
                <q-btn
                  flat
                  dense
                  size="xs"
                  @click="deleteAMilk(props.row.id)"
                  icon="cancel"
                  color="pink"
                ></q-btn>
              </q-td>
            </q-tr>
          </template>
          {% endraw %}
        </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">
          LNbits Assistant Faucet Milker Extension
        </h6>
      </q-card-section>
      <q-card-section class="q-pa-none">
        <q-separator></q-separator>
        <q-list> {% include "amilk/_api_docs.html" %} </q-list>
      </q-card-section>
    </q-card>
  </div>

  <q-dialog v-model="amilkDialog.show" position="top">
    <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
      <q-form @submit="createAMilk" class="q-gutter-md">
        <q-select
          filled
          dense
          emit-value
          v-model="amilkDialog.data.wallet"
          :options="g.user.walletOptions"
          label="Wallet *"
        >
        </q-select>
        <q-input
          filled
          dense
          v-model.trim="amilkDialog.data.lnurl"
          type="url"
          label="LNURL Withdraw"
        ></q-input>
        <q-input
          filled
          dense
          v-model.number="amilkDialog.data.amount"
          type="number"
          label="Amount *"
        ></q-input>
        <q-input
          filled
          dense
          v-model.trim="amilkDialog.data.atime"
          type="number"
          label="Hit frequency (secs)"
          placeholder="Frequency to be hit"
        ></q-input>
        <q-btn
          unelevated
          color="deep-purple"
          :disable="amilkDialog.data.amount == null || amilkDialog.data.amount < 0 || amilkDialog.data.lnurl == null"
          type="submit"
          >Create amilk</q-btn
        >
        <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
      </q-form>
    </q-card>
  </q-dialog>
</div>
{% endblock %} {% block scripts %} {{ window_vars(user) }}
<script>
  var mapAMilk = function (obj) {
    obj.date = Quasar.utils.date.formatDate(
      new Date(obj.time * 1000),
      'YYYY-MM-DD HH:mm'
    )
    obj.fsat = new Intl.NumberFormat(LOCALE).format(obj.amount)
    obj.wall = ['/amilk/', obj.id].join('')
    return obj
  }

  new Vue({
    el: '#vue',
    mixins: [windowMixin],
    data: function () {
      return {
        amilks: [],
        amilksTable: {
          columns: [
            {name: 'id', align: 'left', label: 'ID', field: 'id'},
            {name: 'lnurl', align: 'left', label: 'LNURL', field: 'lnurl'},
            {name: 'atime', align: 'left', label: 'Freq', field: 'atime'},
            {name: 'amount', align: 'left', label: 'Amount', field: 'amount'}
          ],
          pagination: {
            rowsPerPage: 10
          }
        },
        amilkDialog: {
          show: false,
          data: {}
        }
      }
    },
    methods: {
      getAMilks: function () {
        var self = this

        LNbits.api
          .request(
            'GET',
            '/amilk/api/v1/amilk?all_wallets',
            this.g.user.wallets[0].inkey
          )
          .then(function (response) {
            self.amilks = response.data.map(function (obj) {
              response.data.forEach(MILK)
              function MILK(item) {
                window.setInterval(function () {
                  LNbits.api
                    .request(
                      'GET',
                      '/amilk/api/v1/amilk/milk/' + item.id,
                      'Lorem'
                    )
                    .then(function (response) {
                      self.amilks = response.data.map(function (obj) {
                        return mapAMilk(obj)
                      })
                    })
                }, item.atime * 1000)
              }
              return mapAMilk(obj)
            })
          })
      },
      createAMilk: function () {
        var data = {
          lnurl: this.amilkDialog.data.lnurl,
          atime: parseInt(this.amilkDialog.data.atime),
          amount: this.amilkDialog.data.amount
        }
        var self = this

        console.log(this.amilkDialog.data.wallet)

        LNbits.api
          .request(
            'POST',
            '/amilk/api/v1/amilk',
            _.findWhere(this.g.user.wallets, {id: this.amilkDialog.data.wallet})
              .inkey,
            data
          )
          .then(function (response) {
            self.amilks.push(mapAMilk(response.data))
            self.amilkDialog.show = false
            self.amilkDialog.data = {}
          })
          .catch(function (error) {
            LNbits.utils.notifyApiError(error)
          })
      },
      deleteAMilk: function (amilkId) {
        var self = this
        var amilk = _.findWhere(this.amilks, {id: amilkId})

        LNbits.utils
          .confirmDialog('Are you sure you want to delete this AMilk link?')
          .onOk(function () {
            LNbits.api
              .request(
                'DELETE',
                '/amilk/api/v1/amilks/' + amilkId,
                _.findWhere(self.g.user.wallets, {id: amilk.wallet}).inkey
              )
              .then(function (response) {
                self.amilks = _.reject(self.amilks, function (obj) {
                  return obj.id == amilkId
                })
              })
              .catch(function (error) {
                LNbits.utils.notifyApiError(error)
              })
          })
      },
      exportCSV: function () {
        LNbits.utils.exportCSV(this.amilksTable.columns, this.amilks)
      }
    },
    created: function () {
      if (this.g.user.wallets.length) {
        this.getAMilks()
      }
    }
  })
</script>
{% endblock %}
