feat: add paid/registered badge to ticket page

some visual verification on the ticket page that it is paid / checked
in.

Author: dni

static/js/ticket.js

@@ -3,7 +3,7 @@ window.PageEventsTicket = {
   data() {
     return {
       ticketId: null,
-      ticketName: null
+      ticket: null
     }
   },
   methods: {
@@ -18,7 +18,7 @@ window.PageEventsTicket = {
         'GET',
         `/events/api/v1/tickets/${this.ticketId}`
       )
-      this.ticketName = data.ticket_name
+      this.ticket = data
     } catch (error) {
       LNbits.utils.notifyApiError(error)
     }

static/js/ticket.vue

@@ -5,20 +5,32 @@
         <q-card-section class="q-pa-none">
           <center>
             <h3 class="q-my-none">Ticket</h3>
+            <h5 v-if="ticket" v-text="ticket.name" class="q-my-none"></h5>
             <br />
             <h5 class="q-my-none">
               Bookmark, print or screenshot this page,<br />
               and present it for registration!
             </h5>
-            <br />
+            <div v-if="ticket" class="row justify-center q-gutter-sm q-mb-md">
+              <q-btn
+                unelevated
+                :color="ticket.paid ? 'positive' : 'negative'"
+                :label="ticket.paid ? 'Paid' : 'Not Paid'"
+              ></q-btn>
+              <q-btn
+                unelevated
+                :color="ticket.registered ? 'positive' : 'warning'"
+                :label="ticket.registered ? 'Checked In' : 'Not Checked In'"
+              ></q-btn>
+            </div>
             <lnbits-qrcode
               :value="`ticket://${ticketId}`"
               :options="{width: 500}"
             ></lnbits-qrcode>
             <br />
-            <q-btn @click="printWindow" color="grey" class="q-ml-auto">
-              <q-icon left size="3em" name="print"></q-icon> Print</q-btn
-            >
+            <q-btn @click="printWindow" color="grey">
+              <q-icon left size="3em" name="print"></q-icon> Print
+            </q-btn>
           </center>
         </q-card-section>
       </q-card>