feat: Enhance ticket purchasing and management with QR code support
- Update PurchaseTicketDialog.vue to display a ticket QR code after successful purchase and manage its visibility. - Refactor useTicketPurchase composable to include ticket QR code generation and state management. - Introduce QR code functionality in MyTickets.vue for displaying ticket QR codes, allowing users to toggle visibility. - Improve user experience by providing clear feedback on ticket purchase status and QR code availability.
This commit is contained in:
parent
63d636a8a0
commit
de8db6a12b
3 changed files with 341 additions and 141 deletions
|
|
@ -40,7 +40,10 @@ const {
|
|||
purchaseTicketForEvent,
|
||||
handleOpenLightningWallet,
|
||||
resetPaymentState,
|
||||
cleanup
|
||||
cleanup,
|
||||
ticketQRCode,
|
||||
purchasedTicketId,
|
||||
showTicketQR
|
||||
} = useTicketPurchase()
|
||||
|
||||
async function handlePurchase() {
|
||||
|
|
@ -179,7 +182,7 @@ onUnmounted(() => {
|
|||
</div>
|
||||
|
||||
<!-- Payment QR Code and Status -->
|
||||
<div v-else class="py-4 flex flex-col items-center gap-4">
|
||||
<div v-else-if="paymentHash && !showTicketQR" class="py-4 flex flex-col items-center gap-4">
|
||||
<div class="text-center space-y-2">
|
||||
<h3 class="text-lg font-semibold">Payment Required</h3>
|
||||
<p v-if="isPayingWithWallet" class="text-sm text-muted-foreground">
|
||||
|
|
@ -190,7 +193,7 @@ onUnmounted(() => {
|
|||
</p>
|
||||
</div>
|
||||
|
||||
<div v-if="!isPayingWithWallet" class="bg-muted/50 rounded-lg p-4">
|
||||
<div v-if="!isPayingWithWallet && qrCode" class="bg-muted/50 rounded-lg p-4">
|
||||
<img :src="qrCode" alt="Lightning payment QR code" class="w-64 h-64 mx-auto" />
|
||||
</div>
|
||||
|
||||
|
|
@ -213,6 +216,32 @@ onUnmounted(() => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Ticket QR Code (After Successful Purchase) -->
|
||||
<div v-else-if="showTicketQR && ticketQRCode" class="py-4 flex flex-col items-center gap-4">
|
||||
<div class="text-center space-y-2">
|
||||
<h3 class="text-lg font-semibold text-green-600">Ticket Purchased Successfully!</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Your ticket has been purchased. Here's your ticket QR code:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-muted/50 rounded-lg p-4">
|
||||
<div class="flex flex-col items-center space-y-3">
|
||||
<img :src="ticketQRCode" alt="Ticket QR code" class="w-48 h-48 border rounded-lg" />
|
||||
<div class="text-center">
|
||||
<p class="text-xs text-muted-foreground">Ticket ID</p>
|
||||
<p class="text-xs font-mono">{{ purchasedTicketId }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3 w-full">
|
||||
<Button variant="outline" @click="handleClose" class="w-full">
|
||||
Close
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
|
@ -1,201 +1,218 @@
|
|||
import { ref, computed } from 'vue'
|
||||
import { ref, computed, onUnmounted } from 'vue'
|
||||
import { purchaseTicket, checkPaymentStatus, payInvoiceWithWallet } from '@/lib/api/events'
|
||||
import { useAuth } from './useAuth'
|
||||
import { toast } from 'vue-sonner'
|
||||
|
||||
interface Wallet {
|
||||
id: string
|
||||
user: string
|
||||
name: string
|
||||
adminkey: string
|
||||
inkey: string
|
||||
deleted: boolean
|
||||
created_at: string
|
||||
updated_at: string
|
||||
currency?: string
|
||||
balance_msat: number
|
||||
extra?: {
|
||||
icon: string
|
||||
color: string
|
||||
pinned: boolean
|
||||
}
|
||||
}
|
||||
|
||||
export function useTicketPurchase() {
|
||||
const { isAuthenticated, currentUser } = useAuth()
|
||||
|
||||
// State
|
||||
const isLoading = ref(false)
|
||||
const error = ref<string | null>(null)
|
||||
const paymentHash = ref('')
|
||||
const paymentRequest = ref('')
|
||||
const qrCode = ref('')
|
||||
const paymentHash = ref<string | null>(null)
|
||||
const paymentRequest = ref<string | null>(null)
|
||||
const qrCode = ref<string | null>(null)
|
||||
const isPaymentPending = ref(false)
|
||||
const paymentCheckInterval = ref<number | null>(null)
|
||||
const isPayingWithWallet = ref(false)
|
||||
|
||||
// Ticket QR code state
|
||||
const ticketQRCode = ref<string | null>(null)
|
||||
const purchasedTicketId = ref<string | null>(null)
|
||||
const showTicketQR = ref(false)
|
||||
|
||||
const canPurchase = computed(() => {
|
||||
return isAuthenticated.value && !isLoading.value
|
||||
})
|
||||
|
||||
// Computed properties
|
||||
const canPurchase = computed(() => isAuthenticated.value && currentUser.value)
|
||||
const userDisplay = computed(() => {
|
||||
if (!currentUser.value) return null
|
||||
|
||||
return {
|
||||
name: currentUser.value.username || currentUser.value.email || 'Anonymous',
|
||||
id: currentUser.value.id,
|
||||
shortId: currentUser.value.id.slice(0, 8) + '...' + currentUser.value.id.slice(-8)
|
||||
name: currentUser.value.username || currentUser.value.id,
|
||||
shortId: currentUser.value.id.slice(0, 8)
|
||||
}
|
||||
})
|
||||
|
||||
const userWallets = computed(() => currentUser.value?.wallets || [])
|
||||
const hasWalletWithBalance = computed(() =>
|
||||
userWallets.value.some((wallet: any) => wallet.balance_msat > 0)
|
||||
)
|
||||
|
||||
const userWallets = computed(() => {
|
||||
if (!currentUser.value) return [] as Wallet[]
|
||||
return currentUser.value.wallets || []
|
||||
})
|
||||
|
||||
const hasWalletWithBalance = computed(() => {
|
||||
return userWallets.value.some((wallet: Wallet) => wallet.balance_msat > 0)
|
||||
})
|
||||
|
||||
// Generate QR code for Lightning payment
|
||||
async function generateQRCode(bolt11: string) {
|
||||
try {
|
||||
const QRCode = await import('qrcode')
|
||||
qrCode.value = await QRCode.toDataURL(`lightning:${bolt11}`)
|
||||
const qrcode = await import('qrcode')
|
||||
const dataUrl = await qrcode.toDataURL(bolt11, {
|
||||
width: 256,
|
||||
margin: 2,
|
||||
color: {
|
||||
dark: '#000000',
|
||||
light: '#FFFFFF'
|
||||
}
|
||||
})
|
||||
qrCode.value = dataUrl
|
||||
} catch (err) {
|
||||
console.error('Failed to generate QR code:', err)
|
||||
console.error('Error generating QR code:', err)
|
||||
error.value = 'Failed to generate QR code'
|
||||
}
|
||||
}
|
||||
|
||||
async function payWithWallet(paymentRequest: string) {
|
||||
if (!currentUser.value || !userWallets.value.length) {
|
||||
throw new Error('No wallet available for payment')
|
||||
// Generate QR code for ticket
|
||||
async function generateTicketQRCode(ticketId: string) {
|
||||
try {
|
||||
const qrcode = await import('qrcode')
|
||||
const ticketUrl = `ticket://${ticketId}`
|
||||
const dataUrl = await qrcode.toDataURL(ticketUrl, {
|
||||
width: 128,
|
||||
margin: 2,
|
||||
color: {
|
||||
dark: '#000000',
|
||||
light: '#FFFFFF'
|
||||
}
|
||||
})
|
||||
ticketQRCode.value = dataUrl
|
||||
return dataUrl
|
||||
} catch (error) {
|
||||
console.error('Error generating ticket QR code:', error)
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
// Find the first wallet with sufficient balance
|
||||
const wallet = userWallets.value.find((w: Wallet) => w.balance_msat > 0)
|
||||
if (!wallet) {
|
||||
// Pay with wallet
|
||||
async function payWithWallet(paymentRequest: string) {
|
||||
const walletWithBalance = userWallets.value.find((wallet: any) => wallet.balance_msat > 0)
|
||||
|
||||
if (!walletWithBalance) {
|
||||
throw new Error('No wallet with sufficient balance found')
|
||||
}
|
||||
|
||||
try {
|
||||
isPayingWithWallet.value = true
|
||||
const result = await payInvoiceWithWallet(paymentRequest, wallet.id, wallet.adminkey)
|
||||
|
||||
toast.success(`Payment successful! Fee: ${result.fee_msat} msat`)
|
||||
return result
|
||||
} catch (err) {
|
||||
const message = err instanceof Error ? err.message : 'Failed to pay with wallet'
|
||||
toast.error(message)
|
||||
throw err
|
||||
} finally {
|
||||
isPayingWithWallet.value = false
|
||||
await payInvoiceWithWallet(paymentRequest, walletWithBalance.id, walletWithBalance.adminkey)
|
||||
return true
|
||||
} catch (error) {
|
||||
console.error('Wallet payment failed:', error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
// Purchase ticket for event
|
||||
async function purchaseTicketForEvent(eventId: string) {
|
||||
if (!isAuthenticated.value) {
|
||||
error.value = 'Please log in to purchase tickets'
|
||||
toast.error('Please log in to purchase tickets')
|
||||
return
|
||||
if (!canPurchase.value) {
|
||||
throw new Error('User must be authenticated to purchase tickets')
|
||||
}
|
||||
|
||||
try {
|
||||
isLoading.value = true
|
||||
error.value = ''
|
||||
isLoading.value = true
|
||||
error.value = null
|
||||
paymentHash.value = null
|
||||
paymentRequest.value = null
|
||||
qrCode.value = null
|
||||
ticketQRCode.value = null
|
||||
purchasedTicketId.value = null
|
||||
showTicketQR.value = false
|
||||
|
||||
// Step 1: Get the invoice
|
||||
const result = await purchaseTicket(eventId)
|
||||
|
||||
paymentHash.value = result.payment_hash
|
||||
paymentRequest.value = result.payment_request
|
||||
await generateQRCode(result.payment_request)
|
||||
|
||||
// Step 2: Try to pay with wallet if user has balance
|
||||
try {
|
||||
// Get the invoice
|
||||
const invoice = await purchaseTicket(eventId)
|
||||
paymentHash.value = invoice.payment_hash
|
||||
paymentRequest.value = invoice.payment_request
|
||||
|
||||
// Generate QR code for payment
|
||||
await generateQRCode(invoice.payment_request)
|
||||
|
||||
// Try to pay with wallet if available
|
||||
if (hasWalletWithBalance.value) {
|
||||
isPayingWithWallet.value = true
|
||||
try {
|
||||
await payWithWallet(result.payment_request)
|
||||
// Payment successful, start monitoring for ticket confirmation
|
||||
startPaymentStatusCheck(eventId, result.payment_hash)
|
||||
return
|
||||
} catch (walletPaymentError) {
|
||||
console.log('Wallet payment failed, showing QR code for manual payment:', walletPaymentError)
|
||||
// Fall back to QR code payment
|
||||
startPaymentStatusCheck(eventId, result.payment_hash)
|
||||
await payWithWallet(invoice.payment_request)
|
||||
// If wallet payment succeeds, proceed to check payment status
|
||||
await startPaymentStatusCheck(eventId, invoice.payment_hash)
|
||||
} catch (walletError) {
|
||||
// If wallet payment fails, fall back to manual payment
|
||||
console.log('Wallet payment failed, falling back to manual payment:', walletError)
|
||||
isPayingWithWallet.value = false
|
||||
await startPaymentStatusCheck(eventId, invoice.payment_hash)
|
||||
}
|
||||
} else {
|
||||
// No wallet balance, show QR code for manual payment
|
||||
startPaymentStatusCheck(eventId, result.payment_hash)
|
||||
// No wallet balance, proceed with manual payment
|
||||
await startPaymentStatusCheck(eventId, invoice.payment_hash)
|
||||
}
|
||||
|
||||
toast.success('Payment request generated successfully')
|
||||
} catch (err) {
|
||||
const message = err instanceof Error ? err.message : 'Failed to generate payment request'
|
||||
error.value = message
|
||||
toast.error(message)
|
||||
throw err
|
||||
error.value = err instanceof Error ? err.message : 'Failed to purchase ticket'
|
||||
console.error('Error purchasing ticket:', err)
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function startPaymentStatusCheck(eventId: string, paymentHash: string) {
|
||||
// Start payment status check
|
||||
async function startPaymentStatusCheck(eventId: string, hash: string) {
|
||||
isPaymentPending.value = true
|
||||
|
||||
// Clear any existing interval
|
||||
if (paymentCheckInterval.value) {
|
||||
clearInterval(paymentCheckInterval.value)
|
||||
}
|
||||
let checkInterval: NodeJS.Timeout | null = null
|
||||
|
||||
// Check payment status every 2 seconds
|
||||
paymentCheckInterval.value = window.setInterval(async () => {
|
||||
const checkPayment = async () => {
|
||||
try {
|
||||
const status = await checkPaymentStatus(eventId, paymentHash)
|
||||
const result = await checkPaymentStatus(eventId, hash)
|
||||
|
||||
if (status.paid) {
|
||||
// Payment successful
|
||||
clearInterval(paymentCheckInterval.value!)
|
||||
paymentCheckInterval.value = null
|
||||
if (result.paid) {
|
||||
isPaymentPending.value = false
|
||||
if (checkInterval) {
|
||||
clearInterval(checkInterval)
|
||||
}
|
||||
|
||||
toast.success('Payment successful! Your ticket has been purchased.')
|
||||
// Generate ticket QR code
|
||||
if (result.ticket_id) {
|
||||
purchasedTicketId.value = result.ticket_id
|
||||
await generateTicketQRCode(result.ticket_id)
|
||||
showTicketQR.value = true
|
||||
}
|
||||
|
||||
// Reset payment state
|
||||
resetPaymentState()
|
||||
|
||||
return { success: true, ticketId: status.ticket_id }
|
||||
toast.success('Ticket purchased successfully!')
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error checking payment status:', err)
|
||||
// Don't show error to user for status checks, just log it
|
||||
}
|
||||
}, 2000)
|
||||
}
|
||||
|
||||
// Check immediately
|
||||
await checkPayment()
|
||||
|
||||
// Then check every 2 seconds
|
||||
checkInterval = setInterval(checkPayment, 2000)
|
||||
}
|
||||
|
||||
// Stop payment status check
|
||||
function stopPaymentStatusCheck() {
|
||||
if (paymentCheckInterval.value) {
|
||||
clearInterval(paymentCheckInterval.value)
|
||||
paymentCheckInterval.value = null
|
||||
}
|
||||
isPaymentPending.value = false
|
||||
}
|
||||
|
||||
// Reset payment state
|
||||
function resetPaymentState() {
|
||||
paymentHash.value = ''
|
||||
paymentRequest.value = ''
|
||||
qrCode.value = ''
|
||||
error.value = ''
|
||||
stopPaymentStatusCheck()
|
||||
isLoading.value = false
|
||||
error.value = null
|
||||
paymentHash.value = null
|
||||
paymentRequest.value = null
|
||||
qrCode.value = null
|
||||
isPaymentPending.value = false
|
||||
isPayingWithWallet.value = false
|
||||
ticketQRCode.value = null
|
||||
purchasedTicketId.value = null
|
||||
showTicketQR.value = false
|
||||
}
|
||||
|
||||
// Open Lightning wallet
|
||||
function handleOpenLightningWallet() {
|
||||
if (paymentRequest.value) {
|
||||
window.location.href = `lightning:${paymentRequest.value}`
|
||||
window.open(`lightning:${paymentRequest.value}`, '_blank')
|
||||
}
|
||||
}
|
||||
|
||||
// Cleanup on unmount
|
||||
// Cleanup function
|
||||
function cleanup() {
|
||||
stopPaymentStatusCheck()
|
||||
}
|
||||
|
||||
// Lifecycle
|
||||
onUnmounted(() => {
|
||||
cleanup()
|
||||
})
|
||||
|
||||
return {
|
||||
// State
|
||||
isLoading,
|
||||
|
|
@ -205,16 +222,21 @@ export function useTicketPurchase() {
|
|||
qrCode,
|
||||
isPaymentPending,
|
||||
isPayingWithWallet,
|
||||
ticketQRCode,
|
||||
purchasedTicketId,
|
||||
showTicketQR,
|
||||
|
||||
// Computed
|
||||
canPurchase,
|
||||
userDisplay,
|
||||
userWallets,
|
||||
hasWalletWithBalance,
|
||||
|
||||
|
||||
// Actions
|
||||
purchaseTicketForEvent,
|
||||
payWithWallet,
|
||||
handleOpenLightningWallet,
|
||||
resetPaymentState,
|
||||
cleanup,
|
||||
generateTicketQRCode
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<!-- eslint-disable vue/multi-word-component-names -->
|
||||
<script setup lang="ts">
|
||||
import { onMounted } from 'vue'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useUserTickets } from '@/composables/useUserTickets'
|
||||
import { useAuth } from '@/composables/useAuth'
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
|
|
@ -9,7 +9,7 @@ import { ScrollArea } from '@/components/ui/scroll-area'
|
|||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { format } from 'date-fns'
|
||||
import { Ticket, User, Calendar, CreditCard, CheckCircle, Clock, AlertCircle } from 'lucide-vue-next'
|
||||
import { Ticket, User, Calendar, CreditCard, CheckCircle, Clock, AlertCircle, QrCode } from 'lucide-vue-next'
|
||||
|
||||
const { isAuthenticated, userDisplay } = useAuth()
|
||||
const {
|
||||
|
|
@ -23,6 +23,10 @@ const {
|
|||
refresh
|
||||
} = useUserTickets()
|
||||
|
||||
// QR code state
|
||||
const qrCodes = ref<Record<string, string>>({})
|
||||
const showQRCode = ref<Record<string, boolean>>({})
|
||||
|
||||
function formatDate(dateStr: string) {
|
||||
return format(new Date(dateStr), 'PPP')
|
||||
}
|
||||
|
|
@ -37,6 +41,35 @@ function getTicketStatus(ticket: any) {
|
|||
return { status: 'paid', label: 'Paid', icon: CreditCard, color: 'text-blue-600' }
|
||||
}
|
||||
|
||||
async function generateQRCode(ticketId: string) {
|
||||
if (qrCodes.value[ticketId]) return qrCodes.value[ticketId]
|
||||
|
||||
try {
|
||||
const qrcode = await import('qrcode')
|
||||
const ticketUrl = `ticket://${ticketId}`
|
||||
const dataUrl = await qrcode.toDataURL(ticketUrl, {
|
||||
width: 128,
|
||||
margin: 2,
|
||||
color: {
|
||||
dark: '#000000',
|
||||
light: '#FFFFFF'
|
||||
}
|
||||
})
|
||||
qrCodes.value[ticketId] = dataUrl
|
||||
return dataUrl
|
||||
} catch (error) {
|
||||
console.error('Error generating QR code:', error)
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
function toggleQRCode(ticketId: string) {
|
||||
showQRCode.value[ticketId] = !showQRCode.value[ticketId]
|
||||
if (showQRCode.value[ticketId] && !qrCodes.value[ticketId]) {
|
||||
generateQRCode(ticketId)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
if (isAuthenticated.value) {
|
||||
await refresh()
|
||||
|
|
@ -103,9 +136,19 @@ onMounted(async () => {
|
|||
<CardHeader>
|
||||
<div class="flex items-center justify-between">
|
||||
<CardTitle class="text-foreground text-sm">Ticket #{{ ticket.id.slice(0, 8) }}</CardTitle>
|
||||
<Badge :variant="getTicketStatus(ticket).status === 'pending' ? 'secondary' : 'default'">
|
||||
{{ getTicketStatus(ticket).label }}
|
||||
</Badge>
|
||||
<div class="flex items-center gap-2">
|
||||
<Badge :variant="getTicketStatus(ticket).status === 'pending' ? 'secondary' : 'default'">
|
||||
{{ getTicketStatus(ticket).label }}
|
||||
</Badge>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
@click="toggleQRCode(ticket.id)"
|
||||
class="h-6 w-6 p-0"
|
||||
>
|
||||
<QrCode class="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<CardDescription>
|
||||
Event ID: {{ ticket.event }}
|
||||
|
|
@ -132,6 +175,25 @@ onMounted(async () => {
|
|||
<span class="text-muted-foreground">Registered:</span>
|
||||
<span class="text-sm">{{ formatDate(ticket.reg_timestamp) }}</span>
|
||||
</div>
|
||||
|
||||
<!-- QR Code Section -->
|
||||
<div v-if="showQRCode[ticket.id]" class="mt-4 pt-4 border-t">
|
||||
<div class="flex flex-col items-center space-y-2">
|
||||
<img
|
||||
v-if="qrCodes[ticket.id]"
|
||||
:src="qrCodes[ticket.id]"
|
||||
alt="Ticket QR Code"
|
||||
class="w-32 h-32 border rounded-lg"
|
||||
/>
|
||||
<div v-else class="w-32 h-32 border rounded-lg flex items-center justify-center">
|
||||
<span class="text-xs text-muted-foreground">Loading...</span>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p class="text-xs text-muted-foreground">Ticket ID</p>
|
||||
<p class="text-xs font-mono">{{ ticket.id }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
|
@ -146,9 +208,19 @@ onMounted(async () => {
|
|||
<CardHeader>
|
||||
<div class="flex items-center justify-between">
|
||||
<CardTitle class="text-foreground text-sm">Ticket #{{ ticket.id.slice(0, 8) }}</CardTitle>
|
||||
<Badge variant="default">
|
||||
{{ getTicketStatus(ticket).label }}
|
||||
</Badge>
|
||||
<div class="flex items-center gap-2">
|
||||
<Badge variant="default">
|
||||
{{ getTicketStatus(ticket).label }}
|
||||
</Badge>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
@click="toggleQRCode(ticket.id)"
|
||||
class="h-6 w-6 p-0"
|
||||
>
|
||||
<QrCode class="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<CardDescription>
|
||||
Event ID: {{ ticket.event }}
|
||||
|
|
@ -175,6 +247,25 @@ onMounted(async () => {
|
|||
<span class="text-muted-foreground">Registered:</span>
|
||||
<span class="text-sm">{{ formatDate(ticket.reg_timestamp) }}</span>
|
||||
</div>
|
||||
|
||||
<!-- QR Code Section -->
|
||||
<div v-if="showQRCode[ticket.id]" class="mt-4 pt-4 border-t">
|
||||
<div class="flex flex-col items-center space-y-2">
|
||||
<img
|
||||
v-if="qrCodes[ticket.id]"
|
||||
:src="qrCodes[ticket.id]"
|
||||
alt="Ticket QR Code"
|
||||
class="w-32 h-32 border rounded-lg"
|
||||
/>
|
||||
<div v-else class="w-32 h-32 border rounded-lg flex items-center justify-center">
|
||||
<span class="text-xs text-muted-foreground">Loading...</span>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p class="text-xs text-muted-foreground">Ticket ID</p>
|
||||
<p class="text-xs font-mono">{{ ticket.id }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
|
@ -189,9 +280,19 @@ onMounted(async () => {
|
|||
<CardHeader>
|
||||
<div class="flex items-center justify-between">
|
||||
<CardTitle class="text-foreground text-sm">Ticket #{{ ticket.id.slice(0, 8) }}</CardTitle>
|
||||
<Badge variant="secondary">
|
||||
{{ getTicketStatus(ticket).label }}
|
||||
</Badge>
|
||||
<div class="flex items-center gap-2">
|
||||
<Badge variant="secondary">
|
||||
{{ getTicketStatus(ticket).label }}
|
||||
</Badge>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
@click="toggleQRCode(ticket.id)"
|
||||
class="h-6 w-6 p-0"
|
||||
>
|
||||
<QrCode class="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<CardDescription>
|
||||
Event ID: {{ ticket.event }}
|
||||
|
|
@ -214,6 +315,25 @@ onMounted(async () => {
|
|||
<span class="text-muted-foreground">Time:</span>
|
||||
<span class="text-sm">{{ formatTime(ticket.time) }}</span>
|
||||
</div>
|
||||
|
||||
<!-- QR Code Section -->
|
||||
<div v-if="showQRCode[ticket.id]" class="mt-4 pt-4 border-t">
|
||||
<div class="flex flex-col items-center space-y-2">
|
||||
<img
|
||||
v-if="qrCodes[ticket.id]"
|
||||
:src="qrCodes[ticket.id]"
|
||||
alt="Ticket QR Code"
|
||||
class="w-32 h-32 border rounded-lg"
|
||||
/>
|
||||
<div v-else class="w-32 h-32 border rounded-lg flex items-center justify-center">
|
||||
<span class="text-xs text-muted-foreground">Loading...</span>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p class="text-xs text-muted-foreground">Ticket ID</p>
|
||||
<p class="text-xs font-mono">{{ ticket.id }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
|
@ -228,9 +348,19 @@ onMounted(async () => {
|
|||
<CardHeader>
|
||||
<div class="flex items-center justify-between">
|
||||
<CardTitle class="text-foreground text-sm">Ticket #{{ ticket.id.slice(0, 8) }}</CardTitle>
|
||||
<Badge variant="default">
|
||||
{{ getTicketStatus(ticket).label }}
|
||||
</Badge>
|
||||
<div class="flex items-center gap-2">
|
||||
<Badge variant="default">
|
||||
{{ getTicketStatus(ticket).label }}
|
||||
</Badge>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
@click="toggleQRCode(ticket.id)"
|
||||
class="h-6 w-6 p-0"
|
||||
>
|
||||
<QrCode class="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<CardDescription>
|
||||
Event ID: {{ ticket.event }}
|
||||
|
|
@ -257,6 +387,25 @@ onMounted(async () => {
|
|||
<span class="text-muted-foreground">Registered:</span>
|
||||
<span class="text-sm">{{ formatDate(ticket.reg_timestamp) }}</span>
|
||||
</div>
|
||||
|
||||
<!-- QR Code Section -->
|
||||
<div v-if="showQRCode[ticket.id]" class="mt-4 pt-4 border-t">
|
||||
<div class="flex flex-col items-center space-y-2">
|
||||
<img
|
||||
v-if="qrCodes[ticket.id]"
|
||||
:src="qrCodes[ticket.id]"
|
||||
alt="Ticket QR Code"
|
||||
class="w-32 h-32 border rounded-lg"
|
||||
/>
|
||||
<div v-else class="w-32 h-32 border rounded-lg flex items-center justify-center">
|
||||
<span class="text-xs text-muted-foreground">Loading...</span>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p class="text-xs text-muted-foreground">Ticket ID</p>
|
||||
<p class="text-xs font-mono">{{ ticket.id }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue