[FEAT] Fiat event tickets (#10)

templates/events/index.html

@@ -4,9 +4,7 @@
   <div class="col-12 col-md-8 col-lg-7 q-gutter-y-md">
     <q-card>
       <q-card-section>
-        <q-btn unelevated color="primary" @click="formDialog.show = true"
-          >New Event</q-btn
-        >
+        <q-btn unelevated color="primary" @click="formDialog.show = true">New Event</q-btn>
       </q-card-section>
     </q-card>
 
@@ -17,19 +15,11 @@
             <h5 class="text-subtitle1 q-my-none">Events</h5>
           </div>
           <div class="col-auto">
-            <q-btn flat color="grey" @click="exporteventsCSV"
-              >Export to CSV</q-btn
-            >
+            <q-btn flat color="grey" @click="exporteventsCSV">Export to CSV</q-btn>
           </div>
         </div>
-        <q-table
-          dense
-          flat
-          :data="events"
-          row-key="id"
-          :columns="eventsTable.columns"
-          :pagination.sync="eventsTable.pagination"
-        >
+        <q-table dense flat :data="events" row-key="id" :columns="eventsTable.columns"
+          :pagination.sync="eventsTable.pagination">
           {% raw %}
           <template v-slot:header="props">
             <q-tr :props="props">
@@ -45,49 +35,20 @@
           <template v-slot:body="props">
             <q-tr :props="props">
               <q-td auto-width>
-                <q-btn
-                  unelevated
-                  dense
-                  size="xs"
-                  icon="link"
-                  :color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
-                  type="a"
-                  :href="props.row.displayUrl"
-                  target="_blank"
-                ></q-btn>
-                <q-btn
-                  unelevated
-                  dense
-                  size="xs"
-                  icon="how_to_reg"
-                  :color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
-                  type="a"
-                  :href="'/events/register/' + props.row.id"
-                  target="_blank"
-                ></q-btn>
+                <q-btn unelevated dense size="xs" icon="link" :color="($q.dark.isActive) ? 'grey-7' : 'grey-5'" type="a"
+                  :href="props.row.displayUrl" target="_blank"></q-btn>
+                <q-btn unelevated dense size="xs" icon="how_to_reg" :color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
+                  type="a" :href="'/events/register/' + 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-td auto-width>
-                <q-btn
-                  flat
-                  dense
-                  size="xs"
-                  @click="updateformDialog(props.row.id)"
-                  icon="edit"
-                  color="light-blue"
-                ></q-btn>
+                <q-btn flat dense size="xs" @click="updateformDialog(props.row.id)" icon="edit"
+                  color="light-blue"></q-btn>
               </q-td>
               <q-td auto-width>
-                <q-btn
-                  flat
-                  dense
-                  size="xs"
-                  @click="deleteEvent(props.row.id)"
-                  icon="cancel"
-                  color="pink"
-                ></q-btn>
+                <q-btn flat dense size="xs" @click="deleteEvent(props.row.id)" icon="cancel" color="pink"></q-btn>
               </q-td>
             </q-tr>
           </template>
@@ -103,19 +64,11 @@
             <h5 class="text-subtitle1 q-my-none">Tickets</h5>
           </div>
           <div class="col-auto">
-            <q-btn flat color="grey" @click="exportticketsCSV"
-              >Export to CSV</q-btn
-            >
+            <q-btn flat color="grey" @click="exportticketsCSV">Export to CSV</q-btn>
           </div>
         </div>
-        <q-table
-          dense
-          flat
-          :data="tickets"
-          row-key="id"
-          :columns="ticketsTable.columns"
-          :pagination.sync="ticketsTable.pagination"
-        >
+        <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">
@@ -128,16 +81,9 @@
           <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-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">
@@ -145,14 +91,7 @@
               </q-td>
 
               <q-td auto-width>
-                <q-btn
-                  flat
-                  dense
-                  size="xs"
-                  @click="deleteTicket(props.row.id)"
-                  icon="cancel"
-                  color="pink"
-                ></q-btn>
+                <q-btn flat dense size="xs" @click="deleteTicket(props.row.id)" icon="cancel" color="pink"></q-btn>
               </q-td>
             </q-tr>
           </template>
@@ -180,116 +119,72 @@
       <q-form @submit="sendEventData" class="q-gutter-md">
         <div class="row">
           <div class="col">
-            <q-input
-              filled
-              dense
-              v-model.trim="formDialog.data.name"
-              type="name"
-              label="Title of event "
-            ></q-input>
+            <q-input filled dense v-model.trim="formDialog.data.name" type="name" label="Title of event "></q-input>
           </div>
           <div class="col q-pl-sm">
-            <q-select
-              filled
-              dense
-              emit-value
-              v-model="formDialog.data.wallet"
-              :options="g.user.walletOptions"
-              label="Wallet *"
-            >
+            <q-select filled dense emit-value v-model="formDialog.data.wallet" :options="g.user.walletOptions"
+              label="Wallet *">
             </q-select>
           </div>
         </div>
 
-        <q-input
-          filled
-          dense
-          v-model.trim="formDialog.data.info"
-          type="textarea"
-          label="Info about the event "
-        ></q-input>
+        <q-input filled dense v-model.trim="formDialog.data.info" type="textarea" label="Info about the event"
+          hint="Markdown supported"></q-input>
         <div class="row">
           <div class="col-4">Ticket closing date</div>
           <div class="col-8">
-            <q-input
-              filled
-              dense
-              v-model.trim="formDialog.data.closing_date"
-              type="date"
-            ></q-input>
+            <q-input filled dense v-model.trim="formDialog.data.closing_date" type="date"></q-input>
           </div>
         </div>
 
         <div class="row">
           <div class="col-4">Event begins</div>
           <div class="col-8">
-            <q-input
-              filled
-              dense
-              v-model.trim="formDialog.data.event_start_date"
-              type="date"
-            ></q-input>
+            <q-input filled dense v-model.trim="formDialog.data.event_start_date" type="date"></q-input>
           </div>
         </div>
 
         <div class="row">
           <div class="col-4">Event ends</div>
           <div class="col-8">
-            <q-input
-              filled
-              dense
-              v-model.trim="formDialog.data.event_end_date"
-              type="date"
-            ></q-input>
+            <q-input filled dense v-model.trim="formDialog.data.event_end_date" type="date"></q-input>
           </div>
         </div>
 
-        <div class="row">
+        <div class="row q-col-gutter-sm">
           <div class="col">
-            <q-input
-              filled
-              dense
-              v-model.number="formDialog.data.amount_tickets"
-              type="number"
-              label="Amount of tickets "
-            ></q-input>
+            <q-select filled dense v-model="formDialog.data.currency" type="text" label="Unit"
+              :options="currencies"></q-select>
           </div>
-          <div class="col q-pl-sm">
-            <q-input
-              filled
-              dense
-              v-model.number="formDialog.data.price_per_ticket"
-              type="number"
-              label="Sats per ticket "
-            ></q-input>
+          <div class="col">
+            <q-input filled dense v-model.number="formDialog.data.amount_tickets" type="number"
+              label="Amount of tickets "></q-input>
+          </div>
+          <div class="col">
+            <q-input filled dense v-model.number="formDialog.data.price_per_ticket" type="number"
+              :label="'Price (' + formDialog.data.currency + ') *'"
+              :step="formDialog.data.currency != 'sat' ? '0.01' : '1'"
+              :mask="formDialog.data.currency != 'sat' ? '#.##' : '#'" fill-mask="0" reverse-fill-mask></q-input>
           </div>
         </div>
 
         <div class="row q-mt-lg">
-          <q-btn
-            v-if="formDialog.data.id"
-            unelevated
-            color="primary"
-            type="submit"
-            >Update Event</q-btn
-          >
-          <q-btn
-            v-else
-            unelevated
-            color="primary"
+          <q-btn v-if="formDialog.data.id" unelevated color="primary" type="submit">Update Event</q-btn>
+          <q-btn v-else unelevated color="primary"
             :disable="formDialog.data.wallet == null || formDialog.data.name == null || formDialog.data.info == null || formDialog.data.closing_date == null || formDialog.data.event_start_date == null || formDialog.data.event_end_date == null || formDialog.data.amount_tickets == null || formDialog.data.price_per_ticket == null"
-            type="submit"
-            >Create Event</q-btn
-          >
-          <q-btn v-close-popup flat color="grey" class="q-ml-auto"
-            >Cancel</q-btn
-          >
+            type="submit">Create Event</q-btn>
+          <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
         </div>
       </q-form>
     </q-card>
   </q-dialog>
 </div>
 {% endblock %} {% block scripts %} {{ window_vars(user) }}
+<style>
+  .q-field__native span {
+    overflow-x: hidden;
+  }
+</style>
 <script>
   var mapEvents = function (obj) {
     obj.date = Quasar.utils.date.formatDate(
@@ -308,11 +203,12 @@
       return {
         events: [],
         tickets: [],
+        currencies: [],
         eventsTable: {
           columns: [
-            {name: 'id', align: 'left', label: 'ID', field: 'id'},
-            {name: 'name', align: 'left', label: 'Name', field: 'name'},
-            {name: 'info', align: 'left', label: 'Info', field: 'info'},
+            { name: 'id', align: 'left', label: 'ID', field: 'id' },
+            { name: 'name', align: 'left', label: 'Name', field: 'name' },
+            { name: 'info', align: 'left', label: 'Info', field: 'info' },
             {
               name: 'event_start_date',
               align: 'left',
@@ -335,7 +231,15 @@
               name: 'price_per_ticket',
               align: 'left',
               label: 'Price',
-              field: 'price_per_ticket'
+              field: row => {
+                if (row.currency != 'sat') {
+                  return LNbits.utils.formatCurrency(
+                    row.price_per_ticket.toFixed(2),
+                    row.currency
+                  )
+                }
+                return row.price_per_ticket
+              }
             },
             {
               name: 'amount_tickets',
@@ -356,10 +260,10 @@
         },
         ticketsTable: {
           columns: [
-            {name: 'id', align: 'left', label: 'ID', field: 'id'},
-            {name: 'event', align: 'left', label: 'Event', field: 'event'},
-            {name: 'name', align: 'left', label: 'Name', field: 'name'},
-            {name: 'email', align: 'left', label: 'Email', field: 'email'},
+            { name: 'id', align: 'left', label: 'ID', field: 'id' },
+            { name: 'event', align: 'left', label: 'Event', field: 'event' },
+            { name: 'name', align: 'left', label: 'Name', field: 'name' },
+            { name: 'email', align: 'left', label: 'Email', field: 'email' },
             {
               name: 'registered',
               align: 'left',
@@ -394,7 +298,7 @@
       },
       deleteTicket: function (ticketId) {
         var self = this
-        var tickets = _.findWhere(this.tickets, {id: ticketId})
+        var tickets = _.findWhere(this.tickets, { id: ticketId })
 
         LNbits.utils
           .confirmDialog('Are you sure you want to delete this ticket')
@@ -403,7 +307,7 @@
               .request(
                 'DELETE',
                 '/events/api/v1/tickets/' + ticketId,
-                _.findWhere(self.g.user.wallets, {id: tickets.wallet}).inkey
+                _.findWhere(self.g.user.wallets, { id: tickets.wallet }).inkey
               )
               .then(function (response) {
                 self.tickets = _.reject(self.tickets, function (obj) {
@@ -432,6 +336,7 @@
             self.events = response.data.map(function (obj) {
               return mapEvents(obj)
             })
+            console.log(self.events)
           })
       },
       sendEventData: function () {
@@ -461,9 +366,9 @@
           })
       },
       updateformDialog: function (formId) {
-        var link = _.findWhere(this.events, {id: formId})
+        var link = _.findWhere(this.events, { id: formId })
 
-        this.formDialog.data = {...link}
+        this.formDialog.data = { ...link }
 
         this.formDialog.show = true
       },
@@ -491,7 +396,7 @@
       },
       deleteEvent: function (eventsId) {
         var self = this
-        var events = _.findWhere(this.events, {id: eventsId})
+        var events = _.findWhere(this.events, { id: eventsId })
 
         LNbits.utils
           .confirmDialog('Are you sure you want to delete this form link?')
@@ -500,7 +405,7 @@
               .request(
                 'DELETE',
                 '/events/api/v1/events/' + eventsId,
-                _.findWhere(self.g.user.wallets, {id: events.wallet}).inkey
+                _.findWhere(self.g.user.wallets, { id: events.wallet }).inkey
               )
               .then(function (response) {
                 self.events = _.reject(self.events, function (obj) {
@@ -514,15 +419,29 @@
       },
       exporteventsCSV: function () {
         LNbits.utils.exportCSV(this.eventsTable.columns, this.events)
+      },
+      async getCurrencies() {
+        try {
+          const { data } = await LNbits.api.request(
+            'GET',
+            '/events/api/v1/currencies',
+            this.inkey
+          )
+
+          this.currencies = ['sat', ...data]
+        } catch (error) {
+          LNbits.utils.notifyApiError(error)
+        }
       }
     },
 
-    created: function () {
+    created: async function () {
       if (this.g.user.wallets.length) {
         this.getTickets()
         this.getEvents()
+        await this.getCurrencies()
       }
     }
   })
 </script>
-{% endblock %}
+{% endblock %}