137 lines
4.5 KiB
Vue
137 lines
4.5 KiB
Vue
<template>
|
|
<div class="min-h-screen bg-gray-50">
|
|
<!-- Header -->
|
|
<header class="bg-white shadow-sm">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center space-x-4">
|
|
<img src="/logos/logo.png" alt="New Life Christian Church" class="h-16 w-auto" />
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<ClientOnly fallback-tag="div">
|
|
<template v-if="isAuthenticated">
|
|
<NuxtLink
|
|
to="/admin"
|
|
class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 font-medium text-sm whitespace-nowrap"
|
|
>
|
|
Manage Sermons
|
|
</NuxtLink>
|
|
<button
|
|
@click="handleLogout"
|
|
class="text-sm font-medium text-red-600 hover:text-red-700"
|
|
>
|
|
Logout
|
|
</button>
|
|
</template>
|
|
<NuxtLink
|
|
v-else
|
|
to="/login"
|
|
class="text-sm font-medium text-blue-600 hover:text-blue-700"
|
|
>
|
|
Admin Login
|
|
</NuxtLink>
|
|
<template #fallback>
|
|
<div class="h-10"></div>
|
|
</template>
|
|
</ClientOnly>
|
|
</div>
|
|
</div>
|
|
<div class="text-center mt-6">
|
|
<h1 class="text-3xl font-bold text-gray-900">
|
|
Welcome to New Life!
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
|
<!-- Most Recent Sermon -->
|
|
<div v-if="mostRecentSermon">
|
|
<h2 class="text-2xl font-semibold text-gray-900 mb-6">{{ sermonHeading }}</h2>
|
|
<div class="max-w-md mx-auto">
|
|
<SermonCard :sermon="mostRecentSermon" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Previous Sermons Dropdown -->
|
|
<div v-if="previousSermons.length > 0" class="mt-12 max-w-2xl mx-auto">
|
|
<p class="text-center text-gray-700 mb-4">Use the dropdown below to view a previous sermon</p>
|
|
<select
|
|
v-model="selectedSermonSlug"
|
|
@change="navigateToSermon"
|
|
class="block w-full px-4 py-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-base"
|
|
>
|
|
<option value="">-- Select a previous sermon --</option>
|
|
<option v-for="sermon in previousSermons" :key="sermon.id" :value="sermon.slug">
|
|
{{ sermon.title }} ({{ formatDate(sermon.date) }})
|
|
</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Empty State -->
|
|
<div v-if="!mostRecentSermon" class="text-center py-12">
|
|
<p class="text-gray-500 text-lg">No sermons available yet.</p>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
// Check authentication status
|
|
const { data: authData } = await useFetch('/api/auth/verify')
|
|
const isAuthenticated = computed(() => authData.value?.authenticated || false)
|
|
|
|
// Fetch non-archived sermons only
|
|
const { data: allSermons } = await useFetch('/api/sermons?includeArchived=false')
|
|
|
|
const selectedSermonSlug = ref('')
|
|
|
|
// Get most recent sermon
|
|
const mostRecentSermon = computed(() => {
|
|
if (!allSermons.value || allSermons.value.length === 0) return null
|
|
return allSermons.value[0]
|
|
})
|
|
|
|
// Get all previous sermons (excluding the most recent)
|
|
const previousSermons = computed(() => {
|
|
if (!allSermons.value || allSermons.value.length <= 1) return []
|
|
return allSermons.value.slice(1)
|
|
})
|
|
|
|
// Check if most recent sermon is today
|
|
const sermonHeading = computed(() => {
|
|
if (!mostRecentSermon.value) return 'Recent Sermon'
|
|
|
|
const sermonDate = new Date(mostRecentSermon.value.date)
|
|
const today = new Date()
|
|
|
|
// Compare dates (ignoring time)
|
|
const isToday = sermonDate.getFullYear() === today.getFullYear() &&
|
|
sermonDate.getMonth() === today.getMonth() &&
|
|
sermonDate.getDate() === today.getDate()
|
|
|
|
return isToday ? "Today's Sermon" : 'Most Recent Sermon'
|
|
})
|
|
|
|
function formatDate(dateString: string) {
|
|
const date = new Date(dateString)
|
|
return date.toLocaleDateString('en-US', {
|
|
year: 'numeric',
|
|
month: '2-digit',
|
|
day: '2-digit'
|
|
})
|
|
}
|
|
|
|
function navigateToSermon() {
|
|
if (selectedSermonSlug.value) {
|
|
navigateTo(`/${selectedSermonSlug.value}`)
|
|
}
|
|
}
|
|
|
|
async function handleLogout() {
|
|
await $fetch('/api/auth/logout', { method: 'POST' })
|
|
window.location.reload()
|
|
}
|
|
</script>
|