lnbits-legend/lnbits/extensions/lnticket/templates/lnticket/index.html

{% 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="primary" @click="formDialog.show = true"
          >New Form</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">Forms</h5>
          </div>
          <div class="col-auto">
            <q-btn flat color="grey" @click="exportformsCSV"
              >Export to CSV</q-btn
            >
          </div>
        </div>
        <q-table
          dense
          flat
          :data="forms"
          row-key="id"
          :columns="formsTable.columns"
          :pagination.sync="formsTable.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="link"
                  :color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
                  type="a"
                  :href="props.row.displayUrl"
                  target="_blank"
                ></q-btn>
              </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="updateformDialog(props.row.id)"
                  icon="edit"
                  color="light-blue"
                ></q-btn>
              </q-td>
              <q-td auto-width>
                <q-btn
                  flat
                  dense
                  size="xs"
                  @click="deleteForm(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">Tickets</h5>
          </div>
          <!-- <div class="col-auto">
            <q-btn
              flat
              color="grey"
              icon="autorenew"
              :color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
              @click="getTickets"
              ><q-tooltip> Refresh Tickets </q-tooltip></q-btn
            >
          </div> -->
          <div class="col-auto">
            <q-btn flat color="grey" @click="exportticketsCSV"
              >Export to CSV</q-btn
            >
          </div>
        </div>
        <q-table
          dense
          flat
          :data="tickets"
          row-key="id"
          :columns="ticketsTable.columns"
          :pagination.sync="ticketsTable.pagination"
        >
          {% raw %}
          <template v-slot:header="props">
            <q-tr :props="props">
              <q-th auto-width></q-th>
              <q-th auto-width></q-th>
              <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" v-if="props.row.paid">
              <q-td auto-width>
                <q-btn
                  unelevated
                  dense
                  size="xs"
                  icon="email"
                  :color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
                  type="a"
                  :href="'mailto:' + props.row.email"
                ></q-btn>
              </q-td>
              <q-td auto-width>
                <q-btn
                  unelevated
                  dense
                  size="xs"
                  icon="launch"
                  :color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
                  @click="ticketCard(props)"
                  ><q-tooltip> Click to show ticket </q-tooltip></q-btn
                >
              </q-td>

              <q-td v-for="col in props.cols" :key="col.name" :props="props">
                {{ col.label == "Ticket" ? col.value.length > 20 ?
                `${col.value.substring(0, 20)}...` : col.value : col.value }}
              </q-td>

              <q-td auto-width>
                <q-btn
                  flat
                  dense
                  size="xs"
                  @click="deleteTicket(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">
          {{SITE_TITLE}} Support Tickets extension
        </h6>
      </q-card-section>
      <q-card-section class="q-pa-none">
        <q-separator></q-separator>
        <q-list> {% include "lnticket/_api_docs.html" %} </q-list>
      </q-card-section>
    </q-card>
  </div>

  <q-dialog v-model="formDialog.show" position="top">
    <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
      <q-form @submit="sendFormData" class="q-gutter-md">
        <q-select
          filled
          dense
          emit-value
          v-model="formDialog.data.wallet"
          :options="g.user.walletOptions"
          label="Wallet *"
        >
        </q-select>
        <q-input
          filled
          dense
          v-model.trim="formDialog.data.name"
          type="name"
          label="Form name "
        ></q-input>
        <q-input
          filled
          dense
          v-model.trim="formDialog.data.webhook"
          type="text"
          label="Webhook (optional)"
          hint="A URL to be called whenever this link receives a payment."
        ></q-input>
        <q-input
          filled
          dense
          v-model.trim="formDialog.data.description"
          type="textarea"
          label="Description "
        ></q-input>
        <div class="row">
          <div class="col-5">
            <q-toggle
              :label="`${flatRate}`"
              color="primary"
              v-model="formDialog.data.flatrate"
            ></q-toggle>
          </div>
          <div class="col-7">
            <q-input
              filled
              dense
              v-model.number="formDialog.data.amount"
              type="number"
              label="Amount"
            ></q-input>
          </div>
        </div>

        <div class="row q-mt-lg">
          <q-btn
            v-if="formDialog.data.id"
            unelevated
            color="primary"
            type="submit"
            >Update Form</q-btn
          >

          <q-btn
            v-else
            unelevated
            color="primary"
            :disable="formDialog.data.amount == null || formDialog.data.amount < 0 || formDialog.data.name == null"
            type="submit"
            >Create Form</q-btn
          >
          <q-btn v-close-popup flat color="grey" class="q-ml-auto"
            >Cancel</q-btn
          >
        </div>
      </q-form>
    </q-card>
  </q-dialog>
  <!-- Read Ticket Dialog -->
  <q-dialog v-model="ticketDialog.show" position="top">
    <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
      {% raw %}
      <q-card-section>
        <h4 class="text-subtitle1 q-my-none">
          <i>{{this.ticketDialog.data.name}}</i> sent a ticket
        </h4>
        <div v-if="this.ticketDialog.data.email">
          <small>{{this.ticketDialog.data.email}}</small>
        </div>
        <small>{{this.ticketDialog.data.date}}</small>
      </q-card-section>
      <q-separator></q-separator>
      <q-card-section>
        <p>{{this.ticketDialog.data.content}}</p>
      </q-card-section>
      {% endraw %}
      <q-card-actions align="right">
        <q-btn
          flat
          label="CLOSE"
          color="primary"
          v-close-popup
          @click="resetForm"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
</div>
{% endblock %} {% block scripts %} {{ window_vars(user) }}
<script>
  const mapLNTicket = 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.displayUrl = ['/lnticket/', obj.id].join('')
    return obj
  }

  new Vue({
    el: '#vue',
    mixins: [windowMixin],
    data: function () {
      return {
        forms: [],
        tickets: [],
        formsTable: {
          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: 'webhook',
              align: 'left',
              label: 'Webhook',
              field: 'webhook'
            },
            {
              name: 'description',
              align: 'left',
              label: 'Description',
              field: 'description'
            },
            {
              name: 'flatrate',
              align: 'left',
              label: 'Flat Rate',
              field: 'flatrate'
            },
            {
              name: 'amount',
              align: 'left',
              label: 'Amount',
              field: 'amount'
            }
          ],
          pagination: {
            rowsPerPage: 10
          }
        },
        ticketsTable: {
          columns: [
            {name: 'form', align: 'left', label: 'Form', field: 'form'},
            {name: 'name', align: 'left', label: 'Name', field: 'name'},
            {name: 'email', align: 'left', label: 'Email', field: 'email'},
            {name: 'ltext', align: 'left', label: 'Ticket', field: 'ltext'},
            {name: 'sats', align: 'left', label: 'Cost', field: 'sats'}
          ],
          pagination: {
            rowsPerPage: 10
          }
        },
        formDialog: {
          show: false,
          data: {flatrate: false}
        },
        ticketDialog: {
          show: false,
          data: {}
        }
      }
    },
    computed: {
      flatRate: function () {
        if (this.formDialog.data.flatrate) {
          return 'Charge flat rate'
        } else {
          return 'Charge per word'
        }
      }
    },
    methods: {
      resetForm() {
        this.formDialog.data = {flatrate: false}
      },
      getTickets: function () {
        var self = this

        LNbits.api
          .request(
            'GET',
            '/lnticket/api/v1/tickets?all_wallets=true',
            this.g.user.wallets[0].inkey
          )
          .then(function (response) {
            self.tickets = response.data
              .map(function (obj) {
                if (!obj?.paid) return
                return mapLNTicket(obj)
              })
              .filter(v => v)
          })
      },
      deleteTicket: function (ticketId) {
        var self = this
        var tickets = _.findWhere(this.tickets, {id: ticketId})

        LNbits.utils
          .confirmDialog('Are you sure you want to delete this ticket')
          .onOk(function () {
            LNbits.api
              .request(
                'DELETE',
                '/lnticket/api/v1/tickets/' + ticketId,
                _.findWhere(self.g.user.wallets, {id: tickets.wallet}).inkey
              )
              .then(function (response) {
                self.tickets = _.reject(self.tickets, function (obj) {
                  return obj.id == ticketId
                })
              })
              .catch(function (error) {
                LNbits.utils.notifyApiError(error)
              })
          })
      },
      ticketCard(ticket) {
        this.ticketDialog.show = true
        let {date, email, ltext, name} = ticket.row
        this.ticketDialog.data = {
          date,
          email,
          content: ltext,
          name
        }
      },
      exportticketsCSV: function () {
        LNbits.utils.exportCSV(this.ticketsTable.columns, this.tickets)
      },

      getForms: function () {
        var self = this

        LNbits.api
          .request(
            'GET',
            '/lnticket/api/v1/forms?all_wallets=true',
            this.g.user.wallets[0].inkey
          )
          .then(function (response) {
            self.forms = response.data.map(function (obj) {
              return mapLNTicket(obj)
            })
          })
      },
      sendFormData: function () {
        var wallet = _.findWhere(this.g.user.wallets, {
          id: this.formDialog.data.wallet
        })
        this.formDialog.data.inkey = wallet.inkey
        var data = this.formDialog.data

        if (data.id) {
          this.updateForm(wallet, data)
        } else {
          this.createForm(wallet, data)
        }
      },

      createForm: function (wallet, data) {
        var self = this
        console.log('create', data)
        LNbits.api
          .request('POST', '/lnticket/api/v1/forms', wallet.inkey, data)
          .then(function (response) {
            self.forms.push(mapLNTicket(response.data))
            self.formDialog.show = false
            self.resetForm()
          })
          .catch(function (error) {
            LNbits.utils.notifyApiError(error)
          })
      },
      updateformDialog: function (formId) {
        var link = _.findWhere(this.forms, {id: formId})
        console.log('LINK', link)

        this.formDialog.data.id = link.id
        this.formDialog.data.wallet = link.wallet
        this.formDialog.data.name = link.name
        this.formDialog.data.description = link.description
        this.formDialog.data.flatrate = Boolean(link.flatrate)
        this.formDialog.data.amount = link.amount
        this.formDialog.show = true
      },
      updateForm: function (wallet, data) {
        var self = this
        console.log('update', data)
        LNbits.api
          .request(
            'PUT',
            '/lnticket/api/v1/forms/' + data.id,
            wallet.inkey,
            data
          )
          .then(function (response) {
            self.forms = _.reject(self.forms, function (obj) {
              return obj.id == data.id
            })
            self.forms.push(mapLNTicket(response.data))
            self.formDialog.show = false
            self.resetForm()
          })
          .catch(function (error) {
            LNbits.utils.notifyApiError(error)
          })
      },
      deleteForm: function (formsId) {
        var self = this
        var forms = _.findWhere(this.forms, {id: formsId})

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