Starting over
This commit is contained in:
@@ -1,38 +0,0 @@
|
||||
<template>
|
||||
<UButton
|
||||
@click="showQRCode = true"
|
||||
variant="ghost"
|
||||
color="gray"
|
||||
size="sm"
|
||||
icon="i-heroicons-qr-code"
|
||||
:aria-label="`Show QR code for ${title}`"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
interface Props {
|
||||
url: string
|
||||
title?: string
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const showQRCode = ref(false)
|
||||
|
||||
const fullUrl = computed(() => {
|
||||
if (process.client) {
|
||||
return `${window.location.origin}${props.url}`
|
||||
}
|
||||
return props.url
|
||||
})
|
||||
|
||||
// Emit event to parent component to show modal
|
||||
const emit = defineEmits<{
|
||||
click: [value: boolean]
|
||||
}>()
|
||||
|
||||
watch(showQRCode, (open) => {
|
||||
if (open) {
|
||||
emit('click', open)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -1,95 +0,0 @@
|
||||
<template>
|
||||
<UModal v-model="isOpen">
|
||||
<UCard class="max-w-md">
|
||||
<template #header>
|
||||
<h3 class="text-lg font-semibold">QR Code</h3>
|
||||
<p class="text-sm text-gray-600 mt-1">{{ title }}</p>
|
||||
</template>
|
||||
|
||||
<div class="text-center space-y-4">
|
||||
<div class="bg-white p-4 rounded-lg inline-block">
|
||||
<canvas ref="qrCanvas"></canvas>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<p class="text-sm text-gray-600">
|
||||
<strong>URL:</strong>
|
||||
<span class="font-mono text-xs break-all">{{ fullUrl }}</span>
|
||||
</p>
|
||||
<UButton
|
||||
@click="downloadQR"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
icon="i-heroicons-arrow-down-tray"
|
||||
>
|
||||
Download QR Code
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
</UModal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import QRCode from 'qrcode'
|
||||
|
||||
interface Props {
|
||||
modelValue: boolean
|
||||
url: string
|
||||
title?: string
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'update:modelValue', value: boolean): void
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
const isOpen = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (value) => emit('update:modelValue', value)
|
||||
})
|
||||
|
||||
const qrCanvas = ref<HTMLCanvasElement>()
|
||||
const fullUrl = computed(() => {
|
||||
if (process.client) {
|
||||
return `${window.location.origin}${props.url}`
|
||||
}
|
||||
return props.url
|
||||
})
|
||||
|
||||
const generateQR = async () => {
|
||||
if (!qrCanvas.value) return
|
||||
|
||||
try {
|
||||
await QRCode.toCanvas(qrCanvas.value, fullUrl.value, {
|
||||
width: 200,
|
||||
margin: 2,
|
||||
color: {
|
||||
dark: '#1f2937',
|
||||
light: '#ffffff'
|
||||
}
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('Failed to generate QR code:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const downloadQR = () => {
|
||||
if (!qrCanvas.value) return
|
||||
|
||||
const link = document.createElement('a')
|
||||
link.download = `sermon-qr-${props.title || 'code'}.png`
|
||||
link.href = qrCanvas.value.toDataURL()
|
||||
link.click()
|
||||
}
|
||||
|
||||
watch(isOpen, (open) => {
|
||||
if (open) {
|
||||
nextTick(() => {
|
||||
generateQR()
|
||||
})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -1,93 +0,0 @@
|
||||
<template>
|
||||
<UCard class="h-full flex flex-col hover:shadow-lg transition-shadow duration-200">
|
||||
<template #header>
|
||||
<div class="flex justify-between items-start">
|
||||
<div class="flex-1">
|
||||
<h3 class="text-lg font-semibold text-gray-900 line-clamp-2">
|
||||
{{ sermon.title }}
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 mt-1">
|
||||
{{ formatDate(sermon.date) }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="ml-2">
|
||||
<QRCodeButton :url="sermonUrl" :title="sermon.title" @click="showQRModal = $event" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="flex-1">
|
||||
<div v-if="sermon.bibleReferences && sermon.bibleReferences.length > 0" class="mb-4">
|
||||
<h4 class="text-sm font-medium text-gray-700 mb-2">Bible References:</h4>
|
||||
<div class="space-y-1">
|
||||
<p
|
||||
v-for="reference in sermon.bibleReferences.slice(0, 3)"
|
||||
:key="reference"
|
||||
class="text-sm text-gray-600 bg-gray-50 px-2 py-1 rounded"
|
||||
>
|
||||
{{ reference }}
|
||||
</p>
|
||||
<p
|
||||
v-if="sermon.bibleReferences.length > 3"
|
||||
class="text-sm text-gray-500 italic"
|
||||
>
|
||||
+{{ sermon.bibleReferences.length - 3 }} more references
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="sermon.personalApplication" class="mb-4">
|
||||
<h4 class="text-sm font-medium text-gray-700 mb-2">Personal Application:</h4>
|
||||
<p class="text-sm text-gray-600 line-clamp-3">
|
||||
{{ sermon.personalApplication }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<UButton
|
||||
@click="navigateTo(sermonUrl)"
|
||||
variant="outline"
|
||||
color="primary"
|
||||
class="w-full"
|
||||
:label="`View Sermon - ${sermon.slug.replace('sermon-', '').replace(/(\d{2})(\d{2})(\d{4})/, '$1/$2/$3')}`"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- QR Code Modal -->
|
||||
<QRCodeModal
|
||||
v-model="showQRModal"
|
||||
:url="sermonUrl"
|
||||
:title="sermon.title"
|
||||
/>
|
||||
</UCard>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { format, parseISO } from 'date-fns'
|
||||
|
||||
interface Sermon {
|
||||
id: number
|
||||
title: string
|
||||
date: string
|
||||
slug: string
|
||||
bibleReferences?: string[]
|
||||
personalApplication?: string
|
||||
pastorChallenge?: string
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
sermon: Sermon
|
||||
}>()
|
||||
|
||||
const showQRModal = ref(false)
|
||||
const sermonUrl = computed(() => `/${props.sermon.slug}`)
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
try {
|
||||
return format(parseISO(dateString), 'MMMM d, yyyy')
|
||||
} catch {
|
||||
return dateString
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user