From 7e8d693832fe7790da92613774fb86d3da05f225 Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Fri, 19 Dec 2025 10:23:58 +0100
Subject: [PATCH] Refactor training time input fields in Einstellungen
 component to improve layout and usability. Add optional information field for
 training times and ensure proper handling of group data. Update rendering
 logic in Training component to display additional information if provided.

---
 pages/cms/einstellungen.vue | 42 +++++++++++++++++++++++--------------
 pages/training/index.vue    | 12 +++++++----
 2 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/pages/cms/einstellungen.vue b/pages/cms/einstellungen.vue
index da3dacd..6bf9f74 100644
--- a/pages/cms/einstellungen.vue
+++ b/pages/cms/einstellungen.vue
@@ -211,22 +211,31 @@
                           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">
+                      <div>
                         <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>
+                        <input
+                          v-model="zeit.gruppe"
+                          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 class="mt-4">
+                      <label class="block text-sm font-medium text-gray-700 mb-2">Zusätzliche Information (optional)</label>
+                      <div class="flex space-x-2">
+                        <input
+                          v-model="zeit.info"
+                          type="text"
+                          placeholder="z.B. 'Nur in der Schulzeit', 'Ab 10 Jahren', etc."
+                          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>
@@ -584,7 +593,8 @@ const addTrainingTime = () => {
     tag: 'Montag',
     von: '19:00',
     bis: '22:00',
-    gruppe: `Gruppe ${naechsteGruppeNummer}`
+    gruppe: `Gruppe ${naechsteGruppeNummer}`,
+    info: ''
   })
 }
 
diff --git a/pages/training/index.vue b/pages/training/index.vue
index fb5faa1..7adfcdb 100644
--- a/pages/training/index.vue
+++ b/pages/training/index.vue
@@ -44,13 +44,17 @@
             <div>
               <h3 class="text-xl font-display font-bold text-gray-900 mb-2">{{ gruppe }}</h3>
               <div class="space-y-2">
-                <p
+                <div
                   v-for="zeit in zeiten"
                   :key="zeit.id"
-                  class="text-lg font-semibold text-primary-600"
                 >
-                  {{ zeit.tag }}: {{ zeit.von }} - {{ zeit.bis }} Uhr
-                </p>
+                  <p class="text-lg font-semibold text-primary-600">
+                    {{ zeit.tag }}: {{ zeit.von }} - {{ zeit.bis }} Uhr
+                  </p>
+                  <p v-if="zeit.info" class="text-sm text-gray-600 mt-1 italic">
+                    {{ zeit.info }}
+                  </p>
+                </div>
               </div>
             </div>
             <Clock :size="32" class="text-primary-600" />