events/templates/events/register.html

{% extends "public.html" %} {% block page %}

<div class="row q-col-gutter-md justify-center">
  <div class="col-12 col-md-7 col-lg-6 q-gutter-y-md">
    <q-card class="q-pa-lg">
      <q-card-section class="q-pa-none">
        <center>
          <h3 class="q-my-none">{{ event_name }} Registration</h3>
          <br />

          <br />

          <q-btn unelevated color="primary" @click="showCamera" size="xl"
            >Scan ticket</q-btn
          >
        </center>
      </q-card-section>
    </q-card>

    <q-card>
      <q-card-section>
        <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 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 auto-width>
                <q-btn
                  unelevated
                  dense
                  size="xs"
                  icon="local_activity"
                  :color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
                  type="a"
                  :href="'/events/ticket/' + props.row.id"
                  target="_blank"
                ></q-btn>
              </q-td>

              <q-td v-for="col in props.cols" :key="col.name" :props="props">
                {{ col.value }}
              </q-td>
            </q-tr>
          </template>
          {% endraw %}
        </q-table>
      </q-card-section>
    </q-card>
  </div>

  <q-dialog v-model="sendCamera.show" position="top">
    <q-card class="q-pa-lg q-pt-xl">
      <div class="text-center q-mb-lg">
        <qrcode-stream
          @decode="decodeQR"
          class="rounded-borders"
        ></qrcode-stream>
      </div>
      <div class="row q-mt-lg">
        <q-btn @click="closeCamera" flat color="grey" class="q-ml-auto"
          >Cancel</q-btn
        >
      </div>
    </q-card>
  </q-dialog>
</div>
{% endblock %} {% block scripts %}
<script>
  Vue.component(VueQrcode.name, VueQrcode)
  Vue.use(VueQrcodeReader)
  var mapEvents = 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 = ['/events/', obj.id].join('')
    return obj
  }
  new Vue({
    el: '#vue',
    mixins: [windowMixin],
    data: function () {
      return {
        tickets: [],
        ticketsTable: {
          columns: [
            {name: 'id', align: 'left', label: 'ID', field: 'id'},
            {name: 'name', align: 'left', label: 'Name', field: 'name'},
            {
              name: 'registered',
              align: 'left',
              label: 'Registered',
              field: 'registered'
            }
          ],
          pagination: {
            rowsPerPage: 10
          }
        },
        sendCamera: {
          show: false,
          camera: 'auto'
        }
      }
    },
    methods: {
      hoverEmail: function (tmp) {
        this.tickets.data.emailtemp = tmp
      },
      closeCamera: function () {
        this.sendCamera.show = false
      },
      showCamera: function () {
        this.sendCamera.show = true
      },
      decodeQR: function (res) {
        this.sendCamera.show = false
        var self = this

        LNbits.api
          .request(
            'GET',
            '/events/api/v1/register/ticket/' + res.split('//')[1]
          )
          .then(function (response) {
            self.$q.notify({
              type: 'positive',
              message: 'Registered!'
            })
            setTimeout(function () {
              window.location.reload()
            }, 2000)
          })
          .catch(function (error) {
            LNbits.utils.notifyApiError(error)
          })
      },
      getEventTickets: function () {
        var self = this
        LNbits.api
          .request(
            'GET',
            '/events/api/v1/eventtickets/{{ wallet_id }}/{{ event_id }}'
          )
          .then(function (response) {
            self.tickets = response.data.map(function (obj) {
              return mapEvents(obj)
            })
          })
          .catch(function (error) {
            LNbits.utils.notifyApiError(error)
          })
      }
    },
    created: function () {
      this.getEventTickets()
    }
  })
</script>
{% endblock %}