feat: UI fixes, ticket waves, ticket image (#52)
* email input fixes * promo code ui fix * ticket waves * works, but horrible slop * slightly cleaner * filter most recent * make * pyright
This commit is contained in:
Arc
GitHub
parent
4bf867eef0
commit
777c107c63
12 changed files with 1557 additions and 302 deletions
|
|
@ -13,6 +13,7 @@ window.PageEventsDisplay = {
|
|||
email: '',
|
||||
refund: '',
|
||||
nostr_identifier: '',
|
||||
ticket_wave_id: null,
|
||||
payment_method: 'lightning'
|
||||
}
|
||||
},
|
||||
|
|
@ -40,16 +41,37 @@ window.PageEventsDisplay = {
|
|||
formatDescription() {
|
||||
return LNbits.utils.convertMarkdown(this.event?.info || '')
|
||||
},
|
||||
activeTicketWaves() {
|
||||
const today = new Date().toISOString().slice(0, 10)
|
||||
return (this.event?.extra?.ticket_waves || []).filter(
|
||||
wave =>
|
||||
wave.amount_tickets > 0 &&
|
||||
wave.opening_date <= today &&
|
||||
wave.closing_date >= today
|
||||
)
|
||||
},
|
||||
selectedTicketWave() {
|
||||
return (
|
||||
this.activeTicketWaves.find(
|
||||
wave => wave.id === this.formDialog.data.ticket_wave_id
|
||||
) ||
|
||||
this.activeTicketWaves[0] ||
|
||||
null
|
||||
)
|
||||
},
|
||||
showTicketWaveSelector() {
|
||||
return this.activeTicketWaves.length > 1
|
||||
},
|
||||
allowFiatCheckout() {
|
||||
return Boolean(this.event?.allow_fiat)
|
||||
return Boolean(this.selectedTicketWave?.allow_fiat)
|
||||
},
|
||||
fiatCheckoutLabel() {
|
||||
if (!this.allowFiatCheckout) return 'Fiat'
|
||||
const unit = ['sat', 'sats'].includes(
|
||||
(this.event?.currency || '').toLowerCase()
|
||||
(this.selectedTicketWave?.currency || '').toLowerCase()
|
||||
)
|
||||
? this.event?.fiat_currency
|
||||
: this.event?.currency
|
||||
? this.selectedTicketWave?.fiat_currency
|
||||
: this.selectedTicketWave?.currency
|
||||
return `Fiat (${(unit || 'GBP').toUpperCase()})`
|
||||
},
|
||||
allowEmailNotifications() {
|
||||
|
|
@ -66,6 +88,16 @@ window.PageEventsDisplay = {
|
|||
'GET',
|
||||
`/events/api/v1/events/${this.eventId}`
|
||||
)
|
||||
const activeWaves = (data.extra?.ticket_waves || []).filter(wave => {
|
||||
const today = new Date().toISOString().slice(0, 10)
|
||||
return (
|
||||
wave.amount_tickets > 0 &&
|
||||
wave.opening_date <= today &&
|
||||
wave.closing_date >= today
|
||||
)
|
||||
})
|
||||
this.formDialog.data.ticket_wave_id =
|
||||
activeWaves.length === 1 ? activeWaves[0].id : null
|
||||
return data
|
||||
} catch (error) {
|
||||
this.eventErrorLabel = 'Event unavailable.'
|
||||
|
|
@ -78,6 +110,10 @@ window.PageEventsDisplay = {
|
|||
this.formDialog.data.email = ''
|
||||
this.formDialog.data.refund = ''
|
||||
this.formDialog.data.nostr_identifier = ''
|
||||
this.formDialog.data.ticket_wave_id =
|
||||
this.activeTicketWaves.length === 1
|
||||
? this.activeTicketWaves[0].id
|
||||
: null
|
||||
this.formDialog.data.payment_method = 'lightning'
|
||||
},
|
||||
|
||||
|
|
@ -112,6 +148,10 @@ window.PageEventsDisplay = {
|
|||
this.formDialog.data.email = ''
|
||||
this.formDialog.data.refund = ''
|
||||
this.formDialog.data.nostr_identifier = ''
|
||||
this.formDialog.data.ticket_wave_id =
|
||||
this.activeTicketWaves.length === 1
|
||||
? this.activeTicketWaves[0].id
|
||||
: null
|
||||
this.formDialog.data.payment_method = 'lightning'
|
||||
Quasar.Notify.create({
|
||||
type: 'positive',
|
||||
|
|
@ -141,10 +181,13 @@ window.PageEventsDisplay = {
|
|||
{
|
||||
name: this.formDialog.data.name,
|
||||
email: this.formDialog.data.email,
|
||||
ticket_wave_id: this.formDialog.data.ticket_wave_id || null,
|
||||
promo_code: this.formDialog.data.promo_code || null,
|
||||
refund_address: this.formDialog.data.refund || null,
|
||||
nostr_identifier: this.formDialog.data.nostr_identifier || null,
|
||||
payment_method: this.formDialog.data.payment_method
|
||||
payment_method: this.allowFiatCheckout
|
||||
? this.formDialog.data.payment_method
|
||||
: 'lightning'
|
||||
}
|
||||
)
|
||||
const isFiat = Boolean(data.is_fiat)
|
||||
|
|
@ -178,7 +221,7 @@ window.PageEventsDisplay = {
|
|||
|
||||
const url = new URL(window.location)
|
||||
url.protocol = url.protocol === 'https:' ? 'wss:' : 'ws:'
|
||||
url.pathname = `/api/v1/ws/${paymentHash}`
|
||||
url.pathname = `/events/api/v1/tickets/ws/${paymentHash}`
|
||||
url.search = ''
|
||||
url.hash = ''
|
||||
|
||||
|
|
@ -187,7 +230,7 @@ window.PageEventsDisplay = {
|
|||
|
||||
ws.onmessage = event => {
|
||||
const data = JSON.parse(event.data)
|
||||
if (data.pending === false) {
|
||||
if (data.paid === true) {
|
||||
this.paymentSuccess(paymentHash)
|
||||
ws.close()
|
||||
}
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@
|
|||
filled
|
||||
dense
|
||||
v-model.trim="formDialog.data.nostr_identifier"
|
||||
label="(optional) Nostr NIP-05 or npub"
|
||||
label="(optional) Nostr NIP-05"
|
||||
hint="If provided, we'll DM your ticket link after payment."
|
||||
></q-input>
|
||||
</div>
|
||||
|
|
@ -64,6 +64,21 @@
|
|||
lazy-rules
|
||||
:hint="`If minimum tickets (${event.extra?.min_tickets}) are not met, refund will be sent.`"
|
||||
></q-input>
|
||||
<q-select
|
||||
v-if="showTicketWaveSelector"
|
||||
filled
|
||||
dense
|
||||
v-model="formDialog.data.ticket_wave_id"
|
||||
emit-value
|
||||
map-options
|
||||
label="Ticket wave"
|
||||
:options="
|
||||
activeTicketWaves.map(wave => ({
|
||||
label: `${wave.title} - ${wave.price_per_ticket} ${wave.currency}`,
|
||||
value: wave.id
|
||||
}))
|
||||
"
|
||||
></q-select>
|
||||
<div class="row q-col-gutter-md q-pt-lg items-center">
|
||||
<div v-if="allowFiatCheckout" class="col-auto">
|
||||
<q-option-group
|
||||
|
|
@ -94,6 +109,7 @@
|
|||
:disable="
|
||||
formDialog.data.name == '' ||
|
||||
formDialog.data.email == '' ||
|
||||
(showTicketWaveSelector && !formDialog.data.ticket_wave_id) ||
|
||||
Boolean(paymentReq)
|
||||
"
|
||||
type="submit"
|
||||
|
|
|
|||
|
|
@ -4,11 +4,19 @@ window.PageEvents = {
|
|||
return {
|
||||
events: [],
|
||||
tickets: [],
|
||||
allPaidTickets: [],
|
||||
resendingTicketEmails: [],
|
||||
isUploadingTicketTemplate: false,
|
||||
ticketImageUploadTarget: null,
|
||||
currencies: [],
|
||||
eventsTable: {
|
||||
columns: [
|
||||
{name: 'id', align: 'left', label: 'ID', field: 'id'},
|
||||
{
|
||||
name: 'id',
|
||||
align: 'left',
|
||||
label: 'ID',
|
||||
field: row => this.shortenId(row.id)
|
||||
},
|
||||
{name: 'name', align: 'left', label: 'Name', field: 'name'},
|
||||
{
|
||||
name: 'event_start_date',
|
||||
|
|
@ -22,12 +30,6 @@ window.PageEvents = {
|
|||
label: 'End date',
|
||||
field: 'event_end_date'
|
||||
},
|
||||
{
|
||||
name: 'closing_date',
|
||||
align: 'left',
|
||||
label: 'Ticket close',
|
||||
field: 'closing_date'
|
||||
},
|
||||
{
|
||||
name: 'canceled',
|
||||
align: 'left',
|
||||
|
|
@ -38,43 +40,21 @@ window.PageEvents = {
|
|||
}
|
||||
return 'No'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'price_per_ticket',
|
||||
align: 'left',
|
||||
label: 'Price',
|
||||
field: row => {
|
||||
if (this.isFiatCurrency(row.currency)) {
|
||||
return LNbits.utils.formatCurrency(
|
||||
row.price_per_ticket.toFixed(2),
|
||||
row.currency
|
||||
)
|
||||
}
|
||||
return row.price_per_ticket
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'amount_tickets',
|
||||
align: 'left',
|
||||
label: 'No tickets',
|
||||
field: 'amount_tickets'
|
||||
},
|
||||
{
|
||||
name: 'sold',
|
||||
align: 'left',
|
||||
label: 'Sold',
|
||||
field: 'sold'
|
||||
},
|
||||
{name: 'info', align: 'left', label: 'Info', field: 'info'},
|
||||
{name: 'banner', align: 'left', label: 'Banner', field: 'banner'}
|
||||
}
|
||||
],
|
||||
pagination: {
|
||||
rowsPerPage: 10
|
||||
}
|
||||
},
|
||||
ticketsTable: {
|
||||
loading: false,
|
||||
columns: [
|
||||
{name: 'event', align: 'left', label: 'Event', field: 'event'},
|
||||
{
|
||||
name: 'event',
|
||||
align: 'left',
|
||||
label: 'Event',
|
||||
field: row => this.shortenId(row.event)
|
||||
},
|
||||
{name: 'name', align: 'left', label: 'Name', field: 'name'},
|
||||
{name: 'email', align: 'left', label: 'Email', field: 'email'},
|
||||
{
|
||||
|
|
@ -83,6 +63,12 @@ window.PageEvents = {
|
|||
label: 'Registered',
|
||||
field: 'registered'
|
||||
},
|
||||
{
|
||||
name: 'nostr',
|
||||
align: 'left',
|
||||
label: 'Nostr',
|
||||
field: row => row.extra?.nostr_identifier || ''
|
||||
},
|
||||
{
|
||||
name: 'promo_code',
|
||||
align: 'left',
|
||||
|
|
@ -92,7 +78,11 @@ window.PageEvents = {
|
|||
{name: 'id', align: 'left', label: 'ID', field: 'id'}
|
||||
],
|
||||
pagination: {
|
||||
rowsPerPage: 10
|
||||
sortBy: 'time',
|
||||
descending: true,
|
||||
page: 1,
|
||||
rowsPerPage: 10,
|
||||
rowsNumber: 10
|
||||
}
|
||||
},
|
||||
formDialog: {
|
||||
|
|
@ -102,28 +92,198 @@ window.PageEvents = {
|
|||
allow_fiat: false,
|
||||
fiat_currency: 'GBP',
|
||||
extra: {
|
||||
ticket_waves: [],
|
||||
promo_codes: [],
|
||||
notification_subject: '',
|
||||
notification_body: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
ticketWaveDialog: {
|
||||
show: false,
|
||||
eventId: null,
|
||||
wallet: null,
|
||||
editingWaveId: null,
|
||||
data: {
|
||||
id: null,
|
||||
title: '',
|
||||
opening_date: '',
|
||||
closing_date: '',
|
||||
currency: 'sats',
|
||||
use_ticket_image: false,
|
||||
ticket_image_id: null,
|
||||
allow_fiat: false,
|
||||
fiat_currency: 'GBP',
|
||||
amount_tickets: 0,
|
||||
price_per_ticket: 0
|
||||
}
|
||||
},
|
||||
promoCodesDialog: {
|
||||
show: false,
|
||||
data: {
|
||||
id: null,
|
||||
wallet: null,
|
||||
name: '',
|
||||
extra: {
|
||||
promo_codes: []
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
shortenId(value) {
|
||||
if (!value) return ''
|
||||
return value.length > 4 ? `${value.slice(0, 4)}...` : value
|
||||
},
|
||||
primaryTicketWave(data = this.formDialog.data) {
|
||||
if (!data.extra) data.extra = {}
|
||||
if (!data.extra.ticket_waves || data.extra.ticket_waves.length === 0) {
|
||||
data.extra.ticket_waves = [
|
||||
{
|
||||
id: 'primary',
|
||||
title: 'Primary wave',
|
||||
opening_date: data.closing_date || '',
|
||||
closing_date: data.closing_date || '',
|
||||
currency: data.currency || 'sats',
|
||||
use_ticket_image: false,
|
||||
ticket_image_id: null,
|
||||
allow_fiat: Boolean(data.allow_fiat),
|
||||
fiat_currency: data.fiat_currency || 'GBP',
|
||||
amount_tickets: data.amount_tickets || 0,
|
||||
price_per_ticket: data.price_per_ticket || 0
|
||||
}
|
||||
]
|
||||
}
|
||||
return data.extra.ticket_waves[0]
|
||||
},
|
||||
syncPrimaryWaveFromForm(data = this.formDialog.data) {
|
||||
const primaryWave = this.primaryTicketWave(data)
|
||||
primaryWave.title = primaryWave.title || 'Primary wave'
|
||||
primaryWave.opening_date = primaryWave.opening_date || ''
|
||||
primaryWave.closing_date = data.closing_date || ''
|
||||
primaryWave.currency = data.currency || 'sats'
|
||||
primaryWave.use_ticket_image = Boolean(primaryWave.use_ticket_image)
|
||||
primaryWave.ticket_image_id = primaryWave.ticket_image_id || null
|
||||
primaryWave.allow_fiat = Boolean(data.allow_fiat)
|
||||
primaryWave.fiat_currency = data.fiat_currency || 'GBP'
|
||||
primaryWave.amount_tickets = Number(data.amount_tickets || 0)
|
||||
primaryWave.price_per_ticket = Number(data.price_per_ticket || 0)
|
||||
return primaryWave
|
||||
},
|
||||
hydrateEventForm(data) {
|
||||
const formData = {
|
||||
...data,
|
||||
extra: {
|
||||
...(data.extra || {}),
|
||||
ticket_waves: [...((data.extra && data.extra.ticket_waves) || [])]
|
||||
}
|
||||
}
|
||||
const primaryWave = this.primaryTicketWave(formData)
|
||||
formData.currency = primaryWave.currency || formData.currency || 'sats'
|
||||
formData.allow_fiat = Boolean(primaryWave.allow_fiat)
|
||||
formData.fiat_currency = primaryWave.fiat_currency || 'GBP'
|
||||
formData.amount_tickets = primaryWave.amount_tickets
|
||||
formData.price_per_ticket = primaryWave.price_per_ticket
|
||||
formData.closing_date =
|
||||
primaryWave.closing_date || formData.closing_date || ''
|
||||
return formData
|
||||
},
|
||||
isFiatCurrency(currency) {
|
||||
return !['sat', 'sats'].includes((currency || '').toLowerCase())
|
||||
},
|
||||
getTickets() {
|
||||
LNbits.api
|
||||
.request(
|
||||
normalizePromoCodes(promoCodes = []) {
|
||||
return promoCodes
|
||||
.filter(code => code.code?.trim() !== '')
|
||||
.map(code => ({
|
||||
...code,
|
||||
code: code.code.trim().toUpperCase()
|
||||
}))
|
||||
},
|
||||
templateDownloadUrl() {
|
||||
return '/events/static/image/ticket.jpg'
|
||||
},
|
||||
async uploadAssetFile(file) {
|
||||
const form = new FormData()
|
||||
form.append('file', file)
|
||||
form.append('public_asset', 'true')
|
||||
const {data} = await LNbits.api.request(
|
||||
'POST',
|
||||
'/api/v1/assets?public_asset=true',
|
||||
null,
|
||||
form
|
||||
)
|
||||
return data.id
|
||||
},
|
||||
triggerTicketImageUpload(target) {
|
||||
this.ticketImageUploadTarget = target
|
||||
this.$refs.ticketImageUpload.value = null
|
||||
this.$refs.ticketImageUpload.click()
|
||||
},
|
||||
async handleTicketImageSelected(event) {
|
||||
const file = event.target.files?.[0]
|
||||
if (!file || !this.ticketImageUploadTarget) return
|
||||
|
||||
this.isUploadingTicketTemplate = true
|
||||
try {
|
||||
const assetId = await this.uploadAssetFile(file)
|
||||
if (this.ticketImageUploadTarget === 'primary') {
|
||||
const wave = this.primaryTicketWave()
|
||||
wave.use_ticket_image = true
|
||||
wave.ticket_image_id = assetId
|
||||
} else if (this.ticketImageUploadTarget === 'dialog') {
|
||||
this.ticketWaveDialog.data.use_ticket_image = true
|
||||
this.ticketWaveDialog.data.ticket_image_id = assetId
|
||||
}
|
||||
Quasar.Notify.create({
|
||||
type: 'positive',
|
||||
message: 'Ticket template uploaded.',
|
||||
icon: null
|
||||
})
|
||||
} catch (error) {
|
||||
LNbits.utils.notifyApiError(error)
|
||||
} finally {
|
||||
this.isUploadingTicketTemplate = false
|
||||
this.ticketImageUploadTarget = null
|
||||
}
|
||||
},
|
||||
soldTicketsForWave(eventId, waveId) {
|
||||
return this.allPaidTickets.filter(
|
||||
ticket =>
|
||||
ticket.event === eventId &&
|
||||
ticket.paid &&
|
||||
(ticket.extra?.ticket_wave_id === waveId ||
|
||||
(!ticket.extra?.ticket_wave_id && waveId === 'primary'))
|
||||
).length
|
||||
},
|
||||
async getAllTickets() {
|
||||
try {
|
||||
const {data} = await LNbits.api.request(
|
||||
'GET',
|
||||
'/events/api/v1/tickets?all_wallets=true',
|
||||
this.g.user.wallets[0].adminkey
|
||||
)
|
||||
.then(response => {
|
||||
this.tickets = response.data.filter(e => e.paid)
|
||||
})
|
||||
this.allPaidTickets = data.filter(ticket => ticket.paid)
|
||||
} catch (error) {
|
||||
LNbits.utils.notifyApiError(error)
|
||||
}
|
||||
},
|
||||
async getTickets(props) {
|
||||
try {
|
||||
this.ticketsTable.loading = true
|
||||
const params = LNbits.utils.prepareFilterQuery(this.ticketsTable, props)
|
||||
const {data} = await LNbits.api.request(
|
||||
'GET',
|
||||
`/events/api/v1/tickets/paginated?all_wallets=true&${params}`,
|
||||
this.g.user.wallets[0].adminkey
|
||||
)
|
||||
this.tickets = data.data
|
||||
this.ticketsTable.pagination.rowsNumber = data.total
|
||||
} catch (error) {
|
||||
LNbits.utils.notifyApiError(error)
|
||||
} finally {
|
||||
this.ticketsTable.loading = false
|
||||
}
|
||||
},
|
||||
deleteTicket(ticketId) {
|
||||
const tickets = _.findWhere(this.tickets, {id: ticketId})
|
||||
|
|
@ -138,10 +298,9 @@ window.PageEvents = {
|
|||
'/events/api/v1/tickets/' + ticketId,
|
||||
wallet.adminkey
|
||||
)
|
||||
.then(response => {
|
||||
this.tickets = _.reject(this.tickets, function (obj) {
|
||||
return obj.id == ticketId
|
||||
})
|
||||
.then(async () => {
|
||||
await this.getTickets()
|
||||
await this.getAllTickets()
|
||||
})
|
||||
.catch(LNbits.utils.notifyApiError)
|
||||
})
|
||||
|
|
@ -159,14 +318,30 @@ window.PageEvents = {
|
|||
wallet.adminkey
|
||||
)
|
||||
.then(response => {
|
||||
const result = response.data
|
||||
this.tickets = this.tickets.map(obj =>
|
||||
obj.id === ticket.id ? response.data : obj
|
||||
obj.id === ticket.id ? result.ticket : obj
|
||||
)
|
||||
Quasar.Notify.create({
|
||||
type: 'positive',
|
||||
message: 'Ticket email resent.',
|
||||
icon: null
|
||||
})
|
||||
|
||||
if (result.email?.attempted) {
|
||||
Quasar.Notify.create({
|
||||
type: result.email.sent ? 'positive' : 'negative',
|
||||
message: result.email.sent
|
||||
? 'Ticket email resent.'
|
||||
: `Ticket email failed: ${result.email.error || 'Unknown error.'}`,
|
||||
icon: null
|
||||
})
|
||||
}
|
||||
|
||||
if (result.nostr?.attempted) {
|
||||
Quasar.Notify.create({
|
||||
type: result.nostr.sent ? 'positive' : 'negative',
|
||||
message: result.nostr.sent
|
||||
? 'Ticket Nostr DM resent.'
|
||||
: `Ticket Nostr DM failed: ${result.nostr.error || 'Unknown error.'}`,
|
||||
icon: null
|
||||
})
|
||||
}
|
||||
})
|
||||
.catch(LNbits.utils.notifyApiError)
|
||||
.finally(() => {
|
||||
|
|
@ -176,7 +351,7 @@ window.PageEvents = {
|
|||
})
|
||||
},
|
||||
exportticketsCSV() {
|
||||
LNbits.utils.exportCSV(this.ticketsTable.columns, this.tickets)
|
||||
LNbits.utils.exportCSV(this.ticketsTable.columns, this.allPaidTickets)
|
||||
},
|
||||
getEvents() {
|
||||
LNbits.api
|
||||
|
|
@ -195,19 +370,18 @@ window.PageEvents = {
|
|||
id: this.formDialog.data.wallet
|
||||
})
|
||||
const data = this.formDialog.data
|
||||
this.syncPrimaryWaveFromForm(data)
|
||||
if (data.extra?.promo_codes) {
|
||||
data.extra.promo_codes = data.extra.promo_codes
|
||||
.filter(code => code.code?.trim() !== '')
|
||||
.map(code => ({
|
||||
...code,
|
||||
code: code.code.trim().toUpperCase()
|
||||
}))
|
||||
data.extra.promo_codes = this.normalizePromoCodes(
|
||||
data.extra.promo_codes
|
||||
)
|
||||
}
|
||||
if (!this.isFiatCurrency(data.currency)) {
|
||||
if (!data.allow_fiat) {
|
||||
data.fiat_currency = 'GBP'
|
||||
}
|
||||
}
|
||||
this.syncPrimaryWaveFromForm(data)
|
||||
|
||||
if (data.id) {
|
||||
this.updateEvent(wallet, data)
|
||||
|
|
@ -218,7 +392,7 @@ window.PageEvents = {
|
|||
|
||||
openEventDialog(data = false) {
|
||||
if (data && data.id) {
|
||||
this.formDialog.data = {...data}
|
||||
this.formDialog.data = this.hydrateEventForm(data)
|
||||
} else {
|
||||
this.formDialog.data = {
|
||||
currency: 'sats',
|
||||
|
|
@ -229,6 +403,21 @@ window.PageEvents = {
|
|||
min_tickets: 1,
|
||||
email_notifications: false,
|
||||
nostr_notifications: false,
|
||||
ticket_waves: [
|
||||
{
|
||||
id: 'primary',
|
||||
title: 'Primary wave',
|
||||
opening_date: '',
|
||||
closing_date: '',
|
||||
currency: 'sats',
|
||||
use_ticket_image: false,
|
||||
ticket_image_id: null,
|
||||
allow_fiat: false,
|
||||
fiat_currency: 'GBP',
|
||||
amount_tickets: 0,
|
||||
price_per_ticket: 0
|
||||
}
|
||||
],
|
||||
promo_codes: [],
|
||||
notification_subject: '',
|
||||
notification_body: ''
|
||||
|
|
@ -244,8 +433,25 @@ window.PageEvents = {
|
|||
allow_fiat: false,
|
||||
fiat_currency: 'GBP',
|
||||
extra: {
|
||||
conditional: false,
|
||||
min_tickets: 1,
|
||||
email_notifications: false,
|
||||
nostr_notifications: false,
|
||||
ticket_waves: [
|
||||
{
|
||||
id: 'primary',
|
||||
title: 'Primary wave',
|
||||
opening_date: '',
|
||||
closing_date: '',
|
||||
currency: 'sats',
|
||||
use_ticket_image: false,
|
||||
ticket_image_id: null,
|
||||
allow_fiat: false,
|
||||
fiat_currency: 'GBP',
|
||||
amount_tickets: 0,
|
||||
price_per_ticket: 0
|
||||
}
|
||||
],
|
||||
promo_codes: [],
|
||||
notification_subject: '',
|
||||
notification_body: ''
|
||||
|
|
@ -266,6 +472,177 @@ window.PageEvents = {
|
|||
const link = _.findWhere(this.events, {id: formId})
|
||||
this.openEventDialog(link)
|
||||
},
|
||||
openTicketWaveDialog(event, wave = null) {
|
||||
const primaryWave = (event.extra?.ticket_waves || [])[0] || {}
|
||||
const isEditing = Boolean(wave)
|
||||
this.ticketWaveDialog = {
|
||||
show: true,
|
||||
eventId: event.id,
|
||||
wallet: event.wallet,
|
||||
editingWaveId: wave?.id || null,
|
||||
data: {
|
||||
id: wave?.id || null,
|
||||
title: wave?.title || '',
|
||||
opening_date: wave?.opening_date || '',
|
||||
closing_date: wave?.closing_date || '',
|
||||
currency:
|
||||
wave?.currency || primaryWave.currency || event.currency || 'sats',
|
||||
use_ticket_image: Boolean(wave?.use_ticket_image),
|
||||
ticket_image_id: wave?.ticket_image_id || null,
|
||||
allow_fiat: isEditing
|
||||
? Boolean(wave?.allow_fiat)
|
||||
: Boolean(primaryWave.allow_fiat ?? event.allow_fiat),
|
||||
fiat_currency:
|
||||
wave?.fiat_currency ||
|
||||
primaryWave.fiat_currency ||
|
||||
event.fiat_currency ||
|
||||
'GBP',
|
||||
amount_tickets: wave?.amount_tickets || 0,
|
||||
price_per_ticket:
|
||||
wave?.price_per_ticket ||
|
||||
primaryWave.price_per_ticket ||
|
||||
event.price_per_ticket ||
|
||||
0
|
||||
}
|
||||
}
|
||||
},
|
||||
resetTicketWaveDialog() {
|
||||
this.ticketWaveDialog = {
|
||||
show: false,
|
||||
eventId: null,
|
||||
wallet: null,
|
||||
editingWaveId: null,
|
||||
data: {
|
||||
id: null,
|
||||
title: '',
|
||||
opening_date: '',
|
||||
closing_date: '',
|
||||
currency: 'sats',
|
||||
use_ticket_image: false,
|
||||
ticket_image_id: null,
|
||||
allow_fiat: false,
|
||||
fiat_currency: 'GBP',
|
||||
amount_tickets: 0,
|
||||
price_per_ticket: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
saveTicketWave() {
|
||||
const event = _.findWhere(this.events, {
|
||||
id: this.ticketWaveDialog.eventId
|
||||
})
|
||||
const wallet = _.findWhere(this.g.user.wallets, {
|
||||
id: this.ticketWaveDialog.wallet
|
||||
})
|
||||
if (!event || !wallet) return
|
||||
|
||||
const payload = {
|
||||
...event,
|
||||
extra: {
|
||||
...event.extra,
|
||||
ticket_waves: (event.extra?.ticket_waves || []).map(existingWave =>
|
||||
existingWave.id === this.ticketWaveDialog.editingWaveId
|
||||
? {...this.ticketWaveDialog.data}
|
||||
: existingWave
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
if (!this.ticketWaveDialog.editingWaveId) {
|
||||
payload.extra.ticket_waves.push({...this.ticketWaveDialog.data})
|
||||
}
|
||||
|
||||
if (payload.extra?.promo_codes) {
|
||||
payload.extra.promo_codes = this.normalizePromoCodes(
|
||||
payload.extra.promo_codes
|
||||
)
|
||||
}
|
||||
|
||||
LNbits.api
|
||||
.request(
|
||||
'PUT',
|
||||
'/events/api/v1/events/' + payload.id,
|
||||
wallet.adminkey,
|
||||
payload
|
||||
)
|
||||
.then(response => {
|
||||
this.events = this.events.map(item =>
|
||||
item.id === payload.id ? response.data : item
|
||||
)
|
||||
Quasar.Notify.create({
|
||||
type: 'positive',
|
||||
message: this.ticketWaveDialog.editingWaveId
|
||||
? 'Ticket wave updated.'
|
||||
: 'Ticket wave added.',
|
||||
icon: null
|
||||
})
|
||||
this.resetTicketWaveDialog()
|
||||
})
|
||||
.catch(LNbits.utils.notifyApiError)
|
||||
},
|
||||
openPromoCodesDialog(event) {
|
||||
this.promoCodesDialog.data = {
|
||||
...event,
|
||||
extra: {
|
||||
...event.extra,
|
||||
promo_codes: [...(event.extra?.promo_codes || [])]
|
||||
}
|
||||
}
|
||||
this.promoCodesDialog.show = true
|
||||
},
|
||||
resetPromoCodesDialog() {
|
||||
this.promoCodesDialog.show = false
|
||||
this.promoCodesDialog.data = {
|
||||
id: null,
|
||||
wallet: null,
|
||||
name: '',
|
||||
extra: {
|
||||
promo_codes: []
|
||||
}
|
||||
}
|
||||
},
|
||||
addPromoCodeToDialog() {
|
||||
this.promoCodesDialog.data.extra.promo_codes.push({
|
||||
code: '',
|
||||
discount_percent: 0,
|
||||
active: true
|
||||
})
|
||||
},
|
||||
savePromoCodes() {
|
||||
const data = this.promoCodesDialog.data
|
||||
const wallet = _.findWhere(this.g.user.wallets, {
|
||||
id: data.wallet
|
||||
})
|
||||
if (!wallet) return
|
||||
|
||||
const payload = {
|
||||
...data,
|
||||
extra: {
|
||||
...data.extra,
|
||||
promo_codes: this.normalizePromoCodes(data.extra?.promo_codes || [])
|
||||
}
|
||||
}
|
||||
|
||||
LNbits.api
|
||||
.request(
|
||||
'PUT',
|
||||
'/events/api/v1/events/' + data.id,
|
||||
wallet.adminkey,
|
||||
payload
|
||||
)
|
||||
.then(response => {
|
||||
this.events = this.events.map(event =>
|
||||
event.id === data.id ? response.data : event
|
||||
)
|
||||
Quasar.Notify.create({
|
||||
type: 'positive',
|
||||
message: 'Promo codes updated.',
|
||||
icon: null
|
||||
})
|
||||
this.resetPromoCodesDialog()
|
||||
})
|
||||
.catch(LNbits.utils.notifyApiError)
|
||||
},
|
||||
updateEvent(wallet, data) {
|
||||
LNbits.api
|
||||
.request(
|
||||
|
|
@ -332,6 +709,7 @@ window.PageEvents = {
|
|||
async created() {
|
||||
if (this.g.user.wallets.length) {
|
||||
this.getTickets()
|
||||
this.getAllTickets()
|
||||
this.getEvents()
|
||||
if (this.g.allowedCurrencies && this.g.allowedCurrencies.length > 0) {
|
||||
this.currencies = ['sats', ...this.g.allowedCurrencies]
|
||||
|
|
|
|||
|
|
@ -100,45 +100,102 @@
|
|||
<q-tr v-show="props.expand" :props="props">
|
||||
<q-td colspan="100%">
|
||||
<div class="q-pa-md">
|
||||
<div class="text-subtitle1 q-mb-md">Promo codes</div>
|
||||
<div class="row items-center q-mb-md">
|
||||
<div class="text-subtitle1">Ticket waves</div>
|
||||
<q-btn
|
||||
round
|
||||
dense
|
||||
unelevated
|
||||
color="primary"
|
||||
icon="add"
|
||||
class="q-ml-sm"
|
||||
@click="openTicketWaveDialog(props.row)"
|
||||
></q-btn>
|
||||
</div>
|
||||
<div class="column q-mb-lg">
|
||||
<div class="column">
|
||||
<div
|
||||
v-for="(wave, index) in props.row.extra.ticket_waves"
|
||||
:key="wave.id || index"
|
||||
class="q-mb-sm"
|
||||
>
|
||||
<q-chip
|
||||
square
|
||||
clickable
|
||||
class="q-py-xs"
|
||||
style="height: auto"
|
||||
@click="openTicketWaveDialog(props.row, wave)"
|
||||
>
|
||||
<span
|
||||
style="white-space: normal; line-height: 1.3"
|
||||
v-text="
|
||||
`${wave.title} - ${wave.opening_date} to ${
|
||||
wave.closing_date
|
||||
} - ${
|
||||
isFiatCurrency(wave.currency)
|
||||
? LNbits.utils.formatCurrency(
|
||||
Number(
|
||||
wave.price_per_ticket || 0
|
||||
).toFixed(2),
|
||||
wave.currency
|
||||
)
|
||||
: `${wave.price_per_ticket} sats`
|
||||
} - ${wave.amount_tickets} tickets - ${soldTicketsForWave(
|
||||
props.row.id,
|
||||
wave.id
|
||||
)} sold`
|
||||
"
|
||||
></span>
|
||||
</q-chip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row items-center q-mb-md">
|
||||
<div class="text-subtitle1">Promo codes</div>
|
||||
<q-btn
|
||||
round
|
||||
dense
|
||||
unelevated
|
||||
color="primary"
|
||||
icon="edit"
|
||||
class="q-ml-sm"
|
||||
@click="openPromoCodesDialog(props.row)"
|
||||
></q-btn>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div
|
||||
v-if="props.row.extra.promo_codes.length == 0"
|
||||
v-if="
|
||||
props.row.extra.promo_codes.filter(
|
||||
code => code.active
|
||||
).length == 0
|
||||
"
|
||||
class="text-caption"
|
||||
>
|
||||
No promo codes for this event.
|
||||
No active promo codes for this event.
|
||||
</div>
|
||||
<div
|
||||
v-for="(code, index) in props.row.extra.promo_codes"
|
||||
:key="index"
|
||||
class="row items-center q-col-gutter-sm q-mb-sm"
|
||||
>
|
||||
<div class="col-auto">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div
|
||||
v-for="(
|
||||
code, index
|
||||
) in props.row.extra.promo_codes.filter(
|
||||
code => code.active
|
||||
)"
|
||||
:key="index"
|
||||
class="col-auto q-mb-sm"
|
||||
>
|
||||
<q-chip
|
||||
square
|
||||
size="md"
|
||||
clickable
|
||||
@click="utils.copyText(code.code.toUpperCase())"
|
||||
>
|
||||
<q-avatar
|
||||
icon="bookmark"
|
||||
:color="code.active ? 'green' : 'grey'"
|
||||
text-color="white"
|
||||
></q-avatar>
|
||||
<span v-text="code.code.toUpperCase()"></span>
|
||||
<span
|
||||
v-text="
|
||||
`${code.code.toUpperCase()} - ${code.discount_percent}%`
|
||||
"
|
||||
></span>
|
||||
</q-chip>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
Discount:
|
||||
<span v-text="code.discount_percent"></span>%
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
Status:
|
||||
<span
|
||||
:class="code.active ? 'text-green' : 'text-grey'"
|
||||
v-text="code.active ? 'Active' : 'Inactive'"
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -165,9 +222,11 @@
|
|||
dense
|
||||
flat
|
||||
:rows="tickets"
|
||||
:loading="ticketsTable.loading"
|
||||
row-key="id"
|
||||
:columns="ticketsTable.columns"
|
||||
v-model:pagination="ticketsTable.pagination"
|
||||
@request="getTickets"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
|
|
@ -319,17 +378,6 @@
|
|||
hint="Optional banner image to display on the event page"
|
||||
></q-input>
|
||||
<div class="row q-mt-lg">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-4">Event begins</div>
|
||||
<div class="col-8">
|
||||
<q-input
|
||||
|
|
@ -340,7 +388,6 @@
|
|||
></q-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-4">Event ends</div>
|
||||
<div class="col-8">
|
||||
|
|
@ -352,6 +399,39 @@
|
|||
></q-input>
|
||||
</div>
|
||||
</div>
|
||||
<q-separator class="q-my-md"></q-separator>
|
||||
<div class="text-subtitle1 q-mt-lg q-mb-md">
|
||||
Primary ticket wave (you can add other waves later)
|
||||
</div>
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-12 col-md-4">
|
||||
<q-input
|
||||
filled
|
||||
dense
|
||||
v-model.trim="primaryTicketWave().title"
|
||||
type="text"
|
||||
label="Wave title"
|
||||
></q-input>
|
||||
</div>
|
||||
<div class="col-12 col-md-4">
|
||||
<q-input
|
||||
filled
|
||||
dense
|
||||
v-model.trim="primaryTicketWave().opening_date"
|
||||
type="date"
|
||||
label="Ticket opening date"
|
||||
></q-input>
|
||||
</div>
|
||||
<div class="col-12 col-md-4">
|
||||
<q-input
|
||||
filled
|
||||
dense
|
||||
v-model.trim="formDialog.data.closing_date"
|
||||
type="date"
|
||||
label="Ticket closing date"
|
||||
></q-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col">
|
||||
<q-select
|
||||
|
|
@ -387,6 +467,43 @@
|
|||
></q-input>
|
||||
</div>
|
||||
</div>
|
||||
<q-toggle
|
||||
v-model="primaryTicketWave().use_ticket_image"
|
||||
label="Use ticket image"
|
||||
left-label
|
||||
></q-toggle>
|
||||
<div
|
||||
v-if="primaryTicketWave().use_ticket_image"
|
||||
class="row items-center q-col-gutter-sm q-mb-sm"
|
||||
>
|
||||
<div class="col-auto">
|
||||
<q-btn
|
||||
unelevated
|
||||
color="primary"
|
||||
type="a"
|
||||
:href="templateDownloadUrl()"
|
||||
download="ticket.jpg"
|
||||
>
|
||||
Download template
|
||||
<q-tooltip>400/733 jpg</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<q-btn
|
||||
outline
|
||||
color="primary"
|
||||
:loading="isUploadingTicketTemplate"
|
||||
@click="triggerTicketImageUpload('primary')"
|
||||
>Replace</q-btn
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
v-if="primaryTicketWave().ticket_image_id"
|
||||
class="col-12 text-caption"
|
||||
>
|
||||
Custom ticket template uploaded.
|
||||
</div>
|
||||
</div>
|
||||
<q-toggle
|
||||
v-model="formDialog.data.allow_fiat"
|
||||
label="Allow fiat checkout"
|
||||
|
|
@ -441,112 +558,50 @@
|
|||
</div>
|
||||
</div>
|
||||
<q-separator class="q-my-md"></q-separator>
|
||||
<div class="text-subtitle1 q-mb-md">Promo Codes</div>
|
||||
<div class="text-caption">
|
||||
Allow users to enter a promo code for discounts.
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-for="(code, index) in formDialog.data.extra.promo_codes"
|
||||
:key="index"
|
||||
class="row q-col-gutter-sm q-mt-md"
|
||||
>
|
||||
<q-input
|
||||
class="col-8"
|
||||
filled
|
||||
dense
|
||||
v-model.trim="formDialog.data.extra.promo_codes[index].code"
|
||||
type="text"
|
||||
label="Promo Code"
|
||||
>
|
||||
<template v-slot:before>
|
||||
<q-checkbox
|
||||
left-label
|
||||
v-model="formDialog.data.extra.promo_codes[index].active"
|
||||
checked-icon="radio_button_checked"
|
||||
unchecked-icon="radio_button_unchecked"
|
||||
></q-checkbox>
|
||||
<q-tooltip>
|
||||
<span
|
||||
v-text="
|
||||
formDialog.data.extra.promo_codes[index].active
|
||||
? 'Active'
|
||||
: 'Inactive'
|
||||
"
|
||||
></span>
|
||||
</q-tooltip>
|
||||
</template>
|
||||
</q-input>
|
||||
<q-input
|
||||
class="col-4"
|
||||
filled
|
||||
dense
|
||||
v-model.number="
|
||||
formDialog.data.extra.promo_codes[index].discount_percent
|
||||
"
|
||||
type="number"
|
||||
label="Discount (%)"
|
||||
min="0"
|
||||
max="100"
|
||||
>
|
||||
<template v-slot:after>
|
||||
<q-btn
|
||||
round
|
||||
dense
|
||||
flat
|
||||
icon="delete"
|
||||
@click="formDialog.data.extra.promo_codes.splice(index, 1)"
|
||||
></q-btn>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
<div class="col-12 q-mt-md">
|
||||
<q-btn
|
||||
@click="
|
||||
formDialog.data.extra.promo_codes.push({
|
||||
code: '',
|
||||
discount_percent: 0,
|
||||
active: true
|
||||
})
|
||||
"
|
||||
>Add Promo Code</q-btn
|
||||
>
|
||||
</div>
|
||||
<q-separator class="q-my-md"></q-separator>
|
||||
<div class="text-subtitle1 q-mb-md">Ticket Delivery</div>
|
||||
<div class="text-caption">
|
||||
Send the paid ticket link automatically by email or Nostr DM.
|
||||
</div>
|
||||
<q-toggle
|
||||
v-model="formDialog.data.extra.email_notifications"
|
||||
label="Email notifications"
|
||||
left-label
|
||||
></q-toggle>
|
||||
<q-toggle
|
||||
v-model="formDialog.data.extra.nostr_notifications"
|
||||
label="Nostr notifications"
|
||||
left-label
|
||||
></q-toggle>
|
||||
<div class="row items-center q-col-gutter-md">
|
||||
<div class="col-auto">
|
||||
<q-toggle
|
||||
v-model="formDialog.data.extra.email_notifications"
|
||||
label="Email notifications"
|
||||
left-label
|
||||
></q-toggle>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<q-toggle
|
||||
v-model="formDialog.data.extra.nostr_notifications"
|
||||
label="Nostr notifications"
|
||||
left-label
|
||||
></q-toggle>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="formDialog.data.extra.email_notifications"
|
||||
class="q-mt-md"
|
||||
>
|
||||
<q-input
|
||||
filled
|
||||
dense
|
||||
v-model.trim="formDialog.data.extra.notification_subject"
|
||||
type="text"
|
||||
label="Ticket notification subject"
|
||||
hint="Used as the email subject when sending paid ticket links."
|
||||
></q-input>
|
||||
<q-input
|
||||
class="q-mt-md"
|
||||
filled
|
||||
dense
|
||||
v-model.trim="formDialog.data.extra.notification_body"
|
||||
type="textarea"
|
||||
label="Ticket notification body"
|
||||
hint="Shown before the ticket link in the paid ticket notification."
|
||||
></q-input>
|
||||
</div>
|
||||
</q-expansion-item>
|
||||
|
||||
<q-separator class="q-my-md"></q-separator>
|
||||
<q-input
|
||||
filled
|
||||
dense
|
||||
v-model.trim="formDialog.data.extra.notification_subject"
|
||||
type="text"
|
||||
label="Ticket notification subject"
|
||||
hint="Used as the email subject when sending paid ticket links."
|
||||
></q-input>
|
||||
<q-input
|
||||
filled
|
||||
dense
|
||||
v-model.trim="formDialog.data.extra.notification_body"
|
||||
type="textarea"
|
||||
label="Ticket notification body"
|
||||
hint="Shown before the ticket link in the paid ticket notification."
|
||||
></q-input>
|
||||
|
||||
<div class="row q-mt-lg">
|
||||
<q-btn
|
||||
v-if="formDialog.data.id"
|
||||
|
|
@ -564,6 +619,8 @@
|
|||
formDialog.data.name == null ||
|
||||
formDialog.data.info == null ||
|
||||
formDialog.data.closing_date == null ||
|
||||
primaryTicketWave().title == null ||
|
||||
primaryTicketWave().opening_date == null ||
|
||||
formDialog.data.event_start_date == null ||
|
||||
formDialog.data.event_end_date == null ||
|
||||
formDialog.data.amount_tickets == null ||
|
||||
|
|
@ -579,5 +636,252 @@
|
|||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
|
||||
<q-dialog v-model="promoCodesDialog.show" position="top">
|
||||
<q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
|
||||
<q-form @submit="savePromoCodes" class="q-gutter-md">
|
||||
<div class="text-subtitle1">Promo Codes</div>
|
||||
<div class="text-caption">
|
||||
Allow users to enter a promo code for discounts.
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-for="(code, index) in promoCodesDialog.data.extra.promo_codes"
|
||||
:key="index"
|
||||
class="row q-col-gutter-sm q-mt-md"
|
||||
>
|
||||
<q-input
|
||||
class="col-8"
|
||||
filled
|
||||
dense
|
||||
v-model.trim="promoCodesDialog.data.extra.promo_codes[index].code"
|
||||
type="text"
|
||||
label="Promo Code"
|
||||
>
|
||||
<template v-slot:before>
|
||||
<q-checkbox
|
||||
left-label
|
||||
v-model="
|
||||
promoCodesDialog.data.extra.promo_codes[index].active
|
||||
"
|
||||
checked-icon="radio_button_checked"
|
||||
unchecked-icon="radio_button_unchecked"
|
||||
></q-checkbox>
|
||||
<q-tooltip>
|
||||
<span
|
||||
v-text="
|
||||
promoCodesDialog.data.extra.promo_codes[index].active
|
||||
? 'Active'
|
||||
: 'Inactive'
|
||||
"
|
||||
></span>
|
||||
</q-tooltip>
|
||||
</template>
|
||||
</q-input>
|
||||
<q-input
|
||||
class="col-4"
|
||||
filled
|
||||
dense
|
||||
v-model.number="
|
||||
promoCodesDialog.data.extra.promo_codes[index].discount_percent
|
||||
"
|
||||
type="number"
|
||||
label="Discount (%)"
|
||||
min="0"
|
||||
max="100"
|
||||
>
|
||||
<template v-slot:after>
|
||||
<q-btn
|
||||
round
|
||||
dense
|
||||
flat
|
||||
icon="delete"
|
||||
@click="
|
||||
promoCodesDialog.data.extra.promo_codes.splice(index, 1)
|
||||
"
|
||||
></q-btn>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
|
||||
<div class="col-12 q-mt-md">
|
||||
<q-btn @click="addPromoCodeToDialog">Add Promo Code</q-btn>
|
||||
</div>
|
||||
|
||||
<div class="row q-mt-lg">
|
||||
<q-btn unelevated color="primary" type="submit"
|
||||
>Save Promo Codes</q-btn
|
||||
>
|
||||
<q-btn
|
||||
flat
|
||||
color="grey"
|
||||
class="q-ml-auto"
|
||||
@click="resetPromoCodesDialog"
|
||||
>Cancel</q-btn
|
||||
>
|
||||
</div>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
|
||||
<q-dialog v-model="ticketWaveDialog.show" position="top">
|
||||
<q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
|
||||
<q-form @submit="saveTicketWave" class="q-gutter-md">
|
||||
<div
|
||||
class="text-subtitle1"
|
||||
v-text="
|
||||
ticketWaveDialog.editingWaveId
|
||||
? 'Edit Ticket Wave'
|
||||
: 'Add Ticket Wave'
|
||||
"
|
||||
></div>
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-12 col-md-4">
|
||||
<q-input
|
||||
filled
|
||||
dense
|
||||
v-model.trim="ticketWaveDialog.data.title"
|
||||
type="text"
|
||||
label="Wave title"
|
||||
></q-input>
|
||||
</div>
|
||||
<div class="col-12 col-md-4">
|
||||
<q-input
|
||||
filled
|
||||
dense
|
||||
v-model.trim="ticketWaveDialog.data.opening_date"
|
||||
type="date"
|
||||
label="Ticket opening date"
|
||||
></q-input>
|
||||
</div>
|
||||
<div class="col-12 col-md-4">
|
||||
<q-input
|
||||
filled
|
||||
dense
|
||||
v-model.trim="ticketWaveDialog.data.closing_date"
|
||||
type="date"
|
||||
label="Ticket closing date"
|
||||
></q-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col">
|
||||
<q-select
|
||||
filled
|
||||
dense
|
||||
v-model="ticketWaveDialog.data.currency"
|
||||
type="text"
|
||||
label="Unit"
|
||||
:options="currencies"
|
||||
></q-select>
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-input
|
||||
filled
|
||||
dense
|
||||
v-model.number="ticketWaveDialog.data.amount_tickets"
|
||||
type="number"
|
||||
label="Amount of tickets"
|
||||
></q-input>
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-input
|
||||
filled
|
||||
dense
|
||||
v-model.number="ticketWaveDialog.data.price_per_ticket"
|
||||
type="number"
|
||||
:label="'Price (' + ticketWaveDialog.data.currency + ') *'"
|
||||
:step="ticketWaveDialog.data.currency != 'sats' ? '0.01' : '1'"
|
||||
:mask="ticketWaveDialog.data.currency != 'sats' ? '#.##' : '#'"
|
||||
fill-mask="0"
|
||||
reverse-fill-mask
|
||||
:disable="ticketWaveDialog.data.currency == null"
|
||||
></q-input>
|
||||
</div>
|
||||
</div>
|
||||
<q-toggle
|
||||
v-model="ticketWaveDialog.data.use_ticket_image"
|
||||
label="Use ticket image"
|
||||
left-label
|
||||
></q-toggle>
|
||||
<div
|
||||
v-if="ticketWaveDialog.data.use_ticket_image"
|
||||
class="row items-center q-col-gutter-sm q-mb-sm"
|
||||
>
|
||||
<div class="col-auto">
|
||||
<q-btn
|
||||
unelevated
|
||||
color="primary"
|
||||
type="a"
|
||||
:href="templateDownloadUrl()"
|
||||
download="ticket.jpg"
|
||||
>
|
||||
Download template
|
||||
<q-tooltip>400/733 jpg</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<q-btn
|
||||
outline
|
||||
color="primary"
|
||||
:loading="isUploadingTicketTemplate"
|
||||
@click="triggerTicketImageUpload('dialog')"
|
||||
>Replace</q-btn
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
v-if="ticketWaveDialog.data.ticket_image_id"
|
||||
class="col-12 text-caption"
|
||||
>
|
||||
Custom ticket template uploaded.
|
||||
</div>
|
||||
</div>
|
||||
<q-toggle
|
||||
v-model="ticketWaveDialog.data.allow_fiat"
|
||||
label="Allow fiat checkout"
|
||||
left-label
|
||||
hint="Lets attendees pay through a configured fiat provider using this wave currency."
|
||||
></q-toggle>
|
||||
<q-select
|
||||
v-if="
|
||||
ticketWaveDialog.data.allow_fiat &&
|
||||
['sat', 'sats'].includes(
|
||||
(ticketWaveDialog.data.currency || '').toLowerCase()
|
||||
)
|
||||
"
|
||||
filled
|
||||
dense
|
||||
v-model="ticketWaveDialog.data.fiat_currency"
|
||||
label="Fiat checkout currency"
|
||||
:options="
|
||||
currencies.filter(
|
||||
c => !['sat', 'sats'].includes((c || '').toLowerCase())
|
||||
)
|
||||
"
|
||||
></q-select>
|
||||
<div class="row q-mt-lg">
|
||||
<q-btn unelevated color="primary" type="submit">{{
|
||||
ticketWaveDialog.editingWaveId
|
||||
? 'Update Ticket Wave'
|
||||
: 'Save Ticket Wave'
|
||||
}}</q-btn>
|
||||
<q-btn
|
||||
flat
|
||||
color="grey"
|
||||
class="q-ml-auto"
|
||||
@click="resetTicketWaveDialog"
|
||||
>Cancel</q-btn
|
||||
>
|
||||
</div>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
<input
|
||||
ref="ticketImageUpload"
|
||||
type="file"
|
||||
accept="image/png,image/jpeg,image/webp"
|
||||
style="display: none"
|
||||
@change="handleTicketImageSelected"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -3,16 +3,36 @@ window.PageEventsTicket = {
|
|||
data() {
|
||||
return {
|
||||
ticketId: null,
|
||||
ticket: null
|
||||
ticket: null,
|
||||
printMode: false,
|
||||
qrSrc: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
printWindow() {
|
||||
window.print()
|
||||
async printWindow() {
|
||||
this.printMode = true
|
||||
await this.$nextTick()
|
||||
await this.waitForPrintAssets()
|
||||
setTimeout(() => window.print(), 50)
|
||||
},
|
||||
async waitForPrintAssets() {
|
||||
await this.$nextTick()
|
||||
const img = document.querySelector('.ticket-print-qr')
|
||||
if (!img) return
|
||||
if (img.complete && img.naturalWidth > 0) return
|
||||
await new Promise(resolve => {
|
||||
const done = () => resolve()
|
||||
img.addEventListener('load', done, {once: true})
|
||||
img.addEventListener('error', done, {once: true})
|
||||
setTimeout(done, 500)
|
||||
})
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
this.ticketId = this.$route.params.id
|
||||
this.qrSrc = `/api/v1/qrcode?data=${encodeURIComponent(
|
||||
`ticket://${this.ticketId}`
|
||||
)}`
|
||||
try {
|
||||
const {data} = await LNbits.api.request(
|
||||
'GET',
|
||||
|
|
@ -22,5 +42,8 @@ window.PageEventsTicket = {
|
|||
} catch (error) {
|
||||
LNbits.utils.notifyApiError(error)
|
||||
}
|
||||
window.addEventListener('afterprint', () => {
|
||||
this.printMode = false
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,4 +36,53 @@
|
|||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Teleport to="body">
|
||||
<div class="ticket-print-sheet" v-if="printMode">
|
||||
<img class="ticket-print-qr" :src="qrSrc" alt="Ticket QR" v-if="qrSrc" />
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
@media print {
|
||||
@page {
|
||||
size: auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
* {
|
||||
color: black !important;
|
||||
background: white !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
body > * {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.ticket-print-sheet {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
background: white !important;
|
||||
-webkit-print-color-adjust: exact;
|
||||
print-color-adjust: exact;
|
||||
}
|
||||
|
||||
.ticket-print-qr {
|
||||
display: block;
|
||||
width: 320px;
|
||||
height: 320px;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue