Connect anfaenger page to config for dynamic training times

pages/training/anfaenger.vue

@@ -39,18 +39,18 @@
           </ul>
         </div>
 
-        <div class="bg-primary-50 p-8 rounded-xl border border-primary-100 not-prose">
+        <div v-if="config" class="bg-primary-50 p-8 rounded-xl border border-primary-100 not-prose">
           <h3 class="text-2xl font-display font-bold text-gray-900 mb-4">
             Anfängergruppen
           </h3>
           <div class="space-y-4 mb-6">
-            <div>
-              <h4 class="font-semibold text-gray-900 mb-1">Schüler/Jugend (ab 6 Jahre)</h4>
-              <p class="text-gray-600">Dienstag, 17:30 - 19:30 Uhr</p>
+            <div v-for="(zeiten, gruppe) in groupedZeiten" :key="gruppe">
+              <h4 class="font-semibold text-gray-900 mb-1">{{ gruppe }}</h4>
+              <div class="text-gray-600">
+                <p v-for="zeit in zeiten" :key="zeit.id">
+                  {{ zeit.tag }}, {{ zeit.von }} - {{ zeit.bis }} Uhr
+                </p>
               </div>
-            <div>
-              <h4 class="font-semibold text-gray-900 mb-1">Damen und Herren</h4>
-              <p class="text-gray-600">Dienstag & Donnerstag, 19:30 - 22:30 Uhr</p>
             </div>
           </div>
           
@@ -67,8 +67,38 @@
 </template>
 
 <script setup>
+import { ref, computed, onMounted } from 'vue'
 import { Check } 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: 'Für Anfänger - Harheimer TC',
 })