feat: make events dynamic (#43)

---------

Co-authored-by: dni <office@dnilabs.com>

static/js/display.js

@@ -1,8 +1,9 @@
-window.app = Vue.createApp({
-  el: '#vue',
-  mixins: [windowMixin],
+window.PageEventsDisplay = {
+  template: '#page-events-display',
   data() {
     return {
+      eventErrorLabel: '',
+      event: null,
       paymentReq: null,
       redirectUrl: null,
       formDialog: {
@@ -23,15 +24,14 @@ window.app = Vue.createApp({
         show: false,
         status: 'pending',
         paymentReq: null
-      }
+      },
+      paymentDismissMsg: null,
+      paymentWebsocket: null
     }
   },
   async created() {
-    this.info = event_info
-    this.info = this.info.substring(1, this.info.length - 1)
-    this.banner = event_banner
-    this.extra = event_extra
-    this.hasPromoCodes = has_promoCodes
+    this.eventId = this.$route.params.id
+    this.event = await this.getEvent()
   },
   computed: {
     formatDescription() {
@@ -39,6 +39,18 @@ window.app = Vue.createApp({
     }
   },
   methods: {
+    async getEvent() {
+      try {
+        const {data} = await LNbits.api.request(
+          'GET',
+          `/events/api/v1/events/${this.eventId}`
+        )
+        return data
+      } catch (error) {
+        this.eventErrorLabel = 'Event unavailable.'
+        LNbits.utils.notifyApiError(error)
+      }
+    },
     resetForm(e) {
       e.preventDefault()
       this.formDialog.data.name = ''
@@ -47,10 +59,14 @@ window.app = Vue.createApp({
     },
 
     closeReceiveDialog() {
-      const checker = this.receive.paymentChecker
-      dismissMsg()
-      clearInterval(paymentChecker)
-      setTimeout(() => {}, 10000)
+      if (this.paymentDismissMsg) {
+        this.paymentDismissMsg()
+        this.paymentDismissMsg = null
+      }
+      if (this.paymentWebsocket) {
+        this.paymentWebsocket.close()
+        this.paymentWebsocket = null
+      }
     },
     nameValidation(val) {
       const regex = /[`!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]/g
@@ -63,68 +79,93 @@ window.app = Vue.createApp({
       const regex = /^[\w\.-]+@[a-zA-Z\d\.-]+\.[a-zA-Z]{2,}$/
       return regex.test(val) || 'Please enter valid email.'
     },
-    Invoice() {
-      axios
-        .post(`/events/api/v1/tickets/${event_id}`, {
-          name: this.formDialog.data.name,
-          email: this.formDialog.data.email,
-          promo_code: this.formDialog.data.promo_code || null
-        })
-        .then(response => {
-          this.paymentReq = response.data.payment_request
-          this.paymentCheck = response.data.payment_hash
-
-          dismissMsg = Quasar.Notify.create({
-            timeout: 0,
-            message: 'Waiting for payment...'
-          })
-
-          this.receive = {
-            show: true,
-            status: 'pending',
-            paymentReq: this.paymentReq
+    paymentSuccess(paymentHash) {
+      if (this.paymentDismissMsg) {
+        this.paymentDismissMsg()
+        this.paymentDismissMsg = null
+      }
+      this.paymentReq = null
+      this.formDialog.data.name = ''
+      this.formDialog.data.email = ''
+      Quasar.Notify.create({
+        type: 'positive',
+        message: 'Sent, thank you!',
+        icon: null
+      })
+      this.receive = {
+        show: false,
+        status: 'complete',
+        paymentReq: null
+      }
+      this.ticketLink = {
+        show: true,
+        data: {
+          link: `/events/ticket/${paymentHash}`
+        }
+      }
+      setTimeout(() => {
+        window.location.href = `/events/ticket/${paymentHash}`
+      }, 5000)
+    },
+    async createInvoice() {
+      try {
+        const {data} = await LNbits.api.request(
+          'POST',
+          `/events/api/v1/tickets/${this.eventId}`,
+          null,
+          {
+            name: this.formDialog.data.name,
+            email: this.formDialog.data.email,
+            promo_code: this.formDialog.data.promo_code || null,
+            refund_address: this.formDialog.data.refund || null
           }
-          paymentChecker = setInterval(() => {
-            axios
-              .post(`/events/api/v1/tickets/${event_id}/${this.paymentCheck}`, {
-                event: event_id,
-                event_name: event_name,
-                name: this.formDialog.data.name,
-                email: this.formDialog.data.email
-              })
-              .then(res => {
-                if (res.data.paid) {
-                  clearInterval(paymentChecker)
-                  dismissMsg()
-                  this.formDialog.data.name = ''
-                  this.formDialog.data.email = ''
+        )
+        this.paymentReq = data.payment_request
+        this.paymentHash = data.payment_hash
 
-                  Quasar.Notify.create({
-                    type: 'positive',
-                    message: 'Sent, thank you!',
-                    icon: null
-                  })
-                  this.receive = {
-                    show: false,
-                    status: 'complete',
-                    paymentReq: null
-                  }
-
-                  this.ticketLink = {
-                    show: true,
-                    data: {
-                      link: `/events/ticket/${res.data.ticket_id}`
-                    }
-                  }
-                  setTimeout(() => {
-                    window.location.href = `/events/ticket/${res.data.ticket_id}`
-                  }, 5000)
-                }
-              })
-              .catch(LNbits.utils.notifyApiError)
-          }, 2000)
+        this.paymentDismissMsg = Quasar.Notify.create({
+          timeout: 0,
+          message: 'Waiting for payment...'
         })
-        .catch(LNbits.utils.notifyApiError)
+        this.receive = {
+          show: true,
+          status: 'pending',
+          paymentReq: this.paymentReq
+        }
+        this.websocketListener(this.paymentHash)
+      } catch (error) {
+        LNbits.utils.notifyApiError(error)
+      }
+    },
+    websocketListener(paymentHash) {
+      if (this.paymentWebsocket) {
+        this.paymentWebsocket.close()
+      }
+
+      const url = new URL(window.location)
+      url.protocol = url.protocol === 'https:' ? 'wss' : 'ws'
+      url.pathname = `/events/api/v1/tickets/ws/${paymentHash}`
+      url.search = ''
+      url.hash = ''
+
+      const ws = new WebSocket(url)
+      this.paymentWebsocket = ws
+
+      ws.onmessage = event => {
+        const data = JSON.parse(event.data)
+        if (data.paid) {
+          this.paymentSuccess(paymentHash)
+          ws.close()
+        }
+      }
+      ws.onerror = error => {
+        console.error('WebSocket error:', error)
+      }
+      ws.onclose = () => {
+        if (this.paymentWebsocket === ws) {
+          this.paymentWebsocket = null
+        }
+      }
     }
   }
-})
+}