55c4e77848
Some checks failed
Code Analysis (JS/Vue) / analyze (push) Failing after 56s
This commit updates the homepage component to utilize a dynamic rendering approach for sections, allowing for configuration-based display of components. It introduces computed properties to manage section visibility and mapping of section IDs to their respective components, enhancing flexibility and maintainability of the homepage structure.
56 lines
1.5 KiB
Vue
56 lines
1.5 KiB
Vue
<template>
|
|
<div class="min-h-full">
|
|
<component
|
|
:is="getComponentForSection(section.id)"
|
|
v-for="section in enabledSections"
|
|
:key="section.id"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
import Hero from '~/components/Hero.vue'
|
|
import HomeTermine from '~/components/HomeTermine.vue'
|
|
import Spielplan from '~/components/Spielplan.vue'
|
|
import PublicNews from '~/components/PublicNews.vue'
|
|
import HomeActions from '~/components/HomeActions.vue'
|
|
|
|
const { data: config } = await useFetch('/api/config')
|
|
|
|
// Standard-Reihenfolge, falls Config nicht vorhanden
|
|
const defaultSections = [
|
|
{ id: 'banner', enabled: true },
|
|
{ id: 'termine', enabled: true },
|
|
{ id: 'spiele', enabled: true },
|
|
{ id: 'aktuelles', enabled: true },
|
|
{ id: 'kontakt', enabled: true }
|
|
]
|
|
|
|
// Lade Sections aus Config oder verwende Standard
|
|
const sections = computed(() => {
|
|
if (config.value?.homepage?.sections && Array.isArray(config.value.homepage.sections)) {
|
|
return config.value.homepage.sections
|
|
}
|
|
return defaultSections
|
|
})
|
|
|
|
// Filtere nur aktivierte Sections
|
|
const enabledSections = computed(() => {
|
|
return sections.value.filter(section => section.enabled !== false)
|
|
})
|
|
|
|
// Mapping von Section-ID zu Komponente
|
|
const componentMap = {
|
|
banner: Hero,
|
|
termine: HomeTermine,
|
|
spiele: Spielplan,
|
|
aktuelles: PublicNews,
|
|
kontakt: HomeActions
|
|
}
|
|
|
|
function getComponentForSection(sectionId) {
|
|
return componentMap[sectionId] || null
|
|
}
|
|
</script>
|