RyderTech/nlcc-itinerary
1
0
Fork 0
Code Issues Pull Requests Packages Activity

Fix home page: show archived sermons in dropdown, fix Today's Sermon heading, add View button

Browse Source
This commit is contained in:
Joshua Ryder
2025-10-02 00:12:39 -04:00
parent 4daea87cd1
commit 3cee9fefd7
1 changed files with 33 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
pages/index.vue
View File

@@ -57,16 +57,24 @@
<!-- 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 class="flex gap-3">
<select
v-model="selectedSermonSlug"
class="flex-1 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>
<button
@click="navigateToSermon"
:disabled="!selectedSermonSlug"
class="px-6 py-3 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed font-medium whitespace-nowrap"
>
View
</button>
</div>
</div>
<!-- Empty State -->
@@ -82,34 +90,36 @@
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')
// Fetch non-archived sermons for the most recent sermon
const { data: activeSermons } = await useFetch('/api/sermons?includeArchived=false')
// Fetch archived sermons for the previous sermons dropdown
const { data: archivedSermons } = await useFetch('/api/sermons?includeArchived=true')
const selectedSermonSlug = ref('')
// Get most recent sermon
// Get most recent non-archived sermon
const mostRecentSermon = computed(() => {
if (!allSermons.value || allSermons.value.length === 0) return null
return allSermons.value[0]
if (!activeSermons.value || activeSermons.value.length === 0) return null
return activeSermons.value[0]
})
// Get all previous sermons (excluding the most recent)
// Get archived sermons only for the previous sermons dropdown
const previousSermons = computed(() => {
if (!allSermons.value || allSermons.value.length <= 1) return []
return allSermons.value.slice(1)
if (!archivedSermons.value) return []
return archivedSermons.value.filter((s: any) => s.archived === 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 sermonDate = new Date(mostRecentSermon.value.date + 'T00:00:00')
const today = new Date()
today.setHours(0, 0, 0, 0)
sermonDate.setHours(0, 0, 0, 0)
// Compare dates (ignoring time)
const isToday = sermonDate.getFullYear() === today.getFullYear() &&
sermonDate.getMonth() === today.getMonth() &&
sermonDate.getDate() === today.getDate()
const isToday = sermonDate.getTime() === today.getTime()
return isToday ? "Today's Sermon" : 'Most Recent Sermon'
})