{% 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>
        <center><img src="/discordbot/static/stack.png" height="200" /></center>
        This extension is designed to be used through its API by a Discord Bot,
        currently you have to install the bot
        <a
          href="https://github.com/chrislennon/lnbits-discord-bot/#installation"
          >yourself</a
        ><br />

        Soon™ there will be a much easier one-click install discord bot...
      </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">Users</h5>
          </div>
          <div class="col-auto">
            <q-btn flat color="grey" @click="exportUsersCSV"
              >Export to CSV</q-btn
            >
          </div>
        </div>
        <q-table
          dense
          flat
          :data="users"
          row-key="id"
          :columns="usersTable.columns"
          :pagination.sync="usersTable.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-th auto-width></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="deleteUser(props.row.id)"
                  icon="cancel"
                  color="pink"
                ></q-btn>
              </q-td>
            </q-tr>
          </template>
          {% endraw %}
        </q-table>
      </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">Wallets</h5>
          </div>
          <div class="col-auto">
            <q-btn flat color="grey" @click="exportWalletsCSV"
              >Export to CSV</q-btn
            >
          </div>
        </div>
        <q-table
          dense
          flat
          :data="wallets"
          row-key="id"
          :columns="walletsTable.columns"
          :pagination.sync="walletsTable.pagination"
        >
          {% raw %}
          <template v-slot:header="props">
            <q-tr :props="props">
              <q-th auto-width></q-th>
              <q-th v-for="col in props.cols" :key="col.name" :props="props">
                {{ col.label }}
              </q-th>
              <q-th auto-width></q-th>
            </q-tr>
          </template>
          <template v-slot:body="props">
            <q-tr :props="props">
              <q-td auto-width>
                <q-btn
                  unelevated
                  dense
                  size="xs"
                  icon="account_balance_wallet"
                  :color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
                  type="a"
                  :href="props.row.walllink"
                  target="_blank"
                ></q-btn>
                <q-tooltip> Link to wallet </q-tooltip>
              </q-td>
              <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="deleteWallet(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 Discord Bot Extension
          <!--{{SITE_TITLE}} Discord Bot Extension-->
        </h6>
      </q-card-section>
      <q-card-section class="q-pa-none">
        <q-separator></q-separator>
        <q-list> {% include "discordbot/_api_docs.html" %} </q-list>
      </q-card-section>
    </q-card>
  </div>

  <q-dialog v-model="userDialog.show" position="top">
    <q-card class="q-pa-lg q-pt-xl" style="width: 500px">
      <q-form @submit="sendUserFormData" class="q-gutter-md">
        <q-input
          filled
          dense
          v-model.trim="userDialog.data.usrname"
          label="Username"
        ></q-input>
        <q-input
          filled
          dense
          v-model.trim="userDialog.data.walname"
          label="Initial wallet name"
        ></q-input>
        <q-input
          filled
          dense
          v-model.trim="userDialog.data.discord_id"
          label="Discord ID"
        ></q-input>

        <q-btn
          unelevated
          color="primary"
          :disable="userDialog.data.walname == null"
          type="submit"
          >Create User</q-btn
        >
        <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
      </q-form>
    </q-card>
  </q-dialog>

  <q-dialog v-model="walletDialog.show" position="top">
    <q-card class="q-pa-lg q-pt-xl" style="width: 500px">
      <q-form @submit="sendWalletFormData" class="q-gutter-md">
        <q-select
          filled
          dense
          emit-value
          v-model="walletDialog.data.user"
          :options="userOptions"
          label="User *"
        >
        </q-select>
        <q-input
          filled
          dense
          v-model.trim="walletDialog.data.walname"
          label="Wallet name"
        ></q-input>
        <q-btn
          unelevated
          color="primary"
          :disable="walletDialog.data.walname == null"
          type="submit"
          >Create Wallet</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 mapUserManager = 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.walllink = ['../wallet?usr=', obj.user, '&wal=', obj.id].join('')
    obj._data = _.clone(obj)
    return obj
  }

  new Vue({
    el: '#vue',
    mixins: [windowMixin],
    data: function () {
      return {
        wallets: [],
        users: [],

        usersTable: {
          columns: [
            {name: 'id', align: 'left', label: 'ID', field: 'id'},
            {name: 'name', align: 'left', label: 'Username', field: 'name'},
            {
              name: 'discord_id',
              align: 'left',
              label: 'discord_id',
              field: 'discord_id'
            }
          ],
          pagination: {
            rowsPerPage: 10
          }
        },
        walletsTable: {
          columns: [
            {name: 'id', align: 'left', label: 'ID', field: 'id'},
            {name: 'name', align: 'left', label: 'Name', field: 'name'},
            {name: 'user', align: 'left', label: 'User', field: 'user'},
            {
              name: 'adminkey',
              align: 'left',
              label: 'Admin Key',
              field: 'adminkey'
            },
            {name: 'inkey', align: 'left', label: 'Invoice Key', field: 'inkey'}
          ],
          pagination: {
            rowsPerPage: 10
          }
        },
        walletDialog: {
          show: false,
          data: {}
        },
        userDialog: {
          show: false,
          data: {}
        }
      }
    },
    computed: {
      userOptions: function () {
        return this.users.map(function (obj) {
          console.log(obj.id)
          return {
            value: String(obj.id),
            label: String(obj.id)
          }
        })
      }
    },
    methods: {
      ///////////////Users////////////////////////////

      getUsers: function () {
        var self = this

        LNbits.api
          .request(
            'GET',
            '/discordbot/api/v1/users',
            this.g.user.wallets[0].inkey
          )
          .then(function (response) {
            self.users = response.data.map(function (obj) {
              return mapUserManager(obj)
            })
          })
      },

      openUserUpdateDialog: function (linkId) {
        var link = _.findWhere(this.users, {id: linkId})

        this.userDialog.data = _.clone(link._data)
        this.userDialog.show = true
      },
      sendUserFormData: function () {
        if (this.userDialog.data.id) {
        } else {
          var data = {
            admin_id: this.g.user.id,
            user_name: this.userDialog.data.usrname,
            wallet_name: this.userDialog.data.walname,
            discord_id: this.userDialog.data.discord_id
          }
        }

        {
          this.createUser(data)
        }
      },

      createUser: function (data) {
        var self = this
        LNbits.api
          .request(
            'POST',
            '/discordbot/api/v1/users',
            this.g.user.wallets[0].inkey,
            data
          )
          .then(function (response) {
            self.users.push(mapUserManager(response.data))
            self.userDialog.show = false
            self.userDialog.data = {}
            data = {}
            self.getWallets()
          })
          .catch(function (error) {
            LNbits.utils.notifyApiError(error)
          })
      },
      deleteUser: function (userId) {
        var self = this

        console.log(userId)
        LNbits.utils
          .confirmDialog('Are you sure you want to delete this User link?')
          .onOk(function () {
            LNbits.api
              .request(
                'DELETE',
                '/discordbot/api/v1/users/' + userId,
                self.g.user.wallets[0].inkey
              )
              .then(function (response) {
                self.users = _.reject(self.users, function (obj) {
                  return obj.id == userId
                })
                self.getWallets()
              })
              .catch(function (error) {
                LNbits.utils.notifyApiError(error)
              })
          })
      },

      exportUsersCSV: function () {
        LNbits.utils.exportCSV(this.usersTable.columns, this.users)
      },

      ///////////////Wallets////////////////////////////

      getWallets: function () {
        var self = this

        LNbits.api
          .request(
            'GET',
            '/discordbot/api/v1/wallets',
            this.g.user.wallets[0].inkey
          )
          .then(function (response) {
            self.wallets = response.data.map(function (obj) {
              return mapUserManager(obj)
            })
          })
      },
      openWalletUpdateDialog: function (linkId) {
        var link = _.findWhere(this.users, {id: linkId})

        this.walletDialog.data = _.clone(link._data)
        this.walletDialog.show = true
      },
      sendWalletFormData: function () {
        if (this.walletDialog.data.id) {
        } else {
          var data = {
            user_id: this.walletDialog.data.user,
            admin_id: this.g.user.id,
            wallet_name: this.walletDialog.data.walname
          }
        }

        {
          this.createWallet(data)
        }
      },

      createWallet: function (data) {
        var self = this
        LNbits.api
          .request(
            'POST',
            '/discordbot/api/v1/wallets',
            this.g.user.wallets[0].inkey,
            data
          )
          .then(function (response) {
            self.wallets.push(mapUserManager(response.data))
            self.walletDialog.show = false
            self.walletDialog.data = {}
            data = {}
          })
          .catch(function (error) {
            LNbits.utils.notifyApiError(error)
          })
      },
      deleteWallet: function (userId) {
        var self = this

        LNbits.utils
          .confirmDialog('Are you sure you want to delete this wallet link?')
          .onOk(function () {
            LNbits.api
              .request(
                'DELETE',
                '/discordbot/api/v1/wallets/' + userId,
                self.g.user.wallets[0].inkey
              )
              .then(function (response) {
                self.wallets = _.reject(self.wallets, function (obj) {
                  return obj.id == userId
                })
              })
              .catch(function (error) {
                LNbits.utils.notifyApiError(error)
              })
          })
      },
      exportWalletsCSV: function () {
        LNbits.utils.exportCSV(this.walletsTable.columns, this.wallets)
      }
    },
    created: function () {
      if (this.g.user.wallets.length) {
        this.getUsers()
        this.getWallets()
      }
    }
  })
</script>
{% endblock %}
