142 lines
3.8 KiB
Vue
142 lines
3.8 KiB
Vue
<template>
|
|
<div class="min-h-screen bg-gray-50">
|
|
<!-- Header -->
|
|
<header class="bg-white shadow-sm border-b">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between items-center py-4">
|
|
<!-- Logo -->
|
|
<div class="flex items-center">
|
|
<img src="/logos/logo.png" alt="New Life Christian Church" class="h-12 w-auto mr-3" />
|
|
</div>
|
|
|
|
<!-- Welcome Message -->
|
|
<div class="text-center flex-1">
|
|
<h1 class="text-2xl font-bold text-gray-900">
|
|
Welcome to New Life!
|
|
</h1>
|
|
<p class="text-gray-600 mt-1">
|
|
Please choose the sermon you'd like to see.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Admin Login Button -->
|
|
<div class="flex items-center space-x-4">
|
|
<UButton
|
|
v-if="!isLoggedIn"
|
|
@click="showLoginModal = true"
|
|
variant="outline"
|
|
color="primary"
|
|
>
|
|
Admin Login
|
|
</UButton>
|
|
<UButton
|
|
v-else
|
|
@click="navigateTo('/admin')"
|
|
variant="solid"
|
|
color="primary"
|
|
>
|
|
Create Sermon
|
|
</UButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
<!-- Time Filter -->
|
|
<div class="mb-8 flex justify-center">
|
|
<USelect
|
|
v-model="timeFilter"
|
|
:options="timeOptions"
|
|
@update:model-value="loadSermons"
|
|
class="w-48"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Loading State -->
|
|
<div v-if="loading" class="flex justify-center py-12">
|
|
<UIcon name="i-heroicons-arrow-path" class="animate-spin h-8 w-8 text-primary" />
|
|
</div>
|
|
|
|
<!-- Sermons Grid -->
|
|
<div v-else-if="sermons.length > 0" class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
|
<SermonCard
|
|
v-for="sermon in sermons"
|
|
:key="sermon.id"
|
|
:sermon="sermon"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Empty State -->
|
|
<div v-else class="text-center py-12">
|
|
<UIcon name="i-heroicons-book-open" class="mx-auto h-12 w-12 text-gray-400" />
|
|
<h3 class="mt-2 text-sm font-medium text-gray-900">No sermons found</h3>
|
|
<p class="mt-1 text-sm text-gray-500">
|
|
{{ timeFilter === '3months' ? 'No sermons in the last 3 months.' : 'No sermons found for the selected period.' }}
|
|
</p>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Login Modal -->
|
|
<LoginModal
|
|
v-model="showLoginModal"
|
|
@success="handleLoginSuccess"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { format, parseISO, isAfter, subMonths } from 'date-fns'
|
|
|
|
const timeFilter = ref('3months')
|
|
const sermons = ref([])
|
|
const loading = ref(true)
|
|
const showLoginModal = ref(false)
|
|
const isLoggedIn = ref(false)
|
|
|
|
const timeOptions = [
|
|
{ label: 'Last 3 Months', value: '3months' },
|
|
{ label: 'Last 6 Months', value: '6months' },
|
|
{ label: 'Last Year', value: '1year' },
|
|
{ label: 'All Sermons', value: 'all' }
|
|
]
|
|
|
|
const loadSermons = async () => {
|
|
loading.value = true
|
|
try {
|
|
const { data } = await $fetch('/api/sermons', {
|
|
query: { time: timeFilter.value }
|
|
})
|
|
sermons.value = data || []
|
|
} catch (error) {
|
|
console.error('Failed to load sermons:', error)
|
|
sermons.value = []
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
// Check if user is logged in
|
|
onMounted(async () => {
|
|
// Check for existing auth token
|
|
const token = useCookie('auth_token')
|
|
if (token.value) {
|
|
try {
|
|
// Verify token with server
|
|
await $fetch('/api/auth/verify')
|
|
isLoggedIn.value = true
|
|
} catch {
|
|
isLoggedIn.value = false
|
|
}
|
|
}
|
|
|
|
await loadSermons()
|
|
})
|
|
|
|
const handleLoginSuccess = () => {
|
|
showLoginModal.value = false
|
|
isLoggedIn.value = true
|
|
}
|
|
</script>
|