From 0824b1120b0d0431576b98ddb2ff18b0f1308d20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?dni=20=E2=9A=A1?= <office@dnilabs.com>
Date: Thu, 7 May 2026 17:06:38 +0200
Subject: [PATCH] feat: add paid/registered badge to ticket page (#49)

some visual verification on the ticket page that it is paid / checked
in.
---
 static/js/ticket.js  |  4 ++--
 static/js/ticket.vue | 20 ++++++++++++++++----
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/static/js/ticket.js b/static/js/ticket.js
index 3085f47..82fbd6d 100644
--- a/static/js/ticket.js
+++ b/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)
     }
diff --git a/static/js/ticket.vue b/static/js/ticket.vue
index 7fdecce..3c932e1 100644
--- a/static/js/ticket.vue
+++ b/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>