feat: register public page saves to localstorage (#48)

* feat: register public page saves to localstorage

previsously it fetched all tickets without much information. now it
saves the full scanned ticket after it was scanned, so it can be checked
by some1 without a login

* add last scan

* short id

* prettier

static/js/register.js

@@ -6,17 +6,13 @@ window.PageEventsRegister = {
       ticketsTable: {
         columns: [
           {name: 'name', align: 'left', label: 'Name', field: 'name'},
+          {name: 'email', align: 'left', label: 'Email', field: 'email'},
           {
-            name: 'registered',
+            name: 'id',
             align: 'left',
-            label: 'Registered',
-            field: 'registered'
-          },
-          {
-            name: 'paid',
-            align: 'left',
-            label: 'Paid',
-            field: 'paid'
+            label: 'ID',
+            field: 'id',
+            format: val => this.shortId(val)
           }
         ],
         pagination: {
@@ -26,12 +22,20 @@ window.PageEventsRegister = {
       sendCamera: {
         show: false,
         camera: 'auto'
-      }
+      },
+      lastScan: null
     }
   },
   methods: {
-    hoverEmail(tmp) {
-      this.tickets.data.emailtemp = tmp
+    storageKey() {
+      return `events_scanned_${this.eventId}`
+    },
+    loadScannedTickets() {
+      this.tickets = Quasar.LocalStorage.getItem(this.storageKey()) || []
+    },
+    saveScannedTicket(ticket) {
+      this.tickets.unshift(ticket)
+      Quasar.LocalStorage.set(this.storageKey(), this.tickets)
     },
     closeCamera() {
       this.sendCamera.show = false
@@ -39,30 +43,32 @@ window.PageEventsRegister = {
     showCamera() {
       this.sendCamera.show = true
     },
+    shortId(id) {
+      return id ? `${id.slice(0, 6)}...${id.slice(-4)}` : ''
+    },
     decodeQR(res) {
       this.sendCamera.show = false
       const value = res[0].rawValue.split('//')[1]
       LNbits.api
         .request('PUT', `/events/api/v1/tickets/register/${value}`)
-        .then(() => {
-          Quasar.Notify.create({
-            type: 'positive',
-            message: 'Registered!'
-          })
-        })
-        .catch(LNbits.utils.notifyApiError)
-    },
-    getEventTickets() {
-      LNbits.api
-        .request('GET', `/events/api/v1/events/${this.eventId}/tickets`)
         .then(response => {
-          this.tickets = response.data
+          this.saveScannedTicket(response.data)
+          this.lastScan = {success: true, ticket: response.data}
+          Quasar.Notify.create({type: 'positive', message: 'Registered!'})
+        })
+        .catch(error => {
+          this.lastScan = {
+            success: false,
+            ticketId: value,
+            error:
+              error.response?.data?.detail || error.message || 'Unknown error'
+          }
+          LNbits.utils.notifyApiError(error)
         })
-        .catch(LNbits.utils.notifyApiError)
     }
   },
   created() {
     this.eventId = this.$route.params.id
-    this.getEventTickets()
+    this.loadScannedTickets()
   }
 }

static/js/register.vue

@@ -16,6 +16,28 @@
         </q-card-section>
       </q-card>
 
+      <q-card
+        v-if="lastScan"
+        :class="lastScan.success ? 'bg-positive' : 'bg-negative'"
+      >
+        <q-card-section class="text-white">
+          <div v-if="lastScan.success">
+            <div class="text-h6 q-mb-sm">Registered</div>
+            <div><strong>Name:</strong> {{ lastScan.ticket.name }}</div>
+            <div><strong>Email:</strong> {{ lastScan.ticket.email }}</div>
+            <div><strong>Paid:</strong> {{ lastScan.ticket.paid }}</div>
+            <div><strong>ID:</strong> {{ shortId(lastScan.ticket.id) }}</div>
+          </div>
+          <div v-else>
+            <div class="text-h6 q-mb-sm">Failed</div>
+            <div>
+              <strong>Ticket ID:</strong> {{ shortId(lastScan.ticketId) }}
+            </div>
+            <div><strong>Error:</strong> {{ lastScan.error }}</div>
+          </div>
+        </q-card-section>
+      </q-card>
+
       <q-card>
         <q-card-section>
           <q-table