From 55c4e77848be70332462ecbaac05b27d0cdaa323 Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Thu, 5 Feb 2026 17:40:02 +0100
Subject: [PATCH] Refactor homepage layout to dynamically render sections based
 on configuration

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.
---
 pages/cms/index.vue      |  23 +++-
 pages/cms/startseite.vue | 276 +++++++++++++++++++++++++++++++++++++++
 pages/index.vue          |  57 ++++++--
 3 files changed, 341 insertions(+), 15 deletions(-)
 create mode 100644 pages/cms/startseite.vue

diff --git a/pages/cms/index.vue b/pages/cms/index.vue
index d165f36..5ce421e 100644
--- a/pages/cms/index.vue
+++ b/pages/cms/index.vue
@@ -183,6 +183,27 @@
           </p>
         </NuxtLink>
 
+        <!-- Startseite -->
+        <NuxtLink
+          to="/cms/startseite"
+          class="bg-white p-6 rounded-xl shadow-lg border border-gray-100 hover:shadow-xl transition-all group"
+        >
+          <div class="flex items-center mb-4">
+            <div class="w-12 h-12 bg-cyan-100 rounded-lg flex items-center justify-center group-hover:bg-cyan-600 transition-colors">
+              <Layout
+                :size="24"
+                class="text-cyan-600 group-hover:text-white"
+              />
+            </div>
+            <h2 class="ml-4 text-xl font-semibold text-gray-900">
+              Startseite
+            </h2>
+          </div>
+          <p class="text-gray-600">
+            Reihenfolge der Startseiten-Elemente konfigurieren
+          </p>
+        </NuxtLink>
+
         <!-- Einstellungen -->
         <NuxtLink
           to="/cms/einstellungen"
@@ -231,7 +252,7 @@
 </template>
 
 <script setup>
-import { Newspaper, Calendar, Users, UserCog, Settings } from 'lucide-vue-next'
+import { Newspaper, Calendar, Users, UserCog, Settings, Layout } from 'lucide-vue-next'
 
 const authStore = useAuthStore()
 
diff --git a/pages/cms/startseite.vue b/pages/cms/startseite.vue
new file mode 100644
index 0000000..47caabf
--- /dev/null
+++ b/pages/cms/startseite.vue
@@ -0,0 +1,276 @@
+<template>
+  <div class="min-h-full py-16 bg-gray-50">
+    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div class="flex justify-between items-center mb-6">
+        <div>
+          <h1 class="text-4xl sm:text-5xl font-display font-bold text-gray-900 mb-2">
+            Startseite konfigurieren
+          </h1>
+          <div class="w-24 h-1 bg-primary-600 mb-4" />
+          <p class="text-gray-600">
+            Legen Sie die Reihenfolge der Elemente auf der Startseite fest.
+          </p>
+        </div>
+        <button
+          class="flex items-center px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white font-semibold rounded-lg transition-colors"
+          :disabled="isSaving"
+          @click="saveConfig"
+        >
+          <Loader2
+            v-if="isSaving"
+            :size="20"
+            class="animate-spin mr-2"
+          />
+          <span>{{ isSaving ? 'Speichert...' : 'Speichern' }}</span>
+        </button>
+      </div>
+
+      <!-- Loading State -->
+      <div
+        v-if="isLoading"
+        class="flex items-center justify-center py-12"
+      >
+        <Loader2
+          :size="40"
+          class="animate-spin text-primary-600"
+        />
+      </div>
+
+      <!-- Config Form -->
+      <div
+        v-else
+        class="bg-white rounded-xl shadow-lg p-6"
+      >
+        <div class="mb-6">
+          <h2 class="text-xl font-semibold text-gray-900 mb-2">
+            Verfügbare Elemente
+          </h2>
+          <p class="text-sm text-gray-600">
+            Ziehen Sie die Elemente per Drag & Drop oder verwenden Sie die Pfeil-Buttons, um die Reihenfolge zu ändern.
+          </p>
+        </div>
+
+        <div class="space-y-3">
+          <div
+            v-for="(section, index) in sections"
+            :key="section.id"
+            class="flex items-center gap-3 p-4 border border-gray-200 rounded-lg bg-gray-50 hover:bg-gray-100 transition-colors"
+          >
+            <!-- Drag Handle -->
+            <div class="flex flex-col gap-1 cursor-move">
+              <GripVertical :size="16" class="text-gray-400" />
+            </div>
+
+            <!-- Section Info -->
+            <div class="flex-1">
+              <div class="font-semibold text-gray-900">
+                {{ getSectionLabel(section.id) }}
+              </div>
+              <div class="text-sm text-gray-500">
+                {{ getSectionDescription(section.id) }}
+              </div>
+            </div>
+
+            <!-- Position Controls -->
+            <div class="flex items-center gap-1">
+              <button
+                type="button"
+                class="p-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+                title="Nach oben"
+                :disabled="isSaving || index === 0"
+                @click="moveUp(index)"
+              >
+                <ChevronUp :size="18" />
+              </button>
+              <button
+                type="button"
+                class="p-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+                title="Nach unten"
+                :disabled="isSaving || index === sections.length - 1"
+                @click="moveDown(index)"
+              >
+                <ChevronDown :size="18" />
+              </button>
+            </div>
+
+            <!-- Visibility Toggle -->
+            <div class="flex items-center">
+              <label class="flex items-center cursor-pointer">
+                <input
+                  v-model="section.enabled"
+                  type="checkbox"
+                  class="w-5 h-5 text-primary-600 border-gray-300 rounded focus:ring-primary-500"
+                  :disabled="isSaving"
+                >
+                <span class="ml-2 text-sm text-gray-700">
+                  Anzeigen
+                </span>
+              </label>
+            </div>
+          </div>
+        </div>
+
+        <!-- Info Box -->
+        <div class="mt-6 p-4 bg-blue-50 border border-blue-200 rounded-lg">
+          <p class="text-sm text-blue-800">
+            <strong>Hinweis:</strong> Deaktivierte Elemente werden auf der Startseite nicht angezeigt, bleiben aber in der Konfiguration erhalten.
+          </p>
+        </div>
+
+        <!-- Error Message -->
+        <div
+          v-if="errorMessage"
+          class="mt-6 flex items-center p-3 rounded-md bg-red-50 text-red-700 text-sm"
+        >
+          <AlertCircle
+            :size="20"
+            class="mr-2"
+          />
+          {{ errorMessage }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { Loader2, AlertCircle, ChevronUp, ChevronDown, GripVertical } from 'lucide-vue-next'
+
+const isLoading = ref(true)
+const isSaving = ref(false)
+const errorMessage = ref('')
+const sections = ref([])
+
+// Verfügbare Elemente mit Labels und Beschreibungen
+const availableSections = {
+  banner: {
+    label: 'Banner (Willkommen)',
+    description: 'Hero-Bereich mit Willkommensnachricht'
+  },
+  termine: {
+    label: 'Kommende Termine',
+    description: 'Vorschau der nächsten Vereinstermine'
+  },
+  spiele: {
+    label: 'Nächste Spiele',
+    description: 'Vorschau der kommenden Punktspiele'
+  },
+  aktuelles: {
+    label: 'Aktuelles',
+    description: 'Öffentliche News und Ankündigungen'
+  },
+  kontakt: {
+    label: 'Kontakt-Boxen',
+    description: 'Mitglied werden & Kontakt aufnehmen'
+  }
+}
+
+function getSectionLabel(id) {
+  return availableSections[id]?.label || id
+}
+
+function getSectionDescription(id) {
+  return availableSections[id]?.description || ''
+}
+
+const loadConfig = async () => {
+  isLoading.value = true
+  errorMessage.value = ''
+  try {
+    const config = await $fetch('/api/config')
+    
+    // Standard-Reihenfolge, falls nicht vorhanden
+    const defaultSections = [
+      { id: 'banner', enabled: true },
+      { id: 'termine', enabled: true },
+      { id: 'spiele', enabled: true },
+      { id: 'aktuelles', enabled: true },
+      { id: 'kontakt', enabled: true }
+    ]
+
+    if (config.homepage && config.homepage.sections && Array.isArray(config.homepage.sections)) {
+      // Validiere und merge: Nur bekannte IDs verwenden, fehlende hinzufügen
+      const knownIds = new Set(config.homepage.sections.map(s => s.id))
+      const merged = [...config.homepage.sections]
+      
+      // Füge fehlende Standard-Elemente hinzu
+      for (const defaultSection of defaultSections) {
+        if (!knownIds.has(defaultSection.id)) {
+          merged.push({ ...defaultSection })
+        }
+      }
+      
+      sections.value = merged
+    } else {
+      sections.value = [...defaultSections]
+    }
+  } catch (error) {
+    console.error('Fehler beim Laden der Konfiguration:', error)
+    errorMessage.value = 'Fehler beim Laden der Konfiguration'
+  } finally {
+    isLoading.value = false
+  }
+}
+
+const moveUp = (index) => {
+  if (index <= 0) return
+  const item = sections.value[index]
+  sections.value.splice(index, 1)
+  sections.value.splice(index - 1, 0, item)
+}
+
+const moveDown = (index) => {
+  if (index >= sections.value.length - 1) return
+  const item = sections.value[index]
+  sections.value.splice(index, 1)
+  sections.value.splice(index + 1, 0, item)
+}
+
+const saveConfig = async () => {
+  isSaving.value = true
+  errorMessage.value = ''
+
+  try {
+    // Lade aktuelle Config
+    const config = await $fetch('/api/config')
+    
+    // Aktualisiere homepage.sections
+    if (!config.homepage) {
+      config.homepage = {}
+    }
+    config.homepage.sections = sections.value
+
+    // Speichere Config
+    await $fetch('/api/config', {
+      method: 'PUT',
+      body: config
+    })
+
+    if (window.showSuccessModal) {
+      window.showSuccessModal('Erfolg', 'Startseiten-Konfiguration wurde erfolgreich gespeichert')
+    }
+  } catch (error) {
+    console.error('Fehler beim Speichern:', error)
+    errorMessage.value = error?.data?.message || 'Fehler beim Speichern der Konfiguration'
+    if (window.showErrorModal) {
+      window.showErrorModal('Fehler', errorMessage.value)
+    }
+  } finally {
+    isSaving.value = false
+  }
+}
+
+onMounted(() => {
+  loadConfig()
+})
+
+definePageMeta({
+  middleware: 'auth',
+  layout: 'default'
+})
+
+useHead({
+  title: 'Startseite konfigurieren - Harheimer TC',
+})
+</script>
diff --git a/pages/index.vue b/pages/index.vue
index 295fe6f..871f437 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,26 +1,55 @@
 <template>
   <div class="min-h-full">
-    <!-- 1. Willkommen mit Tradition -->
-    <Hero />
-    
-    <!-- 2. Kommende Termine -->
-    <HomeTermine />
-    
-    <!-- 3. Nächste Spiele -->
-    <Spielplan />
-    
-    <!-- 4. Aktuelles -->
-    <PublicNews />
-    
-    <!-- 5. Mitglied werden / Kontakt aufnehmen -->
-    <HomeActions />
+    <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>