Add config system for training, trainer, membership and impressum with CMS editor

pages/cms/einstellungen.vue

@@ -0,0 +1,505 @@
+<template>
+  <div class="min-h-full py-16 bg-gray-50">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <h1 class="text-4xl sm:text-5xl font-display font-bold text-gray-900 mb-6">
+        Einstellungen
+      </h1>
+      <div class="w-24 h-1 bg-primary-600 mb-8" />
+
+      <!-- Loading State -->
+      <div v-if="isLoading" class="flex items-center justify-center py-12">
+        <Loader2 :size="40" class="animate-spin text-primary-600" />
+      </div>
+
+      <div v-else class="space-y-6">
+        <!-- Tabs -->
+        <div class="bg-white rounded-xl shadow-lg border border-gray-100 overflow-hidden">
+          <div class="flex border-b border-gray-200">
+            <button
+              v-for="tab in tabs"
+              :key="tab.id"
+              @click="activeTab = tab.id"
+              :class="[
+                'flex-1 px-6 py-4 text-sm font-medium transition-colors',
+                activeTab === tab.id
+                  ? 'bg-primary-600 text-white'
+                  : 'bg-gray-50 text-gray-700 hover:bg-gray-100'
+              ]"
+            >
+              <component :is="tab.icon" :size="18" class="inline mr-2" />
+              {{ tab.label }}
+            </button>
+          </div>
+
+          <!-- Tab Content -->
+          <div class="p-8">
+            <!-- Trainingszeiten -->
+            <div v-if="activeTab === 'training'">
+              <h2 class="text-2xl font-display font-bold text-gray-900 mb-6">Trainingszeiten & Trainingsort</h2>
+              
+              <!-- Trainingsort -->
+              <div class="mb-8 p-6 bg-gray-50 rounded-lg">
+                <h3 class="text-lg font-semibold text-gray-900 mb-4">Trainingsort</h3>
+                <div class="grid sm:grid-cols-2 gap-4">
+                  <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-2">Name</label>
+                    <input
+                      v-model="config.training.ort.name"
+                      type="text"
+                      class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
+                    />
+                  </div>
+                  <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-2">Straße</label>
+                    <input
+                      v-model="config.training.ort.strasse"
+                      type="text"
+                      class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
+                    />
+                  </div>
+                  <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-2">PLZ</label>
+                    <input
+                      v-model="config.training.ort.plz"
+                      type="text"
+                      class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
+                    />
+                  </div>
+                  <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-2">Ort</label>
+                    <input
+                      v-model="config.training.ort.ort"
+                      type="text"
+                      class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <!-- Trainingszeiten -->
+              <div>
+                <div class="flex justify-between items-center mb-4">
+                  <h3 class="text-lg font-semibold text-gray-900">Trainingszeiten</h3>
+                  <button
+                    @click="addTrainingTime"
+                    class="flex items-center px-3 py-1 bg-primary-600 hover:bg-primary-700 text-white text-sm rounded-lg transition-colors"
+                  >
+                    <Plus :size="16" class="mr-1" />
+                    Zeit hinzufügen
+                  </button>
+                </div>
+
+                <div class="space-y-4">
+                  <div
+                    v-for="(zeit, index) in config.training.zeiten"
+                    :key="zeit.id"
+                    class="p-4 bg-gray-50 rounded-lg border border-gray-200"
+                  >
+                    <div class="grid sm:grid-cols-4 gap-4">
+                      <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-2">Tag</label>
+                        <select
+                          v-model="zeit.tag"
+                          class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
+                        >
+                          <option>Montag</option>
+                          <option>Dienstag</option>
+                          <option>Mittwoch</option>
+                          <option>Donnerstag</option>
+                          <option>Freitag</option>
+                          <option>Samstag</option>
+                          <option>Sonntag</option>
+                        </select>
+                      </div>
+                      <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-2">Von</label>
+                        <input
+                          v-model="zeit.von"
+                          type="time"
+                          class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
+                        />
+                      </div>
+                      <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-2">Bis</label>
+                        <input
+                          v-model="zeit.bis"
+                          type="time"
+                          class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
+                        />
+                      </div>
+                      <div class="sm:col-span-2">
+                        <label class="block text-sm font-medium text-gray-700 mb-2">Gruppe</label>
+                        <div class="flex space-x-2">
+                          <input
+                            v-model="zeit.gruppe"
+                            type="text"
+                            class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
+                          />
+                          <button
+                            @click="removeTrainingTime(index)"
+                            class="px-3 py-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
+                            title="Löschen"
+                          >
+                            <Trash2 :size="18" />
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Trainer -->
+            <div v-if="activeTab === 'trainer'">
+              <div class="flex justify-between items-center mb-6">
+                <h2 class="text-2xl font-display font-bold text-gray-900">Trainer</h2>
+                <button
+                  @click="addTrainer"
+                  class="flex items-center px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white font-semibold rounded-lg transition-colors"
+                >
+                  <Plus :size="20" class="mr-2" />
+                  Trainer hinzufügen
+                </button>
+              </div>
+
+              <div class="space-y-6">
+                <div
+                  v-for="(trainer, index) in config.trainer"
+                  :key="trainer.id"
+                  class="p-6 bg-gray-50 rounded-lg border border-gray-200"
+                >
+                  <div class="grid sm:grid-cols-2 gap-4">
+                    <div>
+                      <label class="block text-sm font-medium text-gray-700 mb-2">Name</label>
+                      <input
+                        v-model="trainer.name"
+                        type="text"
+                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
+                      />
+                    </div>
+                    <div>
+                      <label class="block text-sm font-medium text-gray-700 mb-2">Lizenz</label>
+                      <input
+                        v-model="trainer.lizenz"
+                        type="text"
+                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
+                      />
+                    </div>
+                    <div>
+                      <label class="block text-sm font-medium text-gray-700 mb-2">Schwerpunkt</label>
+                      <input
+                        v-model="trainer.schwerpunkt"
+                        type="text"
+                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
+                      />
+                    </div>
+                    <div>
+                      <label class="block text-sm font-medium text-gray-700 mb-2">Zusatzinfo</label>
+                      <div class="flex space-x-2">
+                        <input
+                          v-model="trainer.zusatz"
+                          type="text"
+                          class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
+                        />
+                        <button
+                          @click="removeTrainer(index)"
+                          class="px-3 py-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
+                          title="Löschen"
+                        >
+                          <Trash2 :size="18" />
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Mitgliedschaft -->
+            <div v-if="activeTab === 'mitgliedschaft'">
+              <div class="flex justify-between items-center mb-6">
+                <h2 class="text-2xl font-display font-bold text-gray-900">Mitgliedschaftsoptionen</h2>
+                <button
+                  @click="addMembership"
+                  class="flex items-center px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white font-semibold rounded-lg transition-colors"
+                >
+                  <Plus :size="20" class="mr-2" />
+                  Option hinzufügen
+                </button>
+              </div>
+
+              <div class="space-y-6">
+                <div
+                  v-for="(membership, index) in config.mitgliedschaft"
+                  :key="membership.id"
+                  class="p-6 bg-gray-50 rounded-lg border border-gray-200"
+                >
+                  <div class="grid sm:grid-cols-3 gap-4 mb-4">
+                    <div>
+                      <label class="block text-sm font-medium text-gray-700 mb-2">Typ</label>
+                      <input
+                        v-model="membership.typ"
+                        type="text"
+                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
+                      />
+                    </div>
+                    <div>
+                      <label class="block text-sm font-medium text-gray-700 mb-2">Beschreibung</label>
+                      <input
+                        v-model="membership.beschreibung"
+                        type="text"
+                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
+                      />
+                    </div>
+                    <div>
+                      <label class="block text-sm font-medium text-gray-700 mb-2">Preis (€/Jahr)</label>
+                      <div class="flex space-x-2">
+                        <input
+                          v-model.number="membership.preis"
+                          type="number"
+                          class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
+                        />
+                        <button
+                          @click="removeMembership(index)"
+                          class="px-3 py-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
+                          title="Löschen"
+                        >
+                          <Trash2 :size="18" />
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+
+                  <!-- Features -->
+                  <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-2">Leistungen</label>
+                    <div class="space-y-2">
+                      <div
+                        v-for="(feature, fIndex) in membership.features"
+                        :key="fIndex"
+                        class="flex space-x-2"
+                      >
+                        <input
+                          v-model="membership.features[fIndex]"
+                          type="text"
+                          class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
+                        />
+                        <button
+                          @click="membership.features.splice(fIndex, 1)"
+                          class="px-3 py-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
+                        >
+                          <X :size="18" />
+                        </button>
+                      </div>
+                      <button
+                        @click="membership.features.push('')"
+                        class="flex items-center px-3 py-1 text-primary-600 hover:bg-primary-50 rounded-lg transition-colors text-sm"
+                      >
+                        <Plus :size="16" class="mr-1" />
+                        Leistung hinzufügen
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Vorstand -->
+            <div v-if="activeTab === 'vorstand'">
+              <h2 class="text-2xl font-display font-bold text-gray-900 mb-6">Vorstandsdaten</h2>
+              
+              <div class="space-y-8">
+                <div
+                  v-for="(position, key) in config.vorstand"
+                  :key="key"
+                  class="p-6 bg-gray-50 rounded-lg border border-gray-200"
+                >
+                  <h3 class="text-lg font-semibold text-gray-900 mb-4 capitalize">
+                    {{ key.replace(/([A-Z])/g, ' $1').trim() }}
+                  </h3>
+                  <div class="grid sm:grid-cols-2 gap-4">
+                    <div>
+                      <label class="block text-sm font-medium text-gray-700 mb-2">Vorname</label>
+                      <input
+                        v-model="position.vorname"
+                        type="text"
+                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
+                      />
+                    </div>
+                    <div>
+                      <label class="block text-sm font-medium text-gray-700 mb-2">Nachname</label>
+                      <input
+                        v-model="position.nachname"
+                        type="text"
+                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
+                      />
+                    </div>
+                    <div>
+                      <label class="block text-sm font-medium text-gray-700 mb-2">Telefon</label>
+                      <input
+                        v-model="position.telefon"
+                        type="tel"
+                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
+                      />
+                    </div>
+                    <div>
+                      <label class="block text-sm font-medium text-gray-700 mb-2">E-Mail</label>
+                      <input
+                        v-model="position.email"
+                        type="email"
+                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Error/Success Messages -->
+        <div v-if="errorMessage" class="flex items-center p-4 rounded-lg bg-red-50 text-red-700">
+          <AlertCircle :size="20" class="mr-2" />
+          {{ errorMessage }}
+        </div>
+
+        <div v-if="successMessage" class="flex items-center p-4 rounded-lg bg-green-50 text-green-700">
+          <Check :size="20" class="mr-2" />
+          {{ successMessage }}
+        </div>
+
+        <!-- Save Button -->
+        <div class="flex justify-end">
+          <button
+            @click="saveConfig"
+            class="flex items-center px-8 py-3 bg-primary-600 hover:bg-primary-700 text-white font-semibold rounded-lg transition-colors shadow-lg"
+            :disabled="isSaving"
+          >
+            <Loader2 v-if="isSaving" :size="20" class="animate-spin mr-2" />
+            <Save v-else :size="20" class="mr-2" />
+            <span>{{ isSaving ? 'Speichert...' : 'Änderungen speichern' }}</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { Settings, Calendar, Users as UsersIcon, CreditCard, Plus, Trash2, X, Loader2, AlertCircle, Check, Save } from 'lucide-vue-next'
+
+const authStore = useAuthStore()
+
+const isLoading = ref(true)
+const isSaving = ref(false)
+const errorMessage = ref('')
+const successMessage = ref('')
+const activeTab = ref('training')
+
+const config = ref({
+  training: { ort: {}, zeiten: [] },
+  trainer: [],
+  mitgliedschaft: [],
+  vorstand: {},
+  website: {}
+})
+
+const tabs = [
+  { id: 'training', label: 'Training', icon: Calendar },
+  { id: 'trainer', label: 'Trainer', icon: UsersIcon },
+  { id: 'mitgliedschaft', label: 'Mitgliedschaft', icon: CreditCard },
+  { id: 'vorstand', label: 'Vorstand', icon: UsersIcon }
+]
+
+const loadConfig = async () => {
+  isLoading.value = true
+  try {
+    const response = await $fetch('/api/config')
+    config.value = response.config
+  } catch (error) {
+    errorMessage.value = 'Fehler beim Laden der Konfiguration.'
+  } finally {
+    isLoading.value = false
+  }
+}
+
+const saveConfig = async () => {
+  isSaving.value = true
+  errorMessage.value = ''
+  successMessage.value = ''
+
+  try {
+    await $fetch('/api/config', {
+      method: 'PUT',
+      body: { config: config.value }
+    })
+
+    successMessage.value = 'Konfiguration erfolgreich gespeichert!'
+    setTimeout(() => {
+      successMessage.value = ''
+    }, 3000)
+  } catch (error) {
+    errorMessage.value = error.data?.message || 'Fehler beim Speichern der Konfiguration.'
+  } finally {
+    isSaving.value = false
+  }
+}
+
+const addTrainingTime = () => {
+  config.value.training.zeiten.push({
+    id: Date.now().toString(),
+    tag: 'Montag',
+    von: '19:00',
+    bis: '22:00',
+    gruppe: ''
+  })
+}
+
+const removeTrainingTime = (index) => {
+  config.value.training.zeiten.splice(index, 1)
+}
+
+const addTrainer = () => {
+  config.value.trainer.push({
+    id: Date.now().toString(),
+    name: '',
+    lizenz: '',
+    schwerpunkt: '',
+    zusatz: ''
+  })
+}
+
+const removeTrainer = (index) => {
+  config.value.trainer.splice(index, 1)
+}
+
+const addMembership = () => {
+  config.value.mitgliedschaft.push({
+    id: Date.now().toString(),
+    typ: '',
+    beschreibung: '',
+    preis: 0,
+    features: []
+  })
+}
+
+const removeMembership = (index) => {
+  config.value.mitgliedschaft.splice(index, 1)
+}
+
+onMounted(() => {
+  loadConfig()
+})
+
+definePageMeta({
+  middleware: 'auth',
+  layout: 'default'
+})
+
+useHead({
+  title: 'Einstellungen - Harheimer TC',
+})
+</script>
+

pages/impressum.vue

@@ -16,22 +16,24 @@
           </p>
         </div>
 
-        <div>
+        <div v-if="config">
           <h2 class="text-xl font-display font-bold text-gray-900 mb-2">Kontakt</h2>
           <p class="text-gray-700">
-            Telefon: 06101-4992227<br />
-            E-Mail: j.dichmann@gmx.de<br />
+            Telefon: {{ config.vorstand.vorsitzender.telefon }}<br />
+            E-Mail: <a :href="`mailto:${config.vorstand.vorsitzender.email}`" class="text-primary-600 hover:underline">{{ config.vorstand.vorsitzender.email }}</a><br />
             Internet: www.harheimertc.de
           </p>
         </div>
 
-        <div>
+        <div v-if="config">
           <h2 class="text-xl font-display font-bold text-gray-900 mb-2">Vertretungsberechtigter Vorstand</h2>
           <p class="text-gray-700">
-            Roger Dichmann, Vorsitzender<br />
-            Jürgen Kratz, Stellvertreter des Vorsitzenden<br />
-            Olaf Nüßlein, Kassenwart<br />
-            Jürgen Dichmann, Schriftführer
+            <span v-if="config.vorstand.vorsitzender.vorname">{{ config.vorstand.vorsitzender.vorname }} {{ config.vorstand.vorsitzender.nachname }}, Vorsitzender<br /></span>
+            <span v-if="config.vorstand.stellvertreter.vorname">{{ config.vorstand.stellvertreter.vorname }} {{ config.vorstand.stellvertreter.nachname }}, Stellvertreter<br /></span>
+            <span v-if="config.vorstand.kassenwart.vorname">{{ config.vorstand.kassenwart.vorname }} {{ config.vorstand.kassenwart.nachname }}, Kassenwart<br /></span>
+            <span v-if="config.vorstand.schriftfuehrer.vorname">{{ config.vorstand.schriftfuehrer.vorname }} {{ config.vorstand.schriftfuehrer.nachname }}, Schriftführer<br /></span>
+            <span v-if="config.vorstand.sportwart.vorname">{{ config.vorstand.sportwart.vorname }} {{ config.vorstand.sportwart.nachname }}, Sportwart<br /></span>
+            <span v-if="config.vorstand.jugendwart.vorname">{{ config.vorstand.jugendwart.vorname }} {{ config.vorstand.jugendwart.nachname }}, Jugendwart</span>
           </p>
         </div>
 
@@ -68,12 +70,20 @@
           </div>
         </div>
 
-        <div>
-          <h2 class="text-xl font-display font-bold text-gray-900 mb-2">Verantwortlich für den Inhalt</h2>
+        <div v-if="config">
+          <h2 class="text-xl font-display font-bold text-gray-900 mb-2">Verantwortlich für den Inhalt nach § 55 Abs. 2 RStV</h2>
           <p class="text-gray-700">
-            Roger Dichmann<br />
-            Reginastr. 46<br />
-            60437 Frankfurt
+            {{ config.vorstand.vorsitzender.vorname }} {{ config.vorstand.vorsitzender.nachname }}<br />
+            <span v-if="config.vorstand.vorsitzender.strasse">{{ config.vorstand.vorsitzender.strasse }}<br /></span>
+            <span v-if="config.vorstand.vorsitzender.plz">{{ config.vorstand.vorsitzender.plz }} {{ config.vorstand.vorsitzender.ort }}</span>
+          </p>
+        </div>
+
+        <div v-if="config">
+          <h2 class="text-xl font-display font-bold text-gray-900 mb-2">Verantwortlich für die Website</h2>
+          <p class="text-gray-700">
+            {{ config.website.verantwortlicher.vorname }} {{ config.website.verantwortlicher.nachname }}<br />
+            E-Mail: <a :href="`mailto:${config.website.verantwortlicher.email}`" class="text-primary-600 hover:underline">{{ config.website.verantwortlicher.email }}</a>
           </p>
         </div>
 
@@ -115,8 +125,24 @@
 </template>
 
 <script setup>
+import { ref, onMounted } from 'vue'
 import { FileText, Eye } from 'lucide-vue-next'
 
+const config = ref(null)
+
+const loadConfig = async () => {
+  try {
+    const response = await $fetch('/api/config')
+    config.value = response.config
+  } catch (error) {
+    console.error('Fehler beim Laden der Config:', error)
+  }
+}
+
+onMounted(() => {
+  loadConfig()
+})
+
 useHead({
   title: 'Impressum - Harheimer TC',
 })

pages/training/index.vue

@@ -7,18 +7,18 @@
       <div class="w-24 h-1 bg-primary-600 mb-8" />
       
       <!-- Trainingsort -->
-      <div class="bg-white rounded-xl shadow-lg p-8 mb-12">
+      <div v-if="config" class="bg-white rounded-xl shadow-lg p-8 mb-12">
         <div class="flex items-start space-x-4 mb-6">
           <MapPin :size="32" class="text-primary-600 flex-shrink-0" />
           <div>
             <h2 class="text-2xl font-display font-bold text-gray-900 mb-4">Trainingsort</h2>
             <h3 class="text-lg font-semibold text-gray-900 mb-2">
-              Sporthalle der Grundschule Harheim
+              {{ config.training.ort.name }}
             </h3>
-            <p class="text-gray-700 mb-1">In den Schafgärten 25</p>
-            <p class="text-gray-700 mb-4">60437 Frankfurt/Main</p>
+            <p class="text-gray-700 mb-1">{{ config.training.ort.strasse }}</p>
+            <p class="text-gray-700 mb-4">{{ config.training.ort.plz }} {{ config.training.ort.ort }}</p>
             <a
-              href="https://www.google.com/maps/search/?api=1&query=In+den+Schafgärten+25+60437+Frankfurt"
+              :href="`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(config.training.ort.strasse + ' ' + config.training.ort.plz + ' ' + config.training.ort.ort)}`"
               target="_blank"
               class="inline-flex items-center px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white font-medium rounded-lg transition-colors text-sm"
             >
@@ -34,36 +34,28 @@
         Trainingszeiten
       </h2>
 
-      <div class="grid gap-6 mb-12">
-        <div class="bg-white p-6 rounded-xl shadow-lg border-l-4 border-primary-600">
+      <div v-if="config" class="grid gap-6 mb-12">
+        <div
+          v-for="(zeiten, gruppe) in groupedZeiten"
+          :key="gruppe"
+          class="bg-white p-6 rounded-xl shadow-lg border-l-4 border-primary-600"
+        >
           <div class="flex items-start justify-between">
             <div>
-              <h3 class="text-xl font-display font-bold text-gray-900 mb-2">Damen und Herren</h3>
+              <h3 class="text-xl font-display font-bold text-gray-900 mb-2">{{ gruppe }}</h3>
               <div class="space-y-2">
-                <p class="text-lg font-semibold text-primary-600">
-                  Dienstag: 19:30 - 22:30 Uhr
-                </p>
-                <p class="text-lg font-semibold text-primary-600">
-                  Donnerstag: 19:30 - 22:30 Uhr
+                <p
+                  v-for="zeit in zeiten"
+                  :key="zeit.id"
+                  class="text-lg font-semibold text-primary-600"
+                >
+                  {{ zeit.tag }}: {{ zeit.von }} - {{ zeit.bis }} Uhr
                 </p>
               </div>
             </div>
             <Clock :size="32" class="text-primary-600" />
           </div>
         </div>
-
-        <div class="bg-white p-6 rounded-xl shadow-lg border-l-4 border-primary-600">
-          <div class="flex items-start justify-between">
-            <div>
-              <h3 class="text-xl font-display font-bold text-gray-900 mb-2">Schüler/Jugend</h3>
-              <p class="text-gray-600 mb-2">Ab 6 Jahre</p>
-              <p class="text-lg font-semibold text-primary-600">
-                Dienstag: 17:30 - 19:30 Uhr
-              </p>
-            </div>
-            <Clock :size="32" class="text-primary-600" />
-          </div>
-        </div>
       </div>
 
       <div class="mt-12 bg-primary-50 p-8 rounded-xl border border-primary-100">
@@ -93,8 +85,38 @@
 </template>
 
 <script setup>
+import { ref, computed, onMounted } from 'vue'
 import { Clock, MapPin } from 'lucide-vue-next'
 
+const config = ref(null)
+
+const loadConfig = async () => {
+  try {
+    const response = await $fetch('/api/config')
+    config.value = response.config
+  } catch (error) {
+    console.error('Fehler beim Laden der Config:', error)
+  }
+}
+
+// Group training times by group
+const groupedZeiten = computed(() => {
+  if (!config.value?.training?.zeiten) return {}
+  
+  const groups = {}
+  config.value.training.zeiten.forEach(zeit => {
+    if (!groups[zeit.gruppe]) {
+      groups[zeit.gruppe] = []
+    }
+    groups[zeit.gruppe].push(zeit)
+  })
+  return groups
+})
+
+onMounted(() => {
+  loadConfig()
+})
+
 useHead({
   title: 'Trainingszeiten - Harheimer TC',
 })

pages/training/trainer.vue

@@ -10,32 +10,17 @@
         Erfahrene und qualifizierte Trainer für alle Leistungsstufen
       </p>
 
-      <div class="grid md:grid-cols-3 gap-8">
-        <div class="bg-white p-8 rounded-xl shadow-lg">
-          <h3 class="text-2xl font-display font-bold text-gray-900 mb-2">C-Trainer</h3>
-          <p class="text-gray-600 mb-4">Torsten Schulz</p>
+      <div v-if="config" class="grid md:grid-cols-3 gap-8">
+        <div
+          v-for="trainer in config.trainer"
+          :key="trainer.id"
+          class="bg-white p-8 rounded-xl shadow-lg"
+        >
+          <h3 class="text-2xl font-display font-bold text-gray-900 mb-2">{{ trainer.lizenz }}</h3>
+          <p class="text-gray-600 mb-4">{{ trainer.name }}</p>
           <p class="text-sm text-gray-500">
-            Lizenz: C-Trainer<br />
-            Schwerpunkt: Nachwuchsförderung<br />
-            Erwachsenen bei Wunsch zur Verfügung
-          </p>
-        </div>
-
-        <div class="bg-white p-8 rounded-xl shadow-lg">
-          <h3 class="text-2xl font-display font-bold text-gray-900 mb-2">Kindertrainer</h3>
-          <p class="text-gray-600 mb-4">Thomas Steinbrech</p>
-          <p class="text-sm text-gray-500">
-            Lizenz: Kindertrainer<br />
-            Schwerpunkt: Nachwuchsförderung
-          </p>
-        </div>
-
-        <div class="bg-white p-8 rounded-xl shadow-lg">
-          <h3 class="text-2xl font-display font-bold text-gray-900 mb-2">Assistenztrainerin</h3>
-          <p class="text-gray-600 mb-4">Magda Schwallbach</p>
-          <p class="text-sm text-gray-500">
-            Lizenz: Assistenztrainerin<br />
-            Schwerpunkt: Unterstützung & Betreuung
+            Lizenz: {{ trainer.lizenz }}<br />
+            Schwerpunkt: {{ trainer.schwerpunkt }}<span v-if="trainer.zusatz"><br />{{ trainer.zusatz }}</span>
           </p>
         </div>
       </div>
@@ -45,6 +30,23 @@
 </template>
 
 <script setup>
+import { ref, onMounted } from 'vue'
+
+const config = ref(null)
+
+const loadConfig = async () => {
+  try {
+    const response = await $fetch('/api/config')
+    config.value = response.config
+  } catch (error) {
+    console.error('Fehler beim Laden der Config:', error)
+  }
+}
+
+onMounted(() => {
+  loadConfig()
+})
+
 useHead({
   title: 'Trainer - Harheimer TC',
 })